<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" />
                <wd-icon class="search-icon" name="search" @tap="confirm"></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 class="filter-other flex-between">
                <wd-col-picker
                    title="请选择工作地点"
                    label="选择地址"
                    v-model="valueCity"
                    :columns="columnsCity"
                    :column-change="columnChangeCity"
                    @confirm="handleConfirmCity"
                    label-key="name"
                    value-key="code"
                    use-default-slot
                >
                    <view class="item">{{ cityText }} <view class="arrow"></view> </view>
                </wd-col-picker>
                <view class="filter-opstion">
                    <wd-col-picker
                        title="请选择专业"
                        v-model="majorValue"
                        :columns="majorOpstion"
                        value-key="name"
                        label-key="name"
                        :column-change="columnChangeMajor"
                        @confirm="handleConfirmMajor"
                        use-default-slot
                    >
                        <view class="item">{{ majorText || "专业" }} <view class="arrow"></view> </view>
                    </wd-col-picker>
                </view>
                <view class="item" :class="{ active: maskType == 'other' }" @tap="openMask('other')"
                    >更多筛选<view class="arrow"></view
                ></view>
            </view>
        </view>
        <!-- 更多筛选弹窗 -->
        <view class="screen-pop-box-new" @touchmove.stop.prevent :style="{paddingTop:contentHeight}" v-if="maskType === 'other'">
            <scroll-view class="content-two" scroll-y="true">
                <view class="right">
                    <view class="title">薪酬</view>
                    <view class="list">
                        <view
                            class="item"
                            :class="{ 'light-two': activeOne === index }"
                            v-for="(item, index) in salary"
                            :key="index"
                            @tap="choiceDetails(0,item, index)"
                            >{{ item.text }}</view
                        >
                    </view>
                    <view class="title">学历</view>
                    <view class="list">
                        <view
                            class="item"
                            :class="{ 'light-two': activeTwo === index }"
                            v-for="(item, index) in educationData"
                            :key="item.code"
                            @tap="choiceDetails(1,item, index)"
                            >{{ item.text }}</view
                        >
                    </view>
                    <view class="title">食宿条件</view>
                    <view class="list">
                        <view
                            class="item"
                            :class="{ 'light-two': activeThree === index }"
                            v-for="(item, index) in eatAndLiveData"
                            :key="item.code"
                            @tap="choiceDetails(2,item, index)"
                            >{{ item.text }}</view
                        >
                    </view>
                    <view class="title">人员类别</view>
                    <view class="list">
                        <view
                            class="item"
                            :class="{ 'light-two': activeFour === index }"
                            v-for="(item, index) in identityData"
                            :key="item.code"
                            @tap="choiceDetails(3,item, index)"
                            >{{ item.text }}</view
                        >
                    </view>
                    <view class="title">职位类型</view>
                    <view class="list">
                        <view
                            class="item"
                            :class="{ 'light-two': activeFive === index }"
                            v-for="(item, index) in positionType"
                            :key="item.id"
                            @tap="choiceDetails(4,item, index)"
                            >{{ item.name }}</view
                        >
                    </view>
                </view>
            </scroll-view>
            <view class="content-two-bottom">
                <button @tap="resetParams">重置</button>
                <button @tap="confirmParameters">确认</button>
            </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, getMajorTreeApi } from "@/api/user";
import _ from "lodash";
/* 轮播 */
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 }
]);

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

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

const columnChangeCity = ({ resolve, selectedItem, finish }) => {
    if (selectedItem.children?.length) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};

