<template>
|
<view class="content">
|
<view class="header">
|
<text class="title">{{ user.name }}</text>
|
<text class="subtitle">{{ user.dept }} · {{ user.role }}</text>
|
</view>
|
<view class="grid">
|
<view class="grid-item" @click="goPending">
|
<view class="icon-box">
|
<uni-icons type="list" color="#1E88E5" size="48"></uni-icons>
|
</view>
|
<text class="grid-label">待处理</text>
|
</view>
|
<view class="grid-item" @click="goReport">
|
<view class="icon-box">
|
<uni-icons type="compose" color="#26A69A" size="48"></uni-icons>
|
</view>
|
<text class="grid-label">上报</text>
|
</view>
|
<view class="grid-item" @click="goSchedule">
|
<view class="icon-box">
|
<uni-icons type="calendar" color="#FF9800" size="48"></uni-icons>
|
</view>
|
<text class="grid-label">日程</text>
|
</view>
|
</view>
|
<BottomTabBar active="mine" />
|
</view>
|
</template>
|
|
<script>
|
import BottomTabBar from '@/components/BottomTabBar.vue'
|
export default {
|
name: 'MineFunctions',
|
components: { BottomTabBar },
|
data() {
|
const storageUser = uni.getStorageSync('userInfo') || {}
|
const user = {
|
name: storageUser.name || '张三',
|
dept: storageUser.dept || '项目管理部',
|
role: storageUser.role || '审核员'
|
}
|
return { user }
|
},
|
methods: {
|
goPending() {
|
uni.navigateTo({ url: '/subpackage/user/pending' })
|
},
|
goReport() {
|
uni.navigateTo({ url: '/subpackage/manager/report' })
|
},
|
goSchedule() {
|
uni.navigateTo({ url: '/subpackage/manager/schedule' })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.content {
|
width: 100%;
|
min-height: 100vh;
|
background-color: #f5f7fa;
|
padding-bottom: 120rpx;
|
}
|
.navbar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 30rpx;
|
height: 88rpx;
|
background: linear-gradient(90deg, #1E88E5, #26A69A);
|
color: #fff;
|
}
|
.navbar-title { font-size: 36rpx; font-weight: 600; }
|
.header {
|
padding: 30rpx;
|
}
|
.title { font-size: 36rpx; font-weight: 700; color: #333; }
|
.subtitle { margin-top: 8rpx; font-size: 26rpx; color: #666; }
|
.grid {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 0 20rpx;
|
}
|
.grid-item {
|
width: 33.33%;
|
padding: 20rpx;
|
}
|
.icon-box {
|
width: 180rpx;
|
height: 180rpx;
|
border-radius: 16rpx;
|
background-color: #fff;
|
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 0 auto;
|
}
|
.grid-label {
|
text-align: center;
|
margin-top: 12rpx;
|
font-size: 26rpx;
|
color: #333;
|
}
|
</style>
|
