页面优化
This commit is contained in:
1173117610@qq.com
parent
bdc742934a
commit
4aa20b7257
|
|
@ -13,182 +13,202 @@
|
|||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-content" :show-scrollbar="false" @scroll="handleScroll">
|
||||
<!-- 主图轮播 -->
|
||||
<view class="swiper-box">
|
||||
<swiper class="main-swiper" circular @change="swiperChange">
|
||||
<swiper-item v-for="(img, index) in product.images" :key="index">
|
||||
<image :src="img" mode="aspectFill" class="swiper-img"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-indicator">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 活动横幅 -->
|
||||
<view class="activity-banner" v-if="product.activity && product.activity.app_img">
|
||||
<image :src="product.activity.app_img" mode="widthFix" class="banner-img"></image>
|
||||
<view class="banner-time" v-if="product.activityTime">TIME: {{ product.activityTime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 热销榜单提示 -->
|
||||
<view class="hot-sale-bar">
|
||||
<view class="hot-left">
|
||||
<text class="trophy-icon">🏆</text>
|
||||
<text class="hot-text">{{ product.rankText }}</text>
|
||||
<!-- 真实内容 -->
|
||||
<view v-if="isLoaded" class="animate-fade-in">
|
||||
<!-- 主图轮播 -->
|
||||
<view class="swiper-box">
|
||||
<swiper class="main-swiper" circular @change="swiperChange">
|
||||
<swiper-item v-for="(img, index) in product.images" :key="index">
|
||||
<image :src="img" mode="aspectFill" class="swiper-img"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-indicator" v-if="product.images.length > 0">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
|
||||
</view>
|
||||
<view class="hot-divider">|</view>
|
||||
<view class="hot-right">
|
||||
<text>今日已有{{ product.todaySale }}人下单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 价格与标题区 (1:1 还原) -->
|
||||
<view class="info-section">
|
||||
<view class="price-row">
|
||||
<view class="price-left">
|
||||
<text class="price-label">券后￥</text>
|
||||
<text class="price-val">{{ product.price }}</text>
|
||||
<text class="price-old">￥{{ product.oldPrice }}</text>
|
||||
<!-- 活动横幅 -->
|
||||
<view class="activity-banner" v-if="product.activity && product.activity.app_img">
|
||||
<image :src="product.activity.app_img" mode="widthFix" class="banner-img"></image>
|
||||
<view class="banner-time" v-if="product.activityTime">TIME: {{ product.activityTime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 热销榜单提示 -->
|
||||
<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>
|
||||
</view>
|
||||
<view class="price-right">
|
||||
已售 <text class="sales-red">{{ product.totalSale }}</text> 件
|
||||
<view class="hot-divider">|</view>
|
||||
<view class="hot-right">
|
||||
<text>今日已有{{ product.todaySale }}人下单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="title-row">
|
||||
<view class="title-content">
|
||||
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR+2XX4hUdRTHP+euGAsbLKiU9KDRRvhnvL+7E4v5YvYSZLIu6T5JBIJilH+eDERckUh90P5BFEFg9FAmlhj6pFugwj7s/d2ZnUgsWQUFldqFWBuEuUd+s3f0zrg7M46JL3sfZmB+v+85n985vznnXCF5lMxHIH3AS5XfHtN3AeScEG129sV9KMv0MTmra1bIiSj+l6CbngQA6H5Rlo0AS54MABcdQDPhvw589ZCQW4BnGmmaBNA+If9TI2PpdSXzDsg3jTRNAjAA8a9pY8LIYLXDpa9WO/NWgtPVf5oFqLGig0J+Vc2Jz4LUQDRyDzMAMxGYicBMBFqMgOvjuXIrvz9PNNVTHqhMLQO4Mivk9ibzxJ5myu5UdVGUzFnQsiHw3gC2AbMbF9GWdtwGjkD8/aRa9lSFcfI0S1eA9x2wsCUX04tCiNcLI39VNzUgm83Ob2truzM0NPT3/ZxmLIj/P0FcEXL3DtTT0zNnYmJCC4XCP2KMSefvgoj0hmF4S1n8LMzKA3MfEeJf8LKCvRQEwTxV/Rl4pZwAkV4HUDWSqeqxKIrWTaYjsxbk+CMCrBNyx5wN3/d/FJG3UvbOOYAHRjIRORCG4QfJDd8KfNIixLtC7gunDYJgv6rurLUzJUCyqc9aWx7DlMwmkLeTd4ZGKbkFXAT9VsiX50hjzFpgykjWAyiISH8Yhr+3ePqyLAiCxar6w3STdz0Apy+o6u4oilq6B77v94nIvnpj/3QAAyKyXFX/U9VZIuLG6yvANWC8QUQ6geeABSJyI9mrqjo8VbV0AOcrfwt3YuA9oBfYnog3xHF81fO83x4mFZ7nvRzHcQaojOYHgVPA56mIXHAAh4AdzrnL+djY2OXOzs6bwNOJw0Fr7SpjzHrA5bKZp99aezQIghOquiYRTHS3t88rFovPp+7E4XIpNsY4w5estbt8339dRE6nvYyPj7ePjo4WjTEngdXJ2oC1ttxDaorZL9baN7u6up7q6Ogopu04mCiKThpjPgRetNb23+sF3d3drw0PD58JgmCjqn6dFpZKpUX5fP4P3/c/FZH33Zq1tqqPVOqJqn4WRdHWbDb7QqlU+rMmXDustR9XfLm1uwCwZa9OY0IsAAAAAElFTkSuQmCC" class="title-platform-icon"></image>
|
||||
<text class="title-text">{{ product.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tags-row">
|
||||
<text class="tag-capsule" v-for="(tag, index) in product.labels" :key="index">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券模块 (1:1 还原) -->
|
||||
<view class="coupon-section">
|
||||
<view class="coupon-card">
|
||||
<view class="coupon-left">
|
||||
<view class="coupon-amount">
|
||||
<text class="amount-val">{{ product.couponVal }}</text>
|
||||
<text class="amount-unit">元优惠券</text>
|
||||
<!-- 价格与标题区 -->
|
||||
<view class="info-section">
|
||||
<view class="price-row">
|
||||
<view class="price-left">
|
||||
<text class="price-label">券后￥</text>
|
||||
<text class="price-val">{{ product.price }}</text>
|
||||
<text class="price-old">￥{{ product.oldPrice }}</text>
|
||||
</view>
|
||||
<view class="price-right">
|
||||
已售 <text class="sales-red">{{ product.totalSale }}</text> 件
|
||||
</view>
|
||||
<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
|
||||
</view>
|
||||
<view class="coupon-right">
|
||||
<view class="get-btn" @click="goBuy">立即领券</view>
|
||||
</view>
|
||||
<view class="coupon-circle top"></view>
|
||||
<view class="coupon-circle bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 品牌与店铺 (1:1 还原) -->
|
||||
<view class="brand-shop-card">
|
||||
<view class="brand-row">
|
||||
<text class="row-label">品牌</text>
|
||||
<view class="brand-content">
|
||||
<image :src="product.brandLogo" mode="aspectFit" class="brand-logo-img"></image>
|
||||
<text class="brand-name-text">{{ product.brandName }}</text>
|
||||
<view class="title-row">
|
||||
<view class="title-content">
|
||||
<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADQklEQVRYR+2XX4hUdRTHP+euGAsbLKiU9KDRRvhnvL+7E4v5YvYSZLIu6T5JBIJilH+eDERckUh90P5BFEFg9FAmlhj6pFugwj7s/d2ZnUgsWQUFldqFWBuEuUd+s3f0zrg7M46JL3sfZmB+v+85n985vznnXCF5lMxHIH3AS5XfHtN3AeScEG129sV9KMv0MTmra1bIiSj+l6CbngQA6H5Rlo0AS54MABcdQDPhvw589ZCQW4BnGmmaBNA+If9TI2PpdSXzDsg3jTRNAjAA8a9pY8LIYLXDpa9WO/NWgtPVf5oFqLGig0J+Vc2Jz4LUQDRyDzMAMxGYicBMBFqMgOvjuXIrvz9PNNVTHqhMLQO4Mivk9ibzxJ5myu5UdVGUzFnQsiHw3gC2AbMbF9GWdtwGjkD8/aRa9lSFcfI0S1eA9x2wsCUX04tCiNcLI39VNzUgm83Ob2truzM0NPT3/ZxmLIj/P0FcEXL3DtTT0zNnYmJCC4XCP2KMSefvgoj0hmF4S1n8LMzKA3MfEeJf8LKCvRQEwTxV/Rl4pZwAkV4HUDWSqeqxKIrWTaYjsxbk+CMCrBNyx5wN3/d/FJG3UvbOOYAHRjIRORCG4QfJDd8KfNIixLtC7gunDYJgv6rurLUzJUCyqc9aWx7DlMwmkLeTd4ZGKbkFXAT9VsiX50hjzFpgykjWAyiISH8Yhr+3ePqyLAiCxar6w3STdz0Apy+o6u4oilq6B77v94nIvnpj/3QAAyKyXFX/U9VZIuLG6yvANWC8QUQ6geeABSJyI9mrqjo8VbV0AOcrfwt3YuA9oBfYnog3xHF81fO83x4mFZ7nvRzHcQaojOYHgVPA56mIXHAAh4AdzrnL+djY2OXOzs6bwNOJw0Fr7SpjzHrA5bKZp99aezQIghOquiYRTHS3t88rFovPp+7E4XIpNsY4w5estbt8339dRE6nvYyPj7ePjo4WjTEngdXJ2oC1ttxDaorZL9baN7u6up7q6Ogopu04mCiKThpjPgRetNb23+sF3d3drw0PD58JgmCjqn6dFpZKpUX5fP4P3/c/FZH33Zq1tqqPVOqJqn4WRdHWbDb7QqlU+rMmXDustR9XfLm1uwCwZa9OY0IsAAAAAElFTkSuQmCC" class="title-platform-icon"></image>
|
||||
<text class="title-text">{{ product.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tags-row">
|
||||
<text class="tag-capsule" v-for="(tag, index) in product.labels" :key="index">{{ tag }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券模块 -->
|
||||
<view class="coupon-section" v-if="product.couponVal">
|
||||
<view class="coupon-card">
|
||||
<view class="coupon-left">
|
||||
<view class="coupon-amount">
|
||||
<text class="amount-val">{{ product.couponVal }}</text>
|
||||
<text class="amount-unit">元优惠券</text>
|
||||
</view>
|
||||
<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
|
||||
</view>
|
||||
<view class="coupon-right">
|
||||
<view class="get-btn" @click="goBuy">立即领券</view>
|
||||
</view>
|
||||
<view class="coupon-circle top"></view>
|
||||
<view class="coupon-circle bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 品牌与店铺 -->
|
||||
<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" v-if="product.brandLogo"></image>
|
||||
<text class="brand-name-text">{{ product.brandName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-row">
|
||||
<text class="row-label">店铺</text>
|
||||
<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'" v-if="product.platform">{{ product.platform === '天猫' ? 'T' : '淘' }}</text>
|
||||
<text class="shop-name-text">{{ product.shopName }}</text>
|
||||
</view>
|
||||
<text class="row-arrow">></text>
|
||||
</view>
|
||||
<view class="score-detail-row">
|
||||
<view class="score-item">
|
||||
描述 <text class="val-red">{{ product.scores.desc }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
服务 <text class="val-red">{{ product.scores.service }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
物流 <text class="val-red">{{ product.scores.post }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 粉丝福利购 -->
|
||||
<view class="benefit-card" v-if="product.desc">
|
||||
<view class="benefit-header">
|
||||
<view class="benefit-title-box">
|
||||
<image src="/static/img/fuli.png" class="benefit-icon"></image>
|
||||
<text class="benefit-title">粉丝福利购</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="benefit-content">
|
||||
<text class="benefit-text">{{ product.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情控制条 -->
|
||||
<view class="detail-control-bar">
|
||||
<view class="control-left">
|
||||
<text class="red-line"></text>
|
||||
<text class="control-title">详情</text>
|
||||
</view>
|
||||
<view class="control-right" @click="isExpanded = !isExpanded">
|
||||
<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
|
||||
<view :class="['expand-arrow', isExpanded ? 'up' : 'down']"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文详情 -->
|
||||
<view class="detail-images" :class="{ 'collapsed': !isExpanded }">
|
||||
<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
|
||||
</view>
|
||||
|
||||
<view class="shop-row">
|
||||
<text class="row-label">店铺</text>
|
||||
<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="shop-name-text">{{ product.shopName }}</text>
|
||||
</view>
|
||||
<text class="row-arrow">></text>
|
||||
</view>
|
||||
<view class="score-detail-row">
|
||||
<view class="score-item">
|
||||
描述 <text class="val-red">{{ product.scores.desc }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
服务 <text class="val-red">{{ product.scores.service }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
<view class="score-item">
|
||||
物流 <text class="val-red">{{ product.scores.post }}</text> <text class="up-red">↑</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 同类型产品推荐 -->
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 粉丝福利购 (1:1 还原) -->
|
||||
<view class="benefit-card" v-if="product.desc">
|
||||
<view class="benefit-header">
|
||||
<view class="benefit-title-box">
|
||||
<image src="/static/img/fuli.png" class="benefit-icon"></image>
|
||||
<text class="benefit-title">粉丝福利购</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="benefit-content">
|
||||
<text class="benefit-text">{{ product.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情控制条 (展开和收益) -->
|
||||
<view class="detail-control-bar">
|
||||
<view class="control-left">
|
||||
<text class="red-line"></text>
|
||||
<text class="control-title">详情</text>
|
||||
</view>
|
||||
<view class="control-right" @click="isExpanded = !isExpanded">
|
||||
<text class="expand-text">{{ isExpanded ? '收起' : '展开' }}</text>
|
||||
<view :class="['expand-arrow', isExpanded ? 'up' : 'down']"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图文详情 -->
|
||||
<view class="detail-images" :class="{ 'collapsed': !isExpanded }">
|
||||
<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>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="list-container">
|
||||
<view class="g-shop-list" v-for="(item, idx) in similarProducts" :key="idx" @click="goToDetail(item.itemid)">
|
||||
<view class="shop-img">
|
||||
<image :src="item.itempic" mode="aspectFill" lazy-load></image>
|
||||
</view>
|
||||
<view class="shop-box">
|
||||
<view class="shop-title van-multi-ellipsis--l2">
|
||||
<image :src="item.shoptype === 'B' ? 'https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4' : 'https://img-haodanku-com.cdn.fudaiapp.com/Fpx7_72-zY-n-zX_5_f2_f-f'" class="platform-icon"></image>
|
||||
<text>{{ item.itemtitle }}</text>
|
||||
<view class="list">
|
||||
<view class="list-container">
|
||||
<view class="g-shop-list" v-for="(item, idx) in similarProducts" :key="idx" @click="goToDetail(item.itemid)">
|
||||
<view class="shop-img">
|
||||
<image :src="item.itempic" mode="aspectFill" lazy-load></image>
|
||||
</view>
|
||||
<view class="shop-tag">
|
||||
<text v-if="item.is_low_price === '1'">{{ item.low_price_day }}天最低价</text>
|
||||
<text v-if="item.couponmoney">满{{ item.itemprice }}减{{ item.couponmoney }}</text>
|
||||
</view>
|
||||
<view class="flex-left flex-left-o">
|
||||
<view class="discount-price"> 券后¥ <text class="price-num">{{ item.itemendprice }}</text></view>
|
||||
<view class="g-coupon-label g-df-vc" v-if="item.couponmoney">
|
||||
<span class="g-df-c">券</span>
|
||||
<text>{{ item.couponmoney }}元</text>
|
||||
<view class="shop-box">
|
||||
<view class="shop-title van-multi-ellipsis--l2">
|
||||
<image :src="item.shoptype === 'B' ? 'https://img-haodanku-com.cdn.fudaiapp.com/FlyOSTvjC3LjrkUoJ0NPxx1qnGz4' : 'https://img-haodanku-com.cdn.fudaiapp.com/Fpx7_72-zY-n-zX_5_f2_f-f'" class="platform-icon"></image>
|
||||
<text>{{ item.itemtitle }}</text>
|
||||
</view>
|
||||
<view class="shop-tag">
|
||||
<text v-if="item.is_low_price === '1'">{{ item.low_price_day }}天最低价</text>
|
||||
<text v-if="item.couponmoney">满{{ item.itemprice }}减{{ item.couponmoney }}</text>
|
||||
</view>
|
||||
<view class="flex-left flex-left-o">
|
||||
<view class="discount-price"> 券后¥ <text class="price-num">{{ item.itemendprice }}</text></view>
|
||||
<view class="g-coupon-label g-df-vc" v-if="item.couponmoney">
|
||||
<span class="g-df-c">券</span>
|
||||
<text>{{ item.couponmoney }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-left flex-left-t">
|
||||
<view class="sales-volume">已售{{ formatSales(item.itemsale) }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-left flex-left-t">
|
||||
<view class="sales-volume">已售{{ formatSales(item.itemsale) }}件</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="end-tips">已为您加载完毕</view>
|
||||
<view class="custom-copyright">©️粉丝福利购专属优惠商城</view>
|
||||
</view>
|
||||
<view class="end-tips">已为您加载完毕</view>
|
||||
<view class="custom-copyright">©️粉丝福利购专属优惠商城</view>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<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>
|
||||
|
||||
<!-- 底部留白 -->
|
||||
<view class="footer-placeholder"></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