上传首页代码优化

pages.json

@@ -2,7 +2,8 @@
 	"pages": [{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "",
+				"navigationBarTextStyle": "white"
 			}
 		},
 		{
@@ -67,6 +68,9 @@
 			},
 			{
 				"path": "mine/help"
+			},
+			{
+				"path": "order/fastCreateOrder"
 			}
 		]
 	}],

pages/index/index.vue

@@ -25,11 +25,18 @@
 		</view>
 		
 		<view class="image-home">
-			<image src="../../static/image/home/2.png" mode=""></image>
+			<uv-swiper 
+				class="uv-swaip"
+				height="350rpx"
+				:list="list" 
+				circular 
+				bgColor="#ffffff">
+			</uv-swiper>
+			<!-- <image src="../../static/image/home/2.png" mode=""></image> -->
 		</view>
 		
 		<view class="building-class">
-			<image src="../../static/image/home/3.png" mode=""></image>
+		<!-- 	<image src="../../static/image/home/3.png" mode=""></image>
 			<image src="../../static/image/home/4.png" mode=""></image>
 			<image src="../../static/image/home/5.png" mode=""></image>
 			<image src="../../static/image/home/6.png" mode=""></image>
@@ -37,11 +44,41 @@
 		<view class="text-building">
 			<text>XX建材</text>
 			<text>XX建材</text>
-			<text>XX建材</text>
-			<text>XX建材</text>
+			<text>XX建材</text> -->
+			<view class="line grid">
+				<uv-grid :col="4" :border="false">
+			
+					<uv-grid-item @click="contactUs">
+						<image class="image" src="../../static/image/home/3.png" mode=""></image>
+						<text class="grid-text">XX建材</text>
+					</uv-grid-item>
+			
+					<uv-grid-item>
+						<image class="image" src="../../static/image/home/4.png" mode=""></image>
+						<text class="grid-text">XX建材</text>
+					</uv-grid-item>
+			
+					<uv-grid-item @click="$utils.redirectTo('/index/cart')">
+						<image class="image" src="../../static/image/home/5.png" mode=""></image>
+						<text class="grid-text">XX建材</text>
+					</uv-grid-item>
+			
+					<uv-grid-item
+						@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
+						<image class="image" src="../../static/image/home/6.png" mode=""></image>
+						<text class="grid-text">XX建材</text>
+					</uv-grid-item>
+				</uv-grid>
+			</view>
 		</view>
 		<view class="hot-building">
 			<text>热卖建材</text>
+		</view>
+		
+		<view class="hot-building"
+		@click="toUrl"
+		style="position: fixed;right: 30rpx;
+		top: 40vh;z-index: 99;">
 			<view class="new-message">
 				你有一条新的快捷下单信息
 			</view>
@@ -52,7 +89,9 @@
 				<image src="../../static/image/home/7.png" mode=""></image>
 			</view>
 		</view>
-		<view class="shop-list">
+		<view class="shop-list"
+		v-for="(item, index) in 20"
+		:key="index">
 			<view class="picture-shop">
 				<image src="../../static/image/home/8.png" mode=""></image>
 			</view>
@@ -65,7 +104,7 @@
 					</view>
 				</view>
 				<view class="bottom-price">
-					<text style="font-size: 45rpx; ">￥38</text>.00元/米
+					<text style="font-size: 40rpx; ">￥38</text>.00元/米
 				</view>
 			</view>
 			<view class="buy-shop">
@@ -88,7 +127,13 @@
 		},
 		data() {
 			return {
-				keyword:''
+				keyword:'',
+				list: [
+					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
+					
+				]
 			}
 		},
 		computed : {
@@ -106,6 +151,12 @@
 			}
 		},
 		methods: {
+			toUrl(){
+				uni.navigateTo({
+					url: '/pages_order/order/fastCreateOrder'
+				})
+				// this.$utils.navigateTo('/pages_order/mine/address')
+			}
 		}
 	}
 </script>
