1452 lines
31 KiB
Vue
1452 lines
31 KiB
Vue
<template>
|
|
<view class="detail-container">
|
|
<!-- 顶部渐变导航栏 -->
|
|
<view class="fixed-header" :style="{ opacity: navOpacity, paddingTop: statusBarHeight + 'px' }">
|
|
<view class="header-content">
|
|
<text class="header-title">商品详情</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 悬浮返回按钮 -->
|
|
<view class="back-btn" :style="{ top: statusBarHeight + 'px', backgroundColor: 'rgba(0,0,0,' + bgOpacity + ')' }" @click="goBack">
|
|
<view class="back-icon-box" :style="{ borderColor: iconColor }"></view>
|
|
</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>
|
|
<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>
|
|
<view class="price-right">
|
|
已售 <text class="sales-red">{{ product.totalSale }}</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>
|
|
<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
|
|
</view>
|
|
<view class="coupon-right">
|
|
<view class="get-btn">立即领券</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>
|
|
</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>
|
|
</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 class="expand-mask" v-if="!isExpanded" @click="isExpanded = true">
|
|
<text class="mask-text">点击展开查看图文详情</text>
|
|
<view class="mask-arrow"></view>
|
|
</view>
|
|
</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 + '_310x310.jpg'" 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>
|
|
<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>
|
|
</view>
|
|
</view>
|
|
<view class="end-tips">已为您加载完毕</view>
|
|
<view class="custom-copyright">©️粉丝福利购专属优惠商城</view>
|
|
</view>
|
|
|
|
<!-- 底部留白 -->
|
|
<view class="footer-placeholder"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 底部固定操作栏 -->
|
|
<view class="bottom-bar">
|
|
<view class="bar-left">
|
|
<view class="bar-btn" @click="goHome">
|
|
<text class="bar-icon">🏠</text>
|
|
<text class="bar-text">首页</text>
|
|
</view>
|
|
<view class="bar-btn">
|
|
<text class="bar-icon">📤</text>
|
|
<text class="bar-text">分享</text>
|
|
</view>
|
|
</view>
|
|
<view class="bar-right">
|
|
<view class="copy-btn">复制口令购买</view>
|
|
<view class="buy-btn">领券购买</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBarHeight: 44,
|
|
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: '润本',
|
|
brandLogo: '',
|
|
scores: {
|
|
desc: '4.7',
|
|
service: '4.8',
|
|
post: '4.8'
|
|
},
|
|
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'
|
|
]
|
|
},
|
|
navOpacity: 0,
|
|
bgOpacity: 0.4,
|
|
iconColor: '#ffffff',
|
|
isExpanded: false,
|
|
similarProducts: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.product.id = options.id || '55493973';
|
|
const sysInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = sysInfo.statusBarHeight || 44;
|
|
this.getDetailData();
|
|
},
|
|
methods: {
|
|
getDetailData() {
|
|
uni.request({
|
|
url: `https://api.cmspro.haodanku.com/detail/itemInfo?id=${this.product.id}&cid=qOstW90`,
|
|
success: (res) => {
|
|
if (res.data && res.data.code === 200) {
|
|
const d = res.data.data;
|
|
console.log('详情数据获取成功:', d);
|
|
|
|
// 格式化活动时间
|
|
const formatActDate = (ts) => {
|
|
const date = new Date(ts * 1000);
|
|
const m = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
const h = date.getHours().toString().padStart(2, '0');
|
|
const min = date.getMinutes().toString().padStart(2, '0');
|
|
return `${m}/${day} ${h}:${min}`;
|
|
};
|
|
|
|
// 格式化销量
|
|
let salesStr = d.itemsale;
|
|
if (d.itemsale >= 10000) {
|
|
salesStr = (d.itemsale / 10000).toFixed(1) + '万';
|
|
}
|
|
|
|
// 解析排行榜标签
|
|
let rank = 10; // 默认
|
|
let rankText = '近期热销榜';
|
|
try {
|
|
const labels = JSON.parse(d.rank_label);
|
|
if (labels && labels.length > 0) {
|
|
rankText = labels[0].title;
|
|
rank = labels[0].sort || 10;
|
|
}
|
|
} catch (e) {}
|
|
|
|
// 处理图片逻辑 (512345 模式: 将最后一张图追加到首位)
|
|
let swiperImages = d.taobao_image_qiniu || [d.itempic];
|
|
if (swiperImages.length > 0) {
|
|
swiperImages.unshift(swiperImages[swiperImages.length - 1]);
|
|
}
|
|
|
|
let detailImages = (d.material_info && d.material_info[0] && d.material_info[0].image) ?
|
|
d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`) :
|
|
[d.itempic];
|
|
|
|
if (detailImages.length > 0) {
|
|
detailImages.unshift(detailImages[detailImages.length - 1]);
|
|
}
|
|
|
|
const activityTime = d.activity_info ?
|
|
`${formatActDate(d.activity_info.start_time)}-${formatActDate(d.activity_info.end_time)}` : '';
|
|
|
|
this.product = {
|
|
id: d.id,
|
|
images: swiperImages,
|
|
rank: rank,
|
|
rankText: rankText,
|
|
todaySale: d.todaysale,
|
|
price: d.itemendprice,
|
|
oldPrice: d.itemprice,
|
|
totalSale: salesStr,
|
|
platform: d.shoptype === 'B' ? '天猫' : '淘宝',
|
|
title: d.itemtitle,
|
|
labels: d.label || [],
|
|
couponVal: d.couponmoney,
|
|
couponTime: (() => {
|
|
const year = new Date().getFullYear();
|
|
const life = d.couponlife.replace('有效期至：', '');
|
|
return life.split('-').map(t => `${year}.${t}`).join('-');
|
|
})(),
|
|
shopName: d.shopname,
|
|
brandName: d.fq_brand_name || (d.brand_info && d.brand_info.fq_brand_name) || '大牌',
|
|
brandLogo: (d.brand_info && d.brand_info.brand_logo) || d.shopicon || '',
|
|
scores: {
|
|
desc: d.shop_score.desc_score,
|
|
service: d.shop_score.serv_score,
|
|
post: d.shop_score.post_score
|
|
},
|
|
desc: d.itemdesc,
|
|
detailImages: detailImages,
|
|
activity: d.activity_info,
|
|
activityTime: activityTime,
|
|
commission: d.tkmoney,
|
|
taobaoId: d.itemid
|
|
};
|
|
|
|
// 获取猜你喜欢推荐 (尝试使用 internal id 获取)
|
|
this.getSimilarProducts(d.id || d.itemid);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getSimilarProducts(itemId) {
|
|
uni.request({
|
|
url: `https://api.cmspro.haodanku.com/detail/guessItems?itemid=${itemId}&cid=qOstW90`,
|
|
success: (res) => {
|
|
if (res.data && res.data.code === 200) {
|
|
this.similarProducts = res.data.data.slice(0, 10);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
formatSales(sale) {
|
|
if (sale >= 10000) {
|
|
return (sale / 10000).toFixed(1) + '万';
|
|
}
|
|
return sale;
|
|
},
|
|
goToDetail(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/detail/detail?id=${id}`
|
|
});
|
|
},
|
|
goBack() {
|
|
uni.navigateBack();
|
|
},
|
|
handleScroll(e) {
|
|
const scrollTop = e.detail.scrollTop;
|
|
// 0-150px 完成渐变
|
|
let ratio = scrollTop / 150;
|
|
if (ratio > 1) ratio = 1;
|
|
if (ratio < 0) ratio = 0;
|
|
|
|
this.navOpacity = ratio;
|
|
this.bgOpacity = 0.4 * (1 - ratio);
|
|
this.iconColor = ratio > 0.5 ? '#333333' : '#ffffff';
|
|
},
|
|
goHome() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
},
|
|
swiperChange(e) {
|
|
this.currentSwiper = e.detail.current;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.detail-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f8f8f8;
|
|
position: relative;
|
|
}
|
|
|
|
/* 返回按钮 */
|
|
/* 顶部渐变导航栏 */
|
|
.fixed-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #ffffff;
|
|
z-index: 150;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.header-content {
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.back-btn {
|
|
position: fixed;
|
|
left: 30rpx;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
margin-top: 10rpx;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.back-icon-box {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-left: 4rpx solid;
|
|
border-bottom: 4rpx solid;
|
|
transform: rotate(45deg);
|
|
margin-left: 8rpx;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
/* 详情控制条 */
|
|
.detail-control-bar {
|
|
margin-top: 20rpx;
|
|
background-color: #ffffff;
|
|
padding: 24rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
|
|
.control-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.red-line {
|
|
width: 6rpx;
|
|
height: 28rpx;
|
|
background-color: #ff416c;
|
|
border-radius: 3rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.control-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.profit-tag {
|
|
font-size: 24rpx;
|
|
color: #ff416c;
|
|
background-color: rgba(255, 65, 108, 0.1);
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.control-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.expand-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.expand-arrow {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-right: 2rpx solid #999;
|
|
border-bottom: 2rpx solid #999;
|
|
transform: rotate(45deg);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.expand-arrow.up {
|
|
transform: rotate(-135deg);
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
/* 图文详情 */
|
|
.detail-images {
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: max-height 0.5s ease;
|
|
}
|
|
|
|
.detail-images.collapsed {
|
|
max-height: 1200rpx;
|
|
}
|
|
|
|
.detail-title {
|
|
display: none; /* 已被控制条取代 */
|
|
}
|
|
|
|
.detail-img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.expand-mask {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 300rpx;
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-bottom: 40rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.mask-text {
|
|
font-size: 28rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mask-arrow {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-right: 4rpx solid #ff416c;
|
|
border-bottom: 4rpx solid #ff416c;
|
|
transform: rotate(45deg);
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
/* 同类推荐推荐 (g-shop-list 1:1 风格) */
|
|
.more-like {
|
|
margin-top: 20rpx;
|
|
background-color: #ffffff;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.top.g-df-c {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.recommend-title-img {
|
|
width: 320rpx;
|
|
}
|
|
|
|
.list-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0 20rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.g-shop-list {
|
|
width: 345rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.shop-img image {
|
|
width: 345rpx;
|
|
height: 345rpx;
|
|
}
|
|
|
|
.shop-box {
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.shop-title {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
height: 72rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.platform-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
vertical-align: middle;
|
|
margin-right: 8rpx;
|
|
margin-top: -4rpx;
|
|
}
|
|
|
|
.shop-tag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 12rpx;
|
|
height: 36rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shop-tag text {
|
|
font-size: 20rpx;
|
|
color: #ff416c;
|
|
background-color: rgba(255, 65, 108, 0.08);
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.flex-left {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.discount-price {
|
|
font-size: 24rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price-num {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.g-coupon-label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 12rpx;
|
|
border: 1rpx solid #ff416c;
|
|
border-radius: 4rpx;
|
|
overflow: hidden;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.g-coupon-label .g-df-c {
|
|
background-color: #ff416c;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
padding: 0 6rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.g-coupon-label text {
|
|
color: #ff416c;
|
|
font-size: 20rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.sales-volume {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.end-tips {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.custom-copyright {
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
color: #969799;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.scroll-content {
|
|
height: 100%;
|
|
}
|
|
|
|
/* 轮播图 */
|
|
.swiper-box {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.main-swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-indicator {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 30rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
color: #ffffff;
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* 活动横幅 (1:1 还原) */
|
|
.activity-banner {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.banner-img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.banner-time {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 22rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-weight: bold;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
/* 热销榜 */
|
|
.hot-sale-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: linear-gradient(to right, #fff1eb, #fbe9e7);
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.hot-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hot-text {
|
|
font-size: 26rpx;
|
|
color: #d84315;
|
|
margin-left: 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hot-divider {
|
|
color: #e0e0e0;
|
|
font-size: 20rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
|
|
.hot-right {
|
|
font-size: 24rpx;
|
|
color: #bf360c;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 信息区 (1:1 还原) */
|
|
.info-section {
|
|
background-color: #ffffff;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.price-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.price-left {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 26rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price-val {
|
|
font-size: 52rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
margin: 0 8rpx;
|
|
}
|
|
|
|
.price-old {
|
|
font-size: 24rpx;
|
|
color: #bbb;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.price-right {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.sales-red {
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.title-row {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.title-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.title-platform-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 12rpx;
|
|
margin-top: 6rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.tags-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tag-capsule {
|
|
font-size: 22rpx;
|
|
color: #ff416c;
|
|
background-color: #fff0f3;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
margin-right: 16rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
/* 优惠券 */
|
|
.coupon-section {
|
|
padding: 0 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.coupon-card {
|
|
height: 160rpx;
|
|
background: linear-gradient(to right, #ff715a, #ff416c);
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.coupon-left {
|
|
flex: 1;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.coupon-amount {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.amount-val {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amount-unit {
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.coupon-time {
|
|
font-size: 20rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.coupon-right {
|
|
width: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-left: 2rpx dashed rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.get-btn {
|
|
background-color: #ffffff;
|
|
color: #ff416c;
|
|
font-size: 26rpx;
|
|
padding: 10rpx 24rpx;
|
|
border-radius: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.coupon-circle {
|
|
position: absolute;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 50%;
|
|
left: auto;
|
|
right: 188rpx;
|
|
}
|
|
|
|
.coupon-circle.top {
|
|
top: -12rpx;
|
|
}
|
|
|
|
.coupon-circle.bottom {
|
|
bottom: -12rpx;
|
|
}
|
|
|
|
/* 品牌与店铺卡片 (1:1 还原) */
|
|
.brand-shop-card {
|
|
background-color: #ffffff;
|
|
margin: 20rpx;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.brand-row, .shop-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.brand-row {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.row-label {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
width: 80rpx;
|
|
flex-shrink: 0;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.brand-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand-logo-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.brand-name-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shop-main-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.shop-name-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.shop-title-box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tag-tmall-mini {
|
|
background-color: #ff0036;
|
|
color: #ffffff;
|
|
font-size: 18rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.tag-taobao-mini {
|
|
background-color: #ff5000;
|
|
color: #ffffff;
|
|
font-size: 18rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
border-radius: 4rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.shop-name-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.row-arrow {
|
|
font-size: 24rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.score-detail-row {
|
|
display: flex;
|
|
}
|
|
|
|
.score-item {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.val-red {
|
|
color: #ff416c;
|
|
margin: 0 4rpx;
|
|
}
|
|
|
|
.up-red {
|
|
color: #ff416c;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
/* 粉丝福利购 (1:1 还原) */
|
|
.benefit-card {
|
|
background-color: #ffffff;
|
|
margin: 20rpx;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.benefit-header {
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.benefit-title-box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.benefit-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.benefit-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.benefit-content {
|
|
background-color: #f7f7f7;
|
|
padding: 24rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.benefit-text {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 40rpx;
|
|
display: block;
|
|
}
|
|
|
|
/* 详情控制条 */
|
|
.detail-control-bar {
|
|
margin-top: 20rpx;
|
|
background-color: #ffffff;
|
|
padding: 24rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
|
|
.control-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.red-line {
|
|
width: 6rpx;
|
|
height: 28rpx;
|
|
background-color: #ff416c;
|
|
border-radius: 3rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.control-title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.profit-tag {
|
|
font-size: 24rpx;
|
|
color: #ff416c;
|
|
background-color: rgba(255, 65, 108, 0.1);
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.control-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.expand-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.expand-arrow {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-right: 2rpx solid #999;
|
|
border-bottom: 2rpx solid #999;
|
|
transform: rotate(45deg);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.expand-arrow.up {
|
|
transform: rotate(-135deg);
|
|
margin-top: 6rpx;
|
|
}
|
|
|
|
/* 图文详情 */
|
|
.detail-images {
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: max-height 0.5s ease;
|
|
}
|
|
|
|
.detail-images.collapsed {
|
|
max-height: 1200rpx;
|
|
}
|
|
|
|
.detail-img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.expand-mask {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 300rpx;
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-bottom: 40rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.mask-text {
|
|
font-size: 28rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mask-arrow {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-right: 4rpx solid #ff416c;
|
|
border-bottom: 4rpx solid #ff416c;
|
|
transform: rotate(45deg);
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
/* 同类推荐推荐 (g-shop-list 1:1 风格) */
|
|
.more-like {
|
|
margin-top: 20rpx;
|
|
background-color: #f8f8f8;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.top.g-df-c {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.recommend-title-img {
|
|
width: 320rpx;
|
|
}
|
|
|
|
.list-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0 20rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.g-shop-list {
|
|
width: 345rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.shop-img image {
|
|
width: 345rpx;
|
|
height: 345rpx;
|
|
}
|
|
|
|
.shop-box {
|
|
padding: 16rpx;
|
|
}
|
|
|
|
.shop-title {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
height: 72rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.platform-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
vertical-align: middle;
|
|
margin-right: 8rpx;
|
|
margin-top: -4rpx;
|
|
}
|
|
|
|
.shop-tag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 12rpx;
|
|
height: 36rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.shop-tag text {
|
|
font-size: 20rpx;
|
|
color: #ff416c;
|
|
background-color: rgba(255, 65, 108, 0.08);
|
|
padding: 2rpx 10rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.flex-left {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.discount-price {
|
|
font-size: 24rpx;
|
|
color: #ff416c;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price-num {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.g-coupon-label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 12rpx;
|
|
border: 1rpx solid #ff416c;
|
|
border-radius: 4rpx;
|
|
overflow: hidden;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.g-coupon-label .g-df-c {
|
|
background-color: #ff416c;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
padding: 0 6rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.g-coupon-label text {
|
|
color: #ff416c;
|
|
font-size: 20rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.sales-volume {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.end-tips {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.custom-copyright {
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
color: #969799;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.footer-placeholder {
|
|
height: 120rpx;
|
|
}
|
|
|
|
/* 底部栏 */
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
|
|
align-items: center;
|
|
border-top: 1rpx solid #eeeeee;
|
|
z-index: 100;
|
|
}
|
|
|
|
.bar-left {
|
|
display: flex;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.bar-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.bar-icon {
|
|
font-size: 36rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.bar-text {
|
|
font-size: 20rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.bar-right {
|
|
flex: 1;
|
|
display: flex;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.copy-btn {
|
|
flex: 1;
|
|
background-color: #ffbcba;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.buy-btn {
|
|
flex: 1;
|
|
background: linear-gradient(to right, #ff715a, #ff416c);
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|