192 lines
6.9 KiB
Vue
192 lines
6.9 KiB
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">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 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;
|
||
.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>
|