仓库

pages/Warehouse/Warehouse.vue

@@ -26,8 +26,9 @@
 			</view>
 			<view class="annotation" :class="'annotation'+(i+1)" v-for="(v,i) in ['付款','采购','结账','拣货','护理单元','中控室']"
 				:key='i'>
-				<view>{{v}}</view>
+				<view> </view>
 				<view class="tp">
+					<text>{{v}}</text>
 					<image src="/static/index/warehouse/y1.png" mode="aspectFill"></image>
 				</view>
 				<view class="tp">
@@ -38,7 +39,10 @@
 			<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
 			<view class="operationbtn">
 				<view v-for="(v,i) in ['请领出库','退货入库','库存盘点','实时监控']" @tap="onTap(i)"
-					:class="beblue === i ? 'click-box-target grad-text' : 'click-box'">{{v}}</view>
+					:class="beblue === i ? 'click-box-target' : 'click-box'">
+						<image :src="beblue === i?'/static/index/warehouse/ku/rq'+i+'.png':'/static/index/warehouse/ku/rs'+i+'.png'" mode="aspectFill"></image>
+						{{v}}
+					</view>
 			</view>
 		</view>
 	</view>
@@ -197,7 +201,7 @@
 		}
 
 		.operationbtn {
-			width: 20vw;
+			width: 22vw;
 			height: 10vw;
 			position: absolute;
 			right: 1.5vw;
@@ -207,7 +211,7 @@
 			flex-wrap: wrap;
 
 			>view {
-				width: 9vw;
+				width: 10vw;
 				height: 4vw;
 				border-radius: 1vw;
 				border: 2rpx solid #D9DADC;
@@ -220,6 +224,11 @@
 				margin: 0 0.3vw;
 				transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease;
 				-webkit-tap-highlight-color: transparent;
+				image{
+					width: 1.6vw;
+					height: 1.6vw;
+					margin-right: .2vw;
+				}
 			}
 
 			.click-box {
@@ -228,7 +237,10 @@
 			}
 
 			.click-box-target {
-				color: transparent;
+				background: #FFFFFF;
+				box-shadow: 0px 0px 3vw 0px rgba(12,102,209,0.33) inset; 
+				// box-shadow: 0rpx 0rpx 3vw 0rpx rgba(38,137,255,0.44) inset;
+				color: rgba(108, 132, 160, 1) !important;
 				animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
 				transform-origin: center center;
 			}
@@ -387,8 +399,8 @@
 		}
 
 		.annotation1 {
-			top: 20.5vw;
-			left: 19vw;
+			top: 21.5vw;
+			left: 19.5vw;
 		}
 
 		.annotation2 {
@@ -397,22 +409,22 @@
 		}
 
 		.annotation3 {
-			top: 23vw;
-			left: 50vw;
+			top: 24vw;
+			left: 49.3vw;
 		}
 
 		.annotation4 {
-			top: 17vw;
-			left: 68vw;
+			top: 18vw;
+			left: 70vw;
 		}
 
 		.annotation5 {
-			top: 32vw;
+			top: 34vw;
 			left: 74vw;
 		}
 
 		.annotation6 {
-			top: 23vw;
+			top: 24vw;
 			right: 6vw;
 		}
 
@@ -426,28 +438,29 @@
 
 			>view {
 				position: relative;
-
-				&:nth-child(1) {
-					width: 7vw;
-					height: 2vw;
-					background: #F2F3F7;
-					box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(182, 186, 196, 0.35);
-					border: 2rpx solid #FFFFFF;
-					font-weight: 400;
-					font-size: 1.3vw;
-					color: #333333;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					z-index: 3;
-				}
-
+ 
 				&:nth-child(2) {
-					width: 4vw;
-					height: 2vw;
+					width: 6.5vw;
+					height: 3.2vw;
 					z-index: 2;
 					margin: -2rpx auto 0;
 					z-index: 2;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					image{
+						position: absolute;
+						top: 0;
+						left: 0;
+					}
+					text{
+						position: relative;
+						font-weight: 400;
+						font-size: 1.1vw;
+						color: #fff;
+						z-index: 3;
+						margin-top: -0.5vw;
+					}
 				}
 
 				&:nth-child(3) {

pages/Warehouse/procurement.vue

@@ -86,10 +86,34 @@
 							 ['中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品',
 							 '中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品']"
 								@click="typescroll(1,i)">
-								{{v}}
+								<image src="/static/index/warehouse/procurement/Purchase/Purchase09.png" mode="aspectFill" v-if="scroll.act1==i"></image>
+								<image src="/static/index/warehouse/procurement/Purchase/Purchase01.png" mode="aspectFill" v-else></image>
+								<text>
+									{{v}}
+								</text>
 							</view>
 						</scroll-view>
 					</view>
+					
+					<view class="anmikc">
+						<view v-for="(v,i) in animArray" :key="i" @click="admiclick(i)">
+							<view>
+								<image :src="v.imgurl" mode="aspectFill" v-if="anmidex!=i"></image>
+								<donghua width="1.5vw" height="1.5vw" :links="v.url" :playing="i === anmidex"
+									v-show="i === anmidex" class="donghua"/>
+							</view>
+							
+								<text>
+									{{v.name}}
+								</text>
+						</view>
+					</view>
+					<view class="serchs">
+						<input type="text" placeholder="物料名称/物料编码/物料简拼" />
+						<view>
+							检索
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -142,6 +166,93 @@
 	   		break;
 	   }
 	 }
