uni-zhks-app/components/w-one/w-one.vue

<template>
	<view>
		<view class="inner">
			<view class="list_item">
				<view class="item" @click="go_w_infolist()">
					<view class="left">
						<view class="icon">
							<image src="./icon/w_1_1.png" mode=""></image>
						</view>
						<view class="title">
							<view class="name">
								<text>通知公告</text>
							</view>
							<view class="tips">
								<text>矿内紧急通知</text>
							</view>
						</view>
					</view>
					<view class="prev">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="./icon/w_1_2.png" mode=""></image>
						</view>
						<view class="title">
							<view class="name">
								<text>待办工作</text>
							</view>
							<view class="tips">
								<text>85条工作事项需处理</text>
							</view>
						</view>
					</view>
					<view class="prev">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
					
				<view class="item" @click="go_Onduty()">
					<view class="left">
						<view class="icon">
							<image src="./icon/w_1_3.png" mode=""></image>
						</view>
						<view class="title">
							<view class="name">
								<text>值班信息</text>
							</view>
							<view class="tips">
								<text>值班查询</text>
							</view>
						</view>
					</view>
					<view class="prev">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
				
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="./icon/w_1_4.png" mode=""></image>
						</view>
						<view class="title">
							<view class="name">
								<text>会议安排</text>
							</view>
							<view class="tips">
								<text>近期无会议安排</text>
							</view>
						</view>
					</view>
					<view class="prev">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
							
				<view class="item">
					<view class="left">
						<view class="icon">
							<image src="./icon/w_1_5.png" mode=""></image>
						</view>
						<view class="title">
							<view class="name">
								<text>通讯录</text>
							</view>
							<view class="tips">
								<text>全矿人员通讯</text>
							</view>
						</view>
					</view>
					<view class="prev">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			go_Onduty(){
				uni.navigateTo({
				    url: '../../w-Onduty/w-Onduty',
				    animationType: 'fade-in',
				    animationDuration: 200
				});
			},
			go_w_infolist(){
				uni.navigateTo({
				    url: '../../w-infolist/w-infolist',
				    animationType: 'fade-in',
				    animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	.inner{
		.list_item{
			.item{
				display: flex;
				justify-content: space-between;
				
				width: 750rpx;
				height: 144rpx;
				background-color: #fff;
				margin-bottom: 5rpx;
				
				box-sizing: border-box;
				padding-left: 41rpx;
				padding-top: 32rpx;
				padding-right: 27rpx;
				
				.left{
					display: flex;
					.icon{
						width: 81rpx;
						height: 81rpx;
						image{
							width: 81rpx;
							height: 81rpx;
						}
					}
					.title{
						margin-left: 31rpx;
						.name{
							height: 42rpx;
							font-size: 29rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #232627;
							line-height: 42rpx;
					
						}
						.tips{
							height: 39rpx;
							font-size: 27rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #7D7C7C;
							line-height: 39rpx;
					
						}
					}
				}
				
				.prev{
					height: 81rpx;
					line-height: 81rpx;
				}
			}
		}
	}
</style>