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.
128 lines
3.4 KiB
128 lines
3.4 KiB
<template>
|
|
<teleport v-if="show" to="#app">
|
|
<div class="container">
|
|
<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>
|
|
<div>
|
|
<div class="flex mb-18px">
|
|
<div class="w-80px text-light-50">标题：</div>
|
|
<div class="flex-1 ml-10px text-light-50">{{ info.title }}</div>
|
|
</div>
|
|
<div class="flex mb-18px">
|
|
<div class="w-80px text-light-50">文件名称：</div>
|
|
<div class="flex-1 ml-10px text-light-50 w-80px" style="word-wrap: break-word">{{
|
|
info.files
|
|
}}</div>
|
|
</div>
|
|
<div class="flex mb-18px">
|
|
<div class="w-80px text-light-50">标签：</div>
|
|
<div class="flex-1 ml-10px w-80px">
|
|
<el-tag class="mr-5px" v-for="(item, index) in info.tags" :key="index">
|
|
{{ getDictLabel('knowledge_tags', item) }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
<div class="flex mb-18px">
|
|
<div class="w-80px text-light-50">备注：</div>
|
|
<div class="flex-1 ml-10px text-light-50">{{ info.remark }}</div>
|
|
</div>
|
|
</div>
|
|
<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.files" :alt="info.files" srcset="" class="width-fit img" />
|
|
<div class="img-idx">{{ imgIndex + 1 }} / {{ imgList.length }}</div>
|
|
</div>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getDictLabel } from '@/utils/dict'
|
|
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>
|
|
|