商品添加销售标签

 <template>
 <template>
-  <div class="bg">
-    <div class="product-list-item" v-if="list.length" v-for="(product,index) in list" @click="goDetail(product, index)"
+  <div class="bg" v-if="list.length">
+    <div class="product-list-item" v-for="(product,index) in list" @click="goDetail(product, index)"
          :key="index" :class="(index) % 2 === 0 && 'magrin-right'">
          :key="index" :class="(index) % 2 === 0 && 'magrin-right'">
       <div class="item-top">
       <div class="item-top">
         <div class="item-price">
         <div class="item-price">
@@ -10,6 +10,14 @@
       </div>
       </div>
       <ImgSize class="item-imge" :src="product.default_images" :width="274" :height="274"/>
       <ImgSize class="item-imge" :src="product.default_images" :width="274" :height="274"/>
       <div class="item-name">{{product.product_name}}</div>
       <div class="item-name">{{product.product_name}}</div>
+
+      <div
+        v-if="product.customize_tag && product.customize_tag.length"
+        class="tag-wrapper">
+
+        <ImgSize class="item-tag" :src="product.customize_tag[0].url2" :width="200" :height="200"/>
+      </div>
+
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -186,6 +194,18 @@ export default {
     margin: 0 10px;
     margin: 0 10px;
   }
   }
 
 
+  .tag-wrapper {
+    width: 120px;
+    height: 40px;
+    position: absolute;
+    top: 72px;
+  }
+
+  .item-tag {
+    width: 84px;
+    height: 26px;
+  }
+
   .item-name {
   .item-name {
     font-size: 24px;
     font-size: 24px;
     color: #000;
     color: #000;

@@ -11,6 +11,8 @@
         </div>
         </div>
         <div class="name"><span>{{product.product_name}}</span></div>
         <div class="name"><span>{{product.product_name}}</span></div>
         <div class="price"><i>¥</i>{{product.price}}</div>
         <div class="price"><i>¥</i>{{product.price}}</div>
+
+        <ImgSize v-if="product.customize_tag && product.customize_tag.length" class="item-tag" :src="product.customize_tag[0].url2" :width="200" :height="60"/>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -18,11 +20,13 @@
 
 
 <script>
 <script>
 import SquareImg from './square-img';
 import SquareImg from './square-img';
+import ImgSize from '../../../components/img-size';
 
 
 export default {
 export default {
   name: 'TopList',
   name: 'TopList',
   components: {
   components: {
     SquareImg,
     SquareImg,
+    ImgSize
   },
   },
   props: {
   props: {
     list: {
     list: {
@@ -76,6 +80,17 @@ export default {
         width: 222px;
         width: 222px;
         padding: 0 8px;
         padding: 0 8px;
         float: left;
         float: left;
+        position: relative;
+
+        &:before {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 1;
+        }
       }
       }
     }
     }
 
 
@@ -86,6 +101,14 @@ export default {
       overflow: hidden;
       overflow: hidden;
     }
     }
 
 
+    .item-tag {
+      position: absolute;
+      top: 0;
+      left: 10px;
+      width: 84px;
+      height: 26px;
+    }
+
     .name {
     .name {
       width: 200px;
       width: 200px;
       margin: 0 auto 8px;
       margin: 0 auto 8px;

 {
 {
   "name": "xianyu-ufo-app-web",
   "name": "xianyu-ufo-app-web",
-  "version": "0.0.2-beta-2",
+  "version": "0.0.2-beta-3",
   "private": true,
   "private": true,
   "description": "Xianyu Project With Express",
   "description": "Xianyu Project With Express",
   "repository": {
   "repository": {