<template>
    <div class="page">
        <!-- 公司详情 -->
        <view class="pos-details">
            <view class="pos-title">
                <view class="pos-logo">
                    <!-- <image mode="widthFix" wx:if="{{partTimeJobData.logoPath}}" src="{{videosrc}}{{partTimeJobData.logoPath}}"></image> -->

                    <image v-if="partTimeJobData.logoPath" src="@/static/image/temp/test.jpg"></image>
                    <image v-else src="@/static/image/temp/test.jpg"></image>
                </view>
                <view>
                    <view class="pos-name">{{ partTimeJobData.name }}</view>
                    <view class="cos-position">
                        <!-- <text>{{partTimeJobData.placeCityName}}</text> -->
                        <text>贵州</text>
                        <text class="margin-8">|</text>
                        <text>{{ partTimeJobData.jobList?.length }}个在招职位</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 公司地址 -->
        <view class="pos-address">
            <text class="title">公司地址</text>
            <view class="address flex-between">
                <text>{{ partTimeJobData.address }}</text>
                <!-- <view @click="showNavigation = true">
                    <image src="@/static/image/icon/navigation.png" mode="" />
                    导航
                </view> -->
            </view>
        </view>
        <!-- 选择地图 -->
        <wd-action-sheet
            v-model="showNavigation"
            :actions="navigationActions"
            @close="showNavigation = false"
            @select="navigationSelect"
        />
        <!-- 公司介绍 -->
        <view class="pos-introduce pos-padding-top0" v-if="partTimeJobData.companyIntro">
            <view class="title">
                <text class="text">公司介绍</text>
            </view>
            <view class="pos-duty activeClass">
                <text>{{ partTimeJobData.companyIntro }}</text>
            </view>
        </view>
        <!-- 公司基本信息 -->
        <view class="pos-introduce pos-padding-top0">
            <view class="title">
                <text class="text">企业基本信息</text>
            </view>
            <view class="pos-int" v-if="partTimeJobData.companyType">
                <text class="pos-label">企业类型：</text>
                <text class="pos-label-text">{{ partTimeJobData.companyType }}</text>
            </view>
            <view class="pos-int" v-if="partTimeJobData.operatingStatus">
                <text class="pos-label">经营状态：</text>
                <text class="pos-label-text">{{ partTimeJobData.operatingStatus }}</text>
            </view>
            <view class="pos-int" v-if="partTimeJobData.registeredCapital">
                <text class="pos-label">注册资本：</text>
                <text class="pos-label-text">{{ partTimeJobData.registeredCapital }}</text>
            </view>
            <view class="pos-int" v-if="partTimeJobData.companyType">
                <text class="pos-label">行业类型：</text>
                <text class="pos-label-text">{{ partTimeJobData.industryCategory }}</text>
            </view>
        </view>
        <!-- 职位推荐 -->
        <view
            class="pos-recommend"
            :style="`top:${activeRecommend ? top : recommendTop}px`"
            v-if="partTimeJobData.jobList?.length"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
        >
            <view class="title">
                <text class="text"
                    >公司在招职位<text class="num">{{ partTimeJobData.jobList.length }}</text></text
                >
            </view>
            <scroll-view scroll-x="{{true}}" class="pos-select">
                <view class="flex-align-center">
                    <text :class="activeJobListType === '' ? 'active' : ''" @tap="filterOpstionList('')">全部</text>
                    <text
                        :class="activeJobListType === item ? 'active' : ''"
                        v-for="(item, index) in partTimeJobData.jobTypeTextList"
                        :key="item"
                        @tap="filterOpstionList(item)"
                        >{{ item }}</text
                    >
                </view>
            </scroll-view>
            <!-- 职位列表 -->
            <scroll-view scroll-y="{{true}}" class="recommend-list-wrap">
                <block v-for="(item, index) in partTimeJobData.jobList" :key="index">
                    <view class="card-wrap" v-if="item.isShow">
                        <PostionCard1 :data="item"></PostionCard1>
                    </view>
                </block>
            </scroll-view>
        </view>
    </div>
</template>

