uni-zhks-app/components/w-life-services/w-life-services.vue

<template>
	<view>
		<view class="mine">
			<view class="title">
				<view class="title_icon"></view>
				<view class="title_name">
					<text>生活服务</text>
				</view>
				
			</view>
			
			<view class="content">
				<view class="list_item">
					
					<view class="item" @click="go_w_life_detail('gongjijin')">
						<view class="item_icon">
							<image src="./icon/w_3_1.png" mode=""></image>
						</view>
						<view class="item_title">
							<view class="item_title_name">
								<text>公积金查询</text>
							</view>
							<view class="item_title_tips">
								<text>银川住房公积金</text>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="item_icon">
							<image src="./icon/w_3_2.png" mode=""></image>
						</view>
						<view class="item_title">
							<view class="item_title_name">
								<text>生活缴费</text>
							</view>
							<view class="item_title_tips">
								<text>水电费缴纳</text>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="item_icon">
							<image src="./icon/w_3_3.png" mode=""></image>
						</view>
						<view class="item_title">
							<view class="item_title_name">
								<text>话费充值</text>
							</view>
							<view class="item_title_tips">
								<text>发票收据抬头</text>
							</view>
						</view>
					</view>
					
					<view class="item" @click="go_w_life_detail('xiecheng')">
						<view class="item_icon">
							<image src="./icon/w_3_4.png" mode=""></image>
						</view>
						<view class="item_title">
							<view class="item_title_name">
								<text>飞机火车票</text>
							</view>
							<view class="item_title_tips">
								<text>出行无忧</text>
							</view>
						</view>
					</view>
					
					<view class="item" @click="go_w_life_detail('meituan')">
						<view class="item_icon">
							<image src="./icon/w_3_5.png" mode=""></image>
						</view>
						<view class="item_title">
							<view class="item_title_name">
								<text>美团外卖</text>
							</view>
							<view class="item_title_tips">
								<text>不能饿肚子</text>
							</view>
						</view>
					</view>
					
					<view class="item">
						<view class="item_icon">
							<image src="./icon/w_3_6.png" mode=""></image>
						</view>
						<view class="item_title">
							<view class="item_title_name">
								<text>周边服务</text>
							</view>
							<view class="item_title_tips">
								<text>吃喝玩乐</text>
							</view>
						</view>
					</view>
					
									
				
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			go_w_life_detail(type){
				uni.navigateTo({
					url:"../../w-life-detail/w-life-detail?type=" + type
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.mine{
		margin-bottom: 32rpx;
		margin-top: 10rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-top: 31rpx;
		padding-left: 43rpx;
		
		.title{
			display: flex;
			height: 50rpx;
			margin-bottom: 18rpx;
			
			.title_icon{
				width: 56rpx;
				height: 50rpx;
				background-image: url(icon/section3.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
			.title_name{
				margin-left: 21rpx;
				height: 47rpx;
				font-size: 33rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #232627;
				line-height: 47rpx;

			}
		}
		.content{
			box-sizing: border-box;
			
			.list_item{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.item{
					box-sizing: border-box;
					padding: 29rpx 0;
					display: flex;
					
					.item_icon{
						width: 85rpx;
						height: 85rpx;
						image{
							width: 85rpx;
							height: 85rpx;
						}
					}
					.item_title{
						margin-left: 29rpx;
						border-right: 2rpx solid #e8e8e8;
						.item_title_name{
							height: 44rpx;
							font-size: 31rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #232627;
							line-height: 44rpx;

						}
						.item_title_tips{
							width: 221rpx;
							height: 42rpx;
							font-size: 29rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #7D7C7C;
							line-height: 42rpx;

						}
					}
					
					
					
				}
				.item .item_title:nth-child(2n){
					// border-right: none;
				}
				
				
			}
		}
	}
</style>