页面优化
This commit is contained in:
1173117610@qq.com
parent
bdc742934a
commit
4aa20b7257
|
|
@ -13,6 +13,8 @@
|
|||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-content" :show-scrollbar="false" @scroll="handleScroll">
|
||||
<!-- 真实内容 -->
|
||||
<view v-if="isLoaded" class="animate-fade-in">
|
||||
<!-- 主图轮播 -->
|
||||
<view class="swiper-box">
|
||||
<swiper class="main-swiper" circular @change="swiperChange">
|
||||
|
|
@ -20,7 +22,7 @@
|
|||
<image :src="img" mode="aspectFill" class="swiper-img"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-indicator">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
|
||||
<view class="swiper-indicator" v-if="product.images.length > 0">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 活动横幅 -->
|
||||
|
|
@ -30,7 +32,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 热销榜单提示 -->
|
||||
<view class="hot-sale-bar">
|
||||
<view class="hot-sale-bar" v-if="product.rankText">
|
||||
<view class="hot-left">
|
||||
<text class="trophy-icon">🏆</text>
|
||||
<text class="hot-text">{{ product.rankText }}</text>
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格与标题区 (1:1 还原) -->
|
||||
<!-- 价格与标题区 -->
|
||||
<view class="info-section">
|
||||
<view class="price-row">
|
||||
<view class="price-left">
|
||||
|
|
@ -66,8 +68,8 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券模块 (1:1 还原) -->
|
||||
<view class="coupon-section">
|
||||
<!-- 优惠券模块 -->
|
||||
<view class="coupon-section" v-if="product.couponVal">
|
||||
<view class="coupon-card">
|
||||
<view class="coupon-left">
|
||||
<view class="coupon-amount">
|
||||
|
|
@ -84,12 +86,12 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 品牌与店铺 (1:1 还原) -->
|
||||
<view class="brand-shop-card">
|
||||
<view class="brand-row">
|
||||
<!-- 品牌与店铺 -->
|
||||
<view class="brand-shop-card" v-if="product.shopName">
|
||||
<view class="brand-row" v-if="product.brandName">
|
||||
<text class="row-label">品牌</text>
|
||||
<view class="brand-content">
|
||||
<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img"></image>
|
||||
<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img" v-if="product.brandLogo"></image>
|
||||
<text class="brand-name-text">{{ product.brandName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -99,7 +101,7 @@
|
|||
<view class="shop-main-content">
|
||||
<view class="shop-name-row">
|
||||
<view class="shop-title-box">
|
||||
<text :class="product.platform === '天猫' ? 'tag-tmall-mini' : 'tag-taobao-mini'">{{ product.platform === '天猫' ? 'T' : '淘' }}</text>
|
||||
<text :class="product.platform === '天猫' ? 'tag-tmall-mini' : 'tag-taobao-mini'" v-if="product.platform">{{ product.platform === '天猫' ? 'T' : '淘' }}</text>
|
||||
<text class="shop-name-text">{{ product.shopName }}</text>
|
||||
</view>
|
||||
<text class="row-arrow">></text>
|
||||
|
|
@ -119,7 +121,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 粉丝福利购 (1:1 还原) -->
|
||||
<!-- 粉丝福利购 -->
|
||||
<view class="benefit-card" v-if="product.desc">
|
||||
<view class="benefit-header">
|
||||
<view class="benefit-title-box">
|
||||
|
|
@ -132,7 +134,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情控制条 (展开和收益) -->
|
||||
<!-- 详情控制条 -->
|
||||
<view class="detail-control-bar">
|
||||
<view class="control-left">
|
||||
<text class="red-line"></text>
|
||||
|
|
@ -149,7 +151,7 @@
|
|||
<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
|
||||
</view>
|
||||
|
||||
<!-- 同类型产品推荐 (1:1 还原) -->
|
||||
<!-- 同类型产品推荐 -->
|
||||
<view class="more-like com" v-if="similarProducts.length > 0">
|
||||
<view class="top g-df-c">
|
||||
<image src="https://web.cms.hykefu.cn/static/img/tongleituij.png" mode="widthFix" class="recommend-title-img"></image>
|
||||
|
|
@ -189,6 +191,24 @@
|
|||
|
||||
<!-- 底部留白 -->
|
||||
<view class="footer-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 骨架屏占位 -->
|
||||
<view class="skeleton-wrap" v-else>
|
||||
<view class="sk-swiper sk-animate"></view>
|
||||
<view class="sk-info">
|
||||
<view class="sk-price sk-animate"></view>
|
||||
<view class="sk-title sk-animate"></view>
|
||||
<view class="sk-title sk-short sk-animate"></view>
|
||||
<view class="sk-tags">
|
||||
<view class="sk-tag sk-animate"></view>
|
||||
<view class="sk-tag sk-animate"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sk-coupon sk-animate"></view>
|
||||
<view class="sk-shop sk-animate"></view>
|
||||
<view class="sk-detail sk-animate"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部固定操作栏 -->
|
||||
|
|
@ -219,36 +239,30 @@
|
|||
currentSwiper: 0,
|
||||
product: {
|
||||
id: '',
|
||||
images: [
|
||||
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
|
||||
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
|
||||
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
|
||||
],
|
||||
rank: 59,
|
||||
todaySale: 1576,
|
||||
price: '19.8',
|
||||
oldPrice: '119.8',
|
||||
totalSale: '1.0万',
|
||||
platform: '天猫',
|
||||
title: '薇诺娜宝贝宝宝舒润霜50g宝宝特护面霜',
|
||||
labels: ['109天最低价', '淘金币频道抵扣2.1元起'],
|
||||
couponVal: 100,
|
||||
couponTime: '2026.05.09-2026.05.11',
|
||||
shopName: '润本旗舰店',
|
||||
brandName: '润本',
|
||||
images: [],
|
||||
rank: 0,
|
||||
todaySale: 0,
|
||||
price: '',
|
||||
oldPrice: '',
|
||||
totalSale: '',
|
||||
platform: '',
|
||||
title: '',
|
||||
labels: [],
|
||||
couponVal: 0,
|
||||
couponTime: '',
|
||||
shopName: '',
|
||||
brandName: '',
|
||||
brandLogo: '',
|
||||
scores: {
|
||||
desc: '4.7',
|
||||
service: '4.8',
|
||||
post: '4.8'
|
||||
desc: '-',
|
||||
service: '-',
|
||||
post: '-'
|
||||
},
|
||||
activity: null,
|
||||
activityTime: '',
|
||||
detailImages: [
|
||||
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
|
||||
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
|
||||
]
|
||||
detailImages: []
|
||||
},
|
||||
isLoaded: false,
|
||||
navOpacity: 0,
|
||||
bgOpacity: 0.4,
|
||||
iconColor: '#ffffff',
|
||||
|
|
@ -363,6 +377,8 @@
|
|||
|
||||
// 获取同类推荐 (使用 itemid 和 son_category)
|
||||
this.getSimilarProducts(d.itemid, d.son_category);
|
||||
|
||||
this.isLoaded = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -494,6 +510,91 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* 渐现动画 */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* 骨架屏样式 */
|
||||
.skeleton-wrap {
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.sk-swiper {
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.sk-info {
|
||||
background-color: #fff;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.sk-price {
|
||||
width: 260rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.sk-title {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.sk-title.sk-short {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.sk-tags {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.sk-tag {
|
||||
width: 120rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.sk-coupon {
|
||||
margin: 20rpx 30rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.sk-shop {
|
||||
margin: 20rpx 30rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.sk-detail {
|
||||
margin-top: 20rpx;
|
||||
height: 800rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sk-animate {
|
||||
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: sk-loading 1.4s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes sk-loading {
|
||||
0% { background-position: 100% 50%; }
|
||||
100% { background-position: 0 50%; }
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
/* 顶部渐变导航栏 */
|
||||
.fixed-header {
|
||||
|
|
|
|||
Loading…
Reference in New Issue