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 44 width: 100%;
45 45 height: auto;
46 46 .img-box {
  47 + position: relative;
47 48 display: flex;
48 49 justify-content: center;
49 50 align-items: center;
... ... @@ -54,7 +55,23 @@
54 55 .img {
55 56 display: block;
56 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 77 .content-box {
... ...
src/components/columnCommodityListBox/columnCommodityListBox.vue
  View file @326bea6
... ... @@ -11,29 +11,36 @@
11 11 <div class="item">
12 12 <div class="img-box">
13 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 19 </div>
15 20 <div class="content-box">
16 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 25 <!-- <div class="coupon-box">
21 26 满180减10
22 27 </div> -->
23 28 <div class="price-box">
24 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 44 </div>
38 45 <div class="right">
39 46 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
... ... @@ -52,29 +59,36 @@
52 59 <div class="item">
53 60 <div class="img-box">
54 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 67 </div>
56 68 <div class="content-box">
57 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 73 <!-- <div class="coupon-box">
62 74 满180减10
63 75 </div> -->
64 76 <div class="price-box">
65 77 <div class="left">
66   - <!-- 现价 -->
  78 +
  79 + <!-- 现价 -->
67 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 92 </div>
79 93 <div class="right">
80 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 11 border-radius: 16px;
12 12 overflow: hidden;
13 13 .img-box {
  14 + // 因为积分需要层叠到图片上方需要设置父级相对定位
  15 + position: relative;
14 16 display: flex;
15 17 justify-content: center;
16 18 align-items: center;
... ... @@ -18,12 +20,11 @@
18 20 height: 330px;
19 21 // height: 100%;
20 22 overflow: hidden;
21   - // 因为积分需要层叠到图片上方需要设置父级相对定位
22   - position: relative;
23 23 .img {
24 24 display: block;
25 25 width: 100%;
26   - height: auto;
  26 + height: 100%;
  27 + object-fit: cover;
27 28 }
28 29 // 积分商城需要商品是否有货显示补货中
29 30 .goods_active{
... ...