<template>
    <!--pages/wanted/wanted.wxml-->
    <!-- 自定义顶部 -->
    <!-- <nav-bar class="nav-bar" bgColor="#fff" bind:getData="getData">
  <view class="search-form">
    <image class="search-icon" src="{{ossImgPrefix}}/icon/search.png"></image>
    <input placeholder="搜索职位，公司" placeholder-class="log-input-p" type="text"></input>
  </view>
</nav-bar> -->
    <!-- 轮播区 -->

    <wd-swiper
        class="banner"
        :list="swiperList"
        autoplay
        v-model:current="current"
        :indicator="{ type: 'dots-bar' }"
        @click="handleClickSwiper"
    ></wd-swiper>
    <!-- 零工培训 -->
    <view class="router-link flex-between">
        <view v-for="(v, i) in routerLinkList" :key="i" tap="navigateTo" @click="clickNav(v.url)">
            <img :src="v.icon" />
            <view>{{ v.text }}</view>
        </view>
    </view>
    <!-- 筛选导航 -->
    <view class="select-nav" :style="{ top: '0px' }" catchtouchmove="{{true}}">
        <view class="recommend">推荐</view>
        <view class="select-item">
            <text :class="{ active: maskType == 'address' }" @tap="openMask('address')">贵州省</text>
            <text :class="{ active: maskType == 'position' }" @tap="openMask('position')">职位类型</text>
            <text :class="{ active: maskType == 'other' }" @tap="openMask('other')">更多筛选</text>
        </view>
    </view>
    <!-- 蒙版弹框 -->
    <view class="pop-mask" :style="{ paddingTop: '70rpx' }" v-if="maskType" @click="maskType = null">
        <!-- 区域弹窗 -->
        <view
            @click.stop=""
            catchtap="preventD"
            class="screen-pop address screen-pop-padding {{regionPop? 'screen-pop-tion':''}} "
            v-if="maskType === 'address'"
        >
            <view class="region-pop-content">
                <view class="region-pop-left">
                    <scroll-view scroll-y style="height: 652rpx">
                        <view
                            class="region-list"
                            :class="{ 'region-list-color': cityId == item.code }"
                            v-for="(item, index) in cityData"
                            :key="item.code"
                            @tap="bindCityList(item.code, item.name)"
                            >{{ item.name }}</view
                        >
                    </scroll-view>
                </view>
                <view class="region-pop-right">
                    <scroll-view scroll-y style="height: 652rpx">
                        <view
                            class="region-list"
                            :class="{ 'region-list-color': regionId == v.code }"
                            v-for="(v, i) in regionData"
                            :key="v.code"
                            @tap="bindRegionList(v.code, v.name)"
                            >{{ v.name }}</view
                        >
                    </scroll-view>
                </view>
            </view>
        </view>
        <!-- 职位类型弹窗 -->
        <view
            @click.stop=""
            catchtap="preventD"
            class="screen-pop position screen-pop-padding {{sortPop? 'screen-pop-tion':''}}"
            v-if="maskType === 'position'"
        >
            <view class="screen-pop-box">
                <view class="screen-pop-content screen-pop-padding">
                    <scroll-view scroll-y class="screen-pop-padding40" style="height: 652rpx">
                        <view>
                            <view class="screen-pop-title">全部</view>
                            <view class="pop-title-label">
                                <view
                                    class="label-list"
                                    :class="{ 'label-list-color': sortNav == '职位类型' }"
                                    @tap="bindSortList('全部', '')"
                                    >全部</view
                                >
                            </view>
                        </view>
                        <view v-for="(item, index) in positionType" :key="index">
                            <view class="screen-pop-title">{{ item.name }}</view>
                            <view class="pop-title-label">
                                <view
                                    v-for="(v, i) in item.children"
                                    :class="['label-list', sortNav == v.name ? 'label-list-color' : '']"
                                    :key="i"
                                    @tap="bindSortList(v.name, v.id)"
                                    >{{ v.name }}</view
                                >
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <!-- 筛选弹窗 -->
        <view
            @click.stop=""
            catchtap="preventD"
            class="screen-pop other screen-pop-padding {{screenPop? 'screen-pop-tion':''}}"
            v-if="maskType === 'other'"
        >
            <view class="screen-pop-box">
                <view class="screen-pop-content screen-pop-padding" style="bottom: 130rpx">
                    <scroll-view scroll-y class="screen-pop-padding40" style="height: 522rpx">
                        <view class="screen-pop-title">性别要求</view>
                        <view class="pop-title-label">
                            <view
                                v-for="item in screenSexData"
                                :class="['label-list', screenSex == item.text ? 'label-list-color' : '']"
                                :key="item.code"
                                @tap="bindScreenSexList(item.text, item.code)"
                                >{{ item.text }}</view
                            >
                        </view>
                        <view class="screen-pop-title">身份要求</view>
                        <view class="pop-title-label">
                            <view
                                v-for="item in identityData"
                                :class="['label-list', screenEducation == item.text ? 'label-list-color' : '']"
                                :key="item.code"
                                @tap="bindScreenEducationList(item.text, item.code)"
                                >{{ item.text }}</view
                            >
                        </view>
                    </scroll-view>
                </view>
                <view class="pop-bottom">
                    <view class="pop-btn" @tap="maskType = ''">完成</view>
                    <view class="pop-btn" bindtap="bindScreenReset">重置</view>
                </view>
            </view>
        </view>
    </view>
    <!-- 全职职位列表 -->
    <view class="content">
        <view class="position-content">
            <view class="item" v-for="(v) in positionListData" :key="v">
                <postion-card1 :data="v"></postion-card1>
            </view>
        </view>
        <!-- 暂无职位推荐-->
        <view class="nothing" v-if="!positionListData.length">
            <view class="nothing-text">暂无职位推荐</view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getJobListApi } from "@/api/postion.js";
