wms_pda/pages/sample/main.vue

<template>
	<view>
		<view class="head">
			<view class="header-wrap">
				<view class="index-header">
					<view class="map-wrap"></view>
					<view class="input-wrap">
						<text class="iconfont">仓库管理</text>
					</view>
					<view class="map-wrap"></view>
				</view>
			</view>
			<view class="blank"></view>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="button-sp-area">
				<br>
				<button type="success" @click="groupDisk()" style="
					border-radius: 50%;width: 120px;
					height: 120px;margin: auto;text-align: center;
					line-height: 120px;background-color: #4bbf73;
					color:#ffffff" class="button">
					入库
				</button>
				<br>
				<button type="primary" @click="normal_out()"
					style="border-radius: 50%;width: 120px;height: 120px;margin: auto;text-align: center;line-height: 120px;border-color: #0039a6;"
					class="button">
					出库</button>
				<br>
				<button type="info" @click="sorting_out()" style="border-radius: 50%;width: 120px;height: 120px;margin: auto;text-align: center;line-height: 120px;border-color: #0039a6;
					background-color: #1f9bcf;color: #ffffff;" class="button">
					分拣</button>
				<br>
				<button type="info" @click="product()" style="border-radius: 50%;width: 120px;height: 120px;margin: auto;text-align: center;line-height: 120px;border-color: #0039a6;
						background-color: #1f9bcf;color: #ffffff;" class="button">
					货物</button>
			</view>
		</view>
	</view>
</template>
<script>
	const updateManager = uni.getUpdateManager();
	export default {
		data() {
			return {
				title: 'button',
				loading: false
			}
		},
		onLoad() {
			this._timer = null;
		},
		onShow() {
			this.clearTimer();
			this._timer = setTimeout(() => {
				this.loading = true;
			}, 300)
		},
		onUnload() {
			this.clearTimer();
			this.loading = false;
		},
		methods: {
			openTypeError(error) {
				console.error('open-type error:', error);
			},
			clearTimer() {
				if (this._timer != null) {
					clearTimeout(this._timer);
				}
			},

			groupDisk: function() {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/group',
					})
				}, 500);
			},
			normal_out: function(code) {
				uni.vibrateShort();
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/sample/normal_out',
					})
				}, 500);
			},
			sorting_out: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						// url: '/pages/sample/tts',
						url: '/pages/sample/sorting_out',
					})
				}, 500);
			},
			product:function(){
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/product',
					})
				}, 500);
			}
		}
	}
</script>

<style>
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.button-sp-area {
		margin: 0 auto;
		width: 60%;
	}

	.mini-btn {
		margin-right: 10rpx;
	}

	.button {
		background-color: #4CAF50;
		/* 设置背景色 */
		color: white;
		/* 设置文字颜色 */
		text-align: center;
		border-radius: 6px;
		/* 添加边角半径 */
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		/* 添加阴影效果 */
		transition: all 0.3s ease;
		/* 过渡动画时间为0.3秒 */
	}

	.button:hover {
		transform: scale(1.1);
		/* 当鼠标悬停在按钮上时放大到原始比例的1.1倍 */
	}
</style>

<style lang="scss">
	$color-base: #0039a6;
	$words-color-base: #333333;
	$words-color-light: #999999;

	.header-wrap {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;

		.index-header {
			height: 88upx;
			line-height: 88upx;
			padding: 0 30upx;
			padding-top: 40upx;
			background-color: $color-base;
			font-Size: 28upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.fanhui {
				color: #fff !important;
				font-size: 28px;
				padding-top: 5px;
				font-weight: 700;
			}

			.lanya {
				color: #fff !important;
				font-size: 28px;
				padding-top: 5px;
			}

			.map-wrap {
				padding-top: 5px;
			}
		}
	}

	.blank {
		height: 126upx;
	}
</style>