首页布局压缩

pages/peanut/home.vue

@@ -3,12 +3,14 @@
 		<!-- <z-nav-bar backState="2000" title="首页"></z-nav-bar> -->
 		<view class="home_bg">
 			<view class="" style=" ">
-				<view class="icon_hua">
-					<image src="../../static/icon/home_icon_3.png" mode="aspectFit" class="icon_hua_1"></image>
-				</view>	
-				<view class="hehan">
-					<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
-				</view>	
+				
+					<view class="icon_hua">
+						<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
+					</view>	
+					<view class="hehan">
+						<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
+					</view>	
+							
 				<view class="fiveIcon flexbox" >
 					<div class="item item1" @click="onPageJump('../acupoint/acupoint')">
 						<image src="../../static/icon/five1.png" mode="aspectFit" ></image>
@@ -50,23 +52,23 @@
 		<!-- <view class="home_nar" v-if="showEbook"> -->
 		<view class="home_nar">	
 				<view class="hn_cl_tit shuguan" @click="onPageJump('../clock/index')">
-					<image src="../../static/icon/home1.png" mode="aspectFit"></image>
+					<image src="../../static/icon/home1-1.png" mode="aspectFit"></image>
 					<!-- <text>打 卡</text> -->
 				</view>	
 						
 			<view  class="hn_cl_tit dianzishu" @click="onPageJump('../listen/home')">
-				<image src="../../static/icon/home2.png" mode="aspectFit"></image>
+				<image src="../../static/icon/home2-1.png" mode="aspectFit"></image>
 				<!-- <text>听 书</text> -->
 			</view>			
 			
 			<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->			
 			<view class="hn_cl_tit shuping" @click="onPageJump('../comments/commentsList')">
-				<image src="../../static/icon/home3.png" mode="aspectFit"></image>
+				<image src="../../static/icon/home3-1.png" mode="aspectFit"></image>
 				<!-- <text>书 评</text> -->
 			</view>
 			
 			<view class="hn_cl_tit chaoshi" @click="onPageJump('../talkBook/talkBook')">
-				<image src="../../static/icon/home4.png" mode="aspectFit"></image>
+				<image src="../../static/icon/home4-1.png" mode="aspectFit"></image>
 				<!-- <text>讲 书</text> -->
 			</view>		
 		</view>
@@ -125,14 +127,14 @@
 			</view>
 		</view> -->
 
-		<view class="head_line" style="margin-top: -20rpx;">
+		<view class="head_line" style="background-color: #fff;">
 			<b></b>
 			<text>新书上市</text>
 			<!-- <i @click="onBookMore('New')">查看更多 ></i> -->
 		</view>
 		
 		<view class="newBook">			
-			<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10">
+			<scroll-view class="scroll-view_H " scroll-x="true" scroll-left="10" style="margin-top: 0 !important;">
 				<view :class="['item']"  v-for="(item,index) in newBookList" :key="index">
 						<view class="videoBox" @click="goDetail(item.productId)">
 							<image  v-if="item.productImages != ''" :src="item.productImages" mode="scaleToFill"></image>
