<template>
    <view style="height: 100%; padding-bottom: 40px">
        <NavBar :showIcon="false" backgroundBox="#ffffff">
            <view class="search-form">
                <input
                    v-model="keyword"
                    placeholder="请输入要查询的内容"
                    placeholder-class="log-input-p"
                    type="text"
                    @confirm="confirm"
                />
                <wd-icon class="search-icon" name="search"></wd-icon>
            </view>
        </NavBar>
        <!-- 轮播区 -->

        <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 v-if="!maskType" 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 == 'other' }" @tap="openMask('other')">更多筛选</text>
            </view>
        </view>
        <!-- 蒙版弹框 -->
        <view :style="{ top: contentHeight }" @touchmove.stop.prevent class="pop-mask" v-if="maskType" @click="maskType = null">
            <!-- <NavBar :showIcon="false" backgroundBox="#ffffff" :showTitle="true" title="筛选" /> -->
            <view class="select-nav" :style="{ top: '0px' }" catchtouchmove="{{true}}" @tap.stop>
                <view class="recommend">推荐</view>
                <view class="select-item">
                    <text :class="{ active: maskType == 'address' }" @tap="openMask('address')">贵州省</text>
                    <text :class="{ active: maskType == 'other' }" @tap="openMask('other')">更多筛选</text>
                </view>
            </view>
            <!-- 区域弹窗 -->
            <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 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 == -1 }" @tap="bindRegionList(-1)"
                                >全部</view
                            >
                            <view
                                class="region-list"
                                :class="{ 'region-list-color': regionId == v.code }"
                                v-for="v in regionData"
                                :key="v.code"
                                @tap="bindRegionList(v.code)"
                                >{{ v.name }}</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="content-two">
                        <view class="left">
                            <view class="item" @tap="choice(0)" :class="{ light: active === 0 }">薪酬</view>
                            <view class="item" @tap="choice(1)" :class="{ light: active === 1 }">学历</view>
                            <view class="item" @tap="choice(2)" :class="{ light: active === 2 }">食宿条件</view>
                            <view class="item" @tap="choice(3)" :class="{ light: active === 3 }">身份</view>
                            <view class="item" @tap="choice(4)" :class="{ light: active === 4 }">职位类型</view>
                        </view>
                        <view class="right">
                            <view class="title">{{ active === 0 ? "薪酬要求" : selectionTitle }}</view>
                            <view v-if="active === 0" class="list">
                                <view
                                    class="item"
                                    :class="{ 'light-two': activeOne === index }"
                                    v-for="(item, index) in salary"
                                    :key="index"
                                    @tap="choiceDetails(item, index)"
                                    >{{ item.text }}</view
                                >
                            </view>
                            <view v-if="active === 1" class="list">
                                <view
                                    class="item"
                                    :class="{ 'light-two': activeTwo === index }"
                                    v-for="(item, index) in dataList"
                                    :key="item.code"
                                    @tap="choiceDetails(item, index)"
                                    >{{ item.text }}</view
                                >
                            </view>
                            <view v-if="active == 2" class="list">
                                <view
                                    class="item"
                                    :class="{ 'light-two': activeThree === index }"
                                    v-for="(item, index) in dataList"
                                    :key="item.code"
                                    @tap="choiceDetails(item, index)"
                                    >{{ item.text }}</view
                                >
                            </view>
                            <view v-if="active == 3" class="list">
                                <view
                                    class="item"
                                    :class="{ 'light-two': activeFour === index }"
                                    v-for="(item, index) in dataList"
                                    :key="item.code"
                                    @tap="choiceDetails(item, index)"
                                    >{{ item.text }}</view
                                >
                            </view>
                            <view v-if="active === 4" class="list">
                                <view
                                    class="item"
                                    :class="{ 'light-two': activeFive === index }"
                                    v-for="(item, index) in dataList"
                                    :key="item.id"
                                    @tap="choiceDetails(item, index)"
                                    >{{ item.name }}</view
                                >
                            </view>
                        </view>
                    </view>
                    <view class="content-two-bottom">
                        <button @tap="resetParams">重置</button>
                        <button @tap="confirmParameters">确认</button>
                    </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>
        <wd-popup
            :z-index="1000"
            v-model="showDoubt"
            custom-class="one-tips"
            custom-style="border-radius: 16rpx;"
            @close="handleClose"
        >
            <view class="box">
                <img class="img-icon" src="@/static/image/postion/obtainEmployment.png" />
                <text class="text">请问您现在是否已就业？</text>
                <view class="btns">
                    <button class="btn">否</button>
                    <button class="btn">是</button>
                </view>
            </view>
        </wd-popup>

        <wd-popup
            :z-index="1000"
            v-model="showInvalid"
            custom-class="two-tips"
            custom-style="border-radius: 16rpx;"
            @close="handleClose"
        >
            <view class="box">
                <img class="img-icon" src="@/static/image/postion/earth.png" />
                <text class="text">您的帐号已失效</text>
                <text class="text-small" style="margin-top: 40rpx">由于您超过{{ "1" }}月未登录</text>
                <text class="text-small">现系统已将您的账号封禁</text>
                <text class="text-small">您可完成申述后继续使用</text>
                <view class="btns">
                    <button class="btn-one">取消</button>
                    <button class="btn-two">立即申诉</button>
                </view>
            </view>
        </wd-popup>
    </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getjobListApi } from "@/api/postion.js";
