<template>
    <div class="postion-details">
        <!--pages/position-details/position-details.wxml-->
        <view class="steps-wrap">
            <steps v-if="partTimeJobData.jobApplication" :data="partTimeJobData.jobApplication"></steps>
        </view>
        <!-- 职位详情 -->
        <view class="pos-details">
            <view class="pos-title">
                <text class="text">{{ partTimeJobData.jobName }}</text>
            </view>
            <view class="salary-wrap">
                <view v-if="partTimeJobData">
                    <view class="salary" v-if="partTimeJobData.isPartTimeJob == 1">
                        <text class="number">{{ partTimeJobData.maxSalary }}</text>
                        <text class="unit">元/{{ partTimeJobData.paymentType }}</text>
                    </view>
                    <view class="salary" v-else>
                        <text class="number"
                            >{{ partTimeJobData.minSalary / 1000 }}k-{{ partTimeJobData.maxSalary / 1000 }}k</text
                        >
                        <text class="unit">/月</text>
                    </view>
                </view>
                <view v-if="partTimeJobData.isSalaryNego == 1">
                    <view class="salary">
                        <text class="number">面议</text>
                    </view>
                </view>
            </view>
            <!-- 经验 -->
            <view class="experience-and-education flex-align-center">
                <view class="flex-align-center">
                    <img src="@/static/image/postion/experience.png" alt="" />
                    <text>1-3年</text>
                </view>
                <view class="flex-align-center">
                    <img src="@/static/image/postion/education.png" alt="" />
                    <text>学历不限</text>
                </view>
            </view>
            <view class="pos-type flex-between">
                <view class="flex-align-center position">
                    <img src="@/static/image/postion/position.png" alt="" />
                    <text>{{ partTimeJobData.cityName }}·{{ partTimeJobData.districtName }}</text>
                </view>
                <view class="type">
                    <text v-if="partTimeJobData.isPartTimeJob == 1">兼职</text>
                    <text v-else>全职</text>
                    <text class="margin-8">|</text>
                    <text>{{ partTimeJobData.jobTypeText }}</text>
                </view>
            </view>
            <view class="cos-welfare" v-if="partTimeJobData.welfareTags">
                <view class="welfare-list" v-for="(wel, i) in partTimeJobData.welfareTags" :key="i">{{ wel }}</view>
            </view>
        </view>

        <!-- 职位介绍 -->
        <view class="pos-introduce margin-top24">
            <view class="title">
                <text class="gradient-title">职位详情</text>
            </view>
            <view class="pos-int">
                <!-- <text class="pos-label pos-age">
      <block wx:if="{{partTimeJobData.minAge}}">{{partTimeJobData.minAge}}-{{partTimeJobData.maxAge}}岁</block>
      <block wx:else>年龄不限</block>
    </text> -->
                <text class="pos-label" v-for="(item, index) in partTimeJobData.benefitsList" :key="index">{{ item }}</text>
            </view>
            <view class="pos-duty {{dutyFlag ? 'activeClass' : ''}}">{{ partTimeJobData.jobDesc }}</view>
            <view
                class="duty-more"
                bindtap="moreClick"
                :style="{ display: dutyFlag ? 'none' : '' }"
                v-if="partTimeJobData.content?.length > 150"
            >
                <text>查看全部</text>
            </view>
        </view>
        <!-- 公司信息 -->
        <view class="cos-info margin-top24">
            <view
                class="flex-align-center"
                @click="navigateTo(`/pages/postionList/companyDetails/index?id=${partTimeJobData.company.id}`)"
                data-id="{{partTimeJobData.company.id}}"
                bindtap="bindNavCompany"
            >
                <view class="cosimage">
                    <img src="@/static/image/temp/test.jpg" />
                </view>
                <view>
                    <view class="cos-title">
                        <text class="cos-name" v-if="partTimeJobData.company?.name != undefined">{{
                            partTimeJobData.company?.name
                        }}</text>
                        <!-- <image
                            wx:if="{{partTimeJobData.permRecommendType}}"
                            class="label-icon"
                            src="../../imgs/icon/sign.png"
                        ></image> -->
                        <text v-if="partTimeJobData.permRecommendType" class="label-name"
                            ><text v-if="EnumRecommendType">{{ EnumRecommendType[1].text }}</text></text
                        >
                    </view>
                    <view class="cos-position">
                        <text>{{ partTimeJobData.company?.placeCityName }}</text>

                        <text>{{ partTimeJobData.countRecruiting | 0 }} <text class="margin-8">|</text>个在招职位</text>
                    </view>
                    <!-- <img class="modu-icon" src="@/static/image/temp/test.jpg" /> -->
                    <view class="arrow modu-icon"></view>
                </view>
            </view>
            <view class="map">
                <map id="mapId" class="map" :latitude="mapCenter.latitude" :longitude="mapCenter.longitude" :markers="markers">
                </map>
            </view>
        </view>

        <!-- 职位推荐 -->
        <view class="pos-recommend margin-top24">
            <view class="title">
                <text class="gradient-title">优选职位</text>
            </view>
            <!-- 职位列表 -->
            <view
                class="recommend-list"
                v-for="(item, index) in recommendList"
                :key="index"
                data-id="{{item.id}}"
                bindtap="bindNavigateTo"
            >
                <view class="cos-details">
                    <view class="cos-requirement">
                        <view class="recommend-title">
                            <text class="sign" v-if="item.permEmergencyType">急聘</text>
                            <text class="title">{{ item.title }}</text>
                        </view>

                        <view class="cos-welfare">
                            <view class="welfare-list" v-if="item.eduDegreeType != null">
                                <block v-if="item.eduDegreeType == '不限'">学历{{ item.eduDegreeType }}</block>
                                <block v-else>{{ item.eduDegreeType }}</block>
                            </view>
                            <view class="welfare-list" v-if="item.workAge != null">{{ item.workAge }}</view>
                            <view class="welfare-list" v-if="item.welfareTags" v-for="(wel, i) in item.welfareTags" :key="i">{{
                                wel
                            }}</view>
                        </view>

                        <view class="cos-title">
                            <text class="cos-name cos-name-width" v-if="item.company.name != undefined">{{
                                item.company.name
                            }}</text>
                            <text class="address"> {{ item.cityName }}-{{ item.districtName }} </text>
                        </view>
                    </view>
                </view>
                <view class="salary-info">
                    <text class="salary" v-if="item.isSalaryNego == 0"
                        >{{ item.minSalary }}-{{ item.maxSalary }}/<text style="font-weight: normal">月</text>
                    </text>
                    <text class="salary" v-if="item.isSalaryNego == 1" style="font-weight: normal">面议</text>
                </view>
            </view>
        </view>
        <!-- 聊工作/投简历Btn -->
        <view class="btn" v-if="!partTimeJobData.jobApplication">
            <view class="btn-list back-color" v-if="!partTimeJobData.isRegister" @tap="bindDelivery">投简历</view>
        </view>
        <!-- 提示 -->
        <view class="warn-wrap">
            <view class="warn">
                <view class="title flex-align-center">
                    <!-- <image src="{{ossImgPrefix}}/warn.png" /> -->
                    乐业安全提示
                </view>
                <view class="content">
                    未标明收费的职位不会收取任何费用，若商家要求缴纳费用或押金，<text>请一定提高警惕并第一时间向我们举报！</text>
                </view>
            </view>
        </view>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import dayjs from "dayjs";