<script setup>
import { getCompanyDetailApi } from "@/api/postion.js";
import { ref } from "vue";
import PostionCard1 from "@/components/postionCard1/index.vue";
import SwipeHandler from "@/utils/swipeHandler";
const partTimeJobData = ref({});
onLoad(({ id }) => {
    console.log(id);
    getCompanyDetailApi(id).then(res => {
        console.log(res);
        partTimeJobData.value = res.data;
        partTimeJobData.value.jobList.forEach(v => {
            v.isShow = true;
        });
    });
});
/* 推荐列表 */
const swipeHandler = new SwipeHandler();
const activeRecommend = ref(false);
const recommendTop = ref(0);
const top = ref(0);
const onTouchStart = e => {
    swipeHandler.onTouchStart(e);
};
const onTouchMove = e => {
    swipeHandler.onTouchMove(e);
};
const onTouchEnd = e => {
    let direction = swipeHandler.onTouchEnd(e);
    console.log(direction);
    if (direction === "up") {
        activeRecommend.value = true;
    }
    if (direction === "down") {
        activeRecommend.value = false;
    }
};
const setRecommendTop = () => {
    const { windowHeight, windowTop } = uni.getWindowInfo();
    top.value = 60;
    recommendTop.value = windowHeight - 178;
};

onLoad(() => {
    setRecommendTop();
});
// 筛选推荐列表
const activeJobListType = ref("");
const filterOpstionList = item => {
    activeJobListType.value = item;
    partTimeJobData.value.jobList.forEach(v => {
        v.isShow = !item ? true : v.jobTypeText == item;
    });
};
/* 选择导航 */

const showNavigation = ref(false);

const navigationActions = [
    {
        name: "百度地图"
    },
    {
        name: "高德地图"
    }
    /*     {
        name: "腾讯地图"
    } */
];
const navigationSelect = ({ item }) => {
    console.log(item);
    let { osName } = uni.getSystemInfoSync();
    const to = {
        name: partTimeJobData.value.address,
        longitude: 106.652946,
        latitude: 26.624922
    };

    const getMapScheme = to => {
        const u = navigator.userAgent;
        const isAndroid = osName == "android";

        const andriodBaidu = to => {
            return `bdapp://map/direction?destination=name:${to.name}|latlng:${to.latitude},${to.longitude}&coord_type=gcj02&mode=driving&src=andr.jianghu.jianhao`;
        };

        const iOSBaidu = to => {
            return `baidumap://map/direction?destination=name:${to.name}|latlng:${to.latitude},${to.longitude}&coord_type=gcj02&mode=driving&src=ios.jianghu.jianhao`;
        };

        const andriodGaode = to => {
            return `amapuri://route/plan/?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
        };

        const iOSGaode = to => {
            return `iosamap://path?sourceApplication=mhc&dlat=${to.latitude}&dlon=${to.longitude}&dname=${to.name}&dev=0&t=0`;
        };
        if (item.name == "百度地图") {
            if (isAndroid) {
                return andriodBaidu(to);
            } else {
                return iOSBaidu(to);
            }
        } else if (item.name == "高德地图") {
            if (isAndroid) {
                return andriodGaode(to);
            } else {
                return iOSGaode(to);
            }
        }
    };
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = getMapScheme(to);
    a.click();
    document.body.removeChild(a);
};
</script>

<style lang="scss" scoped>
/* stylelint-disable no-duplicate-selectors */

