5f06d8ef11
Replace all usages of legacy `.color-*` and `.text-color-*` SCSS utility classes with inline Tailwind `text-[#hexcode]` arbitrary value classes. Remove the deprecated `src/static/scss/colors.scss` file, and fix minor formatting/indentation issues across multiple component files.
92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<template>
|
|
<view class="bg-[#f5f7fa] flex flex-col h-screen overflow-hidden">
|
|
<TopNavBar title="房间相册" backgroundColor="transparent" />
|
|
<view class="p-[8px]">
|
|
<text class="ml-4 font-size-18 text-[#171717] font-500">全部({{ albumList.length }})</text>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="scroll-container overflow-auto">
|
|
<view class="pl-[4px] pr-[4px] pb-[24px]">
|
|
<view class="grid-container">
|
|
<view class="album-item" v-for="(item, index) in albumList" :key="index">
|
|
<view class="album-image-wrapper">
|
|
<image class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePreview(item.photoUrl)">
|
|
</image>
|
|
<view class="album-title">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import TopNavBar from "@/components/TopNavBar/index.vue";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { usePictureStore } from "@/store";
|
|
const pictureStore = usePictureStore();
|
|
|
|
const albumList = ref([]);
|
|
|
|
onLoad(() => {
|
|
albumList.value = pictureStore.previewImageData;
|
|
pictureStore.setPreviewImageData([]);
|
|
});
|
|
|
|
// 处理图片预览
|
|
const handlePreview = (photoUrl) => {
|
|
uni.previewImage({
|
|
current: photoUrl,
|
|
urls: albumList.value.map((item) => item.photoUrl),
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr); // 每行2列
|
|
grid-gap: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.album-item {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.album-image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1; // 保持宽高1:1
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.album-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.album-title {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 8px;
|
|
background: linear-gradient(180deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.6) 100%);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
</style>
|