<template>
    <div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
        <div class="select-box s-w-50 bor-r">
            <div class="dis-f bor-b-das" :class="{'al-item housing-pd':routePath==='/needHousing'}">
                <div class="tab-title">{{routePath==='/needHousing'?'目标区域':'地理位置'}}</div>
                <!-- 中介/个人房源页面 -->
                <div class="tab-text" v-if="routePath!=='/needHousing'">
                    <div class="dis-f">
                        <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
                            @click="selectPosition = 'region'">按区域</div>
                        <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
                            @click="selectPosition = 'school'">按学校</div>
                    </div>
                    <div class="select-tab-info">
                        <img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
                            class="img" alt="">
                        <div class="info-box" v-show="selectPosition === 'region'">
                            <div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
                                @click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
                                <div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
                                        <div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
                                            {{
                                                selectData.data && selectData.data.length === 0 ? '不限' :
                                                selectData.data && selectData.data.length
                                            }}
                                        </div>
                                    </div>
                                </div>
                                <img src="../../assets/homeImage/selectInfoTabIcon.svg"
                                    v-show="selectTabCheck.id !== item.id" class="img" alt="">
                                <img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
                                    class="img" alt="">
                            </div>
                            <div class="hid-box">
                                <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
                                    :closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
                                </checkBoxGroup>
                            </div>
                        </div>
                        <div class="school-info-box" v-show="selectPosition === 'school'">
                            <div class="lef-btn" @click="prevSchoolData">
                                <img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                    class="img" alt="">
                            </div>
                            <div class="right-btn" @click="nextSchoolData">
                                <img :src="schoolPages === shcoolData.length ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                    class="img" alt="">
                            </div>
                            <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
                                indicator-position="none" class="s-w-100" ref="schoolData">
                                <el-carousel-item v-for="(item, i) in shcoolData" :key="i">
                                    <div class="school-carousel-box">
                                        <div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
                                            class="carousel-info-box"
                                            :class="[{ 'info-box-check': schoolSelectObj.title === items.title }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
                                            {{ items.title }}
                                        </div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </div>
                <!-- 求房源 -->
                <div class="need-housing-box dis-f al-item" v-if="routePath==='/needHousing'">
                    <div class="select-tab-info" style="margin-top:0;">
                        <div class="housing-info-box info-box" v-show="selectPosition === 'region'" style="position: relative;padding: 0;height:30px;width: 420px;">
                            <div class="check-none dis-f al-item btn" 
                            :class="[{'btn-check':selectTabCheck.id === item.id}]"
                            style="margin-right:10px;"
                                @click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
                                <div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
                                        <div>
                                            {{
                                                selectData.data && selectData.data.length === 0 ? '不限' :
                                                selectData.data && selectData.data.length
                                            }}
                                        </div>
                                    </div>
                                </div>
                                <img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
                                        class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt="" v-show="i!==0">
                            </div>
                            <div class="hid-box">
                                <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
                                    :closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
                                </checkBoxGroup>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':routePath==='/needHousing'}">
                <div class="tab-title">{{routePath==='/needHousing'?'求租方式':'出租方式'}}</div>
                <div class="tab-text dis-f al-item" style="padding-bottom:0;">
                    <div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
                        <div v-if="item.title !== '不限'">
                            <el-dropdown trigger="click">
                                <span class="dropdown-btn jus-x dis-f al-item"
                                    :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
                                    @click="setHireId(item.title)">
                                    {{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
                                        hireTypeObj.title || '不限' }}</span>
                                    <img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
                                        class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu class="pd-10 el-dropdown-menu">
                                        <el-dropdown-item v-for="(items, j) in item.hireType" :key="j">
                                            <div class="dropdown-text" @click="dropdownCommand(items)"
                                                :class="{ 'dropdown-check-text': hireTypeObj.id === items.id }">{{
                                                    items.title
                                                }}
                                                <div class="type-icon" v-show="hireTypeObj.id === items.id"></div>
                                            </div>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                        <div class="btn  jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
                            v-if="item.title === '不限'" @click="setHireId(item.title)">{{
                                item.title }}</div>
                    </div>
                </div>
            </div>
            <div class="dis-f al-item" style="padding:25px 0;">
                <div class="tab-title">{{routePath==='/needHousing'?'租金预算':'租金'}}</div>
                <div class="dis-f al-item rent-box jus-bet">
                    <div class="dis-f al-item">
                        <input type="text" class="input" v-model="rentObj.min">
                        <span class="tab-icon">~</span>
                        <input type="text" class="input" v-model="rentObj.max">
                        <span class="unit-box">HK$/月</span>
                    </div>
                    <div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min||rentObj.max">
                        <div class="img-box dis-f jus-x al-item">
                            <img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
                        </div>
                        清除金额
                    </div>
                </div>
            </div>
        </div>
        <div class="select-box s-w-50">
            <div class="dis-f bor-b-das">
                <div class="tab-title">租期</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="btn  jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i"
                            :class="{ 'btn-check': hireDate.id === item.id }" @click="hireDate.id = item.id">{{ item.title
                            }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f bor-b-das pd-t-20">
                <div class="tab-title">{{routePath==='/needHousing'?'求租者性别':'性别'}}</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="btn  jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
                            :class="{ 'btn-check': gender.id === item.id }" @click="gender.id = item.id">{{ item.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f bor-b-das pd-t-20">
                <div class="tab-title">发布时间</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i"
                            :class="{ 'btn-check': releaseObj.id === item.id }" @click="releaseObj.id = item.id">{{
                                item.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="dis-f pd-t-20">
                <div class="tab-title">其他</div>
                <div class="select-btn-box">
                    <div class="dis-f">
                        <div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in otherData" :key="i">
                            <el-checkbox-group v-model="otherCheck.list">
                                <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="btm-list">
        <div class="dis-f al-item">
            共<span class="count">{{ counti }}</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span>
            <div class="dis-f al-item">
                <div v-show="selectTabCheck.id&&selectTabCheck.title">{{ selectTabCheck.title }}:</div>
                <div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
                    {{ item.title }}
                    <img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
                </div>
            </div>
        </div>
        <span class="dis-f al-item sort-text">
            最新发布
            <img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
        </span>
    </div>
</template>
  
<script setup>
import { reactive, ref, getCurrentInstance,defineProps,watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";

const { proxy } = getCurrentInstance()

const props=defineProps({
    count:{
        type:Number,
        default:0
    }
})

//当前数据数量
let counti = ref(0)
watchEffect(()=>{
    counti.value=props.count
    console.log(counti.value)
})

let list = [{
    title: '不限',
    id: ''
}, {
    title: '港岛',
    id: 1,
    data: [{
        title: '上环',
        id: 1
    }, {
        title: '铜锣湾',
        id: 2
    }, {
        title: '天后',
        id: 3
    }, {
        title: '北角',
        id: 4
    }]
}, {
    title: '九龙',
    id: 2,
    data: [{
        title: '1',
        id: '1'
    }, {
        title: '2',
        id: '2'
    }, {
        title: '3',
        id: '3'
    }]
}]
//按区域/学校选择的地区
let selectData = reactive({ data: [] })
let selectTabCheck = reactive({
    id: '',
    title: '',
    data: []
})
//区域状态
let selectPosition = ref('region')
let showSelect = ref(false)

//学校区域状态
let schoolSelectObj = reactive({ id: '', title: '不限' })
let schoolPages = ref(0) //页数
let shcoolData = [{ title: '不限' }, { title: '港大' }, { title: '科大' }, { title: '中大' }, { title: '城大' }, { title: '理工' }, { title: '浸会' }, { title: '教大' }, { title: '岭南' }, { title: '123' }, { title: '123' },]
let setSchoolData = () => {
    let arr = []
    let num = 0
    for (let i = 0; i < shcoolData.length; i++) {
        if (!arr[num]) {
            arr[num] = []
        }
        if (arr[num].length < 9) arr[num].push(shcoolData[i])

        if (arr[num].length === 9) {
            num++
        }
    }
    shcoolData = arr
}
setSchoolData()
//选择学校区域属性
let setSchoolObj = (obj) => {
    schoolSelectObj.id = obj.id
    schoolSelectObj.title = obj.title
}

//学校轮播组件
let prevSchoolData = () => {
    const schoolData = proxy.$refs.schoolData
    schoolPages.value--
    schoolData.prev()
}

let nextSchoolData = () => {
    const schoolData = proxy.$refs.schoolData
    schoolPages.value++
    schoolData.next()
}

//点击区域/学校选项
let setSelectData = (id, data = [], title) => {
    selectTabCheck.id = id;
    selectTabCheck.title = title
    selectTabCheck.data = data;
    selectData.data = []
    showSelect.value = true
}
//取消按钮
let closeSeach = () => {
    selectTabCheck.id = ''
    selectData.data = []
    showSelect.value = false
}
//确认按钮
let selectSeach = (data = []) => {
    let arr = []
    data.map(res => {
        selectTabCheck.data.map(item => {
            if (res === item.id) {
                arr.push(item)
            }
        })
    })
    selectData.data = arr
    showSelect.value = false
}
//监听选项
let watchData = (data) => {
    // selectData.data = data
    // console.log(selectData)
}

//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path

//底部删除按钮
let deleteSelect = (id) => {
    selectData.data.splice(id, 1)
}



//出租方式
let hireTypeArr = reactive([
    { hireType: [], title: '不限' },
    { hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' },
    { hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], title: '整租' }])
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选

let setHireId = (title) => {
    hireTypeObj.hireId = title
    hireTypeObj.id = ''
    hireTypeObj.title = ''
}

let dropdownCommand = (obj) => {
    hireTypeObj.id = obj.id
    hireTypeObj.title = obj.title
}

//租金
let rentObj = reactive({ min: '', max: '' })

//租期
let hireData = reactive([{ title: '不限', id: '' }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
let hireDate = reactive({ id: '', title: '' })

//性别
let genderData = reactive([{ title: '不限', id: '' }, { title: '女', id: 1 }, { title: '男', id: 2 }])
let gender = reactive({ id: '' })

//发布时间
let releaseTime = reactive([{ title: '不限', id: '' }, { title: '三天', id: 1 }, { title: '一周', id: 2 }, { title: '一个月内', id: 3 }, { title: '两个月内', id: 4 }, { title: '三个月内', id: 5 }])
let releaseObj = reactive({ id: '' })

//其他
let otherData = reactive([{ title: '认证房源', id: '' }, { title: '有电梯', id: 1 }, { title: '有阳台', id: 2 }])
let otherCheck = reactive({ list: [] })
</script>
<script>
export default {
    props: {

    }
}
</script>
<style scoped>
.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.al-item {
    align-items: center;
}

.s-w-100 {
    width: 100%;
}

.bor-r {
    border-right: 1px dashed #ebebeb;
}

.s-w-50 {
    width: 50%;
}

img {
    object-fit: contain;
}

.pad-t-b-15 {
    padding: 15px 0;
}

.pd-10 {
    padding: 10px;
}

.bor-b-das {
    border-bottom: 1px dashed #ebebeb;
}
.housing-pd{
    padding:5px 0 25px 0;
}
.housing-pd-25{
    padding:0 25px;
}

.jus-bet {
    justify-content: space-between;
}

.dropdown-text {
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #7F7F7F;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    .type-icon {
        width: 6px;
        height: 14px;
        background: inherit;
        background-color: rgba(80, 227, 194, 1);
        border: none;
        border-radius: 3px;
    }
}

.el-dropdown-menu {
    width: 150px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}

.dropdown-check-text {
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
    color: #000000;
}

.select-box {
    padding: 20px 24px 0px 25px;

    .needHousing-box{
        height:50px;
    }

    .select-tab-info {
        position: relative;
        margin-top: 5px;

        .school-info-box {
            position: absolute;
            top: 5px;
            left: 0;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 5px 0px;

            .school-carousel-box {
                height: 100%;
                padding: 0 40px;
                display: flex;
                align-items: center;

                .mg-r-15 {
                    margin-right: 15px;
                }

                .carousel-info-box {
                    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 14px;
                    color: #7F7F7F;
                    line-height: 20px;
                    cursor: pointer;
                }

                .info-box-check {
                    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                    font-weight: 650;
                    font-style: normal;
                    font-size: 14px;
                    color: #000000;
                }
            }

            .lef-btn {
                width: 30px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: 1px dashed #ebebeb;
                border-left: 1px solid #ebebeb;
                border-top: 1px solid #ebebeb;
                border-bottom: 1px solid #ebebeb;
                background: #fff;
                border-radius: 10px 0 0 10px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 66;

                .img {
                    width: 10px;
                    height: 10px;
                    transform: rotate(90deg);
                }
            }

            .right-btn {
                border-left: 1px dashed #ebebeb;
                border-right: 1px solid #ebebeb;
                border-top: 1px solid #ebebeb;
                border-bottom: 1px solid #ebebeb;
                background: #fff;
                border-radius: 0 10px 10px 0;
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 50px;
                z-index: 66;

                .img {
                    width: 10px;
                    height: 10px;
                    transform: rotate(270deg);
                }
            }
        }

        .housing-info-box{
            display: flex;
            align-items: center;
            height:30px;
            position: relative;
            top:0 !important;
        }

        .info-box {
            position: absolute;
            top: 5px;
            left: 0;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 20px;

            .hid-box {
                position: absolute;
                z-index: 666;
                left: 0;
                top: 56px;
                width: 100%;
            }

            .check-text {
                font-family: 'ArialMT', 'Arial', sans-serif;
                font-weight: 600 !important;
                font-style: normal;
                font-size: 13px;
                letter-spacing: normal;
                color: #000 !important;
                vertical-align: none;
                text-align: center;
            }

            .check-none {
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #7F7F7F;
                line-height: 20px;
                vertical-align: none;
                text-align: center;
                line-height: normal;
                text-transform: none;
                margin-right: 30px;
                cursor: pointer;

                .check-data {
                    width: 24px;
                    height: 16px;
                    background: inherit;
                    background-color: rgba(0, 0, 0, 1);
                    border: none;
                    border-radius: 13px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    color: #FFFFFF;
                    line-height: 16px;
                    padding: 0 5px;
                }

                .img {
                    width: 10px;
                    height: 10px;
                    margin-left: 5px;
                }
            }
        }

        .img {
            width: 459px;
            height: 55px;
        }
    }

    .tab-title {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #B5B5B5;
        text-align: left;
        height: 30px;
        line-height: 30px;
        margin-right: 35px;
        width: 70px;
    }

    .info-bor-b {
        border-bottom: 1px dashed #ebebeb;
    }
    .need-housing-box{
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #7F7F7F;
        text-align: center;
        height:50px;
    }

    .tab-text {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #7F7F7F;
        text-align: center;
        padding-bottom: 15px;
    }

    .pd-t-20 {
        padding-top: 20px;
    }

    .select-btn-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #7F7F7F;
        text-align: center;
        padding-bottom: 20px;
    }

    .btn {
        padding: 5px 10px;
        height: 30px;
        display: flex;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        margin-right: 10px;
        text-align: center;
        cursor: pointer;
    }

    .dropdown-btn {
        height: 30px;
        display: flex;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        margin-right: 10px;
        text-align: center;
        padding: 5px 10px;
        cursor: pointer;

        .mg-l-30 {
            margin-left: 30px !important;
        }

        .img {
            width: 10px;
            height: 10px;
            margin-left: 5px;
        }
    }

    .min-btn {
        padding: 5px 10px;
    }

    .btn-check {
        color: #50E3C2 !important;
        border: 1px solid #50E3C2;
        background: #eefcf9;
    }
}

.rent-box {
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #555555;
    width: 455px;

    .clean-btn {
        width: 96px;
        height: 30px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        border: none;
        border-radius: 50px;
        font-family: 'ArialMT', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        letter-spacing: normal;
        color: #333333;

        .img-box {
            width: 14px;
            height: 14px;
            border: 1px solid #333;
            margin-right: 5px;
            border-radius: 50%;
            position: relative;

            .img {
                position: absolute;
                width: 5px;
                height: 5px;
            }
        }
    }

    .tab-icon {
        margin: 0 10px;
    }

    .unit-box {
        margin-left: 10px;
    }

    .input {
        width: 100px;
        height: 40px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(179, 179, 179, 1);
        border-radius: 10px;
        padding:0 10px;
    }
}

.btm-list {
    padding: 25px 20px;
    display: flex;
    justify-content: space-between;
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
    font-weight: 400;
    color: #555555;
    font-size: 15px;

    .btm-btn {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #50e3c2;
        margin-left: 10px;

        .img {
            width: 8px;
            height: 8px;
            margin-left: 8px;
        }
    }

    .count {
        font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
        font-weight: 700;
        color: #000000;
        margin: 0 5px;
    }

    .sort-text {
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        font-style: normal;
        font-size: 14px;
        color: #000000;
        text-align: center;
    }

    .img {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }
}

/deep/ .el-dropdown-menu__item {
    --el-dropdown-menuItem-hover-color: #7F7F7F;
    --el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
}

/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 14px;
    color: #000000;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #50e3c2;
    border-color: #50e3c2;
}
</style>
  