767 lines
19 KiB
Vue
767 lines
19 KiB
Vue
<template>
|
||
<view class="detail-container">
|
||
<u-navbar id="uNavbarId" title="商品详情" :background="{background: 'transparent' }" :border-bottom="false"
|
||
back-icon-color="#000" title-color="#000">
|
||
<template v-slot:right>
|
||
<image class="collection" src="/static/icon/Settings.png" mode=""></image>
|
||
</template>
|
||
</u-navbar>
|
||
<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'">
|
||
<view class="img-banner">
|
||
<u-swiper height="400" img-mode="aspectFit" mode="none" bg-color="transparent" :list="dataInfo.banner"
|
||
@change="handleChangeBanner" :current="currentBanner"></u-swiper>
|
||
</view>
|
||
<scroll-view scroll-x="true" class="img-sub-banner">
|
||
<image v-for="(item,index) in dataInfo.banner" :src="item" class="img-item"
|
||
:class="{active: currentBanner==index}" mode="aspectFit" @click="handleChangeBanner(index)">
|
||
</image>
|
||
</scroll-view>
|
||
|
||
<view class="mall-info">
|
||
<view class="name">
|
||
{{dataInfo.name}}
|
||
</view>
|
||
<view class="description">
|
||
{{dataInfo.description}}
|
||
</view>
|
||
<view class="price">
|
||
<view>
|
||
<view class="mall-price">
|
||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
||
{{dataInfo.rongdou_price}}
|
||
</view>
|
||
<view class="mall-price">
|
||
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
|
||
{{dataInfo.points_price}}
|
||
</view>
|
||
<view v-if="dataInfo.discount" class="discount-info">
|
||
<u-tag type="error" text="1折优惠" />
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view>已售{{dataInfo.sales}}</view>
|
||
<view style="color: red;">剩余{{dataInfo.stock}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="rating">
|
||
评分：<u-rate :disabled="true" :count="5" v-model="dataInfo.rating" active-color="#f7ba2a"></u-rate>
|
||
</view>
|
||
<view class="detail">
|
||
<h3>具体描述</h3>
|
||
<view v-html="dataInfo.details"></view>
|
||
</view>
|
||
<view class="recommend">
|
||
<h3>推荐商品</h3>
|
||
<view class="mall-list">
|
||
<u-waterfall v-model="recommendedList" ref="mallListRef">
|
||
<template v-slot:left="{leftList}">
|
||
<view class="mall-item u-m-r-10" v-for="(item, index) in leftList" :key="index"
|
||
@click="handleCheck(item)">
|
||
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
|
||
:index="index"></u-lazy-load>
|
||
<view class="mall-title u-m-l-5 u-m-r-5">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="mall-price u-m-l-5 u-m-r-5">
|
||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
||
{{item.price}}
|
||
</view>
|
||
<view class="mall-price u-m-l-5 u-m-r-5">
|
||
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
|
||
{{item.points}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right="{rightList}">
|
||
<view class="mall-item u-m-l-10" v-for="(item, index) in rightList" :key="index"
|
||
@click="handleCheck(item)">
|
||
<u-lazy-load threshold="-450" border-radius="10" :image="getImageUrl(item.image)"
|
||
:index="index"></u-lazy-load>
|
||
<view class="mall-title u-m-l-5 u-m-r-5">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="mall-price u-m-l-5 u-m-r-5">
|
||
<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
||
{{item.price}}
|
||
</view>
|
||
<view class="mall-price u-m-l-5 u-m-r-5">
|
||
<image src="/static/icon/jifen.png" class="icon" mode=""></image>
|
||
{{item.points}}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-waterfall>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="bottom-view" id="bottomViewId">
|
||
<view class="icon-btn">
|
||
<!-- <view class="item">
|
||
<u-image width="100%" :fade="false" src="/static/mall/Home.png" mode="widthFix"></u-image>
|
||
店铺
|
||
</view> -->
|
||
<view class="item">
|
||
<u-image width="100%" :fade="false" src="/static/mall/Twitch.png" mode="widthFix"></u-image>
|
||
客服
|
||
</view>
|
||
<view class="item">
|
||
<u-image width="100%" :fade="false" src="/static/mall/Star.png" mode="widthFix"></u-image>
|
||
收藏
|
||
</view>
|
||
</view>
|
||
<view class="text-btn">
|
||
<u-button class="add-car common" :hair-line="false" hover-class="none"
|
||
@click="handleBtn(0)">加入购物车</u-button>
|
||
<u-button class="buy common" :hair-line="false" hover-class="none" @click="handleBtn(1)">领券购买</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<u-popup v-model="showSure" mode="bottom" length="70%" :closeable="true" blur="90%">
|
||
<scroll-view scroll-y="true" style="height: 100%;">
|
||
<view class="sure-popup">
|
||
<view class="title">{{popTitle}}</view>
|
||
<view class="address">
|
||
<view class="text">
|
||
<image style="width: 40rpx;height: 40rpx;" src="/static/icon/Map pin2.png" mode=""></image>
|
||
<view class="u-m-l-10">张三 | </view>
|
||
<view class="u-m-l-10">浙江省 宁波市 海曙区</view>
|
||
</view>
|
||
<view class="right-icon">
|
||
<image style="width: 100%;height: 100%;" src="/static/icon/Chevron right Menu.png" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="count-select u-p-l-10 u-p-r-10">
|
||
<view class="pre-view">
|
||
<u-image :src="getImageUrl(dataInfo.image_url)" height="100%" width="100%">
|
||
<template v-slot:error>
|
||
<view style="font-size: 24rpx;">暂无图片</view>
|
||
</template>
|
||
</u-image>
|
||
</view>
|
||
<view class="text">
|
||
<view>
|
||
实付<image src="/static/icon/rongdou.png" class="icon" mode=""></image>
|
||
{{dataInfo.price * order.count}}
|
||
<view>
|
||
<u-icon name="integral"></u-icon>
|
||
{{dataInfo.points * order.count}}
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<u-number-box v-model="order.count" :max="dataInfo.stock" :min="1"></u-number-box>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="spec-option" v-for="item in specNames">
|
||
<view class="title">
|
||
{{item + "("+specOptions.get(item).size+")"}}
|
||
</view>
|
||
<view class="option-list">
|
||
<view class="option-item" v-for="key in specOptions.get(item).keys()" :key="key"
|
||
:class="{active: isChose(key), unactive: !canChose(key)}"
|
||
@click="handleChangeSpec(key, item)">
|
||
{{specOptions.get(item).get(key)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="spec-option">
|
||
<view class="title">
|
||
订单备注
|
||
</view>
|
||
<view class="">
|
||
<u-input type="textarea" :border="true" :height="100" v-model="order.orderNote"></u-input>
|
||
</view>
|
||
</view>
|
||
<view class="spec-option">
|
||
<u-button @click="handleSubmit">{{popTitle}}</u-button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</u-popup>
|
||
|
||
<u-toast ref="msgRef" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
onMounted,
|
||
ref,
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
mallAPI
|
||
} from '../../api/mall';
|
||
import {
|
||
getImageUrl, arrayContainsAll
|
||
} from '../../util/common.js';
|
||
|
||
const instance = getCurrentInstance();
|
||
const scrollHeight = ref(0)
|
||
const loadHeight = () => {
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
let screenHeight = res.screenHeight
|
||
uni.createSelectorQuery().in(instance.proxy).select("#uNavbarId").boundingClientRect((
|
||
data) => {
|
||
scrollHeight.value = screenHeight - data.height
|
||
}).exec()
|
||
uni.createSelectorQuery().in(instance.proxy).select("#bottomViewId").boundingClientRect((
|
||
data) => {
|
||
scrollHeight.value = scrollHeight.value - data.height
|
||
}).exec()
|
||
}
|
||
})
|
||
}
|
||
const currentBanner = ref(0)
|
||
const handleChangeBanner = (index) => {
|
||
currentBanner.value = index
|
||
}
|
||
|
||
const handleCheck = (item) => {
|
||
uni.redirectTo({
|
||
url: '/pages/home/mallDetail?id=' + item.id
|
||
})
|
||
}
|
||
const msgRef = ref()
|
||
|
||
// 切换 加入购物车/确认购买
|
||
const showSure = ref(false)
|
||
const popTitle = ref('')
|
||
const flag = ref(0)
|
||
|
||
const handleBtn = (sign) => {
|
||
if (sign == 0) {
|
||
popTitle.value = '加入购物车'
|
||
flag.value = 0
|
||
} else if (sign == 1) {
|
||
popTitle.value = '确认购买'
|
||
flag.value = 1
|
||
}
|
||
showSure.value = true
|
||
}
|
||
|
||
const order = ref({
|
||
count: 1
|
||
})
|
||
const choseKeys = ref([])
|
||
|
||
const handleChangeSpec = (key, allKey) => {
|
||
if (!canChose(key)) return
|
||
if (choseKeys.value.includes(key)) {
|
||
// 取消选中
|
||
choseKeys.value = choseKeys.value.filter(item => item != key)
|
||
} else {
|
||
// console.log(choseKeys.value);
|
||
// console.log(specOptions.value.get(allKey));
|
||
// 清除选项
|
||
const keysArray = Array.from(specOptions.value.get(allKey).keys())
|
||
choseKeys.value = choseKeys.value.filter(item => {
|
||
if (keysArray.includes(item)) return false
|
||
return true
|
||
})
|
||
// 选中
|
||
choseKeys.value.push(key)
|
||
}
|
||
}
|
||
|
||
// 判断当前key是否可选
|
||
const canChose = (key) => {
|
||
// console.log("当前规格ID:", key);
|
||
// console.log("规格组合列表:", activeKeys.value);
|
||
// console.log("已选择的规格ID列表:", choseKeys.value);
|
||
// console.log("规格选项:", specOptions.value);
|
||
|
||
// 如果已经选中，肯定可选（因为可以取消选中）
|
||
if (isChose(key)) {
|
||
return true;
|
||
}
|
||
|
||
// 构建临时选择的key列表
|
||
let tempChoseKeys = [...choseKeys.value];
|
||
|
||
// 找到当前key所属的规格类别
|
||
let specCategory = '';
|
||
for (const [category, options] of specOptions.value.entries()) {
|
||
if (options.has(key)) {
|
||
specCategory = category;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 如果找到了所属规格类别，需要先移除同类别下已选的其他选项
|
||
if (specCategory) {
|
||
const sameCategoryKeys = Array.from(specOptions.value.get(specCategory).keys());
|
||
tempChoseKeys = tempChoseKeys.filter(item => !sameCategoryKeys.includes(item));
|
||
}
|
||
|
||
// 添加当前要判断的key
|
||
tempChoseKeys.push(key);
|
||
|
||
// 检查是否存在包含所有临时选择key的有效规格组合
|
||
const hasValidCombination = activeKeys.value.some(combination => {
|
||
return arrayContainsAll(combination, tempChoseKeys);
|
||
});
|
||
|
||
return hasValidCombination;
|
||
}
|
||
|
||
// 是否被选中
|
||
const isChose = (key) => {
|
||
return choseKeys.value.includes(key)
|
||
}
|
||
|
||
const handleSubmit = () => {
|
||
// 匹配规格
|
||
let specification = dataInfo.value.specifications.filter(item => {
|
||
let group = item.combination_key.split('-').map(Number)
|
||
if (arraysEqualUnordered(group, choseKeys.value)) return true
|
||
return false
|
||
})
|
||
let specificationId = null
|
||
if (specification.length != 0) {
|
||
specificationId = specification[0].id
|
||
} else {
|
||
msgRef.value.show({
|
||
title: '请选择规格',
|
||
type: 'warning'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 立即购买
|
||
const cartItem = {
|
||
productId: dataInfo.value.id,
|
||
quantity: order.value.count,
|
||
specificationId: specificationId,
|
||
points: dataInfo.value.points,
|
||
name: dataInfo.value.name,
|
||
image: dataInfo.value.image,
|
||
stock: dataInfo.value.stock
|
||
}
|
||
if (flag.value == 0) {
|
||
// 加入购物车
|
||
mallAPI.addCart(cartItem).then(res => {
|
||
if (res.success) {
|
||
msgRef.value.show({
|
||
title: '已加入购物车',
|
||
type: 'error'
|
||
})
|
||
} else {
|
||
msgRef.value.show({
|
||
title: res.data.message || '添加到购物车失败',
|
||
type: 'error'
|
||
})
|
||
}
|
||
}).finally(() => {
|
||
order.value.count = 1
|
||
order.value.orderNote = ''
|
||
choseKeys.value = []
|
||
showSure.value = false
|
||
})
|
||
} else if (flag.value == 1) {
|
||
mallAPI.addCart(cartItem).then(res => {
|
||
if (res.success) {
|
||
const cartItemId = res.data?.cart_item_id || res.data?.id || res.data
|
||
?.cartItemId || res.id
|
||
if (!cartItemId) {
|
||
msgRef.value.show({
|
||
title: '无法获取购物车项ID',
|
||
type: 'error'
|
||
})
|
||
} else {
|
||
mallAPI.createOrder({
|
||
cart_item_ids: [cartItemId]
|
||
}).then(response => {
|
||
if (response.success) {
|
||
showSure.value = false
|
||
// 进入支付页面
|
||
uni.navigateTo({
|
||
url: '/pages/home/pay?preOrderId=' + response.data
|
||
.preOrderId
|
||
})
|
||
} else {
|
||
msgRef.value.show({
|
||
title: '操作失败',
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
} else {
|
||
msgRef.value.show({
|
||
title: res.data.message || '添加到购物车失败',
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 判断两个数组值是否相等
|
||
const arraysEqualUnordered = (arr1, arr2) => {
|
||
if (arr1.length !== arr2.length) return false;
|
||
|
||
const sorted1 = [...arr1].sort();
|
||
const sorted2 = [...arr2].sort();
|
||
|
||
return sorted1.every((item, index) => item === sorted2[index]);
|
||
}
|
||
|
||
|
||
const dataId = ref()
|
||
const dataInfo = ref({})
|
||
const recommendedList = ref([])
|
||
const specNames = ref(new Set())
|
||
const specOptions = ref(new Map())
|
||
const activeKeys = ref([])
|
||
|
||
const loadData = () => {
|
||
mallAPI.getMallDetail(dataId.value).then(res => {
|
||
dataInfo.value = res.data.product
|
||
dataInfo.value.banner = []
|
||
if (dataInfo.value.images.length != 0) {
|
||
dataInfo.value.images.forEach(item => {
|
||
dataInfo.value.banner.push(getImageUrl(item))
|
||
})
|
||
}
|
||
loadSpec()
|
||
})
|
||
mallAPI.getRecommended(dataId.value).then(res => {
|
||
recommendedList.value = res.data.products
|
||
})
|
||
}
|
||
|
||
const loadSpec = () => {
|
||
dataInfo.value.specifications.forEach(specification => {
|
||
activeKeys.value.push(specification.combination_key)
|
||
specification.spec_details.forEach(detail => {
|
||
specNames.value.add(detail.spec_display_name)
|
||
let data = specOptions.value.get(detail.spec_display_name)
|
||
if (data == undefined) {
|
||
data = new Map()
|
||
data.set(detail.id, detail.display_value)
|
||
specOptions.value.set(detail.spec_display_name, data)
|
||
} else {
|
||
data.set(detail.id, detail.display_value)
|
||
specOptions.value.set(detail.spec_display_name, data)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
onLoad((val) => {
|
||
dataId.value = val.id
|
||
})
|
||
|
||
onMounted(() => {
|
||
loadHeight()
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.detail-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||
|
||
.collection {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.img-sub-banner {
|
||
padding: 12rpx 0;
|
||
background: #fff;
|
||
white-space: nowrap;
|
||
|
||
.img-item {
|
||
border-radius: 20rpx;
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
.active {
|
||
border: 1px solid #189eff;
|
||
}
|
||
}
|
||
|
||
.mall-info {
|
||
padding: 20rpx 34rpx;
|
||
|
||
.name {
|
||
font-weight: 650;
|
||
font-size: 20px;
|
||
leading-trim: NONE;
|
||
line-height: 46rpx;
|
||
letter-spacing: 0%;
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.mall-price {
|
||
font-size: 30rpx;
|
||
color: #305DEF;
|
||
margin-top: 10rpx;
|
||
|
||
.icon {
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
margin-top: 20rpx;
|
||
border: 1rpx solid #fff;
|
||
padding: 10rpx 20rpx;
|
||
box-shadow: 1px 1px 2px 2px rgba(0, 0, 255, 0.2);
|
||
}
|
||
|
||
.recommend {
|
||
margin-top: 20rpx;
|
||
|
||
.mall-list {
|
||
margin-top: 20rpx;
|
||
|
||
.mall-item {
|
||
border-radius: 16rpx;
|
||
background: #F0F5FF;
|
||
position: relative;
|
||
margin-top: 20rpx;
|
||
box-shadow: 0px 4px 4px 0px #00000040;
|
||
padding-bottom: 10rpx;
|
||
|
||
.mall-title {
|
||
font-size: 30rpx;
|
||
margin-top: 10rpx;
|
||
color: $u-main-color;
|
||
}
|
||
|
||
.mall-price {
|
||
font-size: 30rpx;
|
||
color: $u-type-error;
|
||
margin-top: 10rpx;
|
||
|
||
.icon {
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.mall-tag {
|
||
display: flex;
|
||
margin-top: 5px;
|
||
|
||
.mall-tag-owner {
|
||
background-color: $u-type-error;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 20rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.mall-tag-text {
|
||
margin-right: 10px;
|
||
border: 1px solid $u-type-primary;
|
||
color: $u-type-primary;
|
||
border-radius: 50rpx;
|
||
line-height: 1;
|
||
padding: 4rpx 14rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 50rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.mall-shop {
|
||
font-size: 22rpx;
|
||
color: $u-tips-color;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.bottom-view {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 116rpx;
|
||
background: #F5F8FF;
|
||
padding: 0 29rpx;
|
||
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.icon-btn {
|
||
display: flex;
|
||
width: 228rpx;
|
||
width: 30%;
|
||
flex-wrap: nowrap;
|
||
|
||
.item {
|
||
margin-right: 20rpx;
|
||
white-space: nowrap;
|
||
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-style: Regular;
|
||
font-size: 26rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
}
|
||
}
|
||
|
||
.text-btn {
|
||
display: flex;
|
||
flex: 1;
|
||
justify-content: flex-end;
|
||
|
||
.common {
|
||
border: none;
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
margin: 0;
|
||
color: #fff;
|
||
font-family: Work Sans;
|
||
font-weight: 400;
|
||
font-style: Regular;
|
||
font-size: 26rpx;
|
||
leading-trim: NONE;
|
||
line-height: 100%;
|
||
letter-spacing: -2%;
|
||
}
|
||
|
||
.buy {
|
||
background: #6287FF;
|
||
border-top-right-radius: 12rpx;
|
||
border-bottom-right-radius: 12rpx;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
.add-car {
|
||
background: #A8BCFF;
|
||
border-top-right-radius: 0rpx;
|
||
border-bottom-right-radius: 0rpx;
|
||
border-top-left-radius: 12rpx;
|
||
border-bottom-left-radius: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sure-popup {
|
||
background: #F5F8FF;
|
||
padding-bottom: 20rpx;
|
||
|
||
.title {
|
||
font-weight: 274;
|
||
font-style: Light;
|
||
font-size: 32rpx;
|
||
leading-trim: NONE;
|
||
line-height: 48rpx;
|
||
letter-spacing: 0%;
|
||
text-align: center;
|
||
}
|
||
|
||
.address {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 30rpx;
|
||
padding: 20rpx 10rpx;
|
||
justify-content: space-between;
|
||
|
||
.text {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.right-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.count-select {
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
|
||
.pre-view {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
.text {
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon {
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
}
|
||
}
|
||
|
||
.spec-option {
|
||
margin: 20rpx 0;
|
||
padding: 0 20rpx;
|
||
|
||
.title {
|
||
font-weight: 700;
|
||
font-style: Bold;
|
||
font-size: 32rpx;
|
||
leading-trim: NONE;
|
||
line-height: 48rpx;
|
||
letter-spacing: 0%;
|
||
text-align: left;
|
||
}
|
||
|
||
.option-list {
|
||
display: flex;
|
||
|
||
.option-item {
|
||
background: #f2f3f5;
|
||
padding: 10rpx 20rpx;
|
||
margin: 20rpx 20rpx 20rpx 0;
|
||
}
|
||
|
||
.active {
|
||
border: 1rpx solid #ff6b35;
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.unactive {
|
||
background: #D9D9D9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |