ks-app-employment-service/pages/careerfair/careerfair.vue

<template>
    <view class="app-container">
        <view class="careerfair-AI">AI+就业服务程序</view>
        <view class="careerfair-tab">
            <view class="careerfair-tab-options actived">现场招聘</view>
            <view class="careerfair-tab-options" @click="textXcx">VR虚拟招聘会</view>
        </view>
        <scroll-view :scroll-x="true" :show-scrollbar="false" class="careerfair-scroll">
            <view class="careerfair-date">
                <view class="date-list" v-for="(item, index) in state.dateList" :key="index">
                    <view class="date-list-item">{{ item.day }}</view>
                    <view class="date-list-item active">{{ item.date }}</view>
                </view>
            </view>
        </scroll-view>
        <scroll-view :scroll-y="true" class="careerfair-list-scroll">
            <view class="careerfair-list">
                <view class="careerfair-list-card" v-for="(item, index) in 10" :key="index">
                    <view class="card-title">2024年春季青岛市商贸服务业招聘会</view>
                    <view class="card-intro">
                        <view class="line_2">内容简介……</view>
                        <view class="intro-distance">500m以内</view>
                    </view>
                    <view class="card-address">市南区延安三路105号</view>
                    <view class="card-footer">
                        <view class="cardfooter-lf">
                            <view class="card-company">市南区就业人才中心</view>
                            <view class="card-date">7月31日（周三）14:00-18:00</view>
                        </view>
                        <view class="cardfooter-ri" @click="navTo('/packageA/pages/exhibitors/exhibitors')">
                            查看详情
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo } = inject('globalFunction');
const state = reactive({
    dateList: [],
});

onLoad(() => {
    state.dateList = getNextMonthDates();
});

function textXcx() {
    $api.msg('测试给小程序发送消息');
    $api.sendingMiniProgramMessage();
}

//  获取往后三十天日期
function getNextMonthDates() {
    const today = new Date();
    const dates = [];
    const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
    for (let i = 0; i < 30; i++) {
        const date = new Date(today); // 创建当天的副本
        date.setDate(today.getDate() + i); // 设置日期为往后第 i 天
        const formattedDate = date.toISOString().slice(0, 10).slice(8); // 格式化为 YYYY-MM-DD
        const dayOfWeek = dayNames[date.getDay()]; // 获取星期几
        dates.push({
            date: formattedDate,
            day: dayOfWeek,
        });
    }
    dates[0].date = '今天';
    dates[1].date = '明天';
    return dates;
}
</script>

<style lang="stylus" scoped>
.app-container
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
    display: flex;
    flex-direction: column;
    position: fixed
    .careerfair-AI
        height: 42rpx;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 35rpx;
        color: #FFFFFF;
        line-height: 41rpx;
        padding: 85rpx 0 0 30rpx;
    .careerfair-tab
        margin: 20rpx 0 0 30rpx;
        width: fit-content;
        display: flex;
        flex-wrap: nowrap;
        .careerfair-tab-options
            background: #4778EC;
            padding: 0 20rpx;
            height: 63rpx;
            line-height: 63rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #FFFFFF;
            text-align: center;
        .actived
            position: relative;
            background: #FFAD47;
            box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
        .careerfair-tab-options:first-child
            border-radius: 17rpx 0rpx 0rpx 0rpx;
        .careerfair-tab-options:last-child
            border-radius: 0rpx 17rpx 0rpx 0rpx;
    .careerfair-scroll
        background: #4778EC;
    .careerfair-date
        height: 119rpx;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        color: #FFFFFF;
        width: fit-content;
        .date-list
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: calc(750rpx / 7);
            .date-list-item:nth-child(2)
                font-size: 19rpx;
                margin-top: 10rpx;
            .active
                width: 52rpx;
                height: 52rpx;
                background: #FFAD47;
                border-radius: 0rpx 0rpx 0rpx 0rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
    .careerfair-list-scroll
        overflow: hidden;
        background: linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, #FFFFFF 100%);
    .careerfair-list
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 25rpx 28rpx;
        .careerfair-list-card
            margin-top: 36rpx;
            width: calc(100% - 40rpx);
            background: #FFFFFF;
            border-radius: 17rpx 17rpx 17rpx 17rpx;
            padding: 20rpx;
            .card-title
                height: 68rpx;
                font-size: 35rpx;
                color: #606060;
                line-height: 68rpx;
            .card-intro,.card-address,.card-company,.card-date
                font-weight: 400;
                font-size: 21rpx;
                color: #606060;
                line-height: 25rpx;
                margin-top: 13rpx;
            .card-footer
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                .cardfooter-ri
                    width: 206rpx;
                    height: 56rpx;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    text-align: center;
                    color: #FFFFFF;
                    background: #FFAD47;
                    border-radius: 17rpx 17rpx 17rpx 17rpx;
            .card-intro
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: nowrap;
                .intro-distance
                    height: 30rpx;
                    background: #13C57C;
                    padding: 3rpx 8rpx;
                    line-height: 30rpx;
                    color: #FFFFFF;
                    font-size: 21rpx;
                    border-radius: 17rpx 17rpx 17rpx 17rpx;
        .careerfair-list-card:first-child
            margin-top: 0;
</style>