import { getTreeListApi, dictJobTypeApi, getBannerListApi } from "@/api/common.js";
import { getEumData } from "@/utils/utils.js";
import evn from "@/utils/config.js";
/* 轮播 */
const swiperList = ref([]);
// 获取数据
getBannerListApi(1).then(res => {
    console.log(res);
    swiperList.value = res.data.map(item => evn.APP_IMAGE_BASE_API + item.imgPath);
});
const current = ref(0);
const handleClickSwiper = e => {
    console.log(e);
};
const routerLinkList = [
    {
        icon: new URL("@/static/image/postion/qiuzhidengji.png", import.meta.url).href,
        text: "求职登记",
        url: "/pages/user/resume/index"
    },
    {
        icon: new URL("@/static/image/postion/xuqiudengji.png", import.meta.url).href,
        text: "需求登记",
        url: "/pages/postionList/demandRegistration/index"
    },
    {
        icon: new URL("@/static/image/postion/qiuzhixianjing.png", import.meta.url).href,
        text: "求职陷阱",
        url: "/pages/postionList/trap/index"
    },
    {
        icon: new URL("@/static/image/postion/linggongzhuanqu.png", import.meta.url).href,
        text: "零工专区",
        url: "/pages/postionList/platformList/index?type=零工专区"
    },
    {
        icon: new URL("@/static/image/postion/qitapingtai.png", import.meta.url).href,
        text: "其他平台",
        url: "/pages/postionList/platformList/index?type=其他平台"
    }
];

