jiazhipeng
3 months ago
6 changed files with 779 additions and 25 deletions
@ -0,0 +1,114 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import axios from "axios"; |
||||
|
import { Message, MessageBox, Loading } from "element-ui"; // 引入 Element UI 组件
|
||||
|
import store from '@/store'; |
||||
|
|
||||
|
const http = axios.create({ |
||||
|
timeout: 6000 // 请求超时时间
|
||||
|
}) |
||||
|
|
||||
|
// 添加请求拦截器
|
||||
|
http.interceptors.request.use((config) => { |
||||
|
const { customBaseURL } = config.params || {}; |
||||
|
if (customBaseURL) { |
||||
|
config.baseURL = customBaseURL; |
||||
|
delete config.params.customBaseURL; |
||||
|
} else { |
||||
|
config.baseURL = process.env.VUE_APP_URL; |
||||
|
} |
||||
|
|
||||
|
const token = store.state.user.userInfo.token; |
||||
|
config.headers['token'] = token |
||||
|
config.headers['Content-Type'] = 'application/json;charset=UTF-8'; |
||||
|
|
||||
|
// 显示加载中状态（Element UI 的 Loading）
|
||||
|
if (config.loading !== false) { // 默认显示，可通过参数关闭
|
||||
|
config.loadingInstance = Loading.service({ |
||||
|
lock: true, |
||||
|
text: '加载中...', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return config; |
||||
|
}, (error) => { |
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
|
||||
|
// 添加响应拦截器
|
||||
|
http.interceptors.response.use(response => { |
||||
|
// 关闭加载状态
|
||||
|
if (response.config.loadingInstance) { |
||||
|
response.config.loadingInstance.close(); |
||||
|
} |
||||
|
|
||||
|
if (response.status === 200 || response.status === 1) { |
||||
|
return response.data; |
||||
|
} |
||||
|
}, error => { |
||||
|
// 关闭加载状态
|
||||
|
if (error.config && error.config.loadingInstance) { |
||||
|
error.config.loadingInstance.close(); |
||||
|
} |
||||
|
|
||||
|
if (error.response && error.response.status) { |
||||
|
switch (error.response.status) { |
||||
|
case 401: |
||||
|
MessageBox.confirm('请登录后操作', '提示', { |
||||
|
confirmButtonText: '去登录', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
// 登录操作
|
||||
|
}).catch(() => { |
||||
|
// 取消登录回调
|
||||
|
}); |
||||
|
break; |
||||
|
case 404: |
||||
|
Message({ |
||||
|
message: '网络繁忙，请刷新再试', |
||||
|
type: 'error', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
break; |
||||
|
default: |
||||
|
Message({ |
||||
|
message: '网络繁忙，请刷新再试', |
||||
|
type: 'error', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
|
||||
|
// 请求方法挂载
|
||||
|
Vue.prototype.get = (params, url, loading = true) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
http.get(url, { |
||||
|
params, |
||||
|
loading // 传递加载状态参数
|
||||
|
}) |
||||
|
.then(res => { |
||||
|
resolve(res); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
reject(err); |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
Vue.prototype.post = (data, url, loading = true) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
http.post(url, data, { |
||||
|
loading // 传递加载状态参数
|
||||
|
}) |
||||
|
.then(res => { |
||||
|
resolve(res); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
reject(err); |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,128 @@ |
|||||
|
export default { |
||||
|
install(Vue) { |
||||
|
Vue.prototype.util = { |
||||
|
// 格式化富文本
|
||||
|
formateRichText(str) { |
||||
|
if (!str) return ""; |
||||
|
var reg = new RegExp("<img", "g"); |
||||
|
str = str.replace(reg, "<img class='sz-xcx-fwb-img' width='100%'") |
||||
|
reg = new RegExp("<IMG", "g"); |
||||
|
str = str.replace(reg, "<img class='sz-xcx-fwb-img' width='100%'") |
||||
|
reg = new RegExp(" ", "g"); |
||||
|
str = str.replace(reg, '<span style="width: 8rpx;display: inline-block;"></span>') |
||||
|
reg = new RegExp("section", "g"); |
||||
|
str = str.replace(reg, 'div'); |
||||
|
reg = new RegExp("↵", "g"); |
||||
|
str = str.replace(reg, '<br />'); |
||||
|
str = str.replace(/<table/g, '<table border="1" cellspacing="0" style="border-collapse:collapse"') |
||||
|
return str; |
||||
|
}, |
||||
|
// 手机号验证规则
|
||||
|
mobileValid(val) { |
||||
|
return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val); |
||||
|
}, |
||||
|
// 身份证验证规则
|
||||
|
idNumberValid(val) { |
||||
|
return /^\d{17}(\d{1}|[X|x])$/.test(val); |
||||
|
}, |
||||
|
// 护照验证正则
|
||||
|
passportValid(val) { |
||||
|
return /^([a-zA-z]|[0-9]){5,17}$/.test(val); |
||||
|
}, |
||||
|
// 台胞证正则
|
||||
|
taiwanValid(val) { |
||||
|
return /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/.test(val); |
||||
|
}, |
||||
|
// 港澳通行证正则
|
||||
|
gangaoValid(val) { |
||||
|
return /^([A-Z]\d{6,10}(\(\w{1}\))?)$/.test(val); |
||||
|
}, |
||||
|
// 外国人永久居留证正则
|
||||
|
foreignerValid(val) { |
||||
|
return /(^[A-Za-z]{3})([0-9]{12}$)/.test(val); |
||||
|
}, |
||||
|
// 军官证正则
|
||||
|
officerValid(val) { |
||||
|
return /^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/.test(val); |
||||
|
}, |
||||
|
// 邮箱验证正则
|
||||
|
emailValid(val) { |
||||
|
return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val) |
||||
|
}, |
||||
|
// 获取路径参数
|
||||
|
getUrlPara(url) { |
||||
|
let arrUrl = url.split("?"); |
||||
|
let para = arrUrl[1]; |
||||
|
return para ? para.split('&') : false; |
||||
|
}, |
||||
|
openMap(item) { |
||||
|
let data = { |
||||
|
type: 'map', |
||||
|
lon: item.scene_lon, |
||||
|
lat: item.scene_lat, |
||||
|
name: item.title, |
||||
|
address: item.address |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/h5Web/h5Web?data=' + JSON.stringify(data) |
||||
|
}) |
||||
|
}, |
||||
|
showImg(img) { |
||||
|
if(!img) return; |
||||
|
if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) { |
||||
|
return img; |
||||
|
} else { |
||||
|
return 'https://changshu.js-dyyj.com' + img; |
||||
|
} |
||||
|
}, |
||||
|
// 跳回小程序
|
||||
|
gotoDetailMini(item) { |
||||
|
console.log(item) |
||||
|
if(item.link_type == 1) { |
||||
|
// 外部小程序
|
||||
|
let data = { |
||||
|
type: 'xcx', |
||||
|
url: item.ext_link |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/h5Web/h5Web?data=' + JSON.stringify(data) |
||||
|
}) |
||||
|
return |
||||
|
}else if(item.link_type == 2){ |
||||
|
// 外部H5
|
||||
|
// window.location.href = item.ext_link
|
||||
|
window.location.href = 'https://m.cloud.sz-trip.com/MailMerchandiseDetail?type=ticket&platform=changshu&id=' + item.id |
||||
|
return |
||||
|
} |
||||
|
// switch (item.genre){
|
||||
|
// // 景点
|
||||
|
// case 'ticket':
|
||||
|
// uni.navigateTo({
|
||||
|
// url: '/subPackages/ticketBooking/detail?id=' + item.id
|
||||
|
// })
|
||||
|
// break;
|
||||
|
// // 酒店
|
||||
|
// case 'hotel':
|
||||
|
// uni.navigateTo({
|
||||
|
// url: '/subPackages/hotelHomestay/detail?id=' + item.id
|
||||
|
// })
|
||||
|
// break;
|
||||
|
// // 美食
|
||||
|
// case 'food':
|
||||
|
// uni.navigateTo({
|
||||
|
// url: '/subPackages/food/foodDetail?id=' + item.id
|
||||
|
// })
|
||||
|
// break;
|
||||
|
// // 攻略
|
||||
|
// case 'article':
|
||||
|
// uni.navigateTo({
|
||||
|
// url: '/subPackages/travelGuide/detail?id=' + item.id
|
||||
|
// })
|
||||
|
// break;
|
||||
|
// default:
|
||||
|
// break;
|
||||
|
// }
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,521 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="product-detail-container"> |
||||
|
<!-- 左侧图片轮播区域 --> |
||||
|
<div class="left-section"> |
||||
|
<el-carousel |
||||
|
ref="carousel" |
||||
|
height="500px" |
||||
|
class="product-carousel" |
||||
|
@change="handleCarouselChange" |
||||
|
indicator-position="none" |
||||
|
> |
||||
|
<el-carousel-item v-for="(img, index) in productImages" :key="index"> |
||||
|
<img |
||||
|
:src="img" |
||||
|
:alt="`商品图片${index + 1}`" |
||||
|
class="carousel-img" |
||||
|
/> |
||||
|
</el-carousel-item> |
||||
|
</el-carousel> |
||||
|
<div class="hint-text"> |
||||
|
温馨提示：以上图片仅供参考，若图片与实物有所不同，则以实物为准。 |
||||
|
</div> |
||||
|
<!-- 自定义图片指示器 --> |
||||
|
<div class="image-indicators"> |
||||
|
<div |
||||
|
v-for="(img, index) in productImages" |
||||
|
:key="index" |
||||
|
class="indicator-item" |
||||
|
:class="{ active: activeIndex === index }" |
||||
|
@click="handleIndicatorClick(index)" |
||||
|
> |
||||
|
<img :src="img" :alt="`缩略图${index + 1}`" class="indicator-img" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 右侧商品信息区域保持不变 --> |
||||
|
<div class="right-section"> |
||||
|
<h2 class="product-title"> |
||||
|
{{ productTitle }} |
||||
|
<span class="product-count">[{{ productCount }}]</span> |
||||
|
</h2> |
||||
|
|
||||
|
<div class="product-tags"> |
||||
|
<el-tag type="info" size="mini">[产品标签]</el-tag> |
||||
|
<span class="subtitle">{{ productSubtitle }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="price-info"> |
||||
|
<span class="price-label">售价</span> |
||||
|
<span class="price-amount">¥{{ productPrice }}</span> |
||||
|
<span class="sales-volume">已售 {{ salesVolume }}万</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="product-attr"> |
||||
|
<div class="attr-item"> |
||||
|
<span class="attr-label">起订量</span> |
||||
|
<span class="attr-value">{{ moq }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="attr-item"> |
||||
|
<span class="attr-label">收货方式</span> |
||||
|
<span class="attr-value">{{ deliveryMethod }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="attr-item spec-group"> |
||||
|
<span class="attr-label">商品规格</span> |
||||
|
<div class="custom-radio-group"> |
||||
|
<label |
||||
|
v-for="(spec, idx) in productSpecs" |
||||
|
:key="idx" |
||||
|
class="custom-radio" |
||||
|
:class="{ 'is-checked': selectedSpec === spec }" |
||||
|
@click="selectedSpec = spec" |
||||
|
> |
||||
|
<span class="radio-text">{{ spec }}</span> |
||||
|
</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="attr-item"> |
||||
|
<span class="attr-label">发货地</span> |
||||
|
<span class="attr-value">{{ origin }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="attr-item"> |
||||
|
<span class="attr-label">其他</span> |
||||
|
<span class="attr-value">{{ otherInfo }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="attr-item"> |
||||
|
<span class="attr-label">配送范围</span> |
||||
|
<span class="attr-value">{{ deliveryRange }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="quantity-control"> |
||||
|
<el-button |
||||
|
icon="el-icon-minus" |
||||
|
circle |
||||
|
@click="decreaseQuantity" |
||||
|
></el-button> |
||||
|
<span class="quantity-value">{{ quantity }}</span> |
||||
|
<el-button |
||||
|
icon="el-icon-plus" |
||||
|
circle |
||||
|
@click="increaseQuantity" |
||||
|
></el-button> |
||||
|
<el-button type="primary" class="buy-btn">一口价购买</el-button> |
||||
|
<el-button type="success" class="cart-btn">加入购物车</el-button> |
||||
|
<el-button type="info" class="bargain-btn">议价</el-button> |
||||
|
<el-button |
||||
|
icon="el-icon-share" |
||||
|
circle |
||||
|
class="share-btn" |
||||
|
@click="handleShare" |
||||
|
></el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="product-bottom"> |
||||
|
<!-- 左侧热销模块 --> |
||||
|
<div class="hot-recommend-sidebar"> |
||||
|
<div class="hot-title">热销推荐</div> |
||||
|
<div |
||||
|
v-for="(item, index) in hotRecommendData" |
||||
|
:key="index" |
||||
|
class="product-item" |
||||
|
> |
||||
|
<img v-lazy="item.imgUrl" alt="" /> |
||||
|
<div class="product-name">{{ item.title }}</div> |
||||
|
<div class="product-price">￥{{ item.price }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 右侧 --> |
||||
|
<div class="product-right"> |
||||
|
<div class="product-tabs"> |
||||
|
<span class="tab-item active">商品详情</span> |
||||
|
<span class="tab-item">商品评价(125)</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 商品详情 --> |
||||
|
<div class="product-detail-main"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "ProductDetail", |
||||
|
data() { |
||||
|
return { |
||||
|
productImages: [ |
||||
|
"https://picsum.photos/id/102/500/500", |
||||
|
"https://picsum.photos/id/103/500/500", |
||||
|
"https://picsum.photos/id/104/500/500", |
||||
|
"https://picsum.photos/id/105/500/500", |
||||
|
], |
||||
|
activeIndex: 0, // 当前激活的图片索引 |
||||
|
productTitle: "面包", |
||||
|
productCount: "52个", |
||||
|
productSubtitle: "副标题", |
||||
|
productPrice: 509, |
||||
|
salesVolume: 1.22, |
||||
|
moq: 1, |
||||
|
deliveryMethod: "邮寄", |
||||
|
productSpecs: ["规格一", "规格二", "规格三", "规格四", "规格五"], |
||||
|
selectedSpec: "规格一", |
||||
|
origin: "江苏省苏州市吴中区", |
||||
|
otherInfo: "下单填写留言，即免费赠送精美贺卡！", |
||||
|
deliveryRange: "全国（可配送至全国1000多个城市，苏州市区内免配送费）", |
||||
|
quantity: 1, |
||||
|
hotRecommendData: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
imgUrl: "https://picsum.photos/id/103/500/500", // 替换成实际图片地址，也可用本地相对路径 |
||||
|
title: "北欧花艺素雅仿真花", |
||||
|
price: 359, |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
imgUrl: "https://picsum.photos/id/103/500/500", |
||||
|
title: "生日玫瑰鲜花", |
||||
|
price: 359, |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
imgUrl: "https://picsum.photos/id/103/500/500", |
||||
|
title: "香雪兰小苍兰鲜花", |
||||
|
price: 359, |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
imgUrl: "https://picsum.photos/id/103/500/500", |
||||
|
title: "现代创意简约仿真花艺", |
||||
|
price: 359, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
// 处理轮播图切换事件 - 同步更新activeIndex |
||||
|
handleCarouselChange(index) { |
||||
|
this.activeIndex = index; |
||||
|
}, |
||||
|
|
||||
|
// 处理指示器点击事件 - 修复切换功能 |
||||
|
handleIndicatorClick(index) { |
||||
|
// 1. 更新当前激活索引 |
||||
|
this.activeIndex = index; |
||||
|
|
||||
|
// 2. 关键修复：确保轮播组件已加载，再调用切换方法 |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.carousel) { |
||||
|
// 调用Element UI轮播组件的官方方法切换图片 |
||||
|
this.$refs.carousel.setActiveItem(index); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
decreaseQuantity() { |
||||
|
if (this.quantity > 1) { |
||||
|
this.quantity--; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
increaseQuantity() { |
||||
|
this.quantity++; |
||||
|
}, |
||||
|
|
||||
|
handleShare() { |
||||
|
this.$message.info("分享功能待实现"); |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 初始化检查轮播组件是否存在 |
||||
|
if (!this.$refs.carousel) { |
||||
|
console.warn("轮播组件未正确加载，请检查ref属性是否设置"); |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.product-detail-container { |
||||
|
display: flex; |
||||
|
padding: 20px; |
||||
|
background-color: #fff; |
||||
|
border: 1px solid #eaeaea; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.left-section { |
||||
|
width: 40%; |
||||
|
margin-right: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.product-carousel { |
||||
|
border: 1px solid #eaeaea; |
||||
|
border-radius: 4px; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.carousel-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hint-text { |
||||
|
color: #ccc; |
||||
|
font-size: 12px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.image-indicators { |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
justify-content: center; |
||||
|
padding: 5px 0; |
||||
|
|
||||
|
.indicator-item { |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
cursor: pointer; |
||||
|
border: 2px solid transparent; |
||||
|
border-radius: 4px; |
||||
|
transition: all 0.3s ease; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&.active { |
||||
|
border-color: #409eff; |
||||
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); |
||||
|
} |
||||
|
|
||||
|
.indicator-img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
display: block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right-section { |
||||
|
width: 60%; |
||||
|
|
||||
|
.product-title { |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
|
||||
|
.product-count { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.product-tags { |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.subtitle { |
||||
|
margin-left: 5px; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.price-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.price-label { |
||||
|
font-weight: bold; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.price-amount { |
||||
|
font-size: 24px; |
||||
|
color: #ff4d4f; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.sales-volume { |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.product-attr { |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.attr-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.attr-label { |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 8px; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.attr-value { |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
&.spec-group { |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.custom-radio-group { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 10px; |
||||
|
margin-top: 5px; |
||||
|
|
||||
|
.custom-radio { |
||||
|
display: inline-block; |
||||
|
padding: 8px 15px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
background-color: #fff; |
||||
|
position: relative; |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: #409eff; |
||||
|
} |
||||
|
|
||||
|
&.is-checked { |
||||
|
border-color: #409eff; |
||||
|
background-color: #f0f7ff; |
||||
|
color: #409eff; |
||||
|
font-weight: 500; |
||||
|
|
||||
|
&::after { |
||||
|
/* content: "✓"; */ |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
bottom: 2px; |
||||
|
font-size: 12px; |
||||
|
color: #409eff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.radio-text { |
||||
|
user-select: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.quantity-control { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10px; |
||||
|
margin-top: 30px; |
||||
|
|
||||
|
.quantity-value { |
||||
|
width: 40px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.buy-btn, |
||||
|
.cart-btn, |
||||
|
.bargain-btn { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.product-bottom { |
||||
|
margin-top: 50px; |
||||
|
display: flex; |
||||
|
|
||||
|
.hot-recommend-sidebar { |
||||
|
min-width: 200px; |
||||
|
padding: 10px; |
||||
|
// border: 1px solid #eee; |
||||
|
background-color: #f7f9fa; |
||||
|
margin-right: 20px; |
||||
|
|
||||
|
.hot-title { |
||||
|
border-left: 4px solid #ff4d4f; |
||||
|
padding-left: 10px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.product-item { |
||||
|
margin-bottom: 20px; |
||||
|
text-align: center; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.product-name { |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.product-price { |
||||
|
font-size: 12px; |
||||
|
color: #f40; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.product-right { |
||||
|
width: 1000%; |
||||
|
} |
||||
|
.product-tabs { |
||||
|
display: flex; |
||||
|
// border-bottom: 1px solid #eee; |
||||
|
margin-bottom: 10px; |
||||
|
background-color: #f7f9fa; |
||||
|
padding: 10px; |
||||
|
|
||||
|
.tab-item { |
||||
|
padding: 10px 20px; |
||||
|
cursor: pointer; |
||||
|
margin-right: 10px; |
||||
|
color: #333; |
||||
|
|
||||
|
&.active { |
||||
|
color: #ff4d4f; |
||||
|
border-bottom: 2px solid #ff4d4f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.product-detail-main { |
||||
|
flex: 1; |
||||
|
padding: 10px; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.product-banner { |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.product-desc { |
||||
|
font-size: 14px; |
||||
|
line-height: 1.6; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue