FT541-WMS/RuoYi-App-master/pages/out/menu.vue

<template>
	<view class="container">
		<view class="function-list">
			<view class="function-item" @click="navigateTo('/pages/out/ktpout')">
				<view class="icon-box blue">
					<image src="/static/images/tabbar/trayout.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/out/pkout')">
				<view class="icon-box blue">
					<image src="/static/images/tabbar/trayout.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/out/ckMakeSureByTray')">
				<view class="icon-box blue">
					<image src="/static/images/tabbar/readyCheck.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/out/bindShell')">
				<view class="icon-box blue">
					<image src="/static/images/tabbar/readyCheck.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/out/errorout')">
				<view class="icon-box blue">
					<image src="/static/images/tabbar/readyCheck.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/out/move')">
				<view class="icon-box blue">
					<image src="/static/images/tabbar/readyCheck.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/out/appointOut')">
				<view class="icon-box green">
					<image src="/static/images/tabbar/trayout.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);
	}

	&.green {
		background: linear-gradient(135deg, #52c41a, #3a9d0f);
		box-shadow: 0 6rpx 16rpx rgba(82, 196, 26, 0.25);
	}

	&:hover {
		transform: rotate(15deg) scale(1.1);
	}
}

.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>