161 lines
3.5 KiB
Vue
161 lines
3.5 KiB
Vue
<template>
|
|
<view class="discover-feed">
|
|
<!-- 瀑布流容器 -->
|
|
<view class="waterfall-container">
|
|
<!-- 左列 -->
|
|
<view class="waterfall-column">
|
|
<view v-for="item in leftColumn" :key="item.id" class="waterfall-item" @click="handleItemClick(item)">
|
|
<image class="item-image" :src="item.image" mode="aspectFill" :style="{ height: item.height + 'rpx' }" />
|
|
<view v-if="item.title" class="item-info">
|
|
<text class="item-title">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 右列 -->
|
|
<view class="waterfall-column">
|
|
<view v-for="item in rightColumn" :key="item.id" class="waterfall-item" @click="handleItemClick(item)">
|
|
<image class="item-image" :src="item.image" mode="aspectFill" :style="{ height: item.height + 'rpx' }" />
|
|
<view v-if="item.title" class="item-info">
|
|
<text class="item-title">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开启创作按钮 -->
|
|
<view class="create-fab" @click="handleCreate">
|
|
<text class="fab-text">开启创作</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
// 瀑布流数据
|
|
const items = ref([
|
|
{ id: 1, image: '/static/sucai/image-01.png', title: '', height: 600 },
|
|
{ id: 2, image: '/static/sucai/image-02.png', title: '', height: 500 },
|
|
{ id: 3, image: '/static/sucai/image-03.png', title: '', height: 700 },
|
|
{ id: 4, image: '/static/sucai/image-04.png', title: '', height: 550 },
|
|
{ id: 5, image: '/static/sucai/image-05.png', title: '', height: 450 },
|
|
{ id: 6, image: '/static/sucai/image-06.png', title: '', height: 650 },
|
|
{ id: 7, image: '/static/sucai/image-07.png', title: '', height: 520 },
|
|
{ id: 8, image: '/static/sucai/image-08.png', title: '', height: 580 }
|
|
]);
|
|
|
|
const leftColumn = ref([]);
|
|
const rightColumn = ref([]);
|
|
|
|
// 分配到左右列（瀑布流算法）
|
|
const distributeItems = () => {
|
|
let leftHeight = 0;
|
|
let rightHeight = 0;
|
|
const left = [];
|
|
const right = [];
|
|
|
|
items.value.forEach(item => {
|
|
if (leftHeight <= rightHeight) {
|
|
left.push(item);
|
|
leftHeight += item.height;
|
|
} else {
|
|
right.push(item);
|
|
rightHeight += item.height;
|
|
}
|
|
});
|
|
|
|
leftColumn.value = left;
|
|
rightColumn.value = right;
|
|
};
|
|
|
|
// 点击卡片
|
|
const handleItemClick = (item) => {
|
|
console.log('点击卡片:', item);
|
|
uni.navigateTo({
|
|
url: `/pages/asset-detail/asset-detail?id=${item.id}`
|
|
});
|
|
};
|
|
|
|
// 开启创作
|
|
const handleCreate = () => {
|
|
uni.$emit('discover:switchTab', 1);
|
|
};
|
|
|
|
onMounted(() => {
|
|
distributeItems();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.discover-feed {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.waterfall-container {
|
|
display: flex;
|
|
padding: 16rpx 16rpx 320rpx;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.waterfall-column {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.waterfall-item {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.item-image {
|
|
width: 100%;
|
|
display: block;
|
|
background: #e0e0e0;
|
|
}
|
|
|
|
.item-info {
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.item-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 开启创作按钮 */
|
|
.create-fab {
|
|
position: fixed;
|
|
bottom: 180rpx;
|
|
left: 48rpx;
|
|
right: 48rpx;
|
|
width: calc(100% - 96rpx);
|
|
height: 96rpx;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
|
|
.fab-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.fab-text {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|