产品推荐页面样式修改

components/store/RecommendProduct.vue

@@ -42,171 +42,176 @@ export default {
 </script>
 <style scoped>
   #recommend-fragment{
-		width: 1190px;
-		margin: 0 auto;
-	}
-	.recommend-list{
-		width: 100%;
-		margin: 0 auto;
-		display: inline-block;
-	}
-	#recommend-fragment ul{
-		width: 100%;
-		margin: 0 auto;
-		display: inline-block;
-		-webkit-padding-start: 0;
-	}
-	#recommend-fragment ul li{
-		float: left;
-		width: 218px;
-		height: 260px;
-		border: #d2d2d2 1px solid;
-		position: relative;
-		overflow: hidden;
-		margin-right: 25px;
-		margin-bottom: 20px;
-	}
-	#recommend-fragment ul li:nth-child(5n){
-		margin-right: 0;
-	}
-	#recommend-fragment ul li .img{
-		height: 175px;
-		text-align: center;
-		line-height: 170px;
-	}
-	#recommend-fragment ul li .img img{
-		max-width: 120px;
-		max-height: 120px;
-	}
-	#recommend-fragment ul li .content{
-		width: 100%;
-		margin: 0 auto;
-	}
-	#recommend-fragment ul li .content p{
-		width: 90%;
-		display: inline-block;
-		line-height: 22px;
-		font-size: 14px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		margin-bottom: 0;
-		padding-left: 10px;
-	}
-	#recommend-fragment ul li .content p.price{
-		color: #ff9000;
-		font-size: 16px;
-		font-weight: bold;
-	}
-	.color666{
-		color: #666;
-	}
-	#recommend-fragment ul li .hover-show{
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		top: 100%;
-		left: 0;
-		background: rgba(80,120,203,.85);
-		padding: 30px 10px;
-	}
-	#recommend-fragment ul li:hover .hover-show{
-		top: 0;
-		transition: top .5s ease-in;
-	}
-	#recommend-fragment ul li .hover-show div{
-		width: 100%;
-		margin: 0 auto;
-		text-align: left;
-		color: #fff;
-		line-height: 25px;
-	}
-	#recommend-fragment ul li .hover-show .title{
-		font-size: 18px;
-		margin-top: 8px;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		margin-bottom: 0;
-	}
-	#recommend-fragment ul li .hover-show .type{
-		font-size: 14px;
-	}
-	#recommend-fragment ul li .hover-show .hr{
-		text-align: center;
-		margin-top: 5px;
-	}
-	#recommend-fragment ul li .hover-show .hr span{
-		font-size: 16px;
-		position: relative;
-	}
-	#recommend-fragment ul li .hover-show .hr span:before,#recommend-fragment ul li .hover-show .hr span:after{
-		content: '';
-		position: absolute;
-		display: inline-block;
-		width: 65px;
-		height: 1px;
-		background: #fff;
-		top: 10px;
-	}
-	#recommend-fragment ul li .hover-show .hr span:before{
-		left: 53px;
-	}
-	#recommend-fragment ul li .hover-show .hr span:after{
-		right: 53px;
-	}
-	#recommend-fragment ul li .hover-show .price{
-		font-size: 20px;
-		text-align: center;
-		line-height: 48px;
-	}
-	#recommend-fragment ul li .hover-show .by-cart,#recommend-fragment ul li .hover-show .buy-now{
-		text-align: center;
-		position: absolute;
-	}
-	#recommend-fragment ul li .hover-show .by-cart{
-		bottom: 50px;
-	}
-	#recommend-fragment ul li .hover-show .buy-now{
-		bottom: 15px;
-	}
-	#recommend-fragment ul li .hover-show .by-cart button{
-		display: inline-block;
-		width: 38px;
-		height: 38px;
-		border-radius: 100%;
-		background: #fff;
-		line-height: 38px;
-		margin-bottom: 5px;
-		cursor: pointer;
-		border: none;
-		z-index: 100;
-		position: relative;
-	}
-	#recommend-fragment ul li .hover-show .buy-now button{
-		display: inline-block;
-		width: 90px;
-		height: 34px;
-		text-align: center;
-		font-size: 14px;
-		border-radius: 4px;
-		background: #df1b0f;
-		line-height: 34px;
-		color: #fff;
-		cursor: pointer;
-		border: none;
-		z-index: 100;
-		position: relative;
-	}
-	#recommend-fragment ul li .hover-show .buy-now button:hover{
-		background: #f00;
-	}
-	#recommend-fragment ul li a.href{
-		display: inline-block;
-		position: relative;
-		z-index: 10;
-		width: 100%;
-		text-align: center;
-		height: 260px;
-	}
+    width: 1190px;
+    margin: 0 auto;
+  }
+  .recommend-list{
+    width: 100%;
+    margin: 0 auto;
+    display: inline-block;
+  }
+  #recommend-fragment ul{
+    width: 100%;
+    margin: 0 auto;
+    display: inline-block;
+    -webkit-padding-start: 0;
+  }
+  #recommend-fragment ul li{
+    float: left;
+    width: 218px;
+    height: 260px;
+    border: #d2d2d2 1px solid;
+    position: relative;
+    overflow: hidden;
+    margin-right: 25px;
+    margin-bottom: 20px;
+  }
+  #recommend-fragment ul li:nth-child(5n){
+    margin-right: 0;
+  }
+  #recommend-fragment ul li .img{
+    height: 175px;
+    text-align: center;
+    line-height: 170px;
+  }
+  #recommend-fragment ul li .img img{
+    max-width: 120px;
+    max-height: 120px;
+  }
+  #recommend-fragment ul li .content{
+    width: 100%;
+    margin: 0 auto;
+  }
+  #recommend-fragment ul li .content p{
+    width: 90%;
+    display: inline-block;
+    line-height: 22px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0;
+    padding-left: 10px;
+  }
+  #recommend-fragment ul li .content p.price{
+    color: #ff9000;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .color666{
+    color: #666;
+  }
+  #recommend-fragment ul li .hover-show{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: rgba(80,120,203,.85);
+    padding: 30px 10px;
+  }
+  #recommend-fragment ul li:hover .hover-show{
+    top: 0;
+    transition: top .5s ease-in;
+  }
+  #recommend-fragment ul li .hover-show div{
+    width: 100%;
+    margin: 0 auto;
+    text-align: left;
+    color: #fff;
+    line-height: 25px;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  #recommend-fragment ul li .hover-show .title{
+    font-size: 18px;
+    margin-top: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-bottom: 0;
+  }
+  #recommend-fragment ul li .hover-show .type{
+    font-size: 14px;
+  }
+  #recommend-fragment ul li .hover-show .hr{
+    text-align: center;
+    margin-top: 5px;
+  }
+  #recommend-fragment ul li .hover-show .hr span{
+    font-size: 16px;
+    position: relative;
+  }
+  #recommend-fragment ul li .hover-show .hr span:before,#recommend-fragment ul li .hover-show .hr span:after{
+    content: '';
+    position: absolute;
+    display: inline-block;
+    width: 65px;
+    height: 1px;
+    background: #fff;
+    top: 10px;
+  }
+  #recommend-fragment ul li .hover-show .hr span:before{
+    left: 53px;
+  }
+  #recommend-fragment ul li .hover-show .hr span:after{
+    right: 53px;
+  }
+  #recommend-fragment ul li .hover-show .price{
+    font-size: 20px;
+    text-align: center;
+    line-height: 48px;
+  }
+  #recommend-fragment ul li .hover-show .by-cart,#recommend-fragment ul li .hover-show .buy-now{
+    text-align: center;
+    position: absolute;
+    left: 0;
+  }
+  #recommend-fragment ul li .hover-show .by-cart{
+    bottom: 50px;
+  }
+  #recommend-fragment ul li .hover-show .buy-now{
+    bottom: 15px;
+  }
+  #recommend-fragment ul li .hover-show .by-cart button{
+    display: inline-block;
+    width: 38px;
+    height: 38px;
+    border-radius: 100%;
+    background: #fff;
+    line-height: 38px;
+    margin-bottom: 5px;
+    cursor: pointer;
+    border: none;
+    z-index: 100;
+    position: relative;
+  }
+  #recommend-fragment ul li .hover-show .buy-now button{
+    display: inline-block;
+    width: 90px;
+    height: 34px;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 4px;
+    background: #df1b0f;
+    line-height: 34px;
+    color: #fff;
+    cursor: pointer;
+    border: none;
+    z-index: 100;
+    position: relative;
+  }
+  #recommend-fragment ul li .hover-show .buy-now button:hover{
+    background: #f00;
+  }
+  #recommend-fragment ul li a.href{
+    display: inline-block;
+    position: relative;
+    z-index: 10;
+    width: 100%;
+    text-align: center;
+    height: 260px;
+  }
 </style>