You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.0 KiB
121 lines
3.0 KiB
11 months ago
|
<template>
|
||
|
|
<teleport v-if="show" to="#app">
|
||
|
|
<div class="container">
|
||
|
|
<!-- <Icon class="ep:circle-close close-icon" /> -->
|
||
|
|
<el-icon class="close-icon" @click="show = false"><CircleClose /></el-icon>
|
||
|
|
<el-drawer
|
||
|
|
v-model="showDrawer"
|
||
|
|
direction="ltr"
|
||
|
|
size="20%"
|
||
|
|
:show-close="false"
|
||
|
|
:modal="false"
|
||
|
|
:lock-scroll="false"
|
||
|
|
:close-on-press-escape="false"
|
||
|
|
style="background-color: rgba(0, 0, 0, 0.6)"
|
||
|
|
>
|
||
|
|
<template #header>
|
||
|
|
<span style="color: #fff">资源详情</span>
|
||
|
|
</template>
|
||
|
|
<el-form style="flex: 1" :model="info" label-width="80px" label-position="left">
|
||
|
|
<el-form-item label="标题:">
|
||
|
|
{{ info.title }}
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="文件名称:">
|
||
|
|
{{ info.fileName }}
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="标签:">
|
||
|
|
<el-tag class="mr-5px mb-5px" v-for="(item, index) in info.tipList" :key="index">{{
|
||
|
|
item
|
||
|
|
}}</el-tag>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="备注:">
|
||
|
|
{{ info.remark }}
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<template #footer>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<el-button plain :disabled="imgIndex <= 0" @click="imgIndex--">上一张</el-button>
|
||
|
|
<el-button plain :disabled="imgIndex >= imgList.length - 1" @click="imgIndex++"
|
||
|
|
>下一张</el-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-drawer>
|
||
|
|
|
||
|
|
<img :src="info.fileUrl" :alt="info.fileName" srcset="" class="width-fit img" />
|
||
|
|
<div class="img-idx">{{ imgIndex + 1 }} / {{ imgList.length }}</div>
|
||
|
|
</div>
|
||
|
|
</teleport>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ElIcon } from 'element-plus'
|
||
|
|
import { CircleClose } from '@element-plus/icons-vue'
|
||
|
|
|
||
|
|
const show = ref(false)
|
||
|
|
const imgIndex = ref(0)
|
||
|
|
const imgList = ref([])
|
||
|
|
const showDrawer = ref(true)
|
||
|
|
|
||
|
|
function open(idx = 0, arr = []) {
|
||
|
|
show.value = true
|
||
|
|
imgIndex.value = idx
|
||
|
|
imgList.value = arr
|
||
|
|
}
|
||
|
|
|
||
|
|
const info = computed(() => {
|
||
|
|
return imgList.value[imgIndex.value]
|
||
|
|
})
|
||
|
|
|
||
|
|
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
background-color: rgba($color: #000000, $alpha: 0.5);
|
||
|
|
z-index: 9999999;
|
||
|
|
max-width: 100%;
|
||
|
|
|
||
|
|
.close-icon {
|
||
|
|
position: absolute;
|
||
|
|
top: 40px;
|
||
|
|
right: 40px;
|
||
|
|
font-size: 40px;
|
||
|
|
color: #fff;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-form-item__label) {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 60%;
|
||
|
|
transform: translate3d(-50%, -50%, 0);
|
||
|
|
width: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-idx {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 50px;
|
||
|
|
left: 60%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 100px;
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
border-radius: 30px;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|