Browse Source

对比价格ui设计

Xfy
Trae AI 5 days ago
parent
commit
4419f12566
  1. 206
      pages/goods-detail/goods-detail.js
  2. 178
      pages/goods-detail/goods-detail.wxml
  3. 455
      pages/goods-detail/goods-detail.wxss

206
pages/goods-detail/goods-detail.js

@ -1365,6 +1365,15 @@ Page({
initialTouch: null, // 初始触摸点
// 对比价格相关状态
showCompareModal: false, // 是否显示对比价格弹窗
compareStep: 1, // 当前步骤(1:选择品种,2:选择规格)
categoryOptions: ['全部', '绿壳', '粉壳', '褐壳'], // 品种选项
categoryIcons: ['🥚', '🥚', '🥚', '🥚'], // 品种图标
categoryDescriptions: ['所有品种', '绿壳鸡蛋', '粉壳鸡蛋', '褐壳鸡蛋'], // 品种描述
selectedCategoryIndex: 0, // 选中的品种索引
selectedCategory: '', // 选中的品种
selectedSpecIndex: 0, // 选中的规格索引
selectedSpec: null, // 选中的规格
currentSpecifications: [], // 当前商品的规格列表
activeTab: 'home', // 当前激活的选项卡,'home'表示首页数据,'favorite'表示收藏数据
homeGoods: [], // 首页商品数据
favoriteGoods: [], // 收藏商品数据
@ -3691,7 +3700,7 @@ Page({
// 对比价格功能:处理按钮点击事件
onCompareClick: function () {
console.log('用户点击了对比价格按钮,准备跳转到对比价格页面');
console.log('用户点击了对比价格按钮,准备显示对比价格弹窗');
// 检查用户登录状态
const openid = wx.getStorageSync('openid');
@ -3731,110 +3740,135 @@ Page({
// 即使失败也不影响主流程
});
// 检查用户身份证认证状态
let idcardstatus = '';
const users = wx.getStorageSync('users') || {};
const userInfo = wx.getStorageSync('userInfo') || {};
if (userId && users[userId] && users[userId].idcardstatus) {
idcardstatus = users[userId].idcardstatus;
} else if (userInfo.idcardstatus) {
idcardstatus = userInfo.idcardstatus;
}
console.log('用户身份证认证状态:', idcardstatus);
// 获取当前商品的信息
const currentGoods = this.data.goodsDetail;
const currentCategory = currentGoods.category || '';
const currentSpecifications = currentGoods.weightQuantityData || [];
// 定义种类选项
const categoryOptions = ['全部', '绿壳', '粉壳', '褐壳', '土鸡蛋'];
// 找到当前商品种类在选项中的索引,默认为0(全部)
let defaultCategoryIndex = 0;
if (currentCategory) {
const index = categoryOptions.indexOf(currentCategory);
const index = this.data.categoryOptions.indexOf(currentCategory);
if (index !== -1) {
defaultCategoryIndex = index;
}
}
// 显示种类选择对话框
wx.showActionSheet({
itemList: categoryOptions,
success: (categoryRes) => {
const selectedCategoryIndex = categoryRes.tapIndex;
const selectedCategory = categoryOptions[selectedCategoryIndex];
// 构建规格选择列表
const specList = currentSpecifications.map((spec, index) => {
return spec.display || spec.weightSpec || `规格${index + 1}`;
// 初始化弹窗状态
this.setData({
showCompareModal: true,
compareStep: 1,
selectedCategoryIndex: defaultCategoryIndex,
selectedCategory: this.data.categoryOptions[defaultCategoryIndex],
selectedSpecIndex: 0,
selectedSpec: currentSpecifications.length > 0 ? currentSpecifications[0] : null,
currentSpecifications: currentSpecifications
});
},
// 选择品种
selectCategory: function (e) {
const index = e.currentTarget.dataset.index;
this.setData({
selectedCategoryIndex: index,
selectedCategory: this.data.categoryOptions[index]
});
},
// 选择规格
selectSpec: function (e) {
const index = e.currentTarget.dataset.index;
this.setData({
selectedSpecIndex: index,
selectedSpec: this.data.currentSpecifications[index]
});
},
// 进入下一步
nextStep: function () {
if (!this.data.selectedCategory) {
wx.showToast({
title: '请选择品种',
icon: 'none'
});
return;
}
this.setData({
compareStep: 2
});
},
// 返回上一步
prevStep: function () {
this.setData({
compareStep: 1
});
},
// 确认对比
confirmCompare: function () {
if (!this.data.selectedSpec) {
wx.showToast({
title: '请选择规格',
icon: 'none'
});
return;
}
const currentGoods = this.data.goodsDetail;
const selectedCategory = this.data.selectedCategory;
const selectedSpec = this.data.selectedSpec;
// 显示提示信息
wx.showToast({
title: `已选择${selectedCategory} ${selectedSpec.display}`,
icon: 'info',
duration: 1500,
success: () => {
setTimeout(() => {
// 关闭弹窗
this.setData({
showCompareModal: false
});
// 显示规格选择对话框
wx.showActionSheet({
itemList: specList,
success: (specRes) => {
const selectedSpecIndex = specRes.tapIndex;
const selectedSpec = currentSpecifications[selectedSpecIndex];
// 显示提示信息
// 构建要传递的数据
const goodsData = {
id: currentGoods.id || currentGoods.productId,
name: currentGoods.name || '',
price: currentGoods.price || '',
imageUrls: currentGoods.imageUrls || [],
region: currentGoods.region || '',
weightQuantityData: currentGoods.weightQuantityData || [],
category: selectedCategory,
yolk: currentGoods.yolk || '',
sourceType: currentGoods.sourceType || '',
supplyStatus: currentGoods.supplyStatus || '',
mediaItems: currentGoods.mediaItems || [],
frequency: currentGoods.frequency || 0,
status: currentGoods.status || 'published',
totalStock: currentGoods.totalStock || '充足',
selectedSpec: selectedSpec
};
console.log('准备跳转到对比价格页面,传递的数据:', goodsData);
// 跳转到对比价格页面
wx.navigateTo({
url: `/pages/compare_price/index?goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`,
success: function () {
console.log('成功跳转到对比价格页面');
},
fail: function (error) {
console.error('跳转到对比价格页面失败:', error);
wx.showToast({
title: `已选择${selectedCategory} ${selectedSpec.display}`,
icon: 'info',
duration: 1500,
success: () => {
setTimeout(() => {
// 构建要传递的数据
const goodsData = {
id: currentGoods.id || currentGoods.productId,
name: currentGoods.name || '',
price: currentGoods.price || '',
imageUrls: currentGoods.imageUrls || [],
region: currentGoods.region || '',
weightQuantityData: currentGoods.weightQuantityData || [],
category: selectedCategory,
yolk: currentGoods.yolk || '',
sourceType: currentGoods.sourceType || '',
supplyStatus: currentGoods.supplyStatus || '',
mediaItems: currentGoods.mediaItems || [],
frequency: currentGoods.frequency || 0,
status: currentGoods.status || 'published',
totalStock: currentGoods.totalStock || '充足',
selectedSpec: selectedSpec
};
console.log('准备跳转到对比价格页面,传递的数据:', goodsData);
// 跳转到对比价格页面
wx.navigateTo({
url: `/pages/compare_price/index?goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`,
success: function () {
console.log('成功跳转到对比价格页面');
},
fail: function (error) {
console.error('跳转到对比价格页面失败:', error);
wx.showToast({
title: '跳转失败,请稍后重试',
icon: 'none'
});
}
});
}, 1500);
}
title: '跳转失败,请稍后重试',
icon: 'none'
});
},
fail: (res) => {
console.log('选择规格失败:', res);
}
});
},
fail: (res) => {
console.log('选择种类失败:', res);
}
});
}, 1500);
}
});
},
// 关闭对比价格弹窗

178
pages/goods-detail/goods-detail.wxml

@ -307,137 +307,81 @@
<!-- 底部弹出层 - 对比价格 -->
<view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal">
<view class="compare-modal-container" catchtap="stopPropagation">
<!-- 步骤指示器 -->
<view class="compare-step-container">
<view class="compare-step-wrapper">
<view class="compare-step {{compareStep === 1 ? 'active' : ''}}">
<view class="compare-step-circle">{{compareStep === 1 ? '✓' : '1'}}</view>
<view class="compare-step-line {{compareStep >= 2 ? 'active' : ''}}"></view>
</view>
<view class="compare-step {{compareStep === 2 ? 'active' : ''}}">
<view class="compare-step-circle">{{compareStep === 2 ? '✓' : '2'}}</view>
<view class="compare-step-line"></view>
</view>
<view class="compare-step">
<view class="compare-step-circle">3</view>
</view>
</view>
</view>
<!-- 标题和引导文字 -->
<view class="compare-modal-header">
<text class="compare-modal-title">对比价格</text>
<text class="compare-modal-close" bindtap="closeCompareModal">×</text>
<text class="compare-modal-title">{{compareStep === 1 ? '选择鸡蛋品种' : '选择鸡蛋规格'}}</text>
<text class="compare-modal-subtitle">{{compareStep === 1 ? '请选择您想对比的鸡蛋品种' : '请选择您想对比的鸡蛋规格'}}</text>
</view>
<!-- 选项卡 -->
<view class="compare-tabs">
<view
class="compare-tab {{activeTab === 'home' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="home"
>
相同规格的同种类型
</view>
<view
class="compare-tab {{activeTab === 'favorite' ? 'active' : ''}}"
bindtap="switchTab"
data-tab="favorite"
>
已收藏数据
</view>
<!-- 已选品种提示区 -->
<view wx:if="{{compareStep === 2 && selectedCategory}}" class="compare-selected-category">
<text class="compare-selected-icon">✓</text>
<text class="compare-selected-text">已选品种:{{selectedCategory}}</text>
</view>
<!-- 商品列表 -->
<view class="compare-goods-list">
<block wx:if="{{activeTab === 'home' && homeGoods.length > 0}}">
<view wx:for="{{homeGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}">
<view class="product-image-wrapper">
<!-- 视频处理:根据mediaItems中的类型字段判断 -->
<video
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
<image
wx:else
class="product-media"
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}"
mode="aspectFill"
lazy-load="true"
></image>
<!-- 已售空标签 -->
<view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
<!-- 内容区域 -->
<view class="compare-content">
<!-- 品种选择列表 -->
<block wx:if="{{compareStep === 1}}">
<view wx:for="{{categoryOptions}}" wx:key="index" class="compare-option {{selectedCategoryIndex === index ? 'selected' : ''}}" bindtap="selectCategory" data-index="{{index}}">
<view class="compare-option-icon">{{categoryIcons[index]}}</view>
<view class="compare-option-info">
<text class="compare-option-name">{{item}}</text>
<text class="compare-option-desc">{{categoryDescriptions[index]}}</text>
</view>
<view class="compare-goods-info">
<text class="compare-goods-name">{{item.name}}</text>
<view class="compare-goods-spec-quantity">
<block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
<view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
{{specItem.display}}
<text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
</view>
</block>
<block wx:else>
{{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
</block>
</view>
<text class="compare-goods-region-time">
{{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间:' + item.formattedDate : ''}}
</text>
<view class="compare-option-radio {{selectedCategoryIndex === index ? 'selected' : ''}}">
<view wx:if="{{selectedCategoryIndex === index}}" class="compare-option-radio-inner"></view>
</view>
<!-- 右侧售空文字 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
</view>
</block>
<block wx:elif="{{activeTab === 'home' && homeGoods.length === 0}}">
<view class="compare-empty">暂无首页数据</view>
</block>
<block wx:if="{{activeTab === 'favorite' && favoriteGoods.length > 0}}">
<view wx:for="{{favoriteGoods}}" wx:key="id" class="compare-goods-item" bindtap="viewCompareGoodsDetail" data-item="{{item}}">
<view class="product-image-wrapper">
<!-- 视频处理:根据mediaItems中的类型字段判断 -->
<video
wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}"
class="product-media"
src="{{item.mediaItems[0].url}}"
mode="aspectFit"
show-center-play-btn="{{true}}"
show-play-btn="{{false}}"
controls="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
muted="{{true}}"
object-fit="contain"
poster=""
></video>
<!-- 图片处理 -->
<image
wx:else
class="product-media"
src="{{item.mediaItems && item.mediaItems.length > 0 ? item.mediaItems[0].url : (item.imageUrls[0] || '')}}"
mode="aspectFill"
lazy-load="true"
></image>
<!-- 已售空标签 -->
<view wx:if="{{item.isSoldOutLabel}}" class="sold-out-label">已售空</view>
<!-- 规格选择列表 -->
<block wx:elif="{{compareStep === 2}}">
<view wx:for="{{currentSpecifications}}" wx:key="index" class="compare-option {{selectedSpecIndex === index ? 'selected' : ''}}" bindtap="selectSpec" data-index="{{index}}">
<view class="compare-option-info spec-info">
<text class="compare-option-name">{{item.display || item.weightSpec}}</text>
<text class="compare-option-desc">{{item.price ? '价格:¥' + item.price : '价格:暂无'}}</text>
</view>
<view class="compare-goods-info">
<text class="compare-goods-name">{{item.name}}</text>
<view class="compare-goods-spec-quantity">
<block wx:if="{{item.weightQuantityData && item.weightQuantityData.length > 0}}">
<view wx:for="{{item.weightQuantityData}}" wx:for-item="specItem" wx:key="index">
{{specItem.display}}
<text wx:if="{{specItem.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
</view>
</block>
<block wx:else>
{{item.specification || item.spec || item.specs || '暂无规格'}}|{{item.quantity || '暂无件数'}}件
</block>
</view>
<text class="compare-goods-region-time">
{{item.province || item.region || '暂无地区'}}{{item.formattedDate ? ' | 售出时间:' + item.formattedDate : ''}}
</text>
<view class="compare-option-radio {{selectedSpecIndex === index ? 'selected' : ''}}">
<view wx:if="{{selectedSpecIndex === index}}" class="compare-option-radio-inner"></view>
</view>
<!-- 右侧售空文字 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-text">售空</view>
</view>
</block>
<block wx:elif="{{activeTab === 'favorite' && favoriteGoods.length === 0}}">
<view class="compare-empty">暂无收藏商品</view>
</view>
<!-- 底部按钮区域 -->
<view class="compare-modal-footer">
<block wx:if="{{compareStep === 1}}">
<button class="compare-next-button" bindtap="nextStep">
下一步
</button>
</block>
<block wx:elif="{{compareStep === 2}}">
<view class="compare-footer-buttons">
<button class="compare-back-button" bindtap="prevStep">
返回
</button>
<button class="compare-confirm-button" bindtap="confirmCompare">
确认
</button>
</view>
</block>
</view>
</view>

455
pages/goods-detail/goods-detail.wxss

@ -834,21 +834,20 @@ video.slider-media .wx-video-volume-icon {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-end;
align-items: center;
z-index: 9999;
animation: fadeIn 0.3s ease-out;
}
.compare-modal-container {
width: 100%;
width: 340px;
background-color: #fff;
border-top-left-radius: 32rpx;
border-top-right-radius: 32rpx;
padding-bottom: 20rpx;
max-height: 70vh;
border-radius: 20px;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
animation: slideUp 0.3s ease-out;
display: flex;
flex-direction: column;
max-height: 560px;
}
@keyframes fadeIn {
@ -869,6 +868,268 @@ video.slider-media .wx-video-volume-icon {
}
}
/* 步骤指示器 */
.compare-step-container {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.compare-step-wrapper {
width: 280px;
display: flex;
align-items: center;
justify-content: space-between;
}
.compare-step {
display: flex;
align-items: center;
flex: 1;
}
.compare-step-circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
background-color: #E5E7EB;
color: #9CA3AF;
z-index: 1;
}
.compare-step.active .compare-step-circle {
background-color: #165DFF;
color: #FFFFFF;
}
.compare-step-line {
flex: 1;
height: 2px;
background-color: #E5E7EB;
margin: 0 12px;
}
.compare-step-line.active {
background-color: #165DFF;
}
/* 标题和引导文字 */
.compare-modal-header {
padding: 0 24px 24px;
text-align: center;
}
.compare-modal-title {
font-size: 18px;
font-weight: 500;
color: #1A1A1A;
line-height: 24px;
margin-bottom: 4px;
}
.compare-modal-subtitle {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 20px;
}
/* 已选品种提示区 */
.compare-selected-category {
width: 292px;
height: 48px;
background-color: #F0F7FF;
border-radius: 12px;
margin: 0 24px 16px;
padding: 12px 16px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.compare-selected-icon {
font-size: 20px;
color: #165DFF;
margin-right: 8px;
}
.compare-selected-text {
font-size: 14px;
font-weight: 500;
color: #165DFF;
line-height: 20px;
}
/* 内容区域 */
.compare-content {
flex: 1;
padding: 0 24px 24px;
overflow-y: auto;
}
/* 选项样式 */
.compare-option {
height: 80px;
background-color: #FFFFFF;
border: 2px solid #E5E7EB;
border-radius: 12px;
margin-bottom: 12px;
display: flex;
align-items: center;
padding: 0 16px;
transition: all 0.3s ease;
}
.compare-option.selected {
border-color: #165DFF;
background-color: #F0F7FF;
}
.compare-option-icon {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #F0F7FF;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-right: 12px;
}
.compare-option-info {
flex: 1;
}
.compare-option-info.spec-info {
margin-left: 0;
}
.compare-option-name {
font-size: 16px;
font-weight: 400;
color: #666666;
line-height: 22px;
margin-bottom: 4px;
}
.compare-option.selected .compare-option-name {
font-weight: 500;
color: #1A1A1A;
}
.compare-option-desc {
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
.compare-option-radio {
width: 20px;
height: 20px;
border: 2px solid #D1D5DB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.compare-option-radio.selected {
border-color: #165DFF;
}
.compare-option-radio-inner {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #165DFF;
}
/* 底部按钮区域 */
.compare-modal-footer {
padding: 0 24px 24px;
}
.compare-next-button {
width: 292px;
height: 44px;
background-color: #165DFF;
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-next-button:active {
background-color: #0E47D9;
transform: scale(0.98);
}
.compare-footer-buttons {
display: flex;
gap: 12px;
width: 292px;
}
.compare-back-button {
flex: 1;
height: 44px;
background-color: #FFFFFF;
color: #4B5563;
border: 1px solid #D1D5DB;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-back-button:active {
background-color: #F9FAFB;
transform: scale(0.98);
}
.compare-confirm-button {
flex: 1;
height: 44px;
background-color: #165DFF;
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
line-height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
margin: 0;
}
.compare-confirm-button:active {
background-color: #0E47D9;
transform: scale(0.98);
}
/* 内部信息样式 */
.internal-info {
margin: 8px 16px;
@ -996,188 +1257,6 @@ video.slider-media .wx-video-volume-icon {
font-weight: 500;
}
.compare-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.compare-modal-title {
font-size: 36rpx;
font-weight: bold;
color: #222;
text-align: center;
flex: 1;
}
.compare-modal-close {
font-size: 48rpx;
color: #999;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.compare-modal-close:active {
background-color: #f0f0f0;
transform: scale(0.9);
}
.compare-tabs {
display: flex;
background-color: #f8f9fa;
padding: 12rpx;
border-radius: 0;
}
.compare-tab {
flex: 1;
text-align: center;
padding: 16rpx 0;
font-size: 32rpx;
color: #666;
border-radius: 12rpx;
transition: all 0.3s ease;
font-weight: 500;
}
.compare-tab.active {
background-color: #fff;
color: #4a90e2;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
font-weight: bold;
}
.compare-goods-list {
flex: 1;
overflow-y: auto;
padding: 12rpx;
}
.compare-goods-item {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 12rpx;
padding: 12rpx;
margin-bottom: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1rpx solid #f0f0f0;
}
.compare-goods-item:active {
transform: translateY(2rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
}
.compare-goods-image {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 12rpx;
object-fit: cover;
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
}
/* 视频和图片容器样式 */
.product-image-wrapper {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
margin-right: 12rpx;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #f0f4ff 0%, #d9e4ff 100%);
}
/* 视频和图片样式 */
.product-media {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
.compare-goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.compare-goods-name {
font-size: 32rpx;
color: #222;
font-weight: 600;
line-height: 1.3;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.compare-goods-spec {
font-size: 28rpx;
color: #666;
margin-bottom: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compare-goods-quantity {
font-size: 28rpx;
color: #666;
margin-bottom: 4rpx;
}
.compare-goods-price {
font-size: 36rpx;
color: #ff4d4f;
font-weight: bold;
margin-bottom: 4rpx;
}
.compare-goods-region {
font-size: 26rpx;
color: #999;
}
.compare-goods-spec-quantity {
font-size: 28rpx;
color: #666;
line-height: 1.1;
margin: 2rpx 0;
}
.compare-goods-region-time {
font-size: 26rpx;
color: #999;
line-height: 1.1;
margin-top: 2rpx;
}
.compare-empty {
text-align: center;
padding: 80rpx 0;
color: #999;
font-size: 32rpx;
}
/* 修复样式冲突 */
.goods-detail-page {
position: relative;

Loading…
Cancel
Save