hw-bm-app/pages/workbench/index.vue

<template>
	<view style="background-color: #F2F3F5;">
		<scroll-view scroll-y="true" :style="{height:pageHeight+'px'}" style="position: relative">
			<view class="workbenchIcon"></view>
			<view class="headPortrait"></view>
			<view class="userName">名称</view>
			<view class="department">青岛海威物联科技有限公司</view>
			<Card class="card1" title="全员">
				<view class="viewMore">
					查看更多
				</view>
				<view class="list">
					<view v-for="i in list" class="item" @tap="toLink(i.path)">
						<view class="iconBg" :style="{backgroundColor	:i.color}">
							<image width="100%" class="icon" :src="i.icon" mode="aspectFit"></image>
						</view>
						<view class="name">{{i.name}}</view>
					</view>
				</view>
			</Card>
			<Card class="card card2" title="待办">
			</Card>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		imgUrl
	} from '@/common/config';

	const list = computed(() => {
		return [{
				icon: `${imgUrl}/icon/attendancePunch.png`,
				name: '考勤打卡',
				color: '#E7F8FD',
				path: '/pages/contract/index'
			},
			{
				icon: `${imgUrl}/icon/oa.png`,
				name: 'OA审批',
				color: '#FFEBE9'
			},
		]
	})
	const toLink = (e) => {
		uni.navigateTo({
			url: e
		})
	}

	const pageHeight = ref()
	const sys = uni.getSystemInfoSync()
	onMounted(() => {
		pageHeight.value = sys.windowHeight
	})
</script>

<style scoped lang="scss">
	@import "@/uni.scss";

	.workbenchIcon {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 785rpx;
		background-image: url(#{$img-url}/workbenchIcon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.headPortrait {
		position: absolute;
		top: 120rpx;
		left: 30rpx;
		width: 130rpx;
		height: 130rpx;
		background-image: url(#{$img-url}/headPortrait.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.userName {
		position: absolute;
		top: 145rpx;
		left: 170rpx;
		font-size: 34rpx;
		color: #333;
	}

	.department {
		position: absolute;
		top: 200rpx;
		left: 170rpx;
		font-size: 22rpx;
		color: #666;
	}


	.card1 {
		margin-top: 300rpx;
		position: relative;

		.viewMore {
			position: absolute;
			right: 0%;
			top: 0%;
			width: 240rpx;
			height: 64rpx;
			background-image: url(#{$img-url}/icon/viewMore.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			line-height: 64rpx;
			text-align: right;
			padding-right: 30rpx;
			color: #fff;
			font-size: 24rpx;
		}

		.content {
			.list {
				.item {
					width: 100rpx;
					height: 150rpx;
					display: inline-block;
					margin-right: 76rpx;

					.iconBg {
						width: 100rpx;
						height: 100rpx;
						position: relative;
						border-radius: 10rpx;

						.icon {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 50rpx;
							size: 100%;
							transform: translate(-50%, -50%);
						}
					}

					.name {
						width: 100rpx;
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #333;
						white-space: nowrap;
						text-align: center
					}
				}
			}
		}
	}

	.card2 {
		margin-top: 30rpx;
	}
</style>