|
|
@@ -1,9 +1,58 @@
|
|
|
<template>
|
|
|
- <div>enterpriseAlbum</div>
|
|
|
+ <div v-if="!imgList?.length" class="mt-10 text-center">
|
|
|
+ <Empty></Empty>
|
|
|
+ <v-btn prepend-icon="mdi mdi-upload" color="warning mt-10" @click="{}">{{ $t('common.uploadPictures') }}</v-btn>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div><v-btn prepend-icon="mdi mdi-upload" color="warning mb-5" @click="{}">{{ $t('common.uploadPictures') }}</v-btn></div>
|
|
|
+ <div class="imgItem" v-for="(item, index) in imgList" :key="index">
|
|
|
+ <v-img width="100%" height="100%" :src="item?.url || defaultUrl"></v-img>
|
|
|
+ <div class="operate">
|
|
|
+ <span style="font-size: 14px;">设置为封面</span>
|
|
|
+ <span class="mdi mdi-trash-can-outline"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
defineOptions({name: 'informationSettingsComponents-enterpriseAlbum'})
|
|
|
+const imgList = ref([{ url: false }, { url: 1}])
|
|
|
+const defaultUrl = 'https://minio.citupro.com/dev/menduner/7.png'
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.imgItem {
|
|
|
+ width: 172px; height: 172px;
|
|
|
+ border: 1px solid rgba(188, 188, 188, 0.5);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 24px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ .operate {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .operate {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ line-height: 32px;
|
|
|
+ background-color: #00000080;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 4px;
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.mdi-image-broken-variant {
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgba(188, 188, 188, 0.8);
|
|
|
+}
|
|
|
</style>
|
