This commit is contained in:
lcw
2025-10-09 21:33:58 +08:00
parent 93c711dca6
commit 5e18952b55
69 changed files with 421 additions and 152 deletions

View File

@ -1,7 +1,17 @@
<template>
<div class="warning-card ">
<div class="warning-image flex">
<img :src="item.yjTp" width="65" height="70" />
<el-image style="width: 65px; height: 70px" :src="item.yjTp" :preview-src-list="[item.yjTp]" show-progress>
<template #error>
<div class="image-slot error">
<img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2"/>
<img src="@/assets/images/default_male.png" width="65" height="70" v-else/>
</div>
</template>
</el-image>
<div class="ml10 warning-info">
<div class="flex just-between align-center">
<div class="flex align-center mt4" v-if="item.yjLx == 2">
@ -71,7 +81,7 @@ const changeBG = (str) => {
box-sizing: border-box;
.warning-image {
//
//
// width: 80px;
// height: 100px;
@ -84,7 +94,7 @@ const changeBG = (str) => {
.warning-info {
flex: 1;
.tag {
padding: 1px 6px;
background: #0072FF;
@ -98,6 +108,27 @@ const changeBG = (str) => {
background: #e9e9e9;
}
}
// 图片错误状态样式
.image-slot {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
border-radius: 4px;
}
// 主图错误和预览图错误的样式
.image-slot.error,
.image-slot.viewer-error {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.warning-boder{
border-bottom: 2px dashed #0958b2;
}

View File

@ -1,7 +1,15 @@
<template>
<div class="warning-card flex align-center" :class="changeBG(item.yjJb)">
<div class="warning-image">
<img :src="item.yjTp" width="80" height="120" alt="" />
<el-image style="width: 80px; height:120px" :src="item.yjTp" :preview-src-list="[item.yjTp]" show-progress>
<template #error>
<div class="image-slot error">
<img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2"/>
<img src="@/assets/images/default_male.png" width="65" height="70" v-else/>
</div>
</template>
</el-image>
<!-- <img :src="item.yjTp" width="80" height="120" alt="" /> -->
</div>
<div class="warning-info">
<div class="flex just-between align-center">