首页新增商品分类、推荐有奖静态页；新增商品分类静态页

src/assets/styles/style.css

@@ -7,7 +7,7 @@ input:focus,button:focus,textarea:focus {
 }
 html,body {
     width: 100%;
-    height: auto;
+    height: 100%;
     /*overflow-y: scroll;*/
     position: relative;
     -webkit-overflow-scrolling : touch;
@@ -16,7 +16,7 @@ html,body {
 
 #app {
     width: 100%;
-    height: auto; 
+    height: 100%; 
 }
 
 .m-page {
@@ -150,6 +150,11 @@ html,body {
 
 
 /*公共样式*/
+.container {
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+}
 
 .btn-md {
     border: none;
@@ -302,6 +307,57 @@ html,body {
 .f-hide {
     display: none;
 }
+.f-relative {
+    position: relative;
+}
+.f-absolute {
+    position: absolute;
+}
+.f-ellipsis-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
+.f-ellipsis-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  /* autoprefixer: off*/
+  /* autoprefixer: on*/
+}
+@media (-webkit-min-device-pixel-ratio: 2) {
+  .f-bb-gray::after {
+      height: 1px;
+      content: '';
+      width: 100%;
+      border-bottom: 1px solid #EEEEEE;
+      position: absolute;
+      bottom: -1px;
+      right: 0;
+      transform: scaleY(0.5);
+      -webkit-transform: scaleY(0.5);
+  }
+  .f-all-1px::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 1px solid #EEEEEE;
+    border-radius: 2px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 200%;
+    height: 200%;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    -webkit-transform-origin: left top;
+    transform-origin: left top;
+    z-index: 0;
+  }
+}  
 
 
 /******我的钱包******/

src/router/index.js

@@ -10,6 +10,7 @@ const serviceEvaluationStatus = resolve => require(['@/view/service-evaluation-s
 const home = resolve => require(['@/view/home'], resolve)
 const poster = resolve => require(['@/view/poster'], resolve)
 const demo = resolve => require(['@/view/demo'], resolve)
+const goodsClassify = resolve => require(['@/view/goods-classify'], resolve)
 
 
 Vue.use(Router)
@@ -43,6 +44,11 @@ let router = new Router({
             name: '服务评价状态',
             component: serviceEvaluationStatus
         },
+        {
+            path: '/goods-classify',
+            name: '商品分类',
+            component: goodsClassify
+        },
         {
         	path: '/home',
         	name: '首页',

src/view/goods-classify.vue

@@ -0,0 +1,256 @@
+<template>
+    <div class="container goods">
+        <div class="top f-bb-gray">
+	        <img src="../assets/images/icon/arrow-left.png"/>商品分类
+	    </div>
+        <div class="content">
+        	<div class="left">
+        		<ul>
+        			<li class="on">
+        				<span>
+        					深度保洁
+        					<img src="../assets/images/icon/hot.png" class="i-hot" />
+        				</span>
+        			</li>
+        			<li>
+        				<span>
+        					家电清洗
+        					<img src="../assets/images/icon/hot.png" class="i-hot" />
+        				</span>
+        			</li>
+        			<li>
+        				<span>
+        					日常保洁
+        					<img src="../assets/images/icon/new.png" class="i-new" />
+        				</span>
+        			</li>
+        			<li>
+        				<span>
+        					新居开荒
+        					<img src="../assets/images/icon/hot.png" class="i-hot" />
+        				</span>
+        			</li>
+        			<li>
+        				<span>
+        					精细擦窗
+        					<img src="../assets/images/icon/hot.png" class="i-hot" />
+        				</span>
+        			</li>
+        		</ul>
+        	</div>
+        	<div class="right">
+        		<p class="title">深度清洁</p>
+        		<div class="f-relative f-all-1px">
+	        		<div class="item f-flex">
+	        			 <img src="../assets/images/icon/wx-icon.png" class="thumb"/>
+	        			 <div class="info f-flex">
+	        			 	<div>
+		        			 	<p class="title f-ellipsis-1">高端保洁铂金月卡</p>
+		        			 	<p class="rule">4次×4小时全屋高端保洁</p>
+		        			 	<span class="full">新用户立减300元</span>
+		        			</div> 	
+	        			 	<div class="f-flex">
+	        			 		<p class="price">
+	        			 			<span><span class="money">￥</span>799</span>
+	        			 		</p>
+	        			 		<p class="cost">￥999</p>
+	        			 	</div>
+	        			 </div>
+	        		</div>
+        		</div>
+        		<div class="f-relative f-all-1px">
+	        		<div class="item f-flex">
+	        			 <img src="../assets/images/icon/wx-icon.png" class="thumb"/>
+	        			 <div class="info f-flex">
+	        			 	<div>
+		        			 	<p class="title f-ellipsis-1">高端保洁铂金月卡</p>
+		        			 	<p class="rule">4次×4小时全屋高端保洁</p>
+		        			 	<span class="full">新用户立减300元</span>
+		        			</div> 	
+	        			 	<div class="f-flex">
+	        			 		<p class="price">
+	        			 			<span><span class="money">￥</span>799</span>
+	        			 		</p>
+	        			 		<p class="cost">￥999</p>
+	        			 	</div>
+	        			 </div>
+	        		</div>
+        		</div>
+        		<p class="title">家电清洁</p>
+        		<div class="f-relative f-all-1px">
+	        		<div class="item f-flex">
+	        			 <img src="../assets/images/icon/wx-icon.png" class="thumb"/>
+	        			 <div class="info f-flex">
+	        			 	<div>
+		        			 	<p class="title f-ellipsis-1">高端保洁铂金月卡</p>
+		        			 	<p class="rule">4次×4小时全屋高端保洁</p>
+		        			 	<span class="full">新用户立减300元</span>
+		        			</div> 	
+	        			 	<div class="f-flex">
+	        			 		<p class="price">
+	        			 			<span><span class="money">￥</span>799</span>
+	        			 		</p>
+	        			 		<p class="cost">￥999</p>
+	        			 	</div>
+	        			 </div>
+	        		</div>
+        		</div>
+        		<div class="f-relative f-all-1px">
+	        		<div class="item f-flex">
+	        			 <img src="../assets/images/icon/wx-icon.png" class="thumb"/>
+	        			 <div class="info f-flex">
+	        			 	<div>
+		        			 	<p class="title f-ellipsis-1">高端保洁铂金月卡</p>
+		        			 	<p class="rule">4次×4小时全屋高端保洁</p>
+		        			 	<span class="full">新用户立减300元</span>
+		        			</div> 	
+	        			 	<div class="f-flex">
+	        			 		<p class="price">
+	        			 			<span><span class="money">￥</span>799</span>
+	        			 		</p>
+	        			 		<p class="cost">￥999</p>
+	        			 	</div>
+	        			 </div>
+	        		</div>
+        		</div>
+        	</div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'goodsClassify',
+    data() {
+        return {}
+    }
+}
+</script>
+<style lang="scss" scoped>
+	.goods {
+		background-color: #fff;
+		.top {
+			position: relative;
+			width: 100%;
+			height: 0.9rem;
+			line-height: 0.9rem;
+			text-align: center;
+			font-size: 0.36rem;
+			color: #249e6c;
+			img {
+				position: absolute;
+				width: 0.2rem;
+				height: 0.35rem;
+				top: 50%;
+				left: 0.4rem;
+				margin-top: -0.17rem;
+			}
+		}
+		.content {
+			width: 100%;
+			display: flex;
+			height: calc(100vh - 0.9rem);
+			.left {
+				width: 1.74rem;
+				background-color: #F3F3F3;
+			    overflow-y: auto;
+				overflow-x: hidden;
+				ul {
+					li {
+						width: 1.74rem;
+						height: 1.1rem;
+						line-height: 1.1rem;
+						text-align: center;
+						font-size: 0.28rem;
+						color: #888;
+					}
+					.on {
+						background-color: #fff;
+						color: #333;
+					}
+					span {
+						position: relative;
+						img {
+							position: absolute;
+							font-size: 10px;
+							top: -0.1rem;
+							right: -0.2rem;
+						}
+						.i-hot {
+							width: 0.24rem;
+							height: 0.1rem;
+						}
+						.i-new {
+							width: 0.24rem;
+							height: 0.08rem;
+						}	
+					}
+					
+				}
+			}
+			.right {
+			    overflow-y: auto;
+    			overflow-x: hidden;
+				padding: 0.2rem 0.22rem 0;
+				width: calc(100% - 1.74rem);
+				box-sizing: border-box;
+				.title {
+					padding: 0.12rem 0 0.12rem;
+					font-size: 0.24rem;
+					color: #999;
+				}
+				.item {
+					position: relative;
+					padding: 0.16rem;
+					z-index: 1;
+					height: 1.87rem;
+					box-sizing: border-box;
+					margin-bottom: 0.2rem;
+					.thumb {
+						width: 1.54rem;
+						height: 1.54rem;
+					}
+					.info {
+						margin-left: 0.15rem;
+						flex: 1;
+						height: 100%;
+						font-size: 0;
+						flex-direction: column;
+					    align-items: flex-start;
+					    justify-content: space-between;
+						.title {
+							font-size: 0.3rem;
+							color: #333;
+							padding: 0;
+						}
+						.rule {
+							font-size: 0.22rem;
+							color: #999;
+							padding: 0.1rem 0 0.16rem;
+							line-height: 1;
+						}
+						.full {
+							font-size: 0.18rem;
+							background-color: #FFF2E5;
+							color: #F4A353;
+							padding: 0 0.1rem;
+							line-height: 1;
+						}
+						.price {
+							.money {
+								font-size: 0.22rem;
+							}
+							color: #249E6C;
+							font-size: 0.34rem;
+						}
+						.cost {
+							color: #BBBBBB;
+							font-size: 0.24rem;
+							margin-left: 0.18rem;
+							text-decoration: line-through;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/view/home.vue

@@ -16,10 +16,57 @@
 				</swiper>
 				<div class="swiper-pagination"></div>
 			</div>
+			<!-- TODO: 对应换hot 和 new 图标 -->
+			<div class="service f-flex">
+				<div class="item">
+					<img src="../assets/images/icon/cleanup-2.png"/>
+					<p>深度保洁</p>
+				</div>
+				<div class="item">
+					<img src="../assets/images/icon/wash-new.png"/>
+					<p>家电清洗</p>
+				</div>
+				<div class="item">
+					<img src="../assets/images/icon/cleanup.png"/>
+					<p>日常保洁</p>
+				</div>
+				<div class="item">
+					<img src="../assets/images/icon/new-home.png"/>
+					<p>新居开荒</p>
+				</div>
+				<div class="item">
+					<img src="../assets/images/icon/wiping-hot.png"/>
+					<p>精细擦窗</p>
+				</div>
+			</div>
 			<div class="coupon" v-if="promotionImgList.imgUrl">
 				<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl"/></a>
 				<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl"/></a>
 			</div>
+			<!-- TODO: 三种样式 -->
+			<!-- one -->
+			<div class="recommend f-flex">
+				<div class="left">
+					<img src="../assets/images/coupon-bg@1x.png">
+				</div>
+				<div class="right">
+					<img src="../assets/images/sunrise.png" class="gap">
+					<img src="../assets/images/sunshine.png">
+				</div>
+			</div>
+			<!-- two -->
+			<div class="recommend f-flex">
+				<div class="left">
+					<img src="../assets/images/coupon-bg@1x.png">
+				</div>
+				<div class="right">
+					<img src="../assets/images/sunrise.png" class="two">
+				</div>
+			</div>
+			<!-- three -->
+			<div class="recommend f-flex">
+				<img src="../assets/images/sunrise.png" class="three">
+			</div>
 			<div class="new-card" :class="{'new-card-first': index == 0}"  v-for="(item,index) in goodsList" :key="index">
 				<div class="new-card-top">
 					<img :src=" imghost + item.list[0].categoryImage">
@@ -240,7 +287,7 @@
 </script>
 
 
-<style>
+<style lang="scss" scoped>
 .home {
 	width: 100%;
 	height: 100%;
@@ -476,6 +523,51 @@
 .Loading-box .weui-icon_toast.weui-loading {
 	margin-top: 75%;
 }
+.service {
+	padding: 0.11rem 0;
+	.item {
+		text-align: center;
+		font-size: 0;
+		flex: 1;
+		img {
+			width: 0.78rem;
+			height: 0.78rem;
+		}
+		p {
+			color: #666;
+			font-size: 0.21rem;
+		}
+	}
+}
+.recommend {
+	padding: 0 0.2rem;
+	margin-top: 0.3rem;
+	font-size: 0;
+	.left {
+		img {
+			width: 2.51rem;
+			height: 1.74rem;
+			margin-right: 0.05rem;
+		}
+	}
+	.right {
+		img {
+			width: 4.54rem;
+			height: 0.84rem;
+		}
+		.gap {
+			margin-bottom: 0.06rem;
+		}
+		.two {
+			width: 4.54rem;
+			height: 1.74rem;
+		}
+	}
+	.three {
+		width: 7.1rem;
+		height: 1.74rem;
+	}
+}
 
 
 </style>