w-front-end / select_good · Commits

Commit 326bea62fd73c84ba1a24f44a3a133a7786d0af9

Authored by 王强
1 parent 3bd475ff

购好物，goodsItem7组件图片设置object-fit: cover; 图片显示中间部分；columnCommodityListBox组件，添加“补货中，… 

…图片显示中间部分，图片设置object-fit: cover;
Inline Side-by-side
Showing 3 changed files with 65 additions and 33 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less
  View file @326bea6
@@ -44,6 +44,7 @@ @@ -44,6 +44,7 @@
44 width: 100%; 44 width: 100%;
45 height: auto; 45 height: auto;
46 .img-box { 46 .img-box {
  47 + position: relative;
47 display: flex; 48 display: flex;
48 justify-content: center; 49 justify-content: center;
49 align-items: center; 50 align-items: center;
@@ -54,7 +55,23 @@ @@ -54,7 +55,23 @@
54 .img { 55 .img {
55 display: block; 56 display: block;
56 width: 100%; 57 width: 100%;
57 - height: auto; 58 + height: 100%;
  59 + object-fit: cover;
  60 + }
  61 + .goods_active{
  62 + width: 100%;
  63 + height: 58px;
  64 + // border-radius: 26px;
  65 + background: rgba(0, 0, 0, 0.4);
  66 + display: flex;
  67 + align-items: center;
  68 + justify-content: center;
  69 + color: #fff;
  70 + font-size: 30px;
  71 + text-align: center;
  72 + position: absolute;
  73 + left: 0;
  74 + bottom: 0;
58 } 75 }
59 } 76 }
60 .content-box { 77 .content-box {
src/components/columnCommodityListBox/columnCommodityListBox.vue
  View file @326bea6
@@ -11,29 +11,36 @@ @@ -11,29 +11,36 @@
11 <div class="item"> 11 <div class="item">
12 <div class="img-box"> 12 <div class="img-box">
13 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" /> 13 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  14 +
  15 + <!-- 补货中提示 -->
  16 + <div v-if="item && item.stock && item.stock == 0" class="goods_active">
  17 + 补货中
  18 + </div>
14 </div> 19 </div>
15 <div class="content-box"> 20 <div class="content-box">
16 <div class="title"> 21 <div class="title">
17 - <!-- <span class="yx_card">严选</span> -->  
18 - {{item.title}}  
19 - </div> 22 + <!-- <span class="yx_card">严选</span> -->
  23 + {{item.title}}
  24 + </div>
20 <!-- <div class="coupon-box"> 25 <!-- <div class="coupon-box">
21 满180减10 26 满180减10
22 </div> --> 27 </div> -->
23 <div class="price-box"> 28 <div class="price-box">
24 <div class="left"> 29 <div class="left">
25 - <!-- 现价 -->  
26 - <div class="sale-price">  
27 - <div class="y">¥&nbsp;</div>  
28 - <div class="integer">{{getInteger(item.price)}}.</div>  
29 - <div class="decimal">{{getDecimal(item.price)}}</div>  
30 - </div>  
31 - <!-- 原价 -->  
32 - <div class="original_price">  
33 - <div class="y">¥&nbsp;</div>  
34 - <div class="integer">{{getInteger(item.prices)}}.</div>  
35 - <div class="decimal">{{getDecimal(item.prices)}}</div>  
36 - </div> 30 +
  31 + <!-- 现价 -->
  32 + <div class="sale-price">
  33 + <div class="y">¥&nbsp;</div>
  34 + <div class="integer">{{getInteger(item.price)}}.</div>
  35 + <div class="decimal">{{getDecimal(item.price)}}</div>
  36 + </div>
  37 +
  38 + <!-- 原价 -->
  39 + <div class="original_price">
  40 + <div class="y">¥&nbsp;</div>
  41 + <div class="integer">{{getInteger(item.prices)}}.</div>
  42 + <div class="decimal">{{getDecimal(item.prices)}}</div>
  43 + </div>
37 </div> 44 </div>
38 <div class="right"> 45 <div class="right">
39 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" /> 46 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
@@ -52,29 +59,36 @@ @@ -52,29 +59,36 @@
52 <div class="item"> 59 <div class="item">
53 <div class="img-box"> 60 <div class="img-box">
54 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" /> 61 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  62 +
  63 + <!-- 补货中提示 -->
  64 + <div v-if="item && item.stock && item.stock == 0" class="goods_active">
  65 + 补货中
  66 + </div>
55 </div> 67 </div>
56 <div class="content-box"> 68 <div class="content-box">
57 <div class="title"> 69 <div class="title">
58 - <!-- <span class="yx_card">严选</span> -->  
59 - {{item.title}}  
60 - </div> 70 + <!-- <span class="yx_card">严选</span> -->
  71 + {{item.title}}
  72 + </div>
61 <!-- <div class="coupon-box"> 73 <!-- <div class="coupon-box">
62 满180减10 74 满180减10
63 </div> --> 75 </div> -->
64 <div class="price-box"> 76 <div class="price-box">
65 <div class="left"> 77 <div class="left">
66 - <!-- 现价 --> 78 +
  79 + <!-- 现价 -->
67 <div class="sale-price"> 80 <div class="sale-price">
68 - <div class="y">¥&nbsp;</div>  
69 - <div class="integer">{{getInteger(item.price)}}.</div>  
70 - <div class="decimal">{{getDecimal(item.price)}}</div>  
71 - </div>  
72 - <!-- 原价 -->  
73 - <div class="original_price">  
74 - <div class="y">¥&nbsp;</div>  
75 - <div class="integer">{{getInteger(item.prices)}}.</div>  
76 - <div class="decimal">{{getDecimal(item.prices)}}</div>  
77 - </div> 81 + <div class="y">¥&nbsp;</div>
  82 + <div class="integer">{{getInteger(item.price)}}.</div>
  83 + <div class="decimal">{{getDecimal(item.price)}}</div>
  84 + </div>
  85 +
  86 + <!-- 原价 -->
  87 + <div class="original_price">
  88 + <div class="y">¥&nbsp;</div>
  89 + <div class="integer">{{getInteger(item.prices)}}.</div>
  90 + <div class="decimal">{{getDecimal(item.prices)}}</div>
  91 + </div>
78 </div> 92 </div>
79 <div class="right"> 93 <div class="right">
80 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" /> 94 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
src/components/goodsItem_7/goodsItem_7.less
  View file @326bea6
@@ -11,6 +11,8 @@ @@ -11,6 +11,8 @@
11 border-radius: 16px; 11 border-radius: 16px;
12 overflow: hidden; 12 overflow: hidden;
13 .img-box { 13 .img-box {
  14 + // 因为积分需要层叠到图片上方需要设置父级相对定位
  15 + position: relative;
14 display: flex; 16 display: flex;
15 justify-content: center; 17 justify-content: center;
16 align-items: center; 18 align-items: center;
@@ -18,12 +20,11 @@ @@ -18,12 +20,11 @@
18 height: 330px; 20 height: 330px;
19 // height: 100%; 21 // height: 100%;
20 overflow: hidden; 22 overflow: hidden;
21 - // 因为积分需要层叠到图片上方需要设置父级相对定位  
22 - position: relative;  
23 .img { 23 .img {
24 display: block; 24 display: block;
25 width: 100%; 25 width: 100%;
26 - height: auto; 26 + height: 100%;
  27 + object-fit: cover;
27 } 28 }
28 // 积分商城需要商品是否有货显示补货中 29 // 积分商城需要商品是否有货显示补货中
29 .goods_active{ 30 .goods_active{