1

src/views/channel/detail.vue

@@ -16,29 +16,22 @@
                   <div class="title">{{ form.title }}</div>
                 </template>
                 <el-col :span="24" class="con">
-                  <el-col :span="24" class="time">
-                    <p>更新时间：{{ form.create_time }}</p>
-                  </el-col>
-                  <el-col :span="24" class="orgin">
-                    <p>来源：{{ form.orgin }}</p>
-                  </el-col>
-                  <el-col :span="24" class="desc">
-                    <p>简介：{{ form.desc }}</p>
-                  </el-col>
+                  <p><span>更新时间：</span>{{ form.create_time }}</p>
+                  <p><span>来源：</span>{{ form.orgin }}</p>
+                  <p><span>简介：</span>{{ form.desc }}</p>
                 </el-col>
               </van-collapse-item>
             </van-collapse>
           </el-col>
           <el-col :span="24" class="choose">
-            <el-col :span="24" class="name">
-              <div class="shu"></div>
-              选集
+            <el-col :span="24" class="one">
+              <span></span>
+              <span>选集</span>
             </el-col>
-            <el-col :span="24" class="videoList" :show-indicators="hh">
-              <van-swipe :loop="false" :width="150">
-                <van-swipe-item v-for="(item, index) in form.videodata" :key="index" style="margin-right: 10px;">
-                  <!-- <div style="width:150px;height:100px;background:red;margin-right:10px"></div> -->
-                  <video controls style="width:150px;height:100px" :src="item.url"></video>
+            <el-col :span="24" class="two">
+              <van-swipe :loop="false" :width="300">
+                <van-swipe-item class="videodata" v-for="(item, index) in form.videodata" :key="index">
+                  {{ item.url }}
                 </van-swipe-item>
               </van-swipe>
             </el-col>
@@ -72,7 +65,6 @@ export default {
       navShow: true,
       activeNames: [],
       form: {},
-      hh: 'false',
     };
   },
   created() {
@@ -82,7 +74,6 @@ export default {
     ...channel(['query', 'fetch']),
     async search() {
       const res = await this.fetch(this.id);
-      console.log(res);
       if (this.$checkRes(res)) {
         this.$set(this, `form`, res.data);
       }
@@ -120,56 +111,63 @@ export default {
 }
 .main {
   .text {
-    margin-top: 10px;
-    padding: 0px 10px;
+    padding: 5px 10px;
     .title {
       font-size: 16px;
-      font-weight: bolder;
+      font-weight: bold;
     }
     .con {
-      .orgin {
-        margin-top: 10px;
-      }
-      .desc {
-        margin-top: 10px;
+      p {
+        span {
+          font-weight: bold;
+          padding: 10px 0 0 0;
+        }
       }
     }
   }
   .choose {
-    padding: 10px;
-    .name {
+    padding: 0 10px;
+    .one {
       height: 30px;
-      font-size: 18px;
-      font-weight: bolder;
-      line-height: 30px;
-      .shu {
-        width: 2px;
-        height: 90%;
-        background-color: red;
+      span:nth-child(1) {
         display: inline-block;
-        vertical-align: middle;
-        margin-right: 5px;
+        width: 2px;
+        height: 30px;
+        background: #409eff;
+      }
+      span:nth-child(2) {
+        position: relative;
+        top: -8px;
+        left: 5px;
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+    .two {
+      .videodata {
       }
     }
   }
 }
 /deep/.van-cell {
   background-color: transparent;
-}
-/deep/[class*='van-hairline']::after {
-  border: 0;
+  padding: 5px 10px;
 }
 /deep/.van-collapse-item__content {
   background-color: transparent;
-}
-/deep/.van-collapse-item__content {
   color: black;
+  padding: 0 10px;
+}
+/deep/.van-swipe__indicators {
+  display: none;
+}
+/deep/.van-collapse-item {
+  border-bottom: 1px solid #f1f1f1;
 }
 /deep/.van-cell::after {
   border: 0;
 }
-/deep/.van-swipe__indicators {
-  width: 0px;
-  height: 0px;
+/deep/[class*='van-hairline']::after {
+  border: 0;
 }
 </style>