You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<el-dialog class="digger-alarm-modal" v-model="show" @close="handleClose">
|
|
<!-- 自定义标题栏 -->
|
|
<template #header="{ close, titleId, titleClass }">
|
|
<div
|
|
class="flex items-center justify-between digger-detail-dialog-header"
|
|
>
|
|
<div class="flex items-center justify-center header-left">
|
|
<div class="header-icon mr-[12px]"></div>
|
|
<p
|
|
class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]"
|
|
>
|
|
钩机详情
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 图片区域 -->
|
|
<div class="digger-detail-content">
|
|
<!-- <img
|
|
:src="file?.image_url"
|
|
class="cursor-pointer"
|
|
v-if="file?.image_url"
|
|
/> -->
|
|
<img :src="fileList?.[0]?.image_url" v-if="fileList?.[0]?.image_url" />
|
|
<div v-else class="w-full h-full bg_error_picture"></div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
interface Props {
|
|
/** 弹窗显隐 */
|
|
value: boolean;
|
|
info: Record<string, any>;
|
|
fileList: any[];
|
|
}
|
|
interface Emits {
|
|
(e: "update:value", val: boolean): void;
|
|
(e: "close"): void;
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
value: false,
|
|
info: {},
|
|
fileList: []
|
|
});
|
|
|
|
const emit = defineEmits<Emits>();
|
|
// 处理对话框关闭事件
|
|
const handleClose = () => {
|
|
emits("close");
|
|
};
|
|
|
|
const show = computed({
|
|
get() {
|
|
return props.value;
|
|
},
|
|
set(val: boolean) {
|
|
emit("update:value", val);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.digger-alarm-modal.el-dialog {
|
|
border: none;
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
background-image: url("@/assets/common/bg_real_dialog.png");
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: 816px;
|
|
height: 609px;
|
|
padding: 0;
|
|
// margin-top: calc(50vh - 316px);
|
|
|
|
.el-dialog__header.show-close {
|
|
padding: 0;
|
|
}
|
|
|
|
.el-dialog__close {
|
|
width: 56px;
|
|
height: 56px;
|
|
color: white;
|
|
font-size: 18px;
|
|
padding-top: 4px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.digger-detail-dialog-header {
|
|
color: white;
|
|
padding: 0;
|
|
padding-top: 8px;
|
|
margin-bottom: 10px;
|
|
.header-left {
|
|
padding: 0 24px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
|
|
.header-icon {
|
|
margin-top: 4px;
|
|
width: 24px;
|
|
height: 48px;
|
|
background-image: url("@/assets/common/alarm_title.png");
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
.digger-detail-content {
|
|
box-sizing: border-box;
|
|
padding: 0 24px;
|
|
width: 100%;
|
|
height: 500px;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |