hldy_app_mini/pages/login/components/homelist.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="kx pd" v-if="v.status=='0'||v.status=='3'">盘点中</view> -->
						<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;
			}
			.pd{
				width: 4.6vw;
				color: #FFFFFF;
				background: #50B8F7;
			}
			.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>