uni-zhks-app/components/w-mine-services/w-mine-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_salary()">
						<view class="item_icon">
							<image src="./icon/w_2_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" @click="go_invoice()">
						<view class="item_icon">
							<image src="./icon/w_2_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_2_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">
						<view class="item_icon">
							<image src="./icon/w_2_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">
						<view class="item_icon">
							<image src="./icon/w_2_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>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			go_invoice(){
				uni.navigateTo({
					url: '../../w-invoice/w-invoice',
				})
			},
			go_salary(){
				uni.navigateTo({
					url: '../../w-salary/w-salary',
				})
			}
		
		}
		
	}
</script>

<style lang="scss">
	.mine{
		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/section2.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>