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

src/views/study/coursenew.vue

@@ -16,9 +16,9 @@
         </div>
       </div>
     </div>
-    <div class="course-content">
-      <div class="course-playbox">
-        <div class="course-player">
+    <div class="course-content xcontent">
+      <div class="course-playbox" ref="coursePlayerBox" id="id_course_player_box">
+        <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"
-                    @change="addScore"></el-rate>
+                  <el-rate v-model="scoreInfo.score" text-color="#ff9900" score-template="{value}" void-color="#fff"  @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('子组件发生变化');
-        // this.componentKey += 1; 
+        //console.log('子组件发生变化');
+        // 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;