@@ -727,23 +729,23 @@
 	.ProTabs{
 		// margin: 20rpx 0; 
 	padding:0 20rpx;
-		text{padding: 12rpx 14rpx; font-size: 32rpx;  border-radius: 10rpx; overflow: hidden; 
+		text{padding: 8rpx 14rpx; font-size: 32rpx; display: inline-block; border-radius: 10rpx; overflow: hidden; 
 		// background-color: #eee;
 		 color: #55aa7f; margin-right: 10rpx;}
 		text.cur{background-color:#55aa7f ; color: #fff;}
 	}
-	.newBook{margin-top: 20rpx;}
+	// .newBook{margin-top: 10rpx;}
 	.scroll-view_H{background-color: #fff;white-space: nowrap;
-		 padding:10rpx ; }
+		 padding:10rpx ; margin-top: 12rpx;}
 	.scroll-view_H{ 
-		.item { padding: 10rpx; overflow: hidden; display: inline-block;
+		.item { padding: 10rpx; overflow: hidden; display: inline-block; padding-bottom: 0;
 			width: 180rpx !important; margin-right: 20rpx;  border-radius: 10rpx;
 			.videoBox{ 
 				image{display: block; width:150rpx; 
 				height: 170rpx; 
 				}
 			}
-			.bookName{display: block; margin-top: 20rpx;   color: #666; font-size: 24rpx; white-space: nowrap;					
+			.bookName{display: block; margin-top: 6rpx;   color: #666; font-size: 24rpx; white-space: nowrap;					
 		overflow-x: hidden; overflow: hidden;
 		text-overflow: ellipsis;}
 		}
@@ -751,7 +753,8 @@
 	}
 	.flexbox{display: flex;}
 	.head_line {
-		margin: 20rpx 0 0 0;
+		padding-top: 8rpx;
+		margin: 12rpx 0 0 0;
 
 
 		b {
@@ -793,8 +796,8 @@
 			image{width: 150rpx; height: 80rpx;}
 		}
 		.icon_hua{width: 100%; text-align: center; display: block;
-		image{width: 150rpx; height: 150rpx;  margin: 0 auto;}
-		}
+				image{width: 150rpx; height: 150rpx;  margin: 0 auto;}
+				}
 		.search_box { margin: 0 auto; margin-top: 20rpx;  align-items: center;
 			width: calc(100% - 30rpx);   margin-top: 0;
     margin-bottom: 20rpx;
@@ -828,8 +831,10 @@
 			font-size: 30rpx; color: #fff; 
 		}
 }
-	.home_nar { 
-		margin: 10rpx 20rpx; justify-content: space-between;
+	.home_nar {
+		background-color: #fff;
+		padding: 20rpx 30rpx;
+		 justify-content: space-between;
 		display: flex;
 		color: #333; 
 		 margin-bottom: 0;
@@ -839,18 +844,18 @@
 		// .chaoshi{background-color:#fff2d8 ;  border: 2px solid #ede6d3;	}
 		// .shuping{ background-color: #d6ffda; border: 2px solid #bae9bf;}
 		// .shuguan{ background-color:#e3f9f9 ;  border: 2px solid #d7eced; }
-		.hn_cl_tit { padding-bottom: 10rpx;
+		.hn_cl_tit { 
 			// width: 23%;
 			width: 31%; 
 			text-align: center;			 
-			 border-radius: 20rpx ;	padding-top: 10rpx;	
+			 border-radius: 20rpx ;		
 			// line-height: 110upx;
 			//display: flex;
 			align-content: center;
 			justify-content: center;
 			image {				
-				width:90%;
-				height:156rpx;
+				width:120rpx;
+				height:120rpx;
 				display: block;
 				margin: 0 auto;
 				// margin: 0 20rpx;
@@ -1119,13 +1124,13 @@
 
 	.goods {
 		width: 100%;
-	margin:18rpx 0 50rpx 0;
+	margin:0 0 50rpx 0; background-color: #fff;
 
 		.goodsItem {
 			display: inline-block;
 			width: 46%;
 			border-radius: 20rpx;
-			padding: 25rpx 25rpx 20rpx 25rpx;
+			padding: 25rpx; padding-bottom: 5rpx;
 			margin: 0 20rpx 20rpx 20rpx;
 			background-color: #fff;
 			border: 1px solid #eee;
@@ -1140,12 +1145,12 @@
 
 				.goodsName {
 					margin-top: 10rpx;
-					font-size: 30rpx;
+					font-size: 28rpx;
 					// font-weight: bold;
 				}
 
 				.goodsPrice {
-					font-size: 30rpx;
+					font-size: 28rpx;
 					margin: 5rpx 0 0 3rpx;					
 					display: flex; justify-content: space-between;
 					.price{