import { getTreeListApi, dictJobTypeApi, getBannerListApi } from "@/api/common.js";
import postionCard1 from "@/components/postionCard1/index.vue";
import { getEumData } from "@/utils/utils.js";
import { getToken } from "@/utils/token";
import evn from "@/utils/config.js";
import { getLoginUserApi } from "@/api/user";
/* 轮播 */
const swiperList = ref([]);
let swiperListData = [];
let contentHeight = ref(null);
let showDoubt = ref(false);
let showInvalid = ref(false);
let active = ref(0);
let activeOne = ref(-1);
let activeTwo = ref(-1);
let activeThree = ref(-1);
let activeFour = ref(-1);
let activeFive = ref(-1);
let salary = ref([
    { text: "不限", min: null, max: null },
    { text: "3k以下", min: 0, max: 3000 },
    { text: "3-5k", min: 3000, max: 5000 },
    { text: "5-10k", min: 5000, max: 10000 },
    { text: "10-20k", min: 10000, max: 20000 },
    { text: "20-50k", min: 20000, max: 50000 },
    { text: "50k以上", min: 50000, max: 100000 }
]);

onShow(() => {
    getLoginUserApi().then(res => {
        uni.setStorageSync("userInfo", res.data);
    });
    getTreeData();
    dictJobType();
    reset().then(res => {
        getListData();
    });
    initOtherData();
    xma.xh.getMenuButtonBoundingClientRect({
        success(res) {
            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
        }
    });
});

onReachBottom(e => {
    pageNo++;
    getListData();
});

// 获取数据
getBannerListApi(1).then(res => {
    swiperListData = res.data;
    console.log(swiperListData);
    swiperList.value = res.data.map(item => evn.APP_IMAGE_BASE_API + item.imgPath);
});
const current = ref(0);
const handleClickSwiper = e => {
    console.log(e);
    uni.navigateTo({
        url: `/pages/articleDetails/index?id=${swiperListData[e.index].articleId}`
    });
};
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/modular/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
    // });
    // 页面滚动到合适位子

    if (type === "address") {
        cityCode = "520100";
    }
};
// 省市区
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) {
                            cityId.value = 520100;
                            regionData.value = _data[i].children[j].children;
                        }
                    }
                }
            }
        }
    });
};

// 选择市
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;
        }
    }
    cityCode = code;
};
// 选择区
const bindRegionList = code => {
    regionId.value = code;
    maskType.value = null;
    if (code === -1) {
        districtCode = null;
    } else {
        districtCode = code;
    }
    pageNo = 1;
    positionListData.value = [];
    getListData();
    // 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;
    //     districtCode = code;
    //     getListData();
    // }
    // console.log(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;
        jobTypeList = [id];
        pageNo = 1;
        positionListData.value = [];
        getListData();
    }
};

// 其他筛选
const educationData = ref([]);
const identityData = ref([]);
const eatAndLiveData = ref([]);
const screenSex = ref("");
const screenSexCode = ref("");
const screenEducation = ref("");
const screenEducationCode = ref("");
const initOtherData = async () => {
    educationData.value = await getEumData("EnumEducationRequirement");
    identityData.value = await getEumData("EnumIdentityRequirement");
    eatAndLiveData.value = await getEumData("EnumAccommodation");
};
// const bindScreenSexList = (text, code) => {
//     screenSex.value = text;
//     screenSexCode.value = code;
// };
const bindScreenEducationList = (text, code) => {
    screenEducation.value = text;
    screenEducationCode.value = code;
    identityRequirementList = [code];
    pageNo = 1;
    positionListData.value = [];
    getListData();
};
/* 获取职位列表 */
const keyword = ref("");
let pageNo = 1,
    pageSize = 10,
    districtCode = null,
    minSalary = null,
    maxSalary = null,
    educationRequirement = null,
    accommodation = null,
    identityRequirement = null,
    jobTypePid = null;
let positionListData = ref([]);

let selectionTitle = ref("");
let dataList = ref([]);
const choice = index => {
    active.value = index * 1;
    switch (index * 1) {
        case 1:
            selectionTitle.value = "学历要求";
            dataList.value = educationData.value;
            break;
        case 2:
            selectionTitle.value = "食宿条件";
            dataList.value = eatAndLiveData.value;
            break;
        case 3:
            selectionTitle.value = "身份条件";
            dataList.value = identityData.value;
            break;
        default:
            selectionTitle.value = "职位类型";
            console.log(positionType.value);
            dataList.value = positionType.value;
    }
};
const choiceDetails = (data, index) => {
    switch (active.value) {
        case 0:
            activeOne.value = index * 1;
            minSalary = data.min;
            maxSalary = data.max;
            break;
        case 1:
            activeTwo.value = index * 1;
            educationRequirement = data.code;
            if (data.code == "0") educationRequirement = null;
            break;
        case 2:
            activeThree.value = index * 1;
            accommodation = data.code;
            break;
        case 3:
            activeFour.value = index * 1;
            identityRequirement = data.code;
            if (data.code == "0") identityRequirement = null;
            break;
        default:
            activeFive.value = index * 1;
            jobTypePid = data.id;
    }
};

// 重置
const reset = () => {
    return new Promise(resolve => {
        pageNo = 1;
        pageSize = 10;
        keyword.value = "";
        districtCode = null;
        minSalary = null;
        maxSalary = null;
        educationRequirement = null;
        accommodation = null;
        identityRequirement = null;
        jobTypePid = null;
        positionListData.value = [];
        resolve();
    });
};

// 筛选条件重置
const resetParams = () => {
    activeOne.value = -1;
    activeTwo.value = -1;
    activeThree.value = -1;
    activeFour.value = -1;
    activeFive.value = -1;
    minSalary = null;
    maxSalary = null;
    educationRequirement = null;
    accommodation = null;
    identityRequirement = null;
    jobTypePid = null;
};

// 职位搜索
const confirm = e => {
    reset().then(res => {
        keyword.value = e.detail.value;
        getListData();
    });
};
// 职位筛选搜索
const confirmParameters = () => {
    pageNo = 1;
    positionListData.value = [];
    getListData()
};

const getListData = () => {
    let data = {
        pageNo: pageNo,
        pageSize: pageSize,
        keyword: keyword.value || null,
        districtCode: districtCode || null,
        minSalary: minSalary || null,
        maxSalary: maxSalary || null,
        educationRequirement: educationRequirement || null,
        accommodation: accommodation || null,
        identityRequirement: identityRequirement || null,
        jobTypePid: jobTypePid || null
    };
    getjobListApi(data).then(res => {
        if (res.code == 200) {
            positionListData.value = [...positionListData.value, ...res.data];
        }
        console.log(positionListData.value);
        maskType.value = "";
    });
};
</script>
<style lang="scss" scoped>
.one-tips {
    overflow: hidden;
    .box {
        width: 600rpx !important;
        height: 500rpx !important;
        background: #ffffff;
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-direction: column;
        .img-icon {
            width: 250rpx;
            height: 200rpx;
            margin-top: 20rpx;
        }
        .text {
            font-size: 32rpx;
            font-weight: 600;
            color: #1b2026;
            font-family: PingFang SC;
            margin-top: 52rpx;
        }
        .btns {
            width: 90%;
            display: flex;
            jsustify-content: space-between;
            margin-top: 80rpx;
            .btn {
                width: 240rpx;
                height: 72rpx;
                line-height: 72rpx;
                background: rgba(31, 134, 255, 0.1);
                color: #1f86ff;
                font-size: 28rpx;
                font-weight: 500;
            }
        }
    }
}
.two-tips {
    overflow: hidden;
    .box {
        width: 600rpx !important;
        height: 668rpx !important;
        background: #ffffff;
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-direction: column;
        .img-icon {
            width: 348rpx;
            height: 276rpx;
            margin-top: 20rpx;
        }
        .text {
            font-size: 28rpx;
            font-weight: 600;
            color: #1b2026;
            font-family: PingFang SC;
        }
        .text-small {
            font-size: 28rpx;
            color: #000000;
            line-height: 48rpx;
        }
        .btns {
            width: 90%;
            display: flex;
            jsustify-content: space-between;
            margin-top: 40rpx;
            .btn-one {
                width: 120rpx;
                height: 72rpx;
                line-height: 72rpx;
                background: rgba(31, 134, 255, 0.1);
                color: #1f86ff;
                font-size: 28rpx;
                font-weight: 500;
            }
            .btn-two {
                width: 324rpx;
                height: 72rpx;
                line-height: 72rpx;
                background: #1f86ff;
                color: #ffffff;
                font-size: 28rpx;
                font-weight: 500;
            }
        }
    }
}
</style>

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

.search-form {
    display: flex;
    align-items: center;
    width: 452rpx;
    height: 72rpx;
    margin-left: 32rpx;
    overflow: hidden;
    background: #f7f7f7;
    border-radius: 68rpx;
    .search-icon {
        width: 28rpx;
        height: 28rpx;
        margin-left: 32rpx;
        color: #86909c;
    }
    input {
        margin-left: 16rpx;
        font-size: 28rpx;
    }
    .log-input-p {
        color: #b3b7bf;
    }
}

// 轮播
.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: 100;
    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;
    padding-bottom: 100rpx;
    .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%;
    // max-height: 900rpx;
}
.screen-pop-content {
    position: absolute;
    inset: 0 0 0rpx;
    padding: 0 40rpx;
    overflow: hidden;
}
.screen-pop-padding {
    padding: 0;
}
.content-two {
    display: flex;
    .left {
        width: 200rpx;
        // max-height:900rpx;
        background: #e8f2ff;
        .item {
            font-size: 32rpx;
            width: 200rpx;
            text-align: center;
            height: 100rpx;
            line-height: 100rpx;
        }
        .light {
            background: #ffffff;
            color: #1f86ff;
        }
    }
    .right {
        width: calc(100% - 200rpx);
        padding: 32rpx 24rpx;
        .title {
            font-size: 24rpx;
            font-weight: 500;
            color: #1b2026;
        }
        .list {
            margin-top: 24rpx;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .item {
                width: 236rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                border-radius: 8rpx;
                background: #f0f4fa;
                border: 1rpx solid #f0f4fa;
                font-size: 24rpx;
                color: #1b2026;
                margin-right: 11rpx;
                margin-bottom: 16rpx;
            }
            .light-two {
                background: #ffffff;
                border: 1rpx solid #1f86ff;
                color: #1f86ff;
            }
        }
    }
}
.content-two-bottom {
    padding: 16rpx;
    display: flex;
    button {
        flex-shrink: 0;
        background: #1f86ff;
        color: #ffffff;
        font-size: 24rpx;
    }
}
::-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>