/* 公司详情 */
.pos-details {
    padding: 28rpx 32rpx;
    background: #ffffff;
}
.pos-details .pos-title {
    display: flex;
    margin-bottom: 16rpx;
}
.pos-details .pos-title .pos-logo {
    display: inline-block;
    width: 88rpx;
    height: 88rpx;
    margin-right: 16rpx;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 8rpx;
}
.pos-details .pos-title .pos-name {
    display: inline-block;
    flex: 1;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 40rpx;
    color: rgb(58 58 60 / 100%);
    vertical-align: middle;
}
.pos-details .pos-title .pos-logo image {
    width: 100%;
    height: 100%;
}
.pos-details .cos-position {
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(128 128 128 / 100%);
}
.pos-details .pos-title .label {
    width: auto;
    height: 36rpx;
    padding: 0 8rpx;
    margin-right: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 36rpx;
    color: rgb(250 122 96 / 100%);
    text-align: center;
    vertical-align: middle;
    background: rgb(252 229 229 / 100%);
    border-radius: 4rpx;
}
.pos-details .pos-title .text {
    font-size: 36rpx;
    font-weight: 500;
    color: rgb(58 58 60 / 100%);
    vertical-align: middle;
}
.pos-details .pos-type {
    margin-bottom: 16rpx;
    overflow: hidden;
}
.pos-details .pos-type .salary {
    float: left;
}
.pos-details .pos-type .salary .number {
    font-size: 40rpx;
    color: #ff5937;
}
.pos-details .pos-type .salary .unit {
    font-size: 24rpx;
    color: #ff5937;
}
.pos-details .pos-type .type {
    float: right;
    font-size: 24rpx;
    line-height: 52rpx;
    color: #808080;
}
.pos-details .time {
    margin-bottom: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(58 58 60 / 100%);
}
.pos-details .time text {
    margin-right: 12rpx;
    margin-bottom: 8rpx;
}
.pos-details .pos-label {
    margin-bottom: 24rpx;
}
.pos-details .pos-label .label-list {
    display: inline-block;
    width: auto;
    height: 40rpx;
    padding: 0 16rpx;
    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: 2rpx;
}
.pos-details .pos-address {
    padding: 24rpx 0;
    padding-top: 14rpx;
    border-top: 2rpx solid rgb(238 239 238 / 100%);
}
.pos-details .pos-address image {
    display: inline-block;
    width: 28rpx;
    height: 32rpx;
    margin-right: 12rpx;
    vertical-align: middle;
}
.pos-details .pos-address text {
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(58 58 60 / 100%);
    vertical-align: middle;
}
.pos-details .cos-welfare {
    width: 100%;
    max-height: 50rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-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;
}

/* // 公司信息 */
.cos-info {
    position: relative;
    padding: 28rpx 32rpx;
    background: #ffffff;
}
.cos-info .cos-title {
    margin-bottom: 16rpx;
}
.cos-info .cos-title .cos-name {
    margin-right: 12rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: rgb(58 58 60 / 100%);
    vertical-align: middle;
}
.cos-info .cos-title .label-icon {
    width: 28rpx;
    height: 30rpx;
    margin-right: 4rpx;
    vertical-align: middle;
}
.cos-info .cos-title .label-name {
    padding: 2rpx 6rpx;
    font-size: 20rpx;
    font-weight: 400;
    color: rgb(155 1 1 / 100%);
    vertical-align: middle;
    background: rgb(255 233 237 / 100%);
    border-radius: 4rpx;
}
.cos-info .modu-icon {
    position: absolute;
    top: 50%;
    right: 32rpx;
    width: 12rpx;
    height: 20rpx;
    transform: translateY(-50%);
}

