商品详情页新增一个标签

zhiyangdu
1 parent 8d16924b
Showing 2 changed files with 106 additions and 61 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less
src/components/columnCommodityListBox/columnCommodityListBox.vue
@@ -59,22 +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;
-					}
+          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;
@@ -103,7 +116,19 @@
 							}
 							.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;
@@ -13,15 +13,25 @@
 							<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
 						</div>
 						<div class="content-box">
-							<div class="title">{{item.title}}</div>
+							<div class="title">
+                <!-- <span class="yx_card">严选</span> -->
+                {{item.title}}
+              </div>
 							<!-- <div class="coupon-box">
 								满180减10
 							</div> -->
 							<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="original_price">
+                    <div class="y">¥&nbsp;</div>
+                    <div class="integer">{{getInteger(item.prices)}}.</div>
+                    <div class="decimal">{{getDecimal(item.prices)}}</div>
+                  </div>
 								</div>
 								<div class="right">
 									<img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
@@ -42,15 +52,25 @@
 							<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
 						</div>
 						<div class="content-box">
-							<div class="title">{{item.title}}</div>
+							<div class="title">
+                <!-- <span class="yx_card">严选</span> -->
+                {{item.title}}
+              </div>
 							<!-- <div class="coupon-box">
 								满180减10
 							</div> -->
 							<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="original_price">
+                    <div class="y">¥&nbsp;</div>
+                    <div class="integer">{{getInteger(item.prices)}}.</div>
+                    <div class="decimal">{{getDecimal(item.prices)}}</div>
+                  </div>
 								</div>
 								<div class="right">
 									<img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
@@ -65,56 +85,56 @@
 </template>
 <script>
-	export default {
-		data() {
-			return {
+export default {
+  data () {
+    return {
-			};
-		},
-		props: ["columnLists"],
-		computed: {
+    };
+  },
+  props: ["columnLists"],
+  computed: {
-			/**
-			 * 获取整数
-			 */
-			getInteger() {
-				return (number) => {
-					return parseInt(number);
-				}
-			},
+    /**
+     * 获取整数
+     */
+    getInteger () {
+      return (number) => {
+        return parseInt(number);
+      }
+    },
-			/**
-			 * 获取小数
-			 */
-			getDecimal() {
-				return (number) => {
+    /**
+     * 获取小数
+     */
+    getDecimal () {
+      return (number) => {
-					// 拆分数字
-					let numberArr = number.toString().split(".");
+        // 拆分数字
+        let numberArr = number.toString().split(".");
-					// 判断是否有效数部分
-					if (numberArr.length === 2) {
-						return numberArr[1];
-					} else {
-						return "00";
-					}
-				}
-			}
-		},
-		methods: {
+        // 判断是否有效数部分
+        if (numberArr.length === 2) {
+          return numberArr[1];
+        } else {
+          return "00";
+        }
+      }
+    }
+  },
+  methods: {
-			/**
-			 * 跳转详情
-			 * @param {object} item [对象]
-			 */
-			toDetail(item) {
-				this.$emit("detail", item);
-			}
-		}
-	}
+    /**
+     * 跳转详情
+     * @param {object} item [对象]
+     */
+    toDetail (item) {
+      this.$emit("detail", item);
+    }
+  }
+}
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang='less' scoped>
-	@import './columnCommodityListBox';
+@import './columnCommodityListBox';
 </style>