206 lines
4.4 KiB
Vue
206 lines
4.4 KiB
Vue
<template>
|
||
<view class="home-container">
|
||
<view v-for="type in 4" :key="type" class="section-container">
|
||
<view class="section-card">
|
||
<text class="section-title">{{ getSectionTitle(type) }}</text>
|
||
<view class="grid-container">
|
||
<view
|
||
v-for="(item, index) in getItemsByType(type)"
|
||
:key="index"
|
||
class="grid-item"
|
||
@click="gridCheck(item)"
|
||
>
|
||
<image
|
||
class="grid-icon"
|
||
:src="'../../static/images/material-icons/' + item.icon + '.svg'"
|
||
></image>
|
||
<text class="grid-text">{{ item.name }}</text>
|
||
</view>
|
||
<!-- 当一行不满4个时，添加占位元素以保持布局 -->
|
||
<view
|
||
v-for="index in (4 - getItemsByType(type).length % 4) % 4"
|
||
:key="`placeholder-${index}`"
|
||
class="grid-item placeholder"
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="section-gap" v-if="type < 4"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 页面按钮参数
|
||
gridItemList: [{
|
||
name: '仓库配料',
|
||
icon: 'warehouse-material',
|
||
url: '/pages/materialManagement/MaterialProductionInput/MaterialProductionInput',
|
||
type: 1,
|
||
},
|
||
{
|
||
name: '车间叫料',
|
||
icon: 'workshop-call-material',
|
||
url: '/pages/materialManagement/MaterialRequisition/MaterialRequisition',
|
||
type: 1,
|
||
},
|
||
{
|
||
name: '车间进料',
|
||
icon: 'workshop-feed-material',
|
||
url: '/pages/materialManagement/MaterialFeeding/MaterialFeeding',
|
||
type: 1,
|
||
},
|
||
{
|
||
name: '成品入库',
|
||
icon: 'finished-product-inbound',
|
||
url: '/pages/materialManagement/MaterialWarehousing/MaterialWarehousing',
|
||
type: 2,
|
||
},
|
||
{
|
||
name: '进箱',
|
||
icon: 'into-box',
|
||
url: '/pages/materialManagement/package/package',
|
||
type: 3,
|
||
},
|
||
{
|
||
name: '全点位移动',
|
||
icon: 'full-position-move',
|
||
url: '/pages/materialManagement/AGVRemoteControl/AGVRemoteControl',
|
||
type: 4,
|
||
},
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
gridCheck(item) {
|
||
if (item.url === '') {
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: item.url
|
||
});
|
||
},
|
||
getItemsByType(type) {
|
||
return this.gridItemList.filter(item => item.type === type);
|
||
},
|
||
getSectionTitle(type) {
|
||
const titles = ['', '原材料', '辅助材料', '油漆', 'AGV控制'];
|
||
return titles[type] || '';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
/* 主容器 */
|
||
.home-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #f0f2f5 0%, #e1e5ee 100%);
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 板块容器 */
|
||
.section-container {
|
||
width: 100%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
/* 板块卡片 */
|
||
.section-card {
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 10rpx;
|
||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
/* 板块标题 */
|
||
.section-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin: 0 0 20rpx 10rpx;
|
||
color: #2c3e50;
|
||
letter-spacing: 1rpx;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 网格容器 */
|
||
.grid-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 网格项 */
|
||
.grid-item {
|
||
width: 24%; /* 一行4个，每个占24%宽度，留有间隙 */
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 网格项悬停效果 */
|
||
.grid-item:hover {
|
||
transform: translateY(-4rpx);
|
||
box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
/* 网格项点击效果 */
|
||
.grid-item:active {
|
||
transform: scale(0.96);
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 图标 */
|
||
.grid-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
/* 文字 */
|
||
.grid-text {
|
||
font-size: 28rpx;
|
||
color: #4a5568;
|
||
letter-spacing: 0.5rpx;
|
||
line-height: 1.4;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 板块间隔 */
|
||
.section-gap {
|
||
height: 40rpx;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media screen and (max-width: 360px) {
|
||
.grid-item {
|
||
width: 23%;
|
||
}
|
||
|
||
.grid-icon {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.grid-text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
</style> |