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

王强
1 parent 8da300ea
Showing 2 changed files with 72 additions and 59 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less
src/components/columnCommodityListBox/columnCommodityListBox.vue
@@ -59,35 +59,35 @@
 				}
 				.content-box {
 					margin: 0 auto;
-          width: 286px;
-            .title {
-              display: -webkit-box;
-              margin-top: 20px;
-              color: #333333;
-              font-size: 26px;
-              width: 100%;
-              height: auto;
-              line-height: 40px;
-              -webkit-line-clamp: 2;
-              /*! autoprefixer: off */
-              -webkit-box-orient: vertical;
-              /*! autoprefixer: on */
-              text-overflow: ellipsis;
-              overflow: hidden;
-              .yx_card{
-                width: 60px;
-                height: 30px;
-                line-height:30px;
-                background: #FFB035;
-                border-radius: 6px;
-                color:#ffffff;
-                font-weight: 500;
-                font-size: 22px;
-                text-align: center;
-                padding: 3px 8px;
-                margin-right:10px;
-              }           
-            }
+          			width: 286px;
+            		.title {
+              			display: -webkit-box;
+              			margin-top: 20px;
+              			color: #333333;
+              			font-size: 26px;
+						width: 100%;
+						height: auto;
+						line-height: 40px;
+						-webkit-line-clamp: 2;
+						/*! autoprefixer: off */
+						-webkit-box-orient: vertical;
+						/*! autoprefixer: on */
+						text-overflow: ellipsis;
+						overflow: hidden;
+						.yx_card{
+            				width: 60px;
+                			height: 30px;
+                			line-height:30px;
+                			background: #FFB035;
+                			border-radius: 6px;
+                			color:#ffffff;
+                			font-weight: 500;
+                			font-size: 22px;
+                			text-align: center;
+                			padding: 3px 8px;
+                			margin-right:10px;
+              			}           
+            		}
 					.coupon-box {
 						display: inline;
 						margin-top: 8px;
@@ -100,35 +100,44 @@
 					.price-box {
 						display: flex;
 						justify-content: space-between;
-						align-items: center;
+						align-items: flex-end;
 						margin-top: 25px;
 						margin-bottom: 20px;
 						.left {
-							display: flex;
-							justify-content: flex-start;
-							align-items: baseline;
-							color: #FC1541;
-							.y {
-								font-size: 24px;
+							// display: flex;
+							// justify-content: flex-start;
+							// align-items: baseline;
+
+							// 现价
+							.sale-price {
+								display: flex;
+								justify-content: flex-start;
+								align-items: baseline;
+								color: #FC1541;
+								.y {
+									font-size: 24px;
+								}
+								.integer {
+									font-size: 38px;
+								}
+								.decimal {
+									font-size: 24px;
+								}
 							}
-							.integer {
-								font-size: 38px;
+
+							// 原价
+							.original_price {
+								display: flex;
+								justify-content: flex-start;
+								align-items: baseline;
+								font-size: 40px;
+								font-weight: 400;
+								color: #B4B4B4;
+								line-height: 28px;
+								text-decoration: line-through;
+								transform: scale(0.5);
+								transform-origin: left;
 							}
-							.decimal {
-								font-size: 24px;
-              }
-              // 原价
-              .original_price{
-                display: flex;
-                justify-content: flex-start;
-                align-items: baseline;
-                font-size: 40px;
-                font-weight: 400;
-                color: #B4B4B4;
-                line-height: 28px;
-                text-decoration: line-through;
-                transform: scale(0.5);
-              }
 						}
 						.right {
 							display: flex;
@@ -23,9 +23,11 @@
 							<div class="price-box">
 								<div class="left">
                   <!-- 现价 -->
-									<div class="y">¥&nbsp;</div>
-									<div class="integer">{{getInteger(item.price)}}.</div>
-									<div class="decimal">{{getDecimal(item.price)}}</div>
+                  <div class="sale-price">
+                    <div class="y">¥&nbsp;</div>
+                    <div class="integer">{{getInteger(item.price)}}.</div>
+                    <div class="decimal">{{getDecimal(item.price)}}</div>
+                  </div>
                   <!-- 原价 -->
                   <div class="original_price">
                     <div class="y">¥&nbsp;</div>
@@ -62,9 +64,11 @@
 							<div class="price-box">
 								<div class="left">
                   <!-- 现价 -->
-									<div class="y">¥&nbsp;</div>
-									<div class="integer">{{getInteger(item.price)}}.</div>
-									<div class="decimal">{{getDecimal(item.price)}}</div>
+									<div class="sale-price">
+                    <div class="y">¥&nbsp;</div>
+									  <div class="integer">{{getInteger(item.price)}}.</div>
+									  <div class="decimal">{{getDecimal(item.price)}}</div>
+                  </div>
                   <!-- 原价 -->
                   <div class="original_price">
                     <div class="y">¥&nbsp;</div>