|
|
@@ -78,11 +78,12 @@
|
|
|
</el-icon>
|
|
|
<span>{{ t("agriFile.addAlbum") }}</span>
|
|
|
</div>
|
|
|
- <div v-for="item in albumList" :key="item.id" class="album-card">
|
|
|
+ <div v-for="item in albumList" :key="item.id" class="album-card" :class="{ 'is-empty': !item.count }">
|
|
|
<div class="album-card__cover">
|
|
|
- <img :src="item.cover" alt="" />
|
|
|
+ <img v-if="item.count && item.cover" :src="item.cover" alt="" />
|
|
|
+ <img v-else class="album-card__empty-icon" src="@/assets/img/agricultural/photo.png" alt="" />
|
|
|
<span class="album-card__count">{{ t("agriFile.photoCount", { count: item.count }) }}</span>
|
|
|
- <div class="album-card__add">
|
|
|
+ <div class="album-card__add" @click.stop="openUploadPopup">
|
|
|
<el-icon>
|
|
|
<Plus />
|
|
|
</el-icon>
|
|
|
@@ -166,7 +167,7 @@ const zoneList = ref([
|
|
|
]);
|
|
|
|
|
|
const albumList = ref([
|
|
|
- { id: 1, name: "", count: 125, cover: defaultCover },
|
|
|
+ { id: 1, name: "", count: 0, cover: "" },
|
|
|
{ id: 2, name: "", count: 125, cover: defaultCover },
|
|
|
{ id: 3, name: "", count: 125, cover: defaultCover },
|
|
|
]);
|
|
|
@@ -507,12 +508,23 @@ watch(activeNav, (key) => {
|
|
|
.album-card {
|
|
|
width: 100%;
|
|
|
|
|
|
+ &.is-empty {
|
|
|
+ .album-card__cover {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(180deg, #E0F1FF 0%, #C2E4FF 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&__cover {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
aspect-ratio: 1;
|
|
|
|
|
|
- img {
|
|
|
+ img:not(.album-card__empty-icon) {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
@@ -520,6 +532,11 @@ watch(activeNav, (key) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ &__empty-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
&__count {
|
|
|
position: absolute;
|
|
|
top: 1px;
|