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 @tap="goLvxd">
					<view class="lvxd"><em class="iconfont icon-jurassic_nav"></em></view>
					<span>旅游向导</span>
				</li>
				<li @tap="goXlzx">
					<view class="xlzx"><em class="iconfont icon-xinlizixun"></em></view>
					<span>心里咨询</span>
				</li>
				<li @tap="goXswz">
					<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>供销社</span>
				</li>
				<li @tap="goBfjz">
					<view class="xlzx"><em class="iconfont icon-linshijiuzhu"></em></view>
					<span>帮扶救助</span>
				</li>
				<li @tap="goZsk">
					<view class="xswz"><em class="iconfont icon-zhishi1"></em></view>
					<span>知识库</span>
				</li>
				<li @tap="goZbdh">
					<view class="lvxd"><em class="iconfont icon-zhibo"></em></view>
					<span>直播带货</span>
				</li>
				<li @tap="goShfw">
					<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'
				});
			},
			goLvxd() {
				uni.navigateTo({
					url: '/pages/highServer/travelGuide/travelGuide'
				});
			},
			goXlzx() {
				uni.navigateTo({
					url: '/pages/highServer/psychology/psychology'
				});
			},
			goXswz() {
				uni.navigateTo({
					url: '/pages/highServer/inquiry/inquiry'
				});
			},
			goBfjz() {
				uni.navigateTo({
					url: '/pages/highServer/help/help'
				});
			},
			goZsk() {
				uni.navigateTo({
					url: '/pages/highServer/knowledge/knowledge'
				});
			},
			goZbdh() {
				uni.navigateTo({
					url: '/pages/highServer/liveBroadcast/liveBroadcast'
				});
			},
			goShfw() {
				uni.navigateTo({
					url: '/pages/highServer/lifeServices/lifeServices'
				});
			},
		}
	}
</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>