Jingde-town-wechat-uniapp/pages_order/service/carefree.vue

<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> -->
			<uv-swiper
			:list="banner.service" 
			indicator
			height="420rpx"
			keyName="imageContent"></uv-swiper>
		</view>
		<view class="serve">
			<view class="word">
				无忧服务
			</view>
			<view class="list">
				<view class="button1">
					<image src="../static/service/carefree/1.png" mode=""></image>
					<view class="">
						瓷都美食
					</view>
				</view>
				<view class="button2">
					<image src="../static/service/carefree/2.png" mode=""></image>
					<view class="">
						精品民宿
					</view>
				</view>
				<view class="button3">
					<image src="../static/service/carefree/3.png" mode=""></image>
					<view class="">
						无忧租车
					</view>
				</view>
				<view class="button4" 
					@click="$utils.navigateTo('/pages_order/service/StudyFurther')">
					<image src="../static/service/carefree/4.png" mode=""></image>
					<view class="">
						我要研学
					</view>
				</view>
			</view>
		</view>
		
		<tabber/>
	</view>	
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed : {
			...mapState(['banner']),
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.page{
	.picture{
		width: 100%;
	}
	.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>