上传无忧服务

pages_order/service/carefree.vue

@@ -1,8 +1,44 @@
 <template>
 	<!-- 无忧服务 -->
 	<view class="page">
+		<navbar title="无忧服务" leftClick @leftClick="$utils.navigateBack" />
+		<view class="picture" >
+			<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image>
+		</view>
+		<view class="serve">
+			<view class="word">
+				无忧服务
+			</view>
+			<view class="list">
+				<view class="button1">
+					<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image>
+					<view class="">
+						瓷都美食
+					</view>
+				</view>
+				<view class="button2">
+					<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image>
+					<view class="">
+						精品民宿
+					</view>
+				</view>
+				<view class="button3">
+					<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image>
+					<view class="">
+						无忧租车
+					</view>
+				</view>
+				<view class="button4">
+					<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image>
+					<view class="">
+						我要研学
+					</view>
+				</view>
+			</view>
+		</view>
 		
-	</view>
+		<tabber/>
+	</view>	
 </template>
 
 <script>
@@ -18,6 +54,44 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+.page{
+	.picture{
+		width: 100%;
+		image{
+			width: 100%;
+			height: 600rpx;
+		}
+	}
+	.serve{
+		.word{
+			font-size: 32rpx;
+			font-weight: 700;
+			margin: 20rpx;
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 30rpx;
+			&>view{
+				color: white;
+				width: 335rpx;
+				height: 200rpx;
+				margin: 20rpx;
+				background-color: $uni-color;
+				border-radius: 16rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				font-weight: 700;
+				image{
+					width: 80rpx;
+					height: 80rpx;
+				}
+			}
+			
+		}
+	}
+}
 </style>