<template>
<div id="GoodsFliters">
<div class="aaa" :style="{'z-index':show?999:-999}">
<div class="bg" v-if="show" @click="close"></div>
<div class="goodsFliters" :style="{'right':show?0:''}">
<div class="filters-text">筛选</div>
<div class="fliters-container">
<div class="list price clearfix">
<p class="tit">按原价筛选</p>
<div class="search_ipt">
<input
type="text"
placeholder="最低价"
v-model="submitFliterVal.minPrice"
/>
-
<input
type="text"
placeholder="最高价"
v-model="submitFliterVal.maxPrice"
/>
</div>
</div>
<!-- 分类 -->
<div class="list clearfix brand-wrap" v-if="showCategoryFlag">
<div class="tit">
<div class="tit-title">分类</div>
<div class="tit-list" v-if="selectCategoryNameList.length>0">
<span class="line-clamp1 brands fl">{{
selectCategoryNameListStr
}}</span>
<span class="fl">(共{{ selectCategoryNameList.length }}个)</span>
</div>
</div>
<div class="brand-list">
<template v-if="categoryList.length <= 9">
<div class="brand-item" v-for="(item,index) in categoryList" :key="index">
<div
class="brand-item-text line-clamp1"
@click="selecCategory(item)"
:class="item.selectFlag? 'brand-active': ''"
>
{{ item.categoryName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</template>
<template v-else>
<div
class="brand-item"
v-for="(item,index) in categoryList1"
:key="index"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selecCategory(item)"
>
{{ item.categoryName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
<template v-if="categoryMore">
<div
class="brand-item"
v-for="(item,index) in categoryList2"
:key="index"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selecCategory(item)"
>
{{ item.categoryName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</template>
<div
class="more"
v-if="categoryList.length > 9 && !categoryMore"
@click="categoryMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</template>
</div>
</div>
<!-- 品牌 -->
<div class="list clearfix brand-wrap">
<div class="tit">
<div class="tit-title">品牌</div>
<div
class="tit-list"
v-if="submitFliterVal.brandActiveNameList.length"
>
<span class="line-clamp1 brands fl">{{
brandActiveNameListStr
}}</span>
<span class="fl"
>(共{{ submitFliterVal.brandActiveNameList.length }}个)</span
>
</div>
</div>
<div class="brand-list">
<div v-if="brandList.length <= 9">
<div
class="brand-item"
v-for="(item,index4) in brandList"
:key="index4"
>
<div
class="brand-item-text line-clamp1"
@click="selectBrand(item)"
:class="item.selectFlag? 'brand-active': ''"
>
{{ item.brandName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</div>
<div v-else>
<div
class="brand-item"
v-for="(item,index5) in brandList1"
:key="index5"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectBrand(item)"
>
{{ item.brandName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
<div v-if="brandMore">
<div
class="brand-item"
v-for="(item,index6) in brandList2"
:key="index6"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectBrand(item)"
>
{{ item.brandName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</div>
<div
class="more"
v-if="brandList.length > 9 && !brandMore"
@click="brandMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</div>
</div>
</div>
<!-- 规格 -->
<div
class="list clearfix brand-wrap"
v-for="(ele, index) in GoodsSpecificationNameAndValuesListResponseDTO"
:key="index"
v-show="ele.specificationValueList && ele.specificationValueList.length"
>
<div class="tit">
<div class="tit-title">{{ ele.specificationName }}</div>
</div>
<div class="brand-list">
<div
v-if="ele.specificationValueList &&ele.specificationValueList.length <= 9"
>
<div
class="brand-item"
v-for="(item,index1) in ele.specificationValueList"
:key="index1"
>
<div
class="brand-item-text line-clamp1"
@click="selectBrandGoodsSpecification(item)"
:class="item.selectFlag? 'brand-active': ''"
>
{{ item.specificationValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</div>
<div
v-if="ele.specificationValueList &&ele.specificationValueList.length > 9"
>
<div
class="brand-item"
v-for="(item,index2) in ele.specificationValueList1"
:key="index2"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectBrandGoodsSpecification(item)"
>
{{ item.specificationValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
<div v-if="ele.brandMore">
<div
class="brand-item"
v-for="(item,index3) in ele.specificationValueList2"
:key="index3"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectBrandGoodsSpecification(item)"
>
{{ item.specificationValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</div>
<div
class="more"
v-if="ele.specificationValueList.length > 9 && !ele.brandMore"
@click="ele.brandMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</div>
</div>
</div>
<!-- 属性 -->
<div
class="list clearfix brand-wrap"
v-for="(ele, index) in attributeList"
:key="index"
v-show="ele.specificationValueList && ele.specificationValueList.length"
>
<div class="tit">
<div class="tit-title">{{ ele.attributeName }}</div>
</div>
<div class="brand-list">
<div
v-if="ele.specificationValueList &&ele.specificationValueList.length <= 9"
>
<div
class="brand-item"
v-for="(item,index1) in ele.specificationValueList"
:key="index1"
>
<div
class="brand-item-text line-clamp1"
@click="selectAttributeValue(item)"
:class="item.selectFlag? 'brand-active': ''"
>
{{ item.attributeValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</div>
<div
v-if="ele.specificationValueList &&ele.specificationValueList.length > 9"
>
<div
class="brand-item"
v-for="(item,index2) in ele.specificationValueList1"
:key="index2"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectAttributeValue(item)"
>
{{ item.attributeValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
<div v-if="ele.brandMore">
<div
class="brand-item"
v-for="(item,index3) in ele.specificationValueList2"
:key="index3"
>
<div
class="brand-item-text line-clamp1"
:class="item.selectFlag? 'brand-active': ''"
@click="selectAttributeValue(item)"
>
{{ item.attributeValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="item.selectFlag"
/>
</div>
</div>
</div>
<div
class="more"
v-if="ele.specificationValueList.length > 9 && !ele.brandMore"
@click="ele.brandMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</div>
</div>
</div>
</div>
<div class="fliterBtn van-hairline--top">
<div class="btns">
<div class="btn1" @click="resetFliter">重置</div>
<div class="btn2" @click="submitFliter">确认</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import goodsApi from "@/api/goods";
const app = getApp();
export default {
name: "",
data() {
return {
show: false,
submitFliterVal: {
minPrice: "",
maxPrice: "",
attribute: [],
brandIdList: [], //品牌
brandActiveNameList: [],
goodsSpecificationIds: [],
categoryIdList: [],
productAttributeIds: [],
},
categoryId: "",
GoodsSpecificationNameAndValuesListResponseDTO: [],
brandMore: false,
brandList: [],
brandList1: [],
brandList2: [],
brandListCopy: [],
terminalProductIds: [],
specifications: [],
randomNumber: "",
hideBrandSelectFlag: false, // 隐藏品牌筛选
categoryList: [], //暂时为一级分类列表
categoryList1: [], //查看更多分类
categoryList2: [], //查看更多分类
categoryMore: false, // 查看更多分类
sourceType: 0, // 来源类型 0商品搜索页打开 1商品列表组件打开
attributeList: [], //属性列表
};
},
components: {},
computed: {
brandActiveNameListStr() {
return this.submitFliterVal.brandActiveNameList.join("、");
},
// 是否显示分类筛选
showCategoryFlag() {
return this.sourceType == 1 && this.categoryId == "";
},
selectCategoryNameListStr() {
return this.selectCategoryNameList.join("、");
},
selectCategoryNameList() {
let filterList = this.categoryList.filter(item=>this.submitFliterVal.categoryIdList.includes(item.id)) || [];
if(filterList) {
return filterList.map(item=>item.categoryName);
}
return [];
},
},
created() {
if(this.GoodsSpecificationNameAndValuesListResponseDTO.length==0) {
this.query_specification_name_and_values_list();
}
},
mounted() {
let _this = this;
app.openFilterGoods = (val)=>{
console.log("----打开弹窗");
this.open(val);
}
},
methods: {
open(val) {
console.log("筛选商品open",val);
this.sourceType = val.sourceType;
this.submitFliterVal = val.submitFliterVal;
this.categoryId = val.categoryId;
this.brandListCopy = val.filterBrand;
this.terminalProductIds = val.terminalProductIds;
this.randomNumber = val.randomNumber;
this.hideBrandSelectFlag = val.hideBrandSelectFlag;
console.log(this.submitFliterVal,'-------------this.submitFliterVal')
if(this.brandList.length == 0) {
// 已经打开过弹窗赋值过不用再调用
this.getProductBrand();
}
// 商品列表组件打开获取一级分类筛选
if(this.sourceType == 1 && this.categoryList.length == 0) {
this.getProductTopCategory();
}
// 商品属性查询
if(this.attributeList.length == 0) {
this.query_product_attribute_values_list();
}
this.show = true;
},
close() {
this.show = false;
},
query_specification_name_and_values_list() {
goodsApi.query_specification_name_and_values_list({
filterFieldsShowFlag: 1,
queryGroupNameFlag: 1,
})
.then((res) => {
if (res.data.code == "200" && res.data.data && res.data.data.length) {
this.GoodsSpecificationNameAndValuesListResponseDTO = res.data.data;
this.GoodsSpecificationNameAndValuesListResponseDTO.forEach(
(ele) => {
this.$set(ele, "brandMore", false);
if (ele.specificationValueList) {
ele.specificationValueList.forEach((val) => {
val.selectFlag = false;
this.$set(val, "id", val.specificationValueIds[0]);
this.$set(val, "ids", val.specificationValueIds);
});
}
ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
ele.specificationValueList2 = ele.specificationValueList.slice(8);
}
);
}
});
},
query_product_attribute_values_list() {
let query = {
filterFieldsShowFlag: 1,
}
if(this.sourceType == 1) {
query.categoryId = this.categoryId;
query.brandIdList = this.brandListCopy;
query.terminalProductIds = this.terminalProductIds;
}
goodsApi.query_product_attribute_values_list(query).then(res=>{
if(res.data.code == "200" && res.data.data && res.data.data.length){
this.attributeList = res.data.data || [];
this.attributeList.forEach(
(ele) => {
this.$set(ele, "brandMore", false);
if (ele.specificationValueList) {
ele.specificationValueList.forEach((val) => {
val.selectFlag = false;
this.$set(val, "id", val.attributeValueIds[0]);
this.$set(val, "ids", val.attributeValueIds);
if(this.submitFliterVal.productAttributeIds.includes(val.id)) {
val.selectFlag = true;
}
});
}
ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
ele.specificationValueList2 = ele.specificationValueList.slice(8);
}
);
console.log(this.attributeList,'--this.attributeList')
}
})
},
getProductBrand() {
goodsApi.queryProductBrand({
page: 1,
rows: 100000,
used: 1,
categoryId: this.categoryId,
categoryIncludeChild : true,
})
.then((res) => {
console.log(res,'-------275');
if (res.data.code == "200") {
res.data.data.list.forEach(item=>{
item.selectFlag = false;
})
let list = [];
if(this.brandListCopy.length>0) {
list = res.data.data.list.filter(item=>this.brandListCopy.includes(item.id));
// 后面手动未选
console.log(this.submitFliterVal.brandIdList,'----------this.submitFliterVal.brandIdList')
let list2 = res.data.data.list.filter(item=>this.submitFliterVal.brandIdList.includes(item.id));
this.submitFliterVal.brandActiveNameList = list2.map(item=>item.brandName);
} else {
list = res.data.data.list;
}
list.forEach(item=>{
if(this.submitFliterVal.brandIdList.includes(item.id)) {
item.selectFlag = true;
}
})
this.brandList = list;
this.brandList1 = list.slice(0,8);
this.brandList2 = list.slice(8);
console.log(this.brandList,'---------brandList')
}
});
},
getProductTopCategory() {
let query = {
level: 1,
}
goodsApi.getProductTopCategory(query).then(res=>{
if(res.data.code == "200"){
res.data.data.list.forEach(item=>{
item.selectFlag = false;
})
let list = [];
list = res.data.data.list;
list.forEach(item=>{
if(this.submitFliterVal.categoryIdList.includes(item.id)) {
item.selectFlag = true;
}
})
this.categoryList = list;
this.categoryList1 = list.slice(0,8);
this.categoryList2 = list.slice(8);
console.log(this.categoryList,'--this.categoryList')
}
})
},
selectBrandGoodsSpecification(item) {
console.log("----------------",item)
item.ids.forEach((id) => {
if (!this.submitFliterVal.goodsSpecificationIds.includes(id)) {
this.submitFliterVal.goodsSpecificationIds.push(id);
item.selectFlag = true;
} else {
this.submitFliterVal.goodsSpecificationIds.splice(
this.submitFliterVal.goodsSpecificationIds.indexOf(id),
1
);
item.selectFlag = false;
}
});
},
selectAttributeValue(item) {
item.ids.forEach((id) => {
if (!this.submitFliterVal.productAttributeIds.includes(id)) {
this.submitFliterVal.productAttributeIds.push(id);
item.selectFlag = true;
} else {
this.submitFliterVal.productAttributeIds.splice(
this.submitFliterVal.productAttributeIds.indexOf(id),
1
);
item.selectFlag = false;
}
});
},
selectBrand(item) {
console.log(item, "----------------------1531");
console.log(
this.submitFliterVal.brandActiveNameList,
"----------------------1533"
);
if (!item.selectFlag) {
this.submitFliterVal.brandIdList.push(item.id);
this.submitFliterVal.brandActiveNameList.push(item.brandName);
item.selectFlag = true;
} else {
this.submitFliterVal.brandIdList.splice(
this.submitFliterVal.brandIdList.indexOf(item.id),
1
);
this.submitFliterVal.brandActiveNameList.splice(
this.submitFliterVal.brandIdList.indexOf(item.id),
1
);
item.selectFlag = false;
}
console.log(
this.submitFliterVal.brandIdList,
"----------------------1532"
);
},
selecCategory(item) {
console.log(item, "----------------------1531");
console.log(this.submitFliterVal.categoryIdList, "----------------------1533");
if (!this.submitFliterVal.categoryIdList.includes(item.id)) {
this.submitFliterVal.categoryIdList.push(item.id);
item.selectFlag = true;
} else {
this.submitFliterVal.categoryIdList.splice(
this.submitFliterVal.categoryIdList.indexOf(item.id),
1
);
item.selectFlag = false;
}
},
// 重置筛选
resetFliter() {
this.submitFliterVal.minPrice = "";
this.submitFliterVal.maxPrice = "";
this.submitFliterVal.attribute = [];
this.submitFliterVal.brandIdList = [];
this.submitFliterVal.brandActiveNameList = [];
this.submitFliterVal.categoryIdList = [];
this.submitFliterVal.goodsSpecificationIds = [];
this.submitFliterVal.productAttributeIds = [];
this.brandList.forEach(item=>{
item.selectFlag = false;
});
this.brandList2.forEach(item=>{
item.selectFlag = false;
});
this.GoodsSpecificationNameAndValuesListResponseDTO.forEach(
(ele) => {
if (ele.specificationValueList) {
ele.specificationValueList.forEach((val) => {
val.selectFlag = false;
});
}
ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
ele.specificationValueList2 = ele.specificationValueList.slice(8);
}
);
this.attributeList.forEach(
(ele) => {
if (ele.specificationValueList) {
ele.specificationValueList.forEach((val) => {
val.selectFlag = false;
});
}
ele.specificationValueList1 = ele.specificationValueList.slice(0, 8);
ele.specificationValueList2 = ele.specificationValueList.slice(8);
}
);
console.log(this.submitFliterVal,'--------重置')
},
// 提交筛选
submitFliter() {
// this.$forceUpdate();
console.log(
this.submitFliterVal.minPrice > this.submitFliterVal.maxPrice,
Number(this.submitFliterVal.minPrice) >
Number(this.submitFliterVal.maxPrice)
);
console.log(this.submitFliterVal.minPrice, this.submitFliterVal.maxPrice);
if (
Number(this.submitFliterVal.minPrice) >
Number(this.submitFliterVal.maxPrice)
) {
Toast("最高价应大于最低价");
return;
}
// 向外传值
console.log(this.submitFliterVal,this.randomNumber,'-----------------确认submitFliterVal')
let _this = this;
app.getFilterGoodsData({
submitFliterVal: _this.submitFliterVal,
randomNumber: _this.randomNumber,
});
this.show = false;
},
},
};
</script>
<style lang="scss" scoped>
input,
button {
outline: none;
border: none;
background: transparent;
}
.aaa{
position: fixed;
width: 100%;
height: 100%;
top: 0;
display: flex;
overflow: hidden;
justify-content: flex-end;
}
.bg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#000000, 0.75);
}
.goodsFliters {
right: -100vw;
transition: all 0.3s linear;
background: #fff;
width: 290px;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 60px;
overflow-y: auto;
.filters-text {
width: 100%;
height: 54px;
padding-left: 10px;
font-size: 16px;
color: #333;
font-weight: bold;
box-sizing: content-box;
line-height: 44px;
box-sizing: border-box;
border-bottom: 10px solid #f3f3f3;
}
.fliters-container {
flex: 1;
overflow-y: auto;
.price {
.search_ipt {
height: 36px;
line-height: 36px;
margin-top: 10px;
color: #666;
display: flex;
justify-content: space-between;
input {
width: 45%;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 18px;
color: #666666;
font-size: 13px;
background-color: #f3f3f3;
}
}
}
.list {
padding-top: 10px;
padding: 10px 10px 16px;
border-bottom: 10px solid #f3f3f3;
p.tit {
font-size: 15px;
color: #3a3a3a;
}
.specification {
flex-wrap: wrap;
span {
margin-top: 10px;
display: block;
margin-right: 10px;
width: 70px;
font-size: 14px;
padding: 3px 5px;
text-align: center;
border: 1px solid #666;
}
span.active {
color: #fff;
background: var(--main-color);
border-color: var(--main-color);
}
}
}
.brand-wrap {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
.tit {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
.tit-title {
font-size: 15px;
color: #3a3a3a;
}
.tit-list {
width: 70%;
font-size: 12px;
color: #999999;
text-align: right;
.brands {
width: 70%;
}
}
}
.brand-list {
padding: 10px 5px 0 5px;
// border-top: 1px solid #eeeeed;
margin-top: 10px;
.brand-item {
width: 29%;
padding: 0 5px;
float: left;
margin-bottom: 10px;
.brand-item-text {
height: 28px;
text-align: center;
line-height: 28px;
font-size: 13px;
color: #666666;
background-color: #f3f3f3;
border-radius: 2px;
padding: 0 5px;
position: relative;
overflow: hidden;
img {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 15px;
}
}
.brand-active {
background-color: rgba(255, 72, 72, 0.1);
color: #ff4848;
}
}
.more {
width: 33%;
height: 28px;
text-align: center;
box-sizing: border-box;
font-size: 13px;
color: #666666;
border: 1px solid #979797;
border-radius: 2px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.height65 {
width: 100%;
height: 65px;
}
}
.fliterBtn {
height: 50px;
background-color: white;
.btns {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
div {
flex: 1;
height: 40px;
border-radius: 20px;
text-align: center;
font-size: 16px;
line-height: 40px;
color: #fff;
margin: 0 10px;
}
.btn2 {
background: var(--main-color);
}
.btn1 {
background: var(--minor-color);
}
}
}
.brand-wrap {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
.tit {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
.tit-title {
font-size: 15px;
color: #3a3a3a;
}
.tit-list {
width: 70%;
font-size: 12px;
color: #999999;
text-align: right;
.brands {
width: 70%;
}
}
}
.brand-list {
padding: 10px 5px 0 5px;
// border-top: 1px solid #eeeeed;
margin-top: 10px;
max-height: 46vh;
overflow-y: auto;
.brand-item {
width: 29%;
padding: 0 5px;
float: left;
margin-bottom: 10px;
.brand-item-text {
height: 28px;
text-align: center;
line-height: 28px;
font-size: 13px;
color: #666666;
background-color: #f3f3f3;
border-radius: 2px;
padding: 0 5px;
position: relative;
overflow: hidden;
img {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 15px;
}
}
.brand-active {
background-color: rgba(255, 72, 72, 0.1);
color: #ff4848;
}
}
.more {
width: 33%;
height: 28px;
text-align: center;
box-sizing: border-box;
font-size: 13px;
color: #666666;
border: 1px solid #979797;
border-radius: 2px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.list {
padding-top: 10px;
padding: 10px 10px 16px;
border-bottom: 10px solid #f3f3f3;
p.tit {
font-size: 15px;
color: #3a3a3a;
}
.specification {
flex-wrap: wrap;
span {
margin-top: 10px;
display: block;
margin-right: 10px;
width: 70px;
font-size: 14px;
padding: 3px 5px;
text-align: center;
border: 1px solid #666;
}
span.active {
color: #fff;
background: var(--main-color);
border-color: var(--main-color);
}
}
}
}
</style>