完善

src/pages/resourceMovReview.vue

@@ -36,11 +36,11 @@
               
             </div>
             <div class="nicBaseInfo_action">
-              <span>10w+</span>
-              <span>14w+</span>
+              <span  class="zan">10w+</span>
+              <span class="collect">14w+</span>
             </div>
             <div class="nicBaseInfo_forceBtn">
-              <button>关注</button>
+              <span>关注</span>
             </div>
           </div>
           <div class="vedioMainContent_left_bottom">
@@ -54,12 +54,24 @@
           </div>
         </div>
         <div class="vedioMainContent_right">
-          <div class="vedioMainContent_right_top">33</div>
+          <div class="vedioMainContent_right_top">
+            <div class="titleChapter">
+              <span class="titleBorder-title">相关章节</span>
+              <span class="titleBorder-line"></span> 
+            </div>
+            <div class="detailChapter">
+              <ul>
+                <li>02 课时 行程问题</li>
+                <li>03 课时 过桥问题</li>
+                <li>04 课时 流水问题</li>
+                <li>05 课时 行程问题</li>
+              </ul>
+            </div>
+          </div>
           <div class="vedioMainContent_right_bottom">44</div>
         </div>
       </div>
     </div>
-    11
   </div>
 </template>
 
@@ -179,10 +191,42 @@
       }
       .nicBaseInfo_action{
         width:30%;
+        line-height: 100px;
+        height: 17px;
+        font-size: 16px;
+        font-weight: 400;
+        text-align: left;
+        color: #00a3ff;
+        .zan{
+          background: url('../assets/kczy/zanIcon.png') no-repeat left center;
+          background-size: 21px 20px;
+          box-sizing: border-box;
+          padding-left:25px;
+        }
+        .collect{
+          background: url('../assets/kczy/collectIcon.png') no-repeat left center;
+          background-size: 21px 20px;
+          box-sizing: border-box;
+          padding-left:25px;
+          margin-left:30px;
+        }
       }
       .nicBaseInfo_forceBtn{
         width:10%;
+        text-align: left;
+        line-height: 100px;
+        span{
+          font-size: 16px;
+          font-weight: 400;
+          text-align: center;
+          color: #ffffff;
+          background: rgba(0,131,197,0.80);
+          border-radius: 6px;
+          padding:7px 20px;
+          cursor: pointer;
+        }
       }
+      
     }
     .vedioMainContent_left_bottom{
       min-height: 765px;
@@ -201,15 +245,98 @@
         z-index:13;
         width: 176px;
         height: 48px;
+        line-height: 48px;
         background: #ffffff;
-        border-radius: 0px 10px 0px 10px;
+        border-bottom-right-radius: 10px;
+        font-size: 16px;
+        font-weight: 400;
+        text-align: center;
+        color: #00a3ff;
+      }
+      .watchingNum{
+        position:absolute;
+        right:0;
+        top:0;
+        z-index:13;
+        width: 190px;
+        height: 38px;
+        line-height: 38px;
+        background-color:rgba(255,255,255,0.5);
+        border-bottom-left-radius:10px;
+        width: 166px;
+        font-size: 16px;
+        font-weight: 400;
+        text-align: center;
+        color: #ffffff;
       }
     }
 
   }
   .vedioMainContent_right{
     width:28%;
-    background-color: #000000;
+    display: flex;
+    flex-direction:column;
+    justify-content:space-between;
+    .vedioMainContent_right_top{
+      width: 100%;
+      height: 459px;
+      background: #ffffff;
+      border-radius: 12px;
+      box-shadow: 2px 10px 24px 0px rgba(161,153,168,0.18); 
+      box-sizing: border-box;
+      padding: 33px 18px;
+      .titleChapter{
+        width: 100%;
+        height: 50px;
+        position: relative;
+        .titleBorder-title{
+          font-size: 16px;
+          font-weight: 500;
+          text-align: left;
+          color: #222222;
+          position:absolute;
+          left: 5px;
+          top:13%;
+          z-index: 14;
+        }
+        .titleBorder-line{
+          width: 72px;
+          height: 6px;
+          opacity: 0.2;
+          background: #6c5dd3;
+          border-radius: 3px;
+          position:absolute;
+          left: 0;
+          top:42%;
+          z-index: 13;
+        }
+        
+
+      }
+      .detailChapter{
+        overflow: auto;
+        ul{
+          li{
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            background:#F3FAFF;
+            border-radius: 16px 16px 0px 0px;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            padding-left:24px;
+          }
+        }
+      }
+
+    }
+    .vedioMainContent_right_bottom{
+      width: 100%;
+      height: 378px;
+      background: #ffffff;
+      border-radius: 12px;
+      box-shadow: 2px 10px 24px 0px rgba(161,153,168,0.18); 
+    }
   }
 }