const partTimeJobData = ref({});
const recommendList = ref([]);
const stepViewData = ref(null);
const mapCenter = reactive({
    latitude: 26.63,
    longitude: 106.67
});
let id = null;
const markers = reactive([
    {
        id: 1,
        latitude: 26.63,
        longitude: 106.67,
        width: 16,
        height: 20,
        iconPath: new URL("@/static/image/icon/markers.png", import.meta.url).href,
        callout: {
            content: "观山湖区高新区产业技术发展研究院",
            borderRadius: 2,
            padding: 7,
            display: "ALWAYS",
            textAlign: "center",
            bgColor: "#fff",
            color: "#000"
        }
    }
]);
const getJobDetail = id => {
    getJobDetailApi(id).then(({ data }) => {
        data.id = id;
        partTimeJobData.value = data;
        // 设置地图点
        markers[0].latitude = data.locationLatitude;
        markers[0].longitude = data.locationLongitude;
        markers[0].callout.content = data.address;
        mapCenter.latitude = data.locationLatitude;
        mapCenter.longitude = data.locationLongitude;
    });
};
/* 投递简历 */
const bindDelivery = () => {
    submitResumeApi(partTimeJobData.value.id).then(res => {
        if (res.code === 200) {
            uni.showToast({
                title: "投递成功",
                icon: "none"
            });
            partTimeJobData.value.jobApplication = res.data;
        }
    });
};
const navigateTo = url => {
    xma.navigateTo({
        url
    });
};