const handleConfirmCity = ({ value, selectedItems }) => {
    const textIndex = _.compact(value).length - 1;
    if (textIndex === -1) {
        cityText.value = "全国";
    } else {
        cityText.value = selectedItems[textIndex].name;
    }
    const [provinceCode1, cityCode1, districtCode1] = value;
    provinceCode = provinceCode1 || "";
    cityCode = cityCode1 || "";
    districtCode = districtCode1 || "";
    pageNo = 1;
    positionListData.value = [];
    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";
    }
};
// 城市筛选
const valueCity = ref([]);
const cityText = ref("工作地点");
const columnsCity = ref([]);
const getColumnsCity = () => {
    getTreeListApi().then(res => {
        // 给说有子选项都添加全部
        res.data.forEach(v => {
            v.children.unshift({
                code: "",
                name: "全部"
            });
            v.children.forEach(vv => {
                if (vv.children?.length) {
                    vv.children.unshift({
                        code: "",
                        name: "全部"
                    });
                }
            });
        });
        res.data.unshift({
            code: "",
            name: "全国"
        });
        columnsCity.value.push(res.data);
    });
};

/* 专业筛选 */
const majorValue = ref([]);
const majorOpstion = ref([]);
const columnChangeMajor = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.name === "不限") {
        finish();
    } else {
        if (selectedItem.children) {
            resolve(selectedItem.children);
        } else {
            finish();
        }
    }
};
const handleConfirmMajor = ({ value }) => {
    if (value[0] === "不限") {
        majorText.value = "不限";
        majorRequirement = null;
    } else {
        majorText.value = value[1];
        majorRequirement = value[0] + "-" + value[1];
    }
    pageNo = 1;
    positionListData.value = [];
    getListData();
};
const majorText = ref("");
getMajorTreeApi().then(res => {
    if (res.code === 200) {
        majorOpstion.value.push(
            Object.keys(res.data).map(key => ({
                name: key,
                children: res.data[key]
            }))
        );
        majorOpstion.value[0].unshift({
            name: "不限",
            children: []
        });
    }
});

// 省市区
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();
// };
// 职业类型筛选
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,
    provinceCode = null,
    cityCode = null,
    majorRequirement = null,
    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 = "职位类型";
            dataList.value = positionType.value;
    }
};
const choiceDetails = (active,data, index) => {
    switch (active) {
        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 = "";
        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;
    pageNo = 1;
    positionListData.value = [];
    getListData();
};

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

const getListData = () => {
    let data = {
        pageNo: pageNo,
        pageSize: pageSize,
        keyword: keyword.value || null,
        provinceCode: provinceCode || null,
        cityCode: cityCode || null,
        majorRequirement: majorRequirement || 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;
    justify-content: space-between;
    align-items: center;
    width: 452rpx;
    height: 72rpx;
    margin-left: 32rpx;
    overflow: hidden;
    background: #f7f7f7;
    border-radius: 68rpx;
    .search-icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 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;
    .filter-other {
        gap: 16rpx;
        .item {
            /* display: flex;
                    align-items: flex-end; */
            position: relative;
            max-width: 120rpx;
            padding: 12rpx 18rpx;
            overflow: hidden;
            font-size: 24rpx;
            font-weight: normal;
            line-height: 24rpx;
            color: #ffffff;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: linear-gradient(180deg, #3570ff -3%, #29a5ff 100%);
            border-radius: 8rpx;
            .arrow {
                position: absolute;
                right: 6rpx;
                bottom: 12rpx;
                width: 0;
                height: 0;
                margin-left: 4rpx;
                border-color: #ffffff;
                border-width: 4rpx;
                transform: rotateZ(0deg);
            }
        }
    }
    .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: 10000;
    background-color: #ffffff;
    .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;
}
.screen-pop-box-new {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 999999;
    .content-two {
        display: flex;
        height: 80vh;
        .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: 100%;
            padding: 32rpx 24rpx;
            .title {
                font-size: 32rpx;
                font-weight: blod;
                color: #1b2026;
            }
            .list {
                margin: 16rpx 0 40rpx;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                .item {
                    padding: 0 14rpx;
                    min-width: 195rpx;
                    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 {
        position: absolute;
        bottom: calc(30rpx + env(safe-area-inset-bottom));
        display: flex;
        justify-content:space-around;
        width: 100%;
        button {
            width: 300rpx;
            flex-shrink: 0;
            background: #1f86ff;
            color: #ffffff;
            font-size: 28rpx;
        }
    }
}

::-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>
