101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
|
<!-- 工作台 -->
|
|
<view>
|
|
<up-grid :col="4" class="work-grid" gap="20px">
|
|
<up-grid-item v-for="(item, index) in workList" :key="index" @tap="handleTap(item)">
|
|
<view class="icon-box" :style="{ backgroundColor: item.bgc_color }">
|
|
<image :src="item.icon" mode="widthFix" class="icon-img" />
|
|
</view>
|
|
<text class="grid-text">{{ item.title }}</text>
|
|
</up-grid-item>
|
|
</up-grid>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup name="work">
|
|
import EntryIcon from '@/static/image/work/entry.png'
|
|
import ExitIcon from '@/static/image/work/exit.png'
|
|
import CheckIcon from '@/static/image/work/check.png'
|
|
import CountIcon from '@/static/image/work/count.png'
|
|
import MachineSettingIcon from '@/static/image/work/machine-setting.png'
|
|
|
|
const workList = [
|
|
{
|
|
name: 'personEntry',
|
|
title: '人员入场',
|
|
icon: 'personEntry',
|
|
bgc_color: '#fee9e9',
|
|
icon: EntryIcon,
|
|
url: '/pages/person-entry/index',
|
|
},
|
|
{
|
|
name: 'personExit',
|
|
title: '人员出场',
|
|
icon: 'personExit',
|
|
bgc_color: '#e6f9f2',
|
|
icon: ExitIcon,
|
|
url: '/pages/person-exit/index',
|
|
},
|
|
{
|
|
name: 'personCheck',
|
|
title: '人员检查',
|
|
icon: 'personCheck',
|
|
bgc_color: '#fff6df',
|
|
icon: CheckIcon,
|
|
url: '/pages/person-check/index',
|
|
},
|
|
{
|
|
name: 'attendance',
|
|
title: '考勤统计',
|
|
icon: 'attendance',
|
|
bgc_color: '#fee9f8',
|
|
icon: CountIcon,
|
|
url: '/pages/att-count/index',
|
|
},
|
|
{
|
|
name: 'machineSetting',
|
|
title: '考勤机设置',
|
|
icon: 'machineSetting',
|
|
bgc_color: '#eaf4d9',
|
|
icon: MachineSettingIcon,
|
|
url: '/pages/machine-setting/index',
|
|
},
|
|
]
|
|
|
|
// 点击跳转
|
|
const handleTap = (item) => {
|
|
uni.navigateTo({
|
|
url: item.url,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.work-grid {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 60rpx 10rpx;
|
|
}
|
|
.icon-box {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background-color: #007aff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.icon-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.grid-text {
|
|
margin-top: 20rpx;
|
|
color: #666464;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
}
|
|
</style>
|