uni-zhihuikuangshan/components/t-c-contacts/t-c-contacts.vue

<template>
	<view class="box">
		<view class="ul">
			<view class="li" @click="tankuang()">
				<image src="./icon/bangong.png" mode=""></image>
				<text>办公品领用</text>
			</view>
			<view class="li" @click="tankuang()">
				<image src="./icon/yongyin.png" mode=""></image>
				<text>用印申请</text>
			</view>
			<view class="li" @click="tankuang()">
				<image src="./icon/qingjia.png" mode=""></image>
				<text>请假</text>
			</view>
			<view class="li" @click="tankuang()">
				<image src="./icon/qita.png" mode=""></image>
				<text>其他申请</text>
			</view>
		</view>

		<view class="box_info">
			<view class="box_info_nengyuan">
				<image src="./icon/ICE.png" mode=""></image>
				<text>国家能源集团枣泉煤矿</text>
			</view>
			<view class="box_info_item">
				<view class="box_info_item_li" @click="dianji()">
					<image src="./icon/jiagou.png" mode=""></image>
					<text class="box_info_item_li_text">组织架构</text>
					<uni-icons type="arrowright" class="icons"></uni-icons>
				</view>
				<view class="box_info_item_li">
					<image src="./icon/bumen.png" mode=""></image>
					<text class="box_info_item_li_text">我的部门</text>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			dianji(){
				uni.navigateTo({
					url:"../../origanization/t-c-c-contacts-info/t-c-c-contacts-info"
				})
			},
			tankuang(){
				uni.showToast({
					icon:"none",
					title:"暂未开通"
				})
			}
		},
		onLoad() {

		}
	}
</script>

<style>
	.ul {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding: 20rpx 0px;
	}

	.li {
		width: 20%;
		text-align: center;
	}

	.li>image {
		width: 90rpx;
		height: 90rpx;
		display: block;
		margin: 0 auto;
	}

	.li>text {
		font-size: 28rpx;
	}

	.box_info {
		width: 100%;
		background-color: #fff;
		margin-top: 10px;
	}

	.box_info_nengyuan {
		width: 95%;
		height: 70px;
		line-height: 80px;
		margin: auto;
		display: flex;
		border-bottom: 1px solid #f5f5f5;
	}

	.box_info_nengyuan>image {
		margin-top: 20px;
		width: 80rpx;
		height: 80rpx;
	}

	.box_info_nengyuan>text {
		font-size: 18px;
		font-weight: 800;
		margin-left: 10px;
	}

	.box_info_item {
		width: 90%;
		margin: auto;
	}

	.box_info_item_li {
		display: flex;
		height: 60px;
		line-height: 64px;
		border-bottom: 1px solid #f5f5f5;
	}

	.box_info_item_li>image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 20px;
	}

	.box_info_item_li>.box_info_item_li_text {
		width: 80%;
		font-size: 16px;
		margin-left: 10px;
	}

	.box_info_item_li>.box_info_item_li_img {
		width: 25rpx;
		height: 25rpx;
		margin-top: 25px;
	}
</style>