TBtools-商品详情新增视频

htmldev/TBTools/README.md

@@ -38,4 +38,4 @@ npm run build --prod
 * [x] 淘宝天猫下拉关键词搜索
 * [ ] 淘宝商品评论
 * [x] 淘宝商品详情
-* [ ] 商品问大家接口
+* [x] 商品问大家接口

htmldev/TBTools/src/views/modules/tools/tools-productinfo.vue

@@ -46,13 +46,19 @@
           </div>
         </li>
         <li>
-          <p class="label">商品大图：</p>
+          <p class="label">商品主图：</p>
           <div class="main-photo">
             <img :src="productInfo.productMainPhoto" alt="">
           </div>
         </li>
+        <li v-show="productInfo.video">
+          <p class="label">商品视频：</p>
+          <div class="video-wrap">
+            <video :src="productInfo.video" controls></video>
+          </div>
+        </li>
         <li>
-          <p class="label">商品介绍：</p>
+          <p class="label">商品介绍图：</p>
           <div class="value">
             <img class="goods-photo" :src="item" alt="" v-for="(item, index) in productInfo.images" :key="index">
           </div>
@@ -153,7 +159,6 @@ $--color-primary: #3E8EF7;
 
 h3 {
   margin-bottom: 30px;
-  text-align: center;
 }
 
 ul {
@@ -165,8 +170,7 @@ ul {
   }
 
   .label {
-    width: 6em;
-    text-align: right;
+    margin-right: 6px;
     color: #666;
   }
 
@@ -190,6 +194,17 @@ ul {
     }
   }
 
+  .video-wrap {
+    width: 80%;
+    height: 300px;
+
+    video {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   .main-photo {
     display: inline-block;
     width: 300px;