<template>
|
<view class="content" style="background-color: red;">
|
<!-- 顶部固定导航栏 -->
|
<view class="fixed-top">
|
<up-navbar :is-fixed="true" :is-back="false" title-color="#333333" :background="{ background: '#FFFFFF' }">
|
<template #left>
|
<up-icon name="list" size="40rpx" color="#333333" />
|
</template>
|
|
<template #center>
|
<view class="tab-bar">
|
<view class="tab-item" :class="{ active: currentTab === 'about' }" @click="switchTab('about')">关注</view>
|
<view class="tab-item" :class="{ active: currentTab === 'discover' }" @click="switchTab('discover')">发现
|
</view>
|
<view class="tab-item" :class="{ active: currentTab === 'suzhou' }" @click="switchTab('suzhou')">苏州</view>
|
</view>
|
</template>
|
|
<template #right>
|
<up-icon name="search" size="48rpx" color="#333333" />
|
</template>
|
</up-navbar>
|
</view>
|
|
<!-- 标签页区域 -->
|
<view class="tab-scroll-area">
|
<scroll-view scroll-x class="tab-scroll" :scroll-left="scrollLeft">
|
<view class="tab-scroll-box">
|
<view class="tab-scroll-item" v-for="(item, index) in tabList" :key="index"
|
:class="{ active: currentScrollTab === item.id }" @click="switchScrollTab(item.id)">
|
{{ item.name }}
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 内容区域 - 瀑布流布局 -->
|
<view class="content-area">
|
<up-waterfall v-model="flowList">
|
<template #left="{ leftList }">
|
<view v-for="(item, index) in leftList" :key="index" class="card" @click="handleDetailClick(item)">
|
<image :src="item.imgurl" mode="widthFix" class="card-image" style="width: 100%;" />
|
<view class="card-title">
|
<up-text :lines="2" size="14px" :text="item.title" bold></up-text>
|
</view>
|
<view class="card-footer">
|
<view class="user-info">
|
<up-avatar :src="item.avatar" size="40rpx" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ item.username }}</text>
|
</view>
|
</view>
|
<view class="opera-info">
|
<up-icon name="heart" size="30rpx" color="#999" />
|
<text>{{ item.likes }}</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<template #right="{ rightList }">
|
<view v-for="(item, index) in rightList" :key="index" class="card" @click="handleDetailClick(item)">
|
<image :src="item.imgurl" mode="widthFix" class="card-image" style="width: 100%;" />
|
<view class="card-title">
|
<up-text :lines="2" size="14px" :text="item.title" bold></up-text>
|
</view>
|
<view class="card-footer">
|
<view class="user-info">
|
<up-avatar :src="item.avatar" size="40rpx" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ item.username }}</text>
|
</view>
|
</view>
|
<view class="opera-info">
|
<up-icon name="heart" size="30rpx" color="#999" />
|
<text>{{ item.likes }}</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
</up-waterfall>
|
</view>
|
|
<common-footer flg="0"></common-footer>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
|
const currentTab = ref('discover')
|
const currentScrollTab = ref('recommend')
|
const scrollLeft = ref(0)
|
|
const tabList = ref([
|
{ id: 'recommend', name: '推荐' },
|
{ id: 'straight', name: '直播' },
|
{ id: 'short', name: '短剧' },
|
{ id: 'food', name: '美食' },
|
{ id: 'travel', name: '穿搭' },
|
{ id: 'beauty', name: '美甲' },
|
{ id: 'more', name: '更多' },
|
])
|
|
const flowList = ref([
|
{
|
id: 1,
|
title: 'iPhone 高清全屏壁纸，划走就后悔',
|
imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
username: '草莓喵喵',
|
avatar: '/static/avatar1.jpg',
|
likes: 1397
|
},
|
{
|
id: 2,
|
title: '高清 4K 全屏手机壁纸 #高质量壁纸',
|
imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
username: '4K wallpaper',
|
avatar: '/static/avatar2.jpg',
|
likes: 167
|
},
|
{
|
id: 3,
|
title: 'iPhone 实况动态壁纸 #动态壁纸',
|
imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
username: '图墙精选',
|
avatar: '/static/avatar3.jpg',
|
likes: 980
|
},
|
{
|
id: 4,
|
title: '高清小清新壁纸 浪漫的人都有自己的海',
|
imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
|
username: 'wallpaper',
|
avatar: '/static/avatar4.jpg',
|
likes: 456
|
}
|
])
|
|
const switchTab = (tab: string) => {
|
currentTab.value = tab
|
}
|
|
const switchScrollTab = (id: string) => {
|
currentScrollTab.value = id
|
// 在此处加载不同数据
|
}
|
|
const handleDetailClick = (item: any) => {
|
// 页面跳转或弹窗等操作
|
console.log('点击了卡片：', item)
|
}
|
|
onMounted(() => {
|
console.log('页面加载完成')
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
.fixed-top {
|
position: fixed;
|
width: 100%;
|
top: 0;
|
z-index: 10;
|
margin-top: 0;
|
padding-top: 0;
|
}
|
|
.tab-bar {
|
display: flex;
|
justify-content: space-around;
|
padding: 10rpx 0;
|
|
.tab-item {
|
padding: 10rpx 20rpx;
|
font-size: 28rpx;
|
color: #999;
|
|
&.active {
|
color: #333;
|
font-weight: bold;
|
border-bottom: 4rpx solid #333;
|
}
|
}
|
}
|
|
.tab-scroll-area {
|
margin-top: 100rpx;
|
padding: 10rpx;
|
}
|
|
.tab-scroll-box {
|
display: flex;
|
flex-direction: row;
|
}
|
|
.tab-scroll-item {
|
padding: 10rpx 20rpx;
|
font-size: 26rpx;
|
|
&.active {
|
color: #2979ff;
|
font-weight: bold;
|
}
|
}
|
|
.content-area {
|
padding: 20rpx;
|
}
|
|
.card {
|
border-radius: 10rpx;
|
background-color: #ffffff;
|
font-size: 14px;
|
line-height: 20px;
|
color: rgb(51, 51, 51);
|
margin: 10rpx;
|
|
.card-image {
|
width: 100%;
|
border-radius: inherit;
|
}
|
|
.card-title {
|
padding: 10rpx;
|
}
|
|
.card-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10rpx;
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
|
.user-text {
|
margin-left: 10rpx;
|
|
.nickname {
|
font-size: 24rpx;
|
color: #333;
|
}
|
}
|
}
|
|
.opera-info {
|
display: flex;
|
align-items: center;
|
color: #999;
|
|
text {
|
margin-left: 6rpx;
|
font-size: 24rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
