hookehuyr

style(FamilyAlbum): 统一使用方形比例并添加网格样式

将加载中和相册项的固定高度改为方形比例,确保视觉一致性
添加网格布局相关样式类以改进排列方式
......@@ -14,7 +14,7 @@
<view
v-for="n in 4"
:key="n"
class="rounded-lg h-32 bg-gray-200 animate-pulse"
class="rounded-lg aspect-square bg-gray-200 animate-pulse"
></view>
</view>
......@@ -23,7 +23,7 @@
<view
v-for="(item, index) in albumData"
:key="item.id || index"
class="rounded-lg overflow-hidden h-32 relative cursor-pointer shadow-md"
class="rounded-lg overflow-hidden aspect-square relative cursor-pointer shadow-md"
@click="handleMediaClick(item, albumData)"
>
<image
......@@ -176,5 +176,19 @@ defineExpose({
</script>
<style lang="less" scoped>
// 组件样式
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap-3 {
gap: 0.75rem;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
</style>
......