sooka_consult_uniapp/pages/highServer/service/service.vue

<template>
	<view class="container">
		<view class="titleLeft">
			<em class="iconfont icon--fuwu"></em>
			高频服务
		</view>
		<view class="gpfwNav">
			<ul>
				<li>
					<view class="lvxd"><em class="iconfont icon-jurassic_nav"></em></view>
					<span>旅游向导</span>
				</li>
				<li>
					<view class="xlzx"><em class="iconfont icon-xinlizixun"></em></view>
					<span>心里咨询</span>
				</li>
				<li>
					<view class="xswz"><em class="iconfont icon-wenzhen"></em></view>
					<span>线上问诊</span>
				</li>
				<li>
					<view @tap="goCooperative" class="gxs"><em class="iconfont icon-gongxiaoshelogo"></em></view>
					<span @tap="goCooperative">供销社</span>
				</li>
				<li>
					<view class="xlzx"><em class="iconfont icon-linshijiuzhu"></em></view>
					<span>帮扶救助</span>
				</li>
				<li>
					<view class="xswz"><em class="iconfont icon-zhishi1"></em></view>
					<span>知识库</span>
				</li>
				<li>
					<view class="lvxd"><em class="iconfont icon-zhibo"></em></view>
					<span>直播带货</span>
				</li>
				<li>
					<view class="more"><em class="iconfont life-pic"></em></view>
					<span>生活服务</span>
				</li>
			</ul>
		</view>
		<view class="titleLeft titleLeftSecond" style="margin-left: 13%;">
			<em class="iconfont"></em>
			特色服务
		</view>
		<view class="gpfwNav specialService">
			<ul>
				<li>
					<view @tap="goLoveAtVillage" class="xchl"><em class="iconfont marriage-pic"></em></view>
					<span @tap="goLoveAtVillage">乡村婚恋</span>
				</li>
				<li>
					<view @tap="goLegalService" class="flfw"><em class="iconfont legal-pic"></em></view>
					<span @tap="goLegalService">法律服务</span>
				</li>
				<li>
					<view @tap="goFinancialInfrastructure" class="jrjj"><em class="iconfont system-pic"></em></view>
					<span @tap="goFinancialInfrastructure">金融基建</span>
				</li>
			</ul>
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			goCooperative() {
				uni.navigateTo({
					url: '/pages/highServer/cooperative/cooperative'
				});
			},
			goLoveAtVillage() {
				uni.navigateTo({
					url: '/pages/specialService/loveAtVillage/loveAtVillage'
				});
			},
			goLegalService() {
				uni.navigateTo({
					url: '/pages/specialService/legalService/legalService'
				});
			},
			goFinancialInfrastructure() {
				uni.navigateTo({
					url: '/pages/specialService/financialInfrastructure/financialInfrastructure'
				});
			},
		}
	}
</script>

<style>
	@import 'service.css';
	.marriage-pic{
		background: url('../../../static/images/more/marriage.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.legal-pic{
		background: url('../../../static/images/more/legal.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.system-pic{
		background: url('../../../static/images/more/system.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.specialService-pic{
		background: url('../../../static/images/more/specialService.png') 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.life-pic{
		background: url('../../../static/images/more/lifeHelp.png') 0 0 no-repeat;
		background-size: 80% 80%;
		margin: 10% !important;
	}
	.titleLeftSecond::after{
		content:'';
		left: -109px;
		width: 12vw;
		background: url('../../../static/images/more/specialService.png') 0 0 no-repeat;
		background-size: 93% 93%;
		position: relative;
	}
	.gpfwNav ul li view.xchl{
		background: none;
	}
	.gpfwNav ul li view.flfw{
		background: none;
	}
	.gpfwNav ul li view.jrjj{
		background: none;
	}
	.specialService{
		width: 100% !important;
	}
	.specialService li{
		width: 20vh;
	}
	.specialService li view{
		width: 100%;
	}

</style>