const clickNav = url => {
    if (url) {
        uni.navigateTo({
            url
        });
    }
};
const nothingFlag = false;
const maskType = ref("");
/* 筛选 */
const openMask = type => {
    maskType.value = type;
    // 页面滚动到合适位子
    uni.pageScrollTo({
        scrollTop: 280,
        duration: 0
    });
};
// 省市区
let regionPop = false; //区域
let regionNav = "贵州省"; //选中区域
let cityId = ref(null); //选中市id
const cityData = ref([]); //市
const regionId = ref(null); //选中区域id
const regionData = ref([]); //区
const getTreeData = () => {
    getTreeListApi({
        isCityNeedUnlimited: true,
        isDistrictNeedUnlimited: true
    }).then(res => {
        if (res.code === 200) {
            let _data = res.data;
            for (let i = 0; i < _data.length; i++) {
                if (_data[i].code == 520000) {
                    let _children = _data[i].children;
                    cityData.value = _children;
                    for (let j = 0; j < _children.length; j++) {
                        if (_children[j].code == 520100) {
                            regionData.value = _data[i].children[j].children;
                        }
                    }
                }
            }
        }
    });
};
getTreeData();
// 选择市
const bindCityList = (code, name) => {
    for (let i = 0; i < cityData.value.length; i++) {
        if (cityData.value[i].code == code) {
            let _children = cityData.value[i].children;
            regionData.value = _children;
            cityId.value = code;
        }
    }
};
// 选择区
const bindRegionList = (code, name) => {
    let _regionNav;
    if (name == "全部") {
        for (let i = 0; i < cityData.length; i++) {
            if (cityId.value == cityData[i].code) {
                _regionNav = cityData[i].name;
            }
        }
    } else {
        pageNo = 1;
        regionNav = name;
        regionId.value = code;
    }
};
// 职业类型筛选
const positionType = ref([]);
const sortNav = ref("职位类型");
const sortId = ref("");
const dictJobType = () => {
    dictJobTypeApi({ jobDateType: 1 }).then(({ code, data }) => {
        if (code == 200) {
            positionType.value = data;
        }
    });
};
const bindSortList = (name, id) => {
    if (name == "全部") {
        sortNav.value = "职位类型";
        sortId.value = id;
        pageNo = 1;
    } else {
        sortNav.value = name;
        sortId.value = id;
        pageNo = 1;
    }
};
dictJobType();
// 其他筛选
const identityData = ref([]);
const screenSexData = ref([]);
const screenSex = ref("");
const screenSexCode = ref("");
const screenEducation = ref("");
const screenEducationCode = ref("");
const initOtherData = async () => {
    screenSexData.value = await getEumData("EnumGenderRequirement");
    identityData.value = await getEumData("EnumIdentityRequirement");
};
const bindScreenSexList = (text, code) => {
    screenSex.value = text;
    screenSexCode.value = code;
};
const bindScreenEducationList = (text, code) => {
    screenEducation.value = text;
    screenEducationCode.value = code;
};
initOtherData();
/* 获取职位列表 */
let pageNo = 1,
    pageSize = 10,
    isPartTimeJob = null,
    cityCode = null,
    districtCode = null,
    jobType = null,
    genderType = null,
    jobIdentityType = null,
    orderBy = null;
const positionListData = reactive([]);
const getListData = () => {
    let data = {
        pageNo: pageNo,
        pageSize: pageSize,
        isPartTimeJob: isPartTimeJob,
        provinceCode: "",
        cityCode: cityCode || null,
        districtCode: districtCode || null,
        jobType: jobType || null,
        genderType: genderType || null,
        jobIdentityType: jobIdentityType || null,
        orderBy: orderBy || 1
    };
    getJobListApi(data).then(res => {
        if (res.code == 200) {
            positionListData.push(...res.data);
        }
    });
};
getListData();
</script>

<style lang="scss" scoped>
/* page {
    background: #ffffff;
} */

// 顶部导航
.nav-bar {
    position: relative;
    .search-form {
        // background: rgba(245, 245, 245, 1);
        position: relative;
        box-sizing: content-box;
        width: 452rpx;
        height: 60rpx;
        margin-left: 32rpx;
        overflow: hidden;
        background-color: #f7f7f7;
        border-radius: 30rpx;
        .search-icon {
            position: absolute;
            top: 50%;
            left: 42rpx;
            z-index: 10;
            width: 28rpx;
            height: 28rpx;
            transform: translateY(-50%);
        }
        input {
            // background-color: #F7F7F7;
            position: absolute;
            right: 0rpx;
            left: 0rpx;
            z-index: 9999;
            box-sizing: border-box;
            width: 100%;
            width: auto;
            height: 100%;
            padding: 0 88rpx;
        }
    }
}

// 轮播
.banner {
    padding: 0 32rpx;
    margin-top: 30rpx;
    swiper-item {
        overflow: hidden;
        background-color: #0c81ee;
        border-radius: 10rpx;
    }
}

// 链接跳转
.router-link {
    padding: 40rpx 60rpx;
    text-align: center;
    border-bottom: 16rpx solid #f3f4f8;
    img {
        width: 83.66rpx;
        height: 80rpx;
    }
    view {
        font-size: 24rpx;
        font-weight: normal;
        color: #1b2026;
    }
}

