SmartParks_uniapp/pages/sys/workbench/workbench.vue

<template>
	<view class="workbench-container">
		<view class="workbench-header">
			<view class="workbench-topbg"></view>
			<!-- 顶部蓝色背景和搜索栏 -->
			<view class="workbench-search-row">
				<view class="search-bar">
					<image class="search-icon" src="/static/ic_search_gray.png" />
					<input class="search-input" placeholder="搜索" />
				</view>
				<text class="search-btn">搜索</text>
			</view>

			<!-- banner 区域 -->
			<view class="workbench-banner">
				<image class="banner-img" src="/static/ic_work_01.png" />
			</view>
		</view>
		<!-- 常用应用九宫格 -->
		<view class="workbench-grid">
			<view class="grid-item" v-for="(item, idx) in commonApps" :key="idx">
				<image :src="item.icon" class="grid-icon" />
				<text class="grid-text">{{ item.text }}</text>
			</view>
		</view>
		<!-- 全部应用 -->
		<view>
			<view class="all-apps-title">全部应用</view>
			<view class="all-apps-tabs" v-if="false">
				<text v-for="(tab, idx) in tabs" :key="idx" :class="['tab', {active: idx === activeTab}]"
					@click="activeTab = idx">{{ tab }}</text>
			</view>
			<view class="line"></view>
			<view class="workbench-grid">
				<view class="grid-item" v-for="(item, idx) in allApps" :key="idx" @click="handleItemClick(item.url)">
					<image :src="item.icon" class="grid-icon" />
					<text class="grid-text">{{ item.name }}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Workbench',
		data() {
			return {
				commonApps: [{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '审批'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '假勤'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '工单'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '停车'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '保洁'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '邀约'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '会议'
					},
					{
						icon: 'https://picsum.photos/80/80?random=3',
						text: '添加常用'
					}
				],
				tabs: ['最近使用', 'OA 管理', '敏捷开发', '协同办公'],
				activeTab: 0,
				allApps: []
			}
		},
		onLoad() {
			this.getWorkList()
		},
		methods: {
			async getWorkList() {
				let res = await this.$u.api.getFunList({
					"roleid": this.vuex_user.roles[0].roleId
				});
				if (res.code == '200') {
					this.allApps = res.rows
				}
			},
			handleItemClick(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style scoped>
	.workbench-container {
		min-height: 100vh;
		background: #fff;
		padding-bottom: 120rpx;
		display: flex;
		flex-direction: column;
	}

	.workbench-header {
		position: relative;
		height: 463rpx;
		width: 100vw;
		flex-shrink: 0;
	}

	.workbench-topbg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 463rpx;
		background-image: linear-gradient(to bottom, #075EED, #FFFFFF);
		z-index: 0;
	}

	.workbench-search-row {
		position: relative;
		z-index: 3;
		display: flex;
		align-items: center;
		color: #fff;
		padding: 80rpx 44rpx 0 34rpx;
	}

	.search-bar {
		flex: 1;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 56rpx;
	}

	.search-icon {
		width: 27rpx;
		height: 27rpx;
		margin-right: 8rpx;
	}

	.search-input {
		border: none;
		font-size: 26rpx;
		flex: 1;
		color: #000;
	}

	.search-btn {
		color: #fff;
		font-size: 30rpx;
		margin-left: 10rpx;
	}

	.workbench-banner {
		width: 90vw;
		margin: 20rpx auto 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-img {
		height: 293rpx;
	}

	.workbench-grid {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.grid-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.grid-icon {
		width: 98rpx;
		height: 98rpx;
		margin-bottom: 20rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #1D1D1D;
		font-weight: 500;
	}


	.all-apps-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 33rpx;
		margin-left: 35rpx;
	}

	.all-apps-tabs {
		display: flex;
		flex-wrap: wrap;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.tab {
		flex: 1 0 0;
		font-size: 28rpx;
		color: #333333;
		margin-right: 0;
		padding-bottom: 15rpx;
		border-bottom: 4rpx solid transparent;
		text-align: center;
		font-weight: 500;
	}

	.tab.active {
		color: #0090FF;
		border-bottom: 6rpx solid #007CFF;
		font-weight: bold;
		position: relative;
		border-left: 20rpx;
		border-right: 20rpx;
	}

	.all-apps-grid {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		border-radius: 20rpx;
		padding: 0 54rpx 0 54rpx;
	}

	.line {
		background: #DCDCDC;
		height: 2rpx;
		margin-bottom: 40rpx;
	}
</style>