onLoad(({ id }) => {
    getJobDetail(id);
});
</script>

<style lang="scss" scoped>
/* pages/position-details/position-details.wxss */

/* // 视频 */
.video-box {
    position: relative;
    width: 100%;
    height: 430rpx;
}
.video-box .recommend-video {
    width: 100%;
    height: 100%;
}
.video-box .cos-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 92rpx;
    height: 92rpx;
    transform: translate(-50%, -50%);
}

/* // 职位详情 */
.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 .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 {
    position: relative;
    padding: 24rpx 0;
    padding-top: 14rpx;
    border-top: 2rpx solid rgb(238 239 238 / 100%);
}
.pos-details .pos-address .sid {
    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 .pos-address .modu-icon {
    position: absolute;
    top: 50%;
    right: 0;
    width: 12rpx;
    height: 20rpx;
}
.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;
//     line-height: 40rpx;
//     border-radius: 4rpx;
//     text-align: center;
//     padding: 0 10rpx;
//     font-size: 24rpx;
//     font-weight: 400;
//     color: rgba(128, 128, 128, 1);
//     margin: 0 12rpx 10rpx 0;
// }

/* // 公司信息 */
.cos-info .cos-title {
    margin-bottom: 16rpx;
}
.cos-info .cos-title .cos-name {
    display: inline-block;
    max-width: 400rpx;
    margin-right: 12rpx;
    overflow: hidden;
    font-size: 28rpx;
    font-weight: 600;
    color: rgb(58 58 60 / 100%);
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.cos-info .cos-title .label-icon {
    width: 36rpx;
    height: 36rpx;
    vertical-align: middle;
    background-color: rgb(255 233 237 / 100%);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
.cos-info .cos-title .label-name {
    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;
}
.cos-info .cos-position {
    font-size: 24rpx;
    font-weight: 400;
    color: rgb(128 128 128 / 100%);
}
.cos-info .modu-icon {
    position: absolute;
    top: 35%;
    right: 32rpx;
}

/* // 职位介绍 */
.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 .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 img {
    display: inline-block;
    width: 20rpx;
    height: 12rpx;
    vertical-align: middle;
}

/* // 提示 */

/* .warn {
    padding: 28rpx 32rpx;
    background: #fff;
    display: flex;
}

.warn image {
    display: inline-block;
    width: 60rpx;
    height: 56rpx;
    margin-right: 16rpx;
    margin-top: 4rpx;
}

.warn text {
    flex: 1;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(245, 166, 35, 1);
} */

/* // 职位推荐 */
.pos-recommend {
    padding: 28rpx 32rpx;
    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 .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-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 img {
    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;

    // color: rgba(128, 128, 128, 1);
    margin: 0 12rpx 12rpx 0;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 40rpx;
    text-align: center;
    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 .deliveryBtn {
    float: right;
}
.cos-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 64rpx;
    height: 64rpx;
    transform: translate(-50%, -50%);
}
.postion-details {
    padding-top: 1rpx;
    background-color: #f3f4f8;
}
.steps-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    background: #ffffff;
    .steps {
        width: 686rpx;
        height: 204rpx;

        // padding: 0 32rpx;
        box-shadow: 0 10rpx 29.2rpx rgb(181 208 240 / 32%);
    }
}

/* // 底部按钮 */
.btn .btn-share {
    width: 220rpx;
    text-align: center;
}
.btn .btn-chat {
    flex: 1;
    font-size: 32rpx;
    font-weight: 400;
    color: rgb(24 146 255 / 100%);
    text-align: center;
}
.btn .btn-share img {
    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;
}
.pos-details {
    position: relative;
    padding: 32rpx;
    padding-top: 0;
    background: #ffffff;
    img {
        width: 32rpx;
        height: 32rpx;
    }
    .pos-title {
        padding-top: 32rpx;
        margin-bottom: 16rpx;
        border-top: 2rpx solid #f3f4f8;
        .text {
            font-size: 32rpx;
            font-weight: 600;
            color: #1b2026;
        }
    }
    .experience-and-education {
        view {
            margin-right: 28rpx;
        }
        text {
            font-size: 24rpx;
            color: #4e5969;
        }
    }
    .pos-type {
        margin-top: 22rpx;
        .position {
            text {
                font-size: 12px;
                line-height: 12px;
                color: #1b2026;
            }
        }
        .type {
            font-size: 24rpx;
            color: #1b2026;
        }
    }
    .salary-wrap {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        .salary {
            font-family: DIN;
            font-size: 36rpx;
            font-weight: 600;
            color: #1f86ff;
        }
        .unit {
            font-size: 28rpx;
        }
    }
}
.pos-introduce {
    position: relative;
    padding: 28rpx 32rpx;
    background: #ffffff;
    .title {
        margin-bottom: 20rpx;
        .text {
            font-family: "PingFang SC";
            font-size: 32rpx;
            font-weight: 600;
            line-height: 36rpx;
            color: rgb(51 51 51 / 100%);
            color: #1b2026;
            letter-spacing: 0rpx;
            vertical-align: middle;
        }
    }
    .pos-int {
        margin-bottom: 16rpx;
        .pos-label {
            display: inline-block;
            width: auto;
            height: 40rpx;
            padding: 0 10rpx;
            margin-right: 12rpx;
            font-family: "PingFang SC";
            font-size: 20rpx;
            font-weight: 400;
            line-height: 40rpx;
            color: rgb(128 128 128 / 100%);
            color: #4e5969;
            background: #f2f3f5;
            border: 2rpx solid rgb(186 186 186 / 100%);
            border: 0;
            border-radius: 4rpx;
        }
    }
    .pos-duty {
        display: -webkit-box;
        margin-bottom: 36rpx;
        overflow: hidden;
        font-size: 28rpx;
        font-weight: 400;
        font-weight: normal;
        line-height: 36rpx;
        color: rgb(128 128 128 / 100%);
        color: #1b2026;
        letter-spacing: 0;
        word-break: break-all;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }
}
.cos-info {
    position: relative;
    padding: 28rpx 32rpx;
    background: #ffffff;
    .flex-align-center {
        position: relative;
        .cosimage {
            img {
                width: 88rpx;
                height: 88rpx;
                margin-right: 26rpx;
                border-radius: 50%;
            }
        }
        .cos-title {
            margin: 0;
        }
    }
    .map {
        margin-top: 32rpx;
        map {
            width: 686rpx;
            height: 330rpx;
        }
    }
}
.recommend-list {
    position: relative;
    background-color: #ffffff;
    border: 0;
    .recommend-title {
        margin-bottom: 24rpx;
        .title {
            font-size: 32rpx;
            font-weight: 600;
            color: rgb(58 58 60 / 100%);
            color: #1b2026;
            vertical-align: middle;
        }
    }
    .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: 26rpx;
        right: 32rpx;
        padding-bottom: 28rpx;
        overflow: hidden;
        .salary {
            font-family: DIN;
            font-size: 36rpx;
            font-weight: 500;
            color: rgb(255 89 55 / 100%);
            color: #1f86ff;
            vertical-align: middle;
        }
    }
}
.btn {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    padding: 16rpx 0;
    line-height: 88rpx;
    background-color: #ffffff;
    border: 2rpx solid rgb(233 233 233 / 100%);
    .btn-list {
        flex: 1;
        flex: none;
        font-size: 32rpx;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        background-color: #bababa;
    }
    .back-color {
        width: 622rpx;
        height: 80rpx;
        font-size: 30rpx;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        background: #1f86ff;
        border-radius: 6rpx;
    }
}
.warn-wrap {
    padding: 0 32rpx;
    padding-bottom: 130rpx;
    background-color: #ffffff;
    .warn {
        padding: 34rpx;
        background: #fff2ed;
        img {
            width: 25rpx;
            height: 28rpx;
            margin-right: 14rpx;
        }
        .title {
            font-size: 28rpx;
            font-weight: 600;
            color: #73331c;
        }
        .content {
            margin-top: 16rpx;
            font-size: 22rpx;
            font-weight: 600;
            line-height: 36rpx;
            color: #65301e;
            text {
                color: #ff662f;
            }
        }
    }
}
</style>
