sooka_consult_uniapp/pages/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 class="gxs" @tap="goCooperative"><em class="iconfont icon-gongxiaoshelogo"></em></view>
					<span @tap="goLoveAtVillage">供</span>
					<span @tap="goLegalService">销</span>
					<span @tap="goFinancialInfrastructure">社</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 class="xchl"><em class="iconfont marriage-pic"></em></view>
					<span>乡村婚恋</span>
				</li>
				<li>
					<view class="flfw"><em class="iconfont legal-pic"></em></view>
					<span>法律服务</span>
				</li>
				<li>
					<view class="jrjj"><em class="iconfont system-pic"></em></view>
					<span>金融基建</span>
				</li>
			</ul>
		</view>

	</view>
</template>

<script>
</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: -121px;
		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>