w-front-end / select_good · Commits

Commit e8133aabe44e3a88ec680f299b9fcb220a33bc04

Authored by 王强
1 parent cbcef9de

goodsItem_7.less样式整理~

Inline Side-by-side
Showing 2 changed files with 107 additions and 104 deletions
src/components/goodsItem_7/goodsItem_7.less
  View file @e8133aa
1 1 @charset "UTF-8";
2 2  
3 3 .goods-item-7-box {
4   - background-color: transparent;
5   - width: 100%;
6   - height: auto;
7   - .item {
8   - background-color: #ffffff;
9   - width: 100%;
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .item {
  8 + background-color: #ffffff;
  9 + width: 100%;
10 10 height: auto;
11 11 border-radius: 16px;
12   - overflow: hidden;
13   - .img-box {
14   - display: flex;
  12 + overflow: hidden;
  13 + .img-box {
  14 + display: flex;
15 15 justify-content: center;
16 16 align-items: center;
17   - width: 100%;
18   - height: 330px;
19   - // height: 100%;
20   - overflow: hidden;
21   - // 因为积分需要层叠到图片上方需要设置父级相对定位
22   - position: relative;
  17 + width: 100%;
  18 + height: 330px;
  19 + // height: 100%;
  20 + overflow: hidden;
  21 + // 因为积分需要层叠到图片上方需要设置父级相对定位
  22 + position: relative;
23 23 .img {
24 24 display: block;
25 25 width: 100%;
26 26 height: auto;
27   - }
28   - // 积分商城需要商品是否有货显示补货中
29   - .goods_active{
30   - width: 100%;
31   - height: 100%;
32   - border-radius: 26px;
33   - background: rgba(0, 0, 0, 0.5);
34   - display: flex;
35   - align-items: center;
36   - justify-content: center;
37   - color: #fff;
38   - font-size: 30px;
39   - text-align: center;
40   - position: absolute;
41   - left: 0;
42   - bottom: 0;
43   - }
44   - }
  27 + }
  28 + // 积分商城需要商品是否有货显示补货中
  29 + .goods_active{
  30 + width: 100%;
  31 + height: 100%;
  32 + border-radius: 26px;
  33 + background: rgba(0, 0, 0, 0.5);
  34 + display: flex;
  35 + align-items: center;
  36 + justify-content: center;
  37 + color: #fff;
  38 + font-size: 30px;
  39 + text-align: center;
  40 + position: absolute;
  41 + left: 0;
  42 + bottom: 0;
  43 + }
  44 + }
45 45 .content-box {
46 46 margin: 0 auto;
47 47 width: 290px;
... ... @@ -101,24 +101,24 @@
101 101 width: 48px;
102 102 height: 48px;
103 103 }
104   - }
105   - }
106   - /**积分显示*/
107   - .grade-box {
108   - height: 50px;
109   - font-size: 36px;
110   - font-weight: 500;
111   - color: #FC1541;
112   - line-height: 50px;
113   - display: flex;
114   - align-items: center;
115   - span{
116   - font-size: 24px;
117   - font-weight: 400;
118   - color: #999999;
119   - margin-left: 10px;
120   - }
121   - }
  104 + }
  105 + }
  106 + /**积分显示*/
  107 + .grade-box {
  108 + height: 50px;
  109 + font-size: 36px;
  110 + font-weight: 500;
  111 + color: #FC1541;
  112 + line-height: 50px;
  113 + display: flex;
  114 + align-items: center;
  115 + span {
  116 + font-size: 24px;
  117 + font-weight: 400;
  118 + color: #999999;
  119 + margin-left: 10px;
  120 + }
  121 + }
122 122 }
123 123 }
124 124 }
... ...
src/components/goodsItem_7/goodsItem_7.vue
  View file @e8133aa
... ... @@ -3,21 +3,24 @@
3 3 <div class="item">
4 4 <div class="img-box">
5 5 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
6   - <!-- 补货中按钮 -->
7   - <div v-show="item.stock == 0" class="goods_active">
8   - 已售罄
9   - </div>
  6 +
  7 + <!-- 补货中按钮 -->
  8 + <div v-show="item.stock == 0" class="goods_active">
  9 + 已售罄
  10 + </div>
10 11 </div>
11 12 <div class="content-box">
12 13 <div class="title">{{item.title}}</div>
13 14 <!-- <div class="coupon-box">
14 15 满180减10
15 16 </div> -->
16   - <!-- 积分 -->
17   - <div v-if="item.num" class="grade-box">
18   - {{item.num}}<span>积分</span>
  17 +
  18 + <!-- 积分 -->
  19 + <div v-if="item.num" class="grade-box">
  20 + {{item.num}}<span>积分</span>
19 21 </div>
20   - <!-- 价格 -->
  22 +
  23 + <!-- 价格 -->
21 24 <div v-else class="price-box">
22 25 <div class="left">
23 26 <div class="y">¥&nbsp;</div>
... ... @@ -35,59 +38,59 @@
35 38  
36 39 <script>
37 40 export default {
38   - data: function () {
39   - return {
40   -
41   - }
42   - },
43   - props: ["item"],
44   - computed: {
  41 + data: function () {
  42 + return {
45 43  
46   - /**
47   - * 获取输入数字的整数部分
48   - */
49   - getInteger () {
50   - return (number) => {
51   - return parseInt(number);
52   - }
  44 + }
53 45 },
  46 + props: ["item"],
  47 + computed: {
54 48  
55   - /**
56   - * 获取输入数字的小数部分
57   - */
58   - getDecimal () {
59   - return (number) => {
  49 + /**
  50 + * 获取输入数字的整数部分
  51 + */
  52 + getInteger () {
  53 + return (number) => {
  54 + return parseInt(number);
  55 + }
  56 + },
60 57  
61   - // 拆分数字
62   - let numberArr = number.toString().split(".");
63   -
64   - // 判断是否有效数部分
65   - if (numberArr.length === 2) {
66   - return numberArr[1];
67   - } else {
68   - return "00";
  58 + /**
  59 + * 获取输入数字的小数部分
  60 + */
  61 + getDecimal () {
  62 + return (number) => {
  63 +
  64 + // 拆分数字
  65 + let numberArr = number.toString().split(".");
  66 +
  67 + // 判断是否有效数部分
  68 + if (numberArr.length === 2) {
  69 + return numberArr[1];
  70 + } else {
  71 + return "00";
  72 + }
  73 + }
69 74 }
70   - }
71   - }
72   - },
73   - methods: {
74   -
75   - /**
76   - * 点击跳转
77   - * @param {object} item [数据对象]
78   - */
79   - jump (item) {
80   - this.$emit("jump", item);
81 75 },
  76 + methods: {
82 77  
83   - /**
84   - * 主按钮点击事件
85   - * @param {object} item [数据对象]
86   - */
87   - primary (item) {
88   - this.$emit("primary", item);
  78 + /**
  79 + * 点击跳转
  80 + * @param {object} item [数据对象]
  81 + */
  82 + jump (item) {
  83 + this.$emit("jump", item);
  84 + },
  85 +
  86 + /**
  87 + * 主按钮点击事件
  88 + * @param {object} item [数据对象]
  89 + */
  90 + primary (item) {
  91 + this.$emit("primary", item);
  92 + }
89 93 }
90   - }
91 94 }
92 95 </script>
93 96  
... ...