@@ -154,7 +205,7 @@
 					height: 20rpx;
 					width: 15rpx;
 					line-height: 20rpx;
-					left: 20px;
+					left: 40rpx;
 					top: 42rpx;
 				}
 				.eare{
@@ -175,13 +226,13 @@
 				  margin-top: 5rpx;
 				  position: absolute;
 				  top: 42rpx;
-				  left: 65px;
+				  left: 130rpx;
 				}
 			}
 			.search{
 				display: inline-block;
 				position: absolute;
-				top: 8px;
+				top: 16rpx;
 				left: 26%;
 				width: 70%;
 			}
@@ -191,17 +242,13 @@
 	.image-home{
 		z-index: 1;
 		height: 350rpx;
-		width: 100%;
-		image{
-			width: 95%;
-			height: 100%;
-			margin:auto;
-			display: block;
-			margin-top: -100rpx;
-		}                                                         
+		margin: 0 20rpx;
+		margin-top: -90rpx;
+		border-radius: 10rpx;
+		overflow: hidden;                                              
 	}
 	.building-class{
-		height: 150rpx;
+		height: 220rpx;
 		display: flex;
 		justify-content: space-around;
 		align-items: center; /* 垂直居中 */
@@ -209,7 +256,7 @@
 		image{
 			margin-left: 20rpx;
 			margin-right: 20rpx;
-			margin-bottom: -30rpx;
+			margin-bottom: 10rpx;
 			width: 100rpx;
 			height: 100rpx;
 			display: inline-block;
@@ -228,45 +275,46 @@
 		// overflow: hidden;
 	}
 	.hot-building{
-		margin-top: 50rpx;
-		height: 100rpx;
+		margin-top: 25rpx;
+		height: 0rpx;
 		background-color: $uni-bg-color;
 		display: flex;
 		align-items: center;
 		padding-left: 40rpx;
 		font-size: 35rpx;
 		font-weight: 400;
-		.new-message{
+		
+	}
+	.new-message{
+		background-color: #DC2828;
+		border-radius: 20rpx;
+		font-size: 25rpx;
+		color: $uni-bg-color;
+		padding: 0 10rpx;
+		margin-top: 500rpx;
+	}
+	.quick-order{
+		position: relative;
+		width: 230rpx;
+		height: 160rpx;		
+		margin-right: -50rpx;
+		margin-top: 500rpx;
+		image{
+			width: 100%;
+			height: 100%;
+			
+		}
+		.number-order{
 			background-color: #DC2828;
+			position: absolute;
+			font-size: 30rpx;
+			height: 40rpx;
+			width: 40rpx;
+			text-align: center;
 			border-radius: 20rpx;
-			font-size: 25rpx;
-			color: $uni-bg-color;
-			padding: 0 10rpx 0 10rpx;
-			margin-left: 20rpx;
-		}
-		.quick-order{
-			position: relative;
-			width: 230rpx;
-			height: 160rpx;		
-			margin-right: 0rpx;
-			margin-top: 15rpx;
-			image{
-				width: 100%;
-				height: 100%;
-				
-			}
-			.number-order{
-				background-color: #DC2828;
-				position: absolute;
-				font-size: 30rpx;
-				height: 40rpx;
-				width: 40rpx;
-				text-align: center;
-				border-radius: 20rpx;
-				color: #ffffff;
-				top: 10rpx;
-				left: 25rpx;
-			}
+			color: #ffffff;
+			top: 10rpx;
+			left: 25rpx;
 		}
 	}
 	.shop-list{
@@ -276,6 +324,7 @@
 		margin: 30rpx auto;
 		background-color: #ffffff;
 		border-radius: 20rpx;
+		// /deep/
 		.picture-shop{
 			width: 240rpx;
 			height: 100%;
@@ -316,5 +365,6 @@
 			justify-content: center;
 			align-items: center;
 		}
+	
 	}
 </style>