You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.3 KiB
Vue
96 lines
2.3 KiB
Vue
<template>
|
|
<view class="nav-section">
|
|
<view class="section-title">{{ t('dashboard.functionNav') }}</view>
|
|
<view class="nav-grid">
|
|
<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="handleNavClick(item)">
|
|
<view class="nav-icon" :style="{ backgroundColor: item.bgColor }">
|
|
<text class="nav-icon-text">{{ item.icon }}</text>
|
|
</view>
|
|
<text class="nav-text">{{ t(`dashboard.${item.key}`) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const navList = reactive([
|
|
{ key: 'mold', icon: '🔧', bgColor: '#1a3a5c', path: '/pages_function/mold' },
|
|
{ key: 'equipment', icon: '⚙️', bgColor: '#2d5a87', path: '/pages_function/equipment' },
|
|
{ key: 'keypart', icon: '🔩', bgColor: '#3d7ab5', path: '/pages_function/keypart' },
|
|
{ key: 'spare', icon: '📦', bgColor: '#4a90c2', path: '/pages_function/spare' },
|
|
{ key: 'product', icon: '🧾', bgColor: '#5aa0d2', path: '/pages_function/product' }
|
|
])
|
|
|
|
function handleNavClick(item) {
|
|
const navMap = {
|
|
mold: '/pages_function/pages/mold/index',
|
|
equipment: '/pages_function/pages/equipment/index',
|
|
spare: '/pages_function/pages/spare/index',
|
|
keypart: '/pages_function/pages/keypart/index',
|
|
product: '/pages_function/pages/product/index'
|
|
}
|
|
const url = navMap[item.key]
|
|
if (url) {
|
|
uni.navigateTo({ url })
|
|
} else {
|
|
uni.showToast({ title: t('common.moduleBuilding'), icon: 'none' })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-section {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 28rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #1a3a5c;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.nav-grid {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16rpx;
|
|
|
|
.nav-icon-text {
|
|
font-size: 44rpx;
|
|
}
|
|
}
|
|
|
|
.nav-text {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
</style>
|