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