goodsItem_7.less样式整理~

王强
1 parent cbcef9de
Showing 2 changed files with 107 additions and 104 deletions
src/components/goodsItem_7/goodsItem_7.less
src/components/goodsItem_7/goodsItem_7.vue
 @charset "UTF-8";
 .goods-item-7-box {
-	background-color: transparent;
-	width: 100%;
-	height: auto;
-	.item {
-		background-color: #ffffff;
-		width: 100%;
+    background-color: transparent;
+    width: 100%;
+    height: auto;
+    .item {
+        background-color: #ffffff;
+        width: 100%;
 		height: auto;
 		border-radius: 16px;
-		overflow: hidden;
-		.img-box {
-			display: flex;
+        overflow: hidden;
+        .img-box {
+            display: flex;
 			justify-content: center;
 			align-items: center;
-			width: 100%;
-			height: 330px;
-			// height: 100%;
-      overflow: hidden;
-      // 因为积分需要层叠到图片上方需要设置父级相对定位
-      position: relative;
+            width: 100%;
+            height: 330px;
+            // height: 100%;
+            overflow: hidden;
+            // 因为积分需要层叠到图片上方需要设置父级相对定位
+            position: relative;
 			.img {
 				display: block;
 				width: 100%;
 				height: auto;
-      }
-      // 积分商城需要商品是否有货显示补货中
-      .goods_active{
-        width: 100%;
-        height: 100%;
-        border-radius: 26px;
-        background: rgba(0, 0, 0, 0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        font-size: 30px;
-        text-align: center;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-      }
-		}
+            }
+            // 积分商城需要商品是否有货显示补货中
+            .goods_active{
+                width: 100%;
+                height: 100%;
+                border-radius: 26px;
+                background: rgba(0, 0, 0, 0.5);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #fff;
+                font-size: 30px;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+            }
+        }
 		.content-box {
 			margin: 0 auto;
 			width: 290px;
@@ -101,24 +101,24 @@
 						width: 48px;
 						height: 48px;
 					}
-				}
-      }
-      /**积分显示*/
-      .grade-box {
-        height: 50px;
-        font-size: 36px;
-        font-weight: 500;
-        color: #FC1541;
-        line-height: 50px;
-        display: flex;
-        align-items: center;
-        span{
-          font-size: 24px;
-          font-weight: 400;
-          color: #999999;
-          margin-left: 10px;
-        }
-      }
+                }
+            }
+            /**积分显示*/
+            .grade-box {
+                height: 50px;
+                font-size: 36px;
+                font-weight: 500;
+                color: #FC1541;
+                line-height: 50px;
+                display: flex;
+                align-items: center;
+                span {
+                    font-size: 24px;
+                    font-weight: 400;
+                    color: #999999;
+                    margin-left: 10px;
+                }
+            }
 		}
 	}
 }
@@ -3,21 +3,24 @@
 		<div class="item">
 			<div class="img-box">
 				<img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
-        <!-- 补货中按钮 -->
-        <div v-show="item.stock == 0" class="goods_active">
-          已售罄
-        </div>
+
+                <!-- 补货中按钮 -->
+                <div v-show="item.stock == 0" class="goods_active">
+                    已售罄
+                </div>
 			</div>
 			<div class="content-box">
 				<div class="title">{{item.title}}</div>
 				<!-- <div class="coupon-box">
 					满180减10
 				</div> -->
-        <!-- 积分 -->
-        <div v-if="item.num" class="grade-box">
-				   {{item.num}}<span>积分</span>
+        
+                <!-- 积分 -->
+                <div v-if="item.num" class="grade-box">
+                    {{item.num}}<span>积分</span>
 				</div>
-        <!-- 价格 -->
+                
+                <!-- 价格 -->
 				<div v-else class="price-box">
 					<div class="left">
 						<div class="y">¥&nbsp;</div>
@@ -35,59 +38,59 @@
 <script>
 export default {
-  data: function () {
-    return {
-
-    }
-  },
-  props: ["item"],
-  computed: {
+    data: function () {
+        return {
-    /**
-     * 获取输入数字的整数部分
-     */
-    getInteger () {
-      return (number) => {
-        return parseInt(number);
-      }
+        }
     },
+    props: ["item"],
+    computed: {
-    /**
-     * 获取输入数字的小数部分
-     */
-    getDecimal () {
-      return (number) => {
+        /**
+         * 获取输入数字的整数部分
+         */
+        getInteger () {
+            return (number) => {
+                return parseInt(number);
+            }
+        },
-        // 拆分数字
-        let numberArr = number.toString().split(".");
-
-        // 判断是否有效数部分
-        if (numberArr.length === 2) {
-          return numberArr[1];
-        } else {
-          return "00";
+        /**
+         * 获取输入数字的小数部分
+         */
+        getDecimal () {
+            return (number) => {
+                
+                // 拆分数字
+                let numberArr = number.toString().split(".");
+                
+                // 判断是否有效数部分
+                if (numberArr.length === 2) {
+                    return numberArr[1];
+                } else {
+                    return "00";
+                }
+            }
         }
-      }
-    }
-  },
-  methods: {
-
-    /**
-     * 点击跳转
-     * @param {object} item [数据对象]
-     */
-    jump (item) {
-      this.$emit("jump", item);
     },
+    methods: {
-    /**
-     * 主按钮点击事件
-     * @param {object} item [数据对象]
-     */
-    primary (item) {
-      this.$emit("primary", item);
+        /**
+         * 点击跳转
+         * @param {object} item [数据对象]
+         */
+        jump (item) {
+            this.$emit("jump", item);
+        },
+        
+        /**
+         * 主按钮点击事件
+         * @param {object} item [数据对象]
+         */
+        primary (item) {
+            this.$emit("primary", item);
+        }
     }
-  }
 }
 </script>