+	 // 通用的生成函数
+	 function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
+	 	return Array.from({ length: count }, (_, i) => {
+	 		const idx = pad
+	 			? String(i + startIndex).padStart(2, '0')
+	 			: i + startIndex
+	 		return `${base}/${prefix}${idx}.${ext}`
+	 	})
+	 }
+	 const anmidex = ref(-1)
+	 const admiclick = (i:number)=>{
+		 anmidex.value = i;
+	 }
+	 const animArray = ref([
+	 	{
+	 		url: genPaths(
+	 			'/static/index/warehouse/procurement/store',
+	 			'store0',
+	 			8,    // 张数
+	 			'png',
+	 			1,     // 起始索引为 1
+	 			false  // 不补零
+	 		),
+	 		name:'库存预警',
+			imgurl:'/static/index/warehouse/procurement/store/store01.png'
+	 	},
+	 	{
+	 		url: genPaths(
+	 			'/static/index/warehouse/procurement/procure',
+	 			'procure0',
+	 			7,    // 张数
+	 			'png',
+	 			1,     // 起始索引为 1
+	 			false  // 不补零
+	 		),
+	 		name:'采 购',
+			imgurl:'/static/index/warehouse/procurement/procure/procure01.png'
+	 	},
+	 	{
+	 		url: genPaths(
+	 			'/static/index/warehouse/procurement/Purchase',
+	 			'Purchase0',
+	 			9,    // 张数
+	 			'png',
+	 			1,     // 起始索引为 1
+	 			false  // 不补零
+	 		),
+	 		name:'采购单',
+			imgurl:'/static/index/warehouse/procurement/Purchase/Purchase01.png'
+	 	},
+	 	{
+	 		url: genPaths(
+	 			'/static/index/warehouse/procurement/details',
+	 			'details0',
+	 			7,    // 张数
+	 			'png',
+	 			1,     // 起始索引为 1
+	 			false  // 不补零
+	 		),
+	 		name:'物料详情',
+			imgurl:'/static/index/warehouse/procurement/details/details01.png'
+	 	},
+		{
+			url: genPaths(
+				'/static/index/warehouse/procurement/bound',
+				'bound0',
+				11,    // 张数
+				'png',
+				1,     // 起始索引为 1
+				false  // 不补零
+			),
+			name:'出入库',
+			imgurl:'/static/index/warehouse/procurement/bound/bound01.png'
+		},
+		{
+			url: genPaths(
+				'/static/index/warehouse/procurement/Cart',
+				'Cart0',
+				10,    // 张数
+				'png',
+				1,     // 起始索引为 1
+				false  // 不补零
+			),
+			name:'购物车',
+			imgurl:'/static/index/warehouse/procurement/Cart/Cart01.png'
+		}
+	 ])
 </script>
 
 <style lang="less">
@@ -162,6 +273,73 @@
 		width: 25vw;
 		height:calc(100% - 4vw);
 		margin-top: 4vw;
+		.serchs{
+			width: 23.2vw;
+			height: 3.2vw;
+			background: rgba(255,255,255,.5);
+			border-radius: 1.6vw;
+			display: flex;
+			justify-content: space-between;
+			padding: 0.5vw;
+			align-items: center;
+			input{
+				width: 18vw;
+				height: 2.4vw;
+				font-size: 0.9vw;
+				padding-left: 1.6vw;
+			}
+			view{
+				width: 4.2vw;
+				height: 2.4vw;
+				background: url('/static/index/warehouse/procurement/sh.png')no-repeat;
+				background-size: 100% 100%;
+				border-radius: 1.2vw;
+				border: 1px solid rgba(0, 155, 252, 1); 
+				font-weight: 400;
+				font-size: 1vw;
+				color: #1083F8;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		.anmikc{
+			width: 100%;
+			height: 9vw;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			
+			>view{
+				width: 8vw;
+				height: 3.2vw;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-weight: 400;
+				font-size: .9vw;
+				color: #212327;
+				background: #FFFFFF;
+				margin: .7vw 0;
+				border-radius: 1.6vw;
+				view{
+					margin-right: .4vw;
+					image{
+						width: 1.5vw;
+						height: 1.5vw;
+					}
+					.donghua{
+						margin: 0;
+					}
+				}
+				
+				text{
+					margin-top: 0.1vw;
+					white-space: nowrap;
+				}
+				
+			}
+		}
 		.typeitem{
 			width: 100%;
 			height: 54vh;
@@ -184,9 +362,16 @@
 						display: flex;
 						justify-content: center;
 						align-items: center;
-						padding: 0 1.4vw;
+						padding: 0 0.4vw;
 						margin-bottom: .8vw;
 						text-align: center;
+						text{
+							white-space: nowrap;
+						}
+						>image{
+							width: 1.8vw;
+							height: 1.8vw;
+						}
 					}
 					.act{
 						background: rgba(255,255,255,1) !important;
@@ -321,10 +506,10 @@
 			border-radius: 1.6vw;
 		}
 		.mblbg{
-			width: 23vw;
+			width: 24.5vw;
 			height: 21vw;
 			position: absolute;
-			left: -0.2vw;
+			left: -1vw;
 			bottom: 0.5vw;
 			border-radius: 1.6vw;
 			  filter: blur(15rpx);