课程学习，目录，笔记样式，根据内容自动控制高度

src/assets/styles/portal.scss

@@ -300,6 +300,16 @@ body {margin: 0px;padding: 0px;}
   }
 
 }
+//课程播放页的样式控制
+.xcstudy-left{
+  width: 400px;
+}
+/**我的笔记*/
+.xcstudy-mynode{
+  width: 400px;
+}
+
+
 //以下是多分辨率的控制，注意，只是一些样式的高度，宽度，大小控制，非大小控制不要在这里写
 @media screen and (max-width: 1366px){
   .xcontent{width: 1100px;}

src/components/Course/myNote.vue

@@ -13,7 +13,7 @@
                     <img :src="`${webBaseUrl}/images/cotedetel.png`" @click="timeDel()" />
                 </div>
                 <div class="newcote-text">
-                    <el-input type="textarea" :autofocus="true" placeholder="好记性不如烂笔头，记录些什么吧～"
+                    <el-input type="textarea" :autofocus="true" :style="`min-height:${inputHeight}px`" placeholder="好记性不如烂笔头，记录些什么吧～"
                         v-model="content_new" maxlength="200" :autosize="{ minRows: 8, maxRows: 20}"
                         show-word-limit>
                     </el-input>
@@ -21,7 +21,7 @@
             </div>
             <!-- 我的笔记  -->
             <div  v-if="notetab == 2">
-                <div class="mycote-content" v-show="!isEdit">
+                <div class="mycote-content" v-show="!isEdit" :style="`height:${inputHeight+100}px`">
                     <div v-if="noteList.length > 0">
                     <div style="border-bottom:1px solid #4444;padding-bottom:25px;" v-for="note in noteList"
                         :key="note.id">
@@ -105,8 +105,12 @@ import { testType, correctJudgment, numberToLetter } from '@/utils/tools.js';
 export default {
     props: {
         data: {
-            type: Object,
+          type: Object,
-            default: () => { }
+          default: () => { }
+        },
+        height:{
+          type: Number,
+          default: 200
         },
         score: {
             type:Number,
@@ -118,6 +122,7 @@ export default {
         return {
             inAnimationText:'笔记保存成功，U币+2',
             isEdit:false,
+            inputHeight:168,
             courseId:'',
             inAnimation: false,
             btnPlayTime:false,//是否显示添加视频时间
@@ -150,12 +155,20 @@ export default {
 
     },
     watch: {
+        //内容的高度
+        height(val){
+            this.inputHeight=(val-182);
+            //console.log(this.inputHeight,'this.inputHeight');
+            if(this.inputHeight>500){
+              this.inputHeight=500;
+            }
+        },
         selected:{
-      handler(val,old){
+          handler(val,old){
-        this.$emit('change',this.selected)
+            this.$emit('change',this.selected)
-      },
+          },
-      deep:true
+          deep:true
-    },
+        },
         data(val){
            if(val.id) {
             console.log(val,'val');
@@ -170,8 +183,8 @@ export default {
     },
     methods: {
         handleClick(){
-        this.$emit('change',this.selected)
+          this.$emit('change',this.selected)
-    },
+        },
         onPlayVideo(conId,time) {
             //这里应该加上内容的id
             this.$emit('onPlayVideo',conId,time);
@@ -497,8 +510,8 @@ export default {
         }
 
         .mycote-dibu {
-            margin: 50px 38%;
+            margin: 50px 50px;
-
+            text-align: center;
             color: #999999;
             font-size: 14px;
         }

src/components/PortalHeader.vue

@@ -301,6 +301,12 @@ export default {
 </script>
 
 <style scoped rel="stylesheet/scss" lang="scss">
+  //定义消息的图标的样式，按ui，未完成
+.msg-icon{
+  font-size:16px;
+  background-color:#fff;
+  border-radius:50%;
+}
 .top-nav-active-blue{
     color: #387DF7;
     a{color:#387DF7;}

src/views/study/coursenew.vue

@@ -16,9 +16,9 @@
         </div>
       </div>
     </div>
-    <div class="course-content">
+    <div class="course-content xcontent">
-      <div class="course-playbox">
+      <div class="course-playbox" ref="coursePlayerBox" id="id_course_player_box">
-        <div class="course-player">
+        <div class="course-player" ref="coursePlayer" id="id_course_player">
           <div>
             <div v-if="resType == null || resType == 0">
               <!--先显示视频图片-->
@@ -46,8 +46,7 @@
                   </div>
                 </div>
                 <div v-if="!scoreInfo.has" class="player-rate">
-                  <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff"
+                  <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff"  @change="addScore"></el-rate>
-                    @change="addScore"></el-rate>
                 </div>
                 <div v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
                   <div class="player-rate" style="padding-left: 35px;">
@@ -117,7 +116,7 @@
             </div>
             <!-- 课程单元  -->
             <div class="course-units" v-if="tab == 1">
-              <div style="max-height: 500px;overflow-y: auto;">
+              <div :style="`height: ${controlHeight}px;overflow-y: auto;`">
                 <div class="catalog" v-if="courseInfo.type == 20">
                   <div v-for="(item, index) in catalogTree" :key="index" :name="index">
                     <div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
@@ -140,7 +139,7 @@
             </div>
             <!-- 我的笔记 -->
             <div class="mynote" v-show="tab == 2">
-              <my-note ref="mynote" @change="Fn1" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
+              <my-note ref="mynote" :height="controlHeight" @change="Fn1" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
                 :score="courseInfo.score"></my-note>
             </div>
         </div>
@@ -208,7 +207,7 @@
 </template>
 <script>
   import { mapGetters } from 'vuex';
-  
+
   import portalHeader from "@/components/PortalHeader.vue";
   import portalFooter from "@/components/PortalFooter.vue";
   import comments from "@/components/Portal/comments.vue";
@@ -266,6 +265,7 @@
     },
     data() {
       return {
+        controlHeight:400,//左边控制区域的内容高度
         timer: '',
         notePlay: null,
         intTimeNote: '',
@@ -336,12 +336,17 @@
         appendStudyOtherHandle:null,
       }
     },
-    
     mounted() {
       this.$watermark.set(this.userInfo.name + this.userInfo.loginName);
       this.courseId = this.$route.query.id;
       this.loadData();
-
+      var $this = this;
+      // window.onresize = function(){ // 定义窗口大小变更通知事件
+      //     let w2=$this.$refs.coursePlayer.offsetWidth;
+      //     //按高度
+      //     $this.controlHeight=w2*(9/16);
+      //     //console.log(w,w2,'区域的高茺');
+      // };
     },
     computed: {
       ...mapGetters(['userInfo']),
@@ -380,11 +385,11 @@
     },
     methods: {
       Fn1(){
-        console.log('子组件发生变化');
+        //console.log('子组件发生变化');
-        // this.componentKey += 1; 
+        // this.componentKey += 1;
         // this.$forceUpdate();
         // window.location.reload()
-        //  this.coutab(3); 
+        //  this.coutab(3);
          this.timer = new Date().getTime()
 
       },
@@ -595,6 +600,17 @@
           }, 5000); //5秒后记录学习完成
         }
 
+
+        this.$nextTick(function(){
+          //let h0=document.getElementById('id_course_player').offsetHeight;
+            let h=$this.$refs.coursePlayer.offsetHeight;
+            ///console.log(h0,h,$this.controlHeight,'$this.controlHeight');
+              //按高度
+            //$this.controlHeight=h-99;
+            $this.controlHeight=h-39;
+            //console.log($this.controlHeight,'$this.controlHeight');
+        })
+
       },
       // handleChange(val) {
       //   console.log(val);
@@ -966,7 +982,7 @@
               });
             }
             this.courseInfo = rs.result.course;
-            
+
             if (rs.result.teachers && rs.result.teachers.length > 0) {
               let userIds = [];
               let ctoUsers = [];
@@ -1280,10 +1296,11 @@
 </script>
 
 <style lang="scss" scoped>
+
   //内容块样式定义
   .course-content {
     min-height: 745px;
-    margin: 20px 80px;
+    margin: 20px auto;
     .course-playbox {
       background-color: #fff;
       min-height: 400px;
@@ -1292,7 +1309,7 @@
       .course-player{ //内容播放区域
         flex:1;
         min-width: 700px;
-        width: 65%;
+        min-height: 500px;
         height: 100%;
         border: 1px solid #ffffff;
         padding-right: 20px;
@@ -1310,7 +1327,6 @@
       .course-info {
         flex:1;
         min-width: 700px;
-        width: 65%;
         min-height: 710px;
         box-sizing: border-box;
         padding-right: 20px;
@@ -1533,7 +1549,7 @@
     }
 
     .con-audio-player {
-      padding: 20px 100px;
+      padding: 50px 50px;
     }
   }
 
@@ -1844,7 +1860,7 @@
   }
 
   .course-units {
-
+    padding: 10px 30px;
     .units-info {
       padding: 0 30px;
       height: 60px;