视频

pages/component/commonComponents/curriculumVideo.vue

@@ -2,15 +2,22 @@
   <view class="richDetail">
     <!-- 公共组件-每个页面必须引入 -->
 
-    <view class="detail_title video_box">
+    <view
+      scroll-x="true"
+      class="detail_title video_box"
+      style="background-color: #fff"
+    >
+    
       <view
         v-for="(v, i) in dataList"
-        class="video_item"
-        @click="handleClick(v)"
+        :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
+        @click="handleClick(v,i)"
       >
+  
         【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
       </view>
     </view>
+
     <slot name="richHeadImg"></slot>
 
     <!-- <view>{{ detailInfo.content }}</view> -->
@@ -21,7 +28,7 @@
 import $http from "@/config/requestConfig.js";
 import { mapState } from "vuex";
 export default {
-  props: ["detailInfo", "dataList"],
+  props: ["detailInfo", "dataList", "currentVideo"],
   components: {},
   data() {
     return {};
@@ -160,7 +167,7 @@ export default {
   }
 
   .detail_title {
-    padding: 0 40rpx 0;
+    padding: 0 20rpx 0;
     font-size: 26rpx;
     line-height: 65rpx;
     font-weight: bold;
@@ -190,13 +197,15 @@ export default {
 
 .video_box {
   width: 100%;
-
+  // height: 100rpx;
   .video_item {
     width: 24%;
-    margin-right: 1%;
+    margin-right: 10rpx;
+    margin-bottom: 20rpx;
     float: left;
-    background: #018f89;
-    color: #fff;
+    border: 2rpx solid #018f89;
+    background: #fff;
+    color: #018f89;
     text-align: center;
     border-radius: 10rpx;
     box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
@@ -206,4 +215,8 @@ export default {
     margin-right: 0;
   }
 }
+.hot {
+  background-color: #018f89 !important;
+  color: #fff !important;
+}
 </style>