zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 相册的优化

Browse Source
This commit is contained in:
zoujing
2025-10-23 21:14:03 +08:00
parent 3094211152
commit bcfc4e12a0
1 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/goods/album/index.vue
View File

@@ -8,20 +8,22 @@
</view> </view>
<scroll-view scroll-y class="scroll-container overflow-auto"> <scroll-view scroll-y class="scroll-container overflow-auto">
<view class="pl-8 pr-8 pb-24"> <view class="pl-4 pr-4 pb-24">
<view class="flex flex-wrap"> <view class="grid-container">
<view <view
class="album-item" class="album-item"
v-for="(item, index) in albumList" v-for="(item, index) in albumList"
:key="index" :key="index"
> >
<image <view class="album-image-wrapper">
class="album-image" <image
:src="item.photoUrl" class="album-image"
mode="aspectFill" :src="item.photoUrl"
@click="handlePreview(item.photoUrl)" mode="aspectFill"
></image> @click="handlePreview(item.photoUrl)"
<view class="album-title">{{ item.title }}</view> ></image>
<view class="album-title">{{ item.name }}</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -53,35 +55,49 @@ const handlePreview = (photoUrl) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.scroll-container { .grid-container {
flex: 1; display: grid;
height: 100%; grid-template-columns: repeat(2, 1fr); // 每行2列
grid-gap: 8px;
padding: 12px;
} }
.album-item { .album-item {
position: relative; position: relative;
width: calc(50% - 8px); width: 100%;
margin: 4px; }
.album-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; // 保持宽高1:1
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.album-image { .album-image {
width: 100%; width: 100%;
height: 150px; height: 100%;
border-radius: 8px; object-fit: cover;
} }
.album-title { .album-title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; right: 0;
padding: 8px; padding: 8px;
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, #000000 100%); background: linear-gradient(
border-radius: 0 0 8px 8px; 180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 0 0 8px 8px;
} }
</style> </style>