158 lines
3.2 KiB
Vue
158 lines
3.2 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<scroll-view scroll-y="true" class="list">
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="cardm" v-for="(v,i) in arrlist" :key='i' @click="config(i)"
|
|||
|
|
:style="{border: cardtarget === i? '4rpx dashed #1083F8': '4rpx solid transparent',backgroundColor:cardtarget === i?`#F9FCFF`:``}">
|
|||
|
|
<view class="hldyimg tp">
|
|||
|
|
<image :src="leftarraytarget==1?'/static/shouye/hldy.png':'/static/shouye/ck.png'" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="name">
|
|||
|
|
{{ v.areaFlag=="1"?``:`库房` }}
|
|||
|
|
<text v-if="v.areaFlag!='1'"></text>
|
|||
|
|
{{v.nuName}}
|
|||
|
|
</view>
|
|||
|
|
<view class="ids" v-if="v.nuId"> NUID：{{v.nuId}}</view>
|
|||
|
|
<view v-if="leftarraytarget==1">
|
|||
|
|
<view class="kx" v-if="v.status=='0'||v.status=='3'">空闲</view>
|
|||
|
|
<view class="bkx" v-else>
|
|||
|
|
<image src="/static/shouye/old.png" mode="aspectFill"></image>
|
|||
|
|
<text>{{ v.elderInfo?.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="bkx" >
|
|||
|
|
<image src="/static/shouye/yg.png" mode="aspectFill"></image>
|
|||
|
|
<text>{{ v.fzr }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
onMounted,
|
|||
|
|
onBeforeUnmount,
|
|||
|
|
computed,
|
|||
|
|
nextTick,
|
|||
|
|
watch
|
|||
|
|
} from 'vue';
|
|||
|
|
const emit = defineEmits(['config'])
|
|||
|
|
const props = defineProps({
|
|||
|
|
arrlist: {
|
|||
|
|
type: Array,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
cardtarget: {
|
|||
|
|
type: String
|
|||
|
|
},
|
|||
|
|
show: {
|
|||
|
|
type: Boolean
|
|||
|
|
},
|
|||
|
|
leftarraytarget:{
|
|||
|
|
type:Number
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const config = (e)=>{
|
|||
|
|
emit('config',e)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.list{
|
|||
|
|
width: 88vw;
|
|||
|
|
height: 85vh;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|||
|
|
.cardm{
|
|||
|
|
width: 21vw;
|
|||
|
|
height: 15.8vw;
|
|||
|
|
background: rgba(255, 255, 255, 0.9);
|
|||
|
|
border-radius: 1.6vw;
|
|||
|
|
margin-top: 1.6vw;
|
|||
|
|
position: relative;
|
|||
|
|
.bkx{
|
|||
|
|
width: 3vw;
|
|||
|
|
height: 6vw;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 1.4vw;
|
|||
|
|
right: 1.6vw;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
image{
|
|||
|
|
width: 2vw;
|
|||
|
|
height: 2vw;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-bottom: 0.3vw;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 1vw;
|
|||
|
|
color: #888888;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.kx{
|
|||
|
|
width: 3.6vw;
|
|||
|
|
height: 1.8vw;
|
|||
|
|
background: #E5E5E5;
|
|||
|
|
border-radius: 0.9vw;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 1.1vw;
|
|||
|
|
color: #555555;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 1.5vw;
|
|||
|
|
top: 1.5vw;
|
|||
|
|
}
|
|||
|
|
.hldyimg{
|
|||
|
|
width: 6.5vw;
|
|||
|
|
height: 6.5vw;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 1.4vw;
|
|||
|
|
left: 1.6vw;
|
|||
|
|
}
|
|||
|
|
.name{
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 1.6vw;
|
|||
|
|
color: #333333;
|
|||
|
|
top: 10.5vw;
|
|||
|
|
left: 1.7vw;
|
|||
|
|
position: absolute;
|
|||
|
|
max-width: 18vw;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
text{
|
|||
|
|
height: 1.3vw;
|
|||
|
|
width: 1px;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
font-size: 1.3vw;
|
|||
|
|
margin: 0 1vw;
|
|||
|
|
border-left: 2px solid rgba(153, 153, 153, 0.6);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.ids{
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 1.2vw;
|
|||
|
|
color: #999999;
|
|||
|
|
bottom: 1.2vw;
|
|||
|
|
left: 1.7vw;
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tp image{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|