Files
FT541-WMS/RuoYi-App-master/pages/in/menu.vue

160 lines
4.0 KiB
Vue

<template>
<view class="container">
<view class="function-list">
<!-- <view class="function-item" @click="navigateTo('/pages/in/qualityCheck')">
<view class="icon-box blue">
<image src="/static/images/tabbar/tray121.png" mode="aspectFit" class="icon-image" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="function-text">
<text class="title">入库质检</text>
<text class="desc">物料收货质检入库</text>
</view>
</view> -->
<!-- <view class="function-item" @click="navigateTo('/pages/in/klxin')">
<view class="icon-box blue">
<image src="/static/images/tabbar/tray121.png" mode="aspectFit" class="icon-image" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="function-text">
<text class="title">空料箱入库</text>
<text class="desc">空料箱收货入库</text>
</view>
</view> -->
<!-- <view class="function-item" @click="navigateTo('/pages/in/ktpin')">
<view class="icon-box blue">
<image src="/static/images/tabbar/tray121.png" mode="aspectFit" class="icon-image" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="function-text">
<text class="title">空托盘/料箱入库</text>
<text class="desc">空托盘/料箱扫码入库</text>
</view>
</view> -->
<view class="function-item" @click="navigateTo('/pages/in/bindManypk')">
<view class="icon-box blue">
<image src="/static/images/tabbar/dingdandanjuwenjian-2.png" mode="aspectFit" class="icon-image" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="function-text">
<text class="title">平库入库</text>
<text class="desc">平库收货入库</text>
</view>
</view>
<view class="function-item" @click="navigateTo('/pages/in/bindMany')">
<view class="icon-box blue">
<image src="/static/images/tabbar/list.png" mode="aspectFit" class="icon-image" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="function-text">
<text class="title">物资入库</text>
<text class="desc">托盘绑定物资</text>
</view>
</view>
<!-- <view class="function-item" @click="navigateTo('/pages/in/backIn')">
<view class="icon-box blue">
<image src="/static/images/tabbar/list.png" mode="aspectFit" class="icon-image" style="width: 40rpx; height: 40rpx;"></image>
</view>
<view class="function-text">
<text class="title">退料入库</text>
<text class="desc">退料入库</text>
</view>
</view> -->
</view>
</view>
</template>
<script>
import tab from '@/plugins/tab'
export default {
data() {
return {}
},
methods: {
navigateTo(url) {
tab.navigateTo(url)
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx;
background-color: #f5f7fa;
min-height: 100vh;
}
.function-list {
display: flex;
flex-direction: column;
gap: 24rpx;
}
.function-item {
display: flex;
align-items: center;
background-color: #fff;
padding: 32rpx;
border-radius: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
&:hover {
transform: translateY(-4rpx);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}
&:active {
transform: translateY(0);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}
}
.icon-box {
width: 88rpx;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 32rpx;
transition: all 0.3s ease;
&.blue {
background: linear-gradient(135deg, #409eff, #3a8ee6);
box-shadow: 0 6rpx 16rpx rgba(64, 158, 255, 0.25);
}
&:hover {
transform: rotate(15deg) scale(1.1);
}
}
.icon-image {
width: 44rpx;
height: 44rpx;
transition: all 0.3s ease;
}
.iconfont {
color: #fff;
font-size: 44rpx;
transition: all 0.3s ease;
}
.function-text {
flex: 1;
.title {
font-size: 34rpx;
color: #2c3e50;
font-weight: 600;
margin-bottom: 10rpx;
letter-spacing: 1rpx;
}
.desc {
font-size: 26rpx;
color: #7f8c8d;
letter-spacing: 0.5rpx;
}
}
</style>