Skip to content

飞
飞鹤小程序
Commit 8c075670 authored by spc's avatar spc
Browse files
Options

Merge branch 'xingmaLab20250820' of http://gitlab2.dui88.com/fh/20250528_FHQ1... 

Merge branch 'xingmaLab20250820' of http://gitlab2.dui88.com/fh/20250528_FHQ1 into xingmaLab20250820
parents a6a13af2 3abdf8d1
Hide whitespace changes
Inline Side-by-side
Showing with 48 additions and 162 deletions
pages/xingmaLab/xingmaLab.less
View file @ 8c075670
// 星妈Lab页面样式
.xingma-lab-container {
min-height: 100vh;
// min-height: 100vh;
background-color: #fff;
position: relative;
padding-bottom: 200rpx; // 为底部导航留出空间
overflow: visible;
// height: 100vh;
// 第一层：顶部导航
.top-navigation {
......@@ -15,6 +18,7 @@
position: sticky;
z-index: 100;
top: 0;
overflow: visible;
.nav-left {
width: 60rpx;
......@@ -49,14 +53,16 @@
// 第二层：内容区域
.content-area {
height:100%;
height: 78vh;
overflow: visible;
// flex: 1;
// padding: 20rpx;
// 藏馆内容 - 单列瀑布流
.cangguang-content {
position: relative;
height:1624rpx;
height: 78vh;
// overflow: auto;
// height:1624rpx;
.banner_content{
margin-top: 20rpx;
margin-left: 22.5rpx;
......@@ -193,6 +199,9 @@
// 我的藏馆内容
.wodecangguan-content {
overflow: visible;
height: 77.8vh;
width: 100%;
.sub-tab-container {
display: flex;
background-color: #ffffff;
......@@ -225,16 +234,22 @@
}
}
.sub-tab-content {
.wodecangpin-content {
padding-left:12rpx;
height: 72vh;
width: 100%;
overflow: visible;
.waterfall-list1 {
position: absolute;
display: grid;
// display: grid;
// flex-wrap: wrap;
// grid-template-columns: 1fr 1fr;
gap: 12rpx;
// height: 1624rpx;
// padding: 0 12rpx;
width:360rpx;
height: 72vh;
width:100%;
.waterfall-item {
background-color: #ffffff;
......@@ -267,7 +282,7 @@
width: 212rpx;
height: 44rpx;
border-radius: 0rpx 12rpx 0rpx 0rpx;
bottom: 10rpx;
bottom: 8rpx;
left: 0;
.badge-num {
position: absolute;
......@@ -345,122 +360,6 @@
}
.waterfall-list2 {
display: grid;
// flex-wrap: wrap;
// grid-template-columns: 1fr 1fr;
gap: 12rpx;
// padding: 0 12rpx;
width:360rpx;
margin-left: 372rpx;
.waterfall-item {
background-color: #ffffff;
// border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
position: relative;
width: 360rpx;
height: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
// &:active {
// transform: scale(0.98);
// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
// }
.item-up-content{
position: relative;
width: 100%;
height: auto;
.item-image {
width: 100%;
height: auto;
background-color: #f0f0f0;
}
.item-num {
position: absolute;
background-color: #fde0a5;
width: 212rpx;
height: 44rpx;
border-radius: 0rpx 12rpx 0rpx 0rpx;
bottom: 10rpx;
left: 0;
.badge-num {
position: absolute;
color: #b27c1e;
font-size: 24rpx;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
line-height: 1;
}
}
.item-badge {
position: absolute;
background-color: #d3a358;
width: 114rpx;
height: 48rpx;
border-radius: 12rpx 0rpx;
top: 0;
left: 0;
.badge-text {
position: absolute;
color: #ffffff;
font-size: 24rpx;
left: 10rpx;
top: 8rpx;
}
}
}
.item-info {
padding: 16rpx;
.item-title {
font-size: 28rpx;
font-weight: bold;
color: #333333;
line-height: 1.4;
margin-bottom: 12rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-meta {
display: flex;
justify-content: space-between;
align-items: center;
.creator-info {
display: flex;
align-items: center;
gap: 6rpx;
.creator-name {
font-size: 22rpx;
color: #666666;
}
.star-icon {
font-size: 18rpx;
color: #ffd700;
}
}
}
}
}
}
}
}
}
......
pages/xingmaLab/xingmaLab.vue
View file @ 8c075670
......@@ -14,7 +14,7 @@
<!-- 第二层：内容区域 -->
<view class="content-area">
<!-- 藏馆内容 - 单列瀑布流 -->
<scroll-view v-if="activeTab === 'cangguang'" class="cangguang-content" scroll-y="true" @scrolltolower="handleScroll">
<scroll-view v-if="activeTab === 'cangguang'" scroll-y="true" class="cangguang-content" @scrolltolower="handleScroll">
<view class="banner_content">
<image class="banner_img" src="../../static/xingmaLab/1001/bannerImg0.png" mode="aspectFill" />
</view>
......@@ -70,10 +70,14 @@
</view>
<!-- 我的藏品列表 - 使用与藏馆相同的数据 -->
<view v-if="activeSubTab === 'collections'" class="sub-tab-content">
<view class="waterfall-list1">
<view v-if="activeSubTab === 'collections'" class="wodecangpin-content">
<scroll-view
class="waterfall-list1"
scroll-y="true"
@scrolltolower="handleScrollToLower"
>
<view
v-for="(item, index) in shoucangList[0]"
v-for="(item, index) in shoucangList"
:key="index"
class="waterfall-item"
@click="handleItemClick(item)"
......@@ -98,39 +102,12 @@
</view>
</view>
</view>
</view>
<view class="waterfall-list2">
<view
v-for="(item, index) in shoucangList[1]"
:key="index"
class="waterfall-item"
@click="handleItemClick(item)"
>
<view class="item-up-content">
<image class="item-image" :src="item.imgUrl" mode="widthFix" />
<view class="item-num">
<text class="badge-num">NO.{{ item.bizNo }}</text>
</view>
<view v-if="item.badge" class="item-badge">
<text class="badge-text">精选推荐</text>
</view>
</view>
<view class="item-info">
<text class="item-title">{{ item.content }}</text>
<view class="item-meta">
<view class="creator-info">
<text class="creator-name">{{ item.nickname }}</text>
<text class="star-icon">⭐</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 我的收藏列表 -->
<view v-if="activeSubTab === 'favorites'" class="sub-tab-content">
<!-- <view v-if="activeSubTab === 'favorites'" class="sub-tab-content">
<view class="waterfall-list">
<view
v-for="(item, index) in favoritesList"
......@@ -151,7 +128,7 @@
</view>
</view>
</view>
</view>
</view> -->
</view>
</view>
......@@ -175,7 +152,7 @@
/>
</view>
</view>
</view>
</view>
</template>
<script setup>
......@@ -205,7 +182,17 @@ const shoucangList = ref([]);
const handleScroll = (e) => {
console.log('以移动到底部');
cangguangList.value = cangguangList.value.concat(data.data.list);
// cangguangList.value = cangguangList.value.concat(data.data.list);
cangguangList.value = data.data.list.concat(data.data.list);
}
const handleScroll1 = (e) => {
console.log('e.scrollTop=',e);
}
const handleScrollToLower = () => {
console.log('已到底部');
}
onMounted(async () => {
......@@ -222,7 +209,7 @@ onMounted(async () => {
cangguangList.value = data.data.list;
shoucangList.value = convertDobuleList(data.data.list);
shoucangList.value = cangguangList.value;//convertDobuleList(data.data.list);
})
const convertDobuleList = (list) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment