w-front-end / select_good · Commits

Commit 1612ac4e0210036dee7199c26a1268f5e66c37ca

Authored by 王强
1 parent 8da300ea

优选库，领头雁严选页面，商品原价导致UI溢出为处理~

Inline Side-by-side
Showing 2 changed files with 72 additions and 59 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less
  View file @1612ac4
... ... @@ -59,35 +59,35 @@
59 59 }
60 60 .content-box {
61 61 margin: 0 auto;
62   - width: 286px;
63   - .title {
64   - display: -webkit-box;
65   - margin-top: 20px;
66   - color: #333333;
67   - font-size: 26px;
68   - width: 100%;
69   - height: auto;
70   - line-height: 40px;
71   - -webkit-line-clamp: 2;
72   - /*! autoprefixer: off */
73   - -webkit-box-orient: vertical;
74   - /*! autoprefixer: on */
75   - text-overflow: ellipsis;
76   - overflow: hidden;
77   - .yx_card{
78   - width: 60px;
79   - height: 30px;
80   - line-height:30px;
81   - background: #FFB035;
82   - border-radius: 6px;
83   - color:#ffffff;
84   - font-weight: 500;
85   - font-size: 22px;
86   - text-align: center;
87   - padding: 3px 8px;
88   - margin-right:10px;
89   - }
90   - }
  62 + width: 286px;
  63 + .title {
  64 + display: -webkit-box;
  65 + margin-top: 20px;
  66 + color: #333333;
  67 + font-size: 26px;
  68 + width: 100%;
  69 + height: auto;
  70 + line-height: 40px;
  71 + -webkit-line-clamp: 2;
  72 + /*! autoprefixer: off */
  73 + -webkit-box-orient: vertical;
  74 + /*! autoprefixer: on */
  75 + text-overflow: ellipsis;
  76 + overflow: hidden;
  77 + .yx_card{
  78 + width: 60px;
  79 + height: 30px;
  80 + line-height:30px;
  81 + background: #FFB035;
  82 + border-radius: 6px;
  83 + color:#ffffff;
  84 + font-weight: 500;
  85 + font-size: 22px;
  86 + text-align: center;
  87 + padding: 3px 8px;
  88 + margin-right:10px;
  89 + }
  90 + }
91 91 .coupon-box {
92 92 display: inline;
93 93 margin-top: 8px;
... ... @@ -100,35 +100,44 @@
100 100 .price-box {
101 101 display: flex;
102 102 justify-content: space-between;
103   - align-items: center;
  103 + align-items: flex-end;
104 104 margin-top: 25px;
105 105 margin-bottom: 20px;
106 106 .left {
107   - display: flex;
108   - justify-content: flex-start;
109   - align-items: baseline;
110   - color: #FC1541;
111   - .y {
112   - font-size: 24px;
  107 + // display: flex;
  108 + // justify-content: flex-start;
  109 + // align-items: baseline;
  110 +
  111 + // 现价
  112 + .sale-price {
  113 + display: flex;
  114 + justify-content: flex-start;
  115 + align-items: baseline;
  116 + color: #FC1541;
  117 + .y {
  118 + font-size: 24px;
  119 + }
  120 + .integer {
  121 + font-size: 38px;
  122 + }
  123 + .decimal {
  124 + font-size: 24px;
  125 + }
113 126 }
114   - .integer {
115   - font-size: 38px;
  127 +
  128 + // 原价
  129 + .original_price {
  130 + display: flex;
  131 + justify-content: flex-start;
  132 + align-items: baseline;
  133 + font-size: 40px;
  134 + font-weight: 400;
  135 + color: #B4B4B4;
  136 + line-height: 28px;
  137 + text-decoration: line-through;
  138 + transform: scale(0.5);
  139 + transform-origin: left;
116 140 }
117   - .decimal {
118   - font-size: 24px;
119   - }
120   - // 原价
121   - .original_price{
122   - display: flex;
123   - justify-content: flex-start;
124   - align-items: baseline;
125   - font-size: 40px;
126   - font-weight: 400;
127   - color: #B4B4B4;
128   - line-height: 28px;
129   - text-decoration: line-through;
130   - transform: scale(0.5);
131   - }
132 141 }
133 142 .right {
134 143 display: flex;
... ...
src/components/columnCommodityListBox/columnCommodityListBox.vue
  View file @1612ac4
... ... @@ -23,9 +23,11 @@
23 23 <div class="price-box">
24 24 <div class="left">
25 25 <!-- 现价 -->
26   - <div class="y">¥&nbsp;</div>
27   - <div class="integer">{{getInteger(item.price)}}.</div>
28   - <div class="decimal">{{getDecimal(item.price)}}</div>
  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>
29 31 <!-- 原价 -->
30 32 <div class="original_price">
31 33 <div class="y">¥&nbsp;</div>
... ... @@ -62,9 +64,11 @@
62 64 <div class="price-box">
63 65 <div class="left">
64 66 <!-- 现价 -->
65   - <div class="y">¥&nbsp;</div>
66   - <div class="integer">{{getInteger(item.price)}}.</div>
67   - <div class="decimal">{{getDecimal(item.price)}}</div>
  67 + <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>
68 72 <!-- 原价 -->
69 73 <div class="original_price">
70 74 <div class="y">¥&nbsp;</div>
... ...