// 筛选条
.select-nav {
    position: sticky;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    padding: 0 32rpx;
    background-color: #ffffff;
    .recommend {
        position: relative;
        font-size: 36rpx;
        font-weight: bold;
        color: #1b2026;
        letter-spacing: 0;
        &::after {
            position: absolute;
            right: -8rpx;
            bottom: 4rpx;
            z-index: -1;
            display: block;
            width: 36px;
            height: 16rpx;
            content: "";
            background: linear-gradient(90deg, rgb(241 246 251 / 0%) 0%, #76a5ff 100%);
        }
    }
    .select-item {
        margin-right: 8rpx;
        text {
            position: relative;
            padding: 2rpx 20rpx 2rpx 12rpx;
            margin-left: 24rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            color: #1b2026;
            background-color: #ffffff;
            &::after {
                position: absolute;
                right: 12rpx;
                bottom: 6rpx;
                display: block;
                width: 0;
                height: 0;
                content: "";
                border: 4rpx solid #1b2026;
                border-top-color: transparent;
                border-left-color: transparent;
            }
            &.active {
                color: #ffffff;
                background: linear-gradient(180deg, #3570ff -3%, #29a5ff 100%);
                border-radius: 8rpx;
                &::after {
                    border: 4rpx solid #ffffff;
                    border-top-color: transparent;
                    border-left-color: transparent;
                }
            }
        }
    }
}

// 筛选弹框
.pop-mask {
    position: fixed;
    inset: 0;
    z-index: 20;
    background-color: #00000066;
    .address {
        .region-pop-content {
            text-align: center;
            background-color: #ffffff;
            .region-pop-left {
                width: 375rpx;
                padding: 0;
                .region-list {
                    width: 375rpx;
                    padding: 0;
                    border: 0;
                }
                .region-list-color {
                    background-color: #f3f4f8;
                }
            }
            .region-pop-right {
                width: 375rpx;
                padding: 0;
                .region-list {
                    background-color: #f3f4f8;
                    border: 0;
                }
            }
        }
    }
    .position,
    .other {
        .screen-pop-box {
            background-color: #ffffff;
            .screen-pop-title {
                font-size: 28rpx;
                font-weight: 600;
                color: #1b2026;
            }
            .label-list-color {
                font-weight: 600;
                color: #1f86ff;
                background-color: rgb(31 134 255 / 10%);
                border-color: transparent;
            }
        }
    }
}

// 工作列表
.content {
    min-height: 100vh;
    .position-content {
        padding: 0;
        background: #f6f7f8;
        .recommend-list {
            position: relative;
            padding: 32rpx 32rpx 0;
            margin-bottom: 20rpx;
            background-color: #ffffff;
            border: 0;
        }
        .item {
            padding: 32rpx;
            background-color: #ffffff;
            border-bottom: 16rpx solid #f3f4f8;
        }
    }
}

/* nav全职兼职推荐 */
.nav {
    /* height: 100rpx; */
    box-sizing: border-box;
    width: 100%;
    padding: 28rpx 40rpx;
    padding-bottom: 0;
    background: #ffffff;
}
.nav .nav-list {
    display: inline-block;
    margin-right: 40rpx;
}
.nav .nav-list .nav-list-title {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 44rpx;
    color: rgb(128 128 128 / 100%);
    transition: 0.3s ease all;
}
.nav .nav-list .nav-active {
    font-size: 36rpx;
    font-weight: 600;
    color: rgb(58 58 60 / 100%);
}
.nav .nav-list .nav-list-before {
    width: 60rpx;
    height: 8rpx;
    margin: 0 auto;
    margin-top: 4rpx;
    background: rgb(24 146 255 / 100%);
    border-radius: 4rpx;
    opacity: 0;
    transition: 0.3s ease all;
}
.nav .nav-list .before-active {
    opacity: 1;
}

/* 筛选导航 */
.nav-screen {
    background: #ffffff;
    border-bottom: 1px solid rgb(238 239 238 / 100%);
}

/* 职位筛选弹窗 */
.nav-screen .screen-pop-mask {
    position: fixed;
    inset: 0;
    z-index: 10;
    background: rgb(0 0 0 / 40%);
    transition: 0.3s ease all;
}
.nav-screen .screen-pop {
    position: absolute;

    /* top: 326rpx; */
    top: 230rpx;
    left: -1000rpx;
    z-index: 20;
    width: 100%;
    max-height: 652rpx;
    padding-left: 40rpx;
    overflow-y: auto;
    background: #ffffff;
    transition: 0.3s ease all;
}
.nav-screen .screen-pop-tion {
    left: 0;
}
.nav-screen .screen-pop-list {
    font-size: 28rpx;
    line-height: 80rpx;
    color: #3a3a3c;
    background: #ffffff;
    border-top: 1px solid #e9e9e9;
}
.nav-screen .screen-pop-list:nth-child(1) {
    border: none;
}

/* nav */
.nav-screen-position .nav-screen-child text {
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
    color: rgb(58 58 60 / 100%);
    vertical-align: middle;
}
.nav-screen-position .nav-screen-child .icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 16rpx;
    vertical-align: middle;
    transition: 0.3s ease all;
}
.nav-screen-position .nav-screen-child .icon-tion {
    transform: rotate(180deg);
}
.nav-screen-list {
    display: flex;

    /* position: absolute; */

    /* top: 94rpx; */
    padding: 28rpx 40rpx;
    overflow: hidden;
    background: #ffffff;

    /* z-index: 20; */
}
.nav-screen-list .nav-screen-child {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 56rpx;
    color: rgb(128 128 128 / 100%);
    text-align: center;
    background: rgb(245 245 245 / 100%);
    border: 2rpx solid rgb(0 0 0 / 0%);
    border-radius: 4rpx;
}
.nav-screen-list .nav-screen-color {
    color: #1892ff;
    background: rgb(245 245 245 / 0%);
    border: 2rpx solid #1892ff;
}
.nav-screen-list .nav-screen-child:nth-child(2) {
    margin: 0 34rpx;
}
.nav-screen-list .nav-screen-child text {
    overflow: hidden;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 34rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-screen-list .nav-screen-child .icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 6rpx;
    vertical-align: middle;
    transition: 0.3s ease all;
}
.nav-screen-list .nav-screen-child .icon-tion {
    transform: rotate(180deg);
}

/* 职位列表 */
.position-content {
    padding: 28rpx 32rpx;
    padding-bottom: 0rpx;
    background: #ffffff;
}
.position-content .recommend-list {
    margin-bottom: 28rpx;
    border-bottom: 2rpx solid rgb(238 239 238 / 100%);
}
.position-content .recommend-list .recommend-title {
    margin-bottom: 14rpx;
    overflow: hidden;
}
.recommend-list .recommend-title .sign {
    width: auto;
    height: 28rpx;
    padding: 0 10rpx;
    margin-right: 12rpx;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 25rpx;
    color: rgb(250 122 96 / 100%);
    text-align: center;
    vertical-align: middle;
    background: rgb(252 229 229 / 100%);
    border-radius: 4rpx;
}
.recommend-list .recommend-title .title {
    font-size: 32rpx;
    font-weight: 500;
    color: rgb(58 58 60 / 100%);
    vertical-align: middle;
}
.recommend-list .salary-info {
    margin-bottom: 28rpx;
    overflow: hidden;
}
.recommend-list .salary-info .salary {
    font-size: 28rpx;
    font-weight: 600;
    color: rgb(255 89 55 / 100%);
    vertical-align: middle;
}
.recommend-list .salary-info .deliveryBtn {
    float: right;
}
.recommend-list .cos-details {
    display: flex;
    margin-bottom: 18rpx;
}
.recommend-list .cos-details .cos-requirement {
    flex: 1;
}
.recommend-list .cos-details .cos-requirement .cos-title {
    margin-bottom: 20rpx;
}
.recommend-list .cos-details .cos-requirement .cos-title .cos-name {
    display: inline-block;
    max-width: 260rpx;
    height: 32rpx;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.recommend-list .cos-details .cos-requirement .cos-title .cos-name-width {
    max-width: 500rpx;
}
.recommend-list .cos-details .cos-requirement .cos-title .cos-recommend {
    display: inline-block;
    height: 36rpx;
    padding: 0 4rpx;
    font-size: 20rpx;
    font-weight: 400;
    line-height: 36rpx;
    color: rgb(155 1 1 / 100%);
    vertical-align: middle;
    background: rgb(255 233 237 / 100%);
    border-radius: 4rpx;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.recommend-list .cos-details .cos-requirement .cos-title image {
    display: inline-block;
    width: 36rpx;
    height: 36rpx;
    vertical-align: middle;
    background-color: rgb(255 233 237 / 100%);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
.recommend-list .cos-details .cos-ask {
    margin-bottom: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(128 128 128 / 100%);
}
.recommend-list .cos-details .margin-none {
    margin-bottom: 0;
}
.recommend-list .cos-details .cos-welfare {
    width: 100%;
    max-height: 50rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recommend-list .cos-details .cos-welfare .welfare-list {
    float: left;
    width: auto;
    height: 40rpx;
    padding: 0 10rpx;
    margin: 0 12rpx 10rpx 0;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: rgb(128 128 128 / 100%);
    text-align: center;
    border: 2rpx solid rgb(186 186 186 / 100%);
    border-radius: 4rpx;
}
.recommend-list .cos-details .cos-video {
    position: relative;
    width: 160rpx;
    height: 120rpx;
    overflow: hidden;
}
.recommend-list .cos-details .recommend-video {
    width: 100%;
    height: 100%;
}
.cos-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 64rpx;
    height: 64rpx;
    transform: translate(-50%, -50%);
}

/* 筛选弹窗 */
.nav-screen .screen-pop-padding {
    padding-left: 0;
}
.screen-pop-box {
    position: relative;
    width: 100%;
    height: 652rpx;
}
.screen-pop-content {
    position: absolute;
    inset: 0 0 0rpx;
    padding: 0 40rpx;
    overflow: hidden;
}
.screen-pop-padding {
    padding: 0;
}
.screen-pop-padding40 {
    box-sizing: border-box;
    padding-left: 40rpx;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: rgb(0 0 0 / 0%);
}
.screen-pop-content .screen-pop-title {
    margin-top: 28rpx;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: rgb(58 58 60 / 100%);
}
.screen-pop-content .screen-pop-title text {
    color: #1892ff;
}
.screen-pop-content .pop-title-label {
    overflow: hidden;
}
.screen-pop-content .pop-padding {
    padding: 0 12rpx;
}
.screen-pop-content .label-list {
    float: left;
    padding: 12rpx 32rpx;
    margin: 12rpx 0;
    margin-right: 20rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgb(128 128 128 / 100%);
    border: 1px solid rgb(186 186 186 / 100%);
    border-radius: 8rpx;
}
.screen-pop-content .label-list-color {
    color: #1892ff;
    border-color: #1892ff;
}
.pop-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 28rpx 32rpx;
    overflow: hidden;
    background: #ffffff;
    border-top: 1px solid rgb(238 239 238 / 100%);
}
.pop-bottom .pop-btn {
    float: right;
    width: 132rpx;
    height: 64rpx;
    margin-left: 28rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 64rpx;
    color: rgb(58 58 60 / 100%);
    text-align: center;
    border: 1px solid rgb(186 186 186 / 100%);
    border-radius: 8rpx;
}
.pop-bottom .pop-btn:nth-child(2) {
    color: #ffffff;
    background: rgb(24 146 255 / 100%);
    border-color: rgb(24 146 255 / 100%);
}

/* 区域弹窗 */
.region-pop-content {
    position: relative;
    width: 100%;
    height: 652rpx;
}
.region-pop-content .region-pop-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    overflow: hidden;
    background: #ffffff;
}
.region-pop-content .region-pop-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 60%;
    padding-left: 32rpx;
    overflow: hidden;
    background: #f7f7f7;
}
.region-pop-content .region-list {
    font-size: 28rpx;
    line-height: 80rpx;
    color: #3a3a3c;
    background: #f7f7f7;
    border-top: 1px solid #e9e9e9;
}
.region-pop-content .region-pop-left .region-list {
    padding-left: 32rpx;
    background: #ffffff;
}
.screen-pop .region-list-color {
    color: #1892ff;
}
.region-pop-content .region-list:nth-child(1) {
    border: none;
}
.range-slider-block {
    position: relative;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 5px #888888;
}
.range-slider-block .range-slider-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 16rpx;
    height: 16rpx;
    line-height: 50rpx;
    background: #1892ff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.range-slider-value {
    width: 54rpx;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 34rpx;
    color: rgb(128 128 128 / 100%);
}

/* 暂无职位推荐 */
.nothing {
    /* position: absolute; */

    /* top: 60%; */
    width: 100%;
    margin-top: 150rpx;

    /* z-index: 3; */

    /* transform: translateY(-50%); */
    background: #ffffff;
}
.nothing .nothing-back {
    display: block;
    width: 406rpx;
    height: 256rpx;
    margin: 0 auto;
    margin-bottom: 28rpx;

    /* margin-top: 428rpx; */
}
.nothing .nothing-text {
    margin-bottom: 80rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: rgb(128 128 128 / 100%);
    text-align: center;
}
.nothing .nothing-btn {
    box-sizing: border-box;
    display: flex;
    width: 220rpx;
    height: 68rpx;
    margin: 0 auto;
    border: 1px solid rgb(24 146 255 / 100%);
    border-radius: 8rpx;
}
.nothing .nothing-btn image {
    width: 40rpx;
    height: 40rpx;
    margin: 14rpx 10rpx 14rpx 26rpx;
}
.nothing .nothing-btn text {
    display: inline-block;
    flex: 1;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 68rpx;
    color: rgb(24 146 255 / 100%);
    vertical-align: middle;
}
.margin-8 {
    margin: 0 8rpx;
}
</style>