/* // 职位介绍 */
.pos-introduce {
    position: relative;
    padding: 28rpx 32rpx;
    background: #ffffff;
}
.pos-padding-bott0 {
    padding-bottom: 0;
}
.pos-padding-top0 {
    padding-top: 0;
}
.pos-introduce .title {
    margin-bottom: 20rpx;
}
.pos-introduce .title .sign {
    display: inline-block;
    width: 12rpx;
    height: 12rpx;
    margin-right: 16rpx;
    vertical-align: middle;
    background: rgb(26 138 250 / 100%);
    border-radius: 50%;
}
.pos-introduce .title .text {
    font-size: 32rpx;
    font-weight: 500;
    color: rgb(51 51 51 / 100%);
    vertical-align: middle;
}
.pos-introduce .pos-int {
    margin-bottom: 16rpx;
}
.pos-introduce .pos-int .pos-label {
    display: inline-block;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 34rpx;
    color: rgb(128 128 128 / 100%);
}
.pos-introduce .pos-int .pos-label-text {
    display: inline-block;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 34rpx;
    color: #3a3a3c;
}
.pos-introduce .pos-duty {
    display: -webkit-box;
    margin-bottom: 36rpx;
    overflow: hidden;
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(128 128 128 / 100%);
    word-break: break-all;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.pos-introduce .activeClass {
    margin-bottom: 0;
    -webkit-line-clamp: inherit;
}
.pos-introduce .duty-more {
    position: absolute;
    right: 0;
    bottom: 28rpx;
    left: 0;
    padding-top: 22rpx;
    text-align: center;
    background: linear-gradient(to top, rgb(255 255 255 / 100%), rgb(255 255 255 / 80%), rgb(255 255 255 / 70%));
}
.pos-introduce .duty-more text {
    margin-right: 16rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(24 146 255 / 100%);
    vertical-align: middle;
}
.pos-introduce .duty-more image {
    display: inline-block;
    width: 20rpx;
    height: 12rpx;
    vertical-align: middle;
}
.pos-introduce .Tips {
    position: relative;
    width: 100%;
    height: 50rpx;
    margin-top: 60rpx;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 34rpx;
    color: rgb(128 128 128 / 100%);
    border-top: 1px solid #e9e9e9;
}
.pos-introduce .Tips view {
    position: absolute;
    left: 50%;
    padding: 0 28rpx;
    margin-top: -18rpx;
    background: #ffffff;
    transform: translateX(-50%);
}
.pos-introduce .Tips view text {
    color: #3a3a3a;
}

/* // 职位推荐 */
.pos-recommend {
    padding: 28rpx 32rpx;
    padding-bottom: 138rpx;
    background: #ffffff;
}

/* // .pos-recommend .title{} */
.pos-recommend .title .sign {
    display: inline-block;
    width: 12rpx;
    height: 12rpx;
    margin-right: 16rpx;
    vertical-align: middle;
    background: rgb(26 138 250 / 100%);
    border-radius: 50%;
}
.pos-recommend .title .text {
    font-size: 32rpx;
    font-weight: 500;
    color: rgb(51 51 51 / 100%);
    vertical-align: middle;
}
.pos-recommend .recommend-list {
    padding-top: 28rpx;
    border-bottom: 2rpx solid rgb(238 239 238 / 100%);
}
.pos-recommend .recommend-list .recommend-title {
    margin-bottom: 16rpx;
    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 .recommend-title .salary {
    float: right;
    margin-top: 12rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: rgb(255 89 55 / 100%);
}
.recommend-list .cos-details {
    display: flex;
}
.recommend-list .cos-details .cos-requirement {
    flex: 1;
}
.recommend-list .cos-details .cos-requirement .cos-title {
    margin-bottom: 16rpx;
}
.recommend-list .cos-details .cos-requirement .cos-title .cos-name {
    display: inline-block;
    max-width: 260rpx;
    height: 32rpx;
    margin-right: 8rpx;
    overflow: hidden;
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(58 58 60 / 100%);
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.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 .cos-welfare {
    overflow: hidden;
}
.recommend-list .cos-details .cos-welfare .welfare-list {
    float: left;
    width: auto;
    height: 40rpx;
    padding: 0 10rpx;
    margin: 0 12rpx 12rpx 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%;
}
.recommend-list .salary-info {
    padding-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;
}
.cos-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 64rpx;
    height: 64rpx;
    transform: translate(-50%, -50%);
}

/* // 底部按钮 */
.btn {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #ffffff;
    border: 2rpx solid rgb(233 233 233 / 100%);
}
.btn .btn-list {
    flex: 1;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    background-color: #bababa;
}
.btn .back-color {
    color: #ffffff;
    background-color: #1892ff;
}
.btn .btn-share {
    width: 220rpx;
    text-align: center;
}
.btn .btn-share image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
    vertical-align: middle;
}
.btn .share-btn {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 32rpx;
    font-weight: 400;
    color: rgb(24 146 255 / 100%);
    vertical-align: middle;
    background: rgb(0 0 0 / 0%);
    border: none;
}
.btn .share-btn::after {
    border: none;
}
.margin-top24 {
    margin-top: 24rpx;
}
.margin-8 {
    margin: 0 8rpx;
}

/* 分享 */
.pull-vote {
    position: fixed;
    right: 32rpx;
    bottom: 80rpx;
    z-index: 9;
    width: 96rpx;
    height: 96rpx;
}
.desc {
    font-size: 24rpx;
    font-weight: 400;
    color: #9b9b9b;
}
.canvas-wrapper {
    position: fixed;
    left: -2400rpx;
    z-index: 10;
}
.page {
    padding-bottom: 350px;
    background-color: #1d2c3e;
}
.pos-details {
    padding: 28rpx 32rpx;
    background: transparent;
    .pos-title {
        .pos-logo {
            width: 96rpx;
            height: 96rpx;
            image {
                width: 96rpx;
                height: 96rpx;
            }
        }
        .pos-name {
            margin-bottom: 8rpx;
            font-size: 36rpx;
            font-weight: 600;
            color: #ffffff;
        }
        .cos-position {
            color: #bec3cb;
        }
    }
}
.pos-address {
    padding: 32rpx;
    margin: 32rpx;
    color: #ffffff;
    background-color: #0f1a27;
    border-radius: 8rpx;
    .title {
        font-size: 28rpx;
        font-weight: 600;
    }
    .address {
        margin-top: 24rpx;
        font-size: 24rpx;
        view {
            flex-shrink: 0;
            width: 132rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            background-color: rgb(255 255 255 / 10%);
            border-radius: 26rpx;
            image {
                width: 24rpx;
                height: 24rpx;
                vertical-align: middle;
            }
        }
    }
}
.pos-introduce {
    background-color: transparent;
    .title {
        .text {
            font-size: 28rpx;
            font-weight: 600;
            color: #ffffff;
        }
    }
    .pos-duty {
        padding-bottom: 30rpx;
        font-size: 24rpx;
        line-height: 48rpx;
        color: #ffffff;
        border-bottom: 2rpx solid #f3f4f833;
    }
    .pos-int {
        margin-bottom: 16rpx;
        .pos-label,
        .pos-label-text {
            font-size: 24rpx;
            line-height: 26rpx;
            color: #ffffff;
        }
    }
}
.pos-recommend {
    position: fixed;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 750rpx;
    height: 100%;
    padding: 0;
    padding-bottom: 30rpx;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;

    // top: 550px;
    transition: all 0.5s;
    .title {
        padding-bottom: 30rpx;
        margin: 32rpx;
        border-bottom: 2rpx solid #f3f4f8;
        .text {
            font-size: 36rpx;
            font-weight: 600;
            color: #1b2026;
            .num {
                font-size: 24rpx;
                font-weight: 500;
                color: #4e5969;
            }
        }
    }
    .pos-select {
        width: 750rpx;
        padding-bottom: 32rpx;
        border-bottom: 16rpx solid #f3f4f8;
        .flex-align-center {
            flex-wrap: nowrap;
            width: auto;
            margin: 0 32rpx;
            text {
                padding: 10rpx 24rpx;
                margin-left: 24rpx;
                font-size: 28rpx;
                line-height: 44rpx;
                color: #4e5969;
                white-space: nowrap;

                /* 自动布局 */
                background: rgb(255 255 255 / 10%);
                border: 2rpx solid #e1e2e6;
                border-radius: 12rpx;
            }
            .active {
                color: #1f86ff;
                background: rgb(31 134 255 / 10%);
                border-color: #1f86ff;
            }
        }
    }
    .recommend-list {
        position: relative;
        padding: 32rpx 32rpx 0;
        margin: 0 32rpx;
        margin-bottom: 20rpx;
        background-color: #ffffff;
        .recommend-title {
            margin-bottom: 24rpx;
            .title {
                padding: 0;
                margin: 0;
                font-size: 32rpx;
                font-weight: 600;
                color: #1b2026;
                border: 0;
            }
        }
        .cos-welfare {
            .welfare-list {
                color: #4e5969;
                background: #f2f3f5;
                border: 0;
            }
        }
        .cos-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .cos-name {
                font-size: 24rpx;
                color: #1b2026;
            }
            .address {
                font-size: 12px;
                color: #1b2026;
            }
        }
        .salary-info {
            position: absolute;
            top: 40rpx;
            right: 32rpx;
            .salary {
                font-family: DIN;
                font-size: 36rpx;
                font-weight: 500;
                color: #1f86ff;
            }
        }
    }
    .recommend-list-wrap {
        flex-grow: 1;
        height: 1000rpx;
        .card-wrap {
            padding: 32rpx;
            border-bottom: 1px solid #f3f4f8;
        }
    }
}
</style>
