|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -427,27 +439,28 @@
|
|||
>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) {
|
||||
|
|
|
|||
|
|
@ -86,10 +86,34 @@
|
|||
['中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品',
|
||||
'中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品']"
|
||||
@click="typescroll(1,i)">
|
||||
<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);
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 612 KiB After Width: | Height: | Size: 564 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 1020 B |