1084 lines
27 KiB
Vue
1084 lines
27 KiB
Vue
<template>
|
||
<AppLayout title="" :use-scroll-view="false">
|
||
<template #headerleft>
|
||
<view class="btnback">
|
||
<image src="@/static/icon/back.png" @click="navBack"></image>
|
||
</view>
|
||
</template>
|
||
<view class="content">
|
||
<view class="content-top">
|
||
<view class="companyinfo-left">
|
||
<image src="@/static/icon/companyIcon.png" mode=""></image>
|
||
</view>
|
||
<view class="companyinfo-right">
|
||
<view class="row1 line_2">{{ fairInfo?.jobFairTitle }}</view>
|
||
<view class="row2">
|
||
<text>{{ fairInfo?.jobFairAddress }}</text>
|
||
<!-- <convert-distance :alat="fairInfo?.latitude" :along="fairInfo?.longitude" :blat="latitudeVal"
|
||
:blong="longitudeVal"></convert-distance> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="locations">
|
||
<image class="location-img" src="/static/icon/mapLine.png"></image>
|
||
<view class="location-info">
|
||
<view class="info">
|
||
<text class="info-title">{{ fairInfo?.jobFairAddress }}</text>
|
||
<text class="info-text">位置</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="conetent-info" :class="{ expanded: isExpanded }">
|
||
<view class="info-title">内容描述</view>
|
||
<view class="info-desirption">{{ fairInfo?.jobFairIntroduction }}</view>
|
||
<!-- <view class="info-title title2">公司地址</view>
|
||
<view class="locationCompany"></view> -->
|
||
<view class="company-times">
|
||
<view class="info-title">招聘会时间</view>
|
||
<view class="card-times">
|
||
<view class="time-left">
|
||
<view class="left-date">{{ parseDateTime(fairInfo.jobFairStartTime).time }}</view>
|
||
<view class="left-dateDay">{{ parseDateTime(fairInfo.jobFairStartTime).date }}</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="time-center">
|
||
<view class="center-date">
|
||
{{ getTimeStatus(fairInfo.jobFairStartTime, fairInfo.jobFairEndTime).statusText }}
|
||
</view>
|
||
<view class="center-dateDay">
|
||
{{ getHoursBetween(fairInfo.jobFairStartTime, fairInfo.jobFairEndTime) }}小时
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="time-right">
|
||
<view class="left-date">{{ parseDateTime(fairInfo.jobFairEndTime).time }}</view>
|
||
<view class="left-dateDay">{{ parseDateTime(fairInfo.jobFairEndTime).date }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="expand" @click="expand">
|
||
<text>{{ isExpanded ? '收起' : '展开' }}</text>
|
||
<image class="expand-img" :class="{ 'expand-img-active': !isExpanded }" src="@/static/icon/downs.png">
|
||
</image>
|
||
</view>
|
||
<scroll-view scroll-y class="Detailscroll-view">
|
||
<view class="views">
|
||
<view class="Detail-title">
|
||
<text class="title">参会单位（{{ companyList.length }}）</text>
|
||
</view>
|
||
<view v-if="isCompanyUser">
|
||
<view v-for="job in companyList" :key="job.id">
|
||
<view class="cards" :style="getItemBackgroundStyle('bj.png')"
|
||
@click="navTo('/packageA/pages/UnitDetails/UnitDetails?job='+JSON.stringify(job))">
|
||
<view class="card-company">
|
||
<view class="company line_1">
|
||
<image :src="`${baseUrl}/jobfair/mc.png`" mode=""></image>
|
||
{{ job.companyName }}
|
||
</view>
|
||
<view class="ris">
|
||
<text class="fs_14">
|
||
在招职位：
|
||
{{ job.jobInfoList.length || '-' }}
|
||
个
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-bottom">
|
||
<view class="fl_box fs_14">
|
||
{{ job.scale }}
|
||
</view>
|
||
</view>
|
||
<view class="card-tags">
|
||
<view class="tag" v-if="job.industry">
|
||
<image :src="`${baseUrl}/jobfair/hy.png`" mode=""></image>
|
||
{{ job.industry }}
|
||
</view>
|
||
<view class="tag">
|
||
<image :src="`${baseUrl}/jobfair/lx.png`" mode=""></image>
|
||
{{ job.companyType }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="detail-box">
|
||
<view class="" v-for="(item1, index1) in companyList" :key="index1">
|
||
<view class="company-header1">
|
||
<view class="left">
|
||
<image
|
||
:src="`${baseUrl}/jobfair/gs.png`"
|
||
alt=""
|
||
class="company-icon"
|
||
/>
|
||
<text class="name1">{{ item1.companyName }}</text>
|
||
<!-- <div class="header-detail">企业详情 ></div> -->
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="detail-item"
|
||
v-for="(job, index) in item1.jobInfoList"
|
||
:key="index"
|
||
>
|
||
<view class="gw">
|
||
<text>{{ job.jobTitle }}</text>
|
||
<view v-if="job.minSalary && job.maxSalary" class="salary">
|
||
{{ job.minSalary }}-{{ job.maxSalary }}元
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="tag">
|
||
<view class="tag-item">{{ job.industry }}</view>
|
||
<view class="tag-item success">{{ job.scale }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="name">
|
||
<!-- 应聘状态（1已投递、2已邀请面试、3已录用、4不录用） -->
|
||
<view class="status" v-if="job.jobFairPersonJob?.status">
|
||
<text
|
||
:style="{
|
||
color: getStatusText(job.jobFairPersonJob?.status)
|
||
.color,
|
||
}"
|
||
>{{
|
||
getStatusText(job.jobFairPersonJob?.status).text
|
||
}}</text
|
||
>
|
||
</view>
|
||
<view v-else class="btn">
|
||
<button
|
||
plain
|
||
:disabled="deliveringJobs[job.jobId]"
|
||
style="color: #1685f7; border-color: #1685f7"
|
||
@click="deliverResume(job)"
|
||
>
|
||
{{
|
||
deliveringJobs[job.jobId] ? "投递中..." : "简历投递"
|
||
}}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<template #footer>
|
||
<view class="footer" v-if="hasnext">
|
||
<view class="btn-wq button-click" :class="{ 'btn-desbel': fairInfo.isSignUp==1 || isLoading }"
|
||
@click="applyExhibitors" :disabled="isLoading">
|
||
{{ isLoading ? '报名中...' : fairInfo.isSignUp==1 ? '已报名' : '报名招聘会' }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<uni-popup ref="CompanySignPopup" background-color="#fff" :mask-click="false">
|
||
<view class="popup-content">
|
||
<signDialog v-if="signDialogisshow" :signType="signType" :signRole="signRole"
|
||
:jobFairId="fairInfo.jobFairId" @closePopup="closePopup"></signDialog>
|
||
</view>
|
||
</uni-popup>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import signDialog from '@/components/jobfair/signDialog.vue';
|
||
import config from "@/config.js"
|
||
import {
|
||
reactive,
|
||
inject,
|
||
watch,
|
||
ref,
|
||
onMounted,
|
||
computed
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app';
|
||
import useLocationStore from '@/stores/useLocationStore';
|
||
const {
|
||
$api,
|
||
navTo,
|
||
vacanciesTo,
|
||
navBack
|
||
} = inject('globalFunction');
|
||
import {
|
||
storeToRefs
|
||
} from 'pinia';
|
||
const {
|
||
longitudeVal,
|
||
latitudeVal
|
||
} = storeToRefs(useLocationStore());
|
||
|
||
const isExpanded = ref(false);
|
||
const fairInfo = ref({});
|
||
const companyList = ref([]);
|
||
const hasnext = ref(true);
|
||
const userInfo = ref({});
|
||
const signDialogisshow = ref(false);
|
||
// 弹窗
|
||
const signType = ref(1);
|
||
// person个人 ent企业
|
||
const signRole = ref("ent");
|
||
const CompanySignPopup = ref(null);
|
||
// 报名loading状态
|
||
const isLoading = ref(false);
|
||
|
||
const jobFairId = ref(null);
|
||
const isCompanyUser = ref(false);
|
||
isCompanyUser.value = uni.getStorageSync("userInfo")?.isCompanyUser == 0;
|
||
// 获取状态文本
|
||
const getStatusText = (status) => {
|
||
switch (status) {
|
||
case "1":
|
||
return {
|
||
text: "已投递",
|
||
color: "#2aa553",
|
||
};
|
||
case "2":
|
||
return {
|
||
text: "已邀请面试",
|
||
color: "#409EFF",
|
||
};
|
||
case "3":
|
||
return {
|
||
text: "已录用",
|
||
color: "#67C23A",
|
||
};
|
||
case "4":
|
||
return {
|
||
text: "不录用",
|
||
color: "#F56C6C",
|
||
};
|
||
default:
|
||
return {
|
||
text: "未知状态",
|
||
color: "#2aa553",
|
||
};
|
||
}
|
||
};
|
||
const deliveringJobs = reactive({});
|
||
// 岗位投递
|
||
function deliverResume(job) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "请确认是否投递简历？",
|
||
showCancel: true,
|
||
confirmText: "确定",
|
||
cancelText: "取消",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
if (deliveringJobs[job.jobId]) return;
|
||
deliveringJobs[job.jobId] = true;
|
||
const raw = uni.getStorageSync("Padmin-Token");
|
||
const token = typeof raw === "string" ? raw.trim() : "";
|
||
const headers = token? { Authorization: raw.startsWith("Bearer ") ? raw: `Bearer ${token}`,}: {};
|
||
|
||
$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData1) => {
|
||
if (resData1.code == 200) {
|
||
$api.myRequest(
|
||
"/system/user/login/user/info",
|
||
{},
|
||
"GET",
|
||
10100,
|
||
headers
|
||
)
|
||
.then((resData) => {
|
||
$api.myRequest(
|
||
"/jobfair/public/job-fair-person-job/insert",
|
||
{
|
||
jobFairId: job.jobFairId, // 招聘会id
|
||
personId: resData.info.userId, // 当前登录用户id
|
||
enterpriseId: job.companyId, // 企业id
|
||
jobId: job.jobId, // 岗位id
|
||
idCard: resData.info.personCardNo,
|
||
},
|
||
"post",
|
||
9100,
|
||
{
|
||
"Content-Type": "application/json",
|
||
}
|
||
)
|
||
.then((data) => {
|
||
if (data && data.code === 200) {
|
||
$api.msg("简历投递成功");
|
||
if (!job.jobFairPersonJob) {
|
||
job.jobFairPersonJob = {};
|
||
}
|
||
job.jobFairPersonJob.status = "1";
|
||
getCompanyInfo(userInfo.value.info.userId, jobFairId.value);
|
||
} else {
|
||
$api.msg((data && data.msg) || "简历投递失败");
|
||
}
|
||
deliveringJobs[job.jobId] = false;
|
||
});
|
||
});
|
||
} else {
|
||
$api.msg("请先登录");
|
||
deliveringJobs[job.jobId] = false;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
deliveringJobs[job.jobId] = false;
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
const baseUrl = config.imgBaseUrl;
|
||
const getItemBackgroundStyle = (imageName) => ({
|
||
backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
|
||
backgroundSize: "100% 100%", // 覆盖整个容器
|
||
backgroundPosition: "center", // 居中
|
||
backgroundRepeat: "no-repeat",
|
||
});
|
||
onLoad((options) => {
|
||
jobFairId.value = options.jobFairId;
|
||
const raw = uni.getStorageSync("Padmin-Token");
|
||
const token = typeof raw === "string" ? raw.trim() : "";
|
||
const headers = token
|
||
? {
|
||
Authorization: raw.startsWith("Bearer ") ? raw : `Bearer ${token}`,
|
||
}
|
||
: {};
|
||
|
||
$api
|
||
.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers)
|
||
.then((resData) => {
|
||
if (resData.code == 200) {
|
||
$api
|
||
.myRequest("/system/user/login/user/info", {}, "GET", 10100, {
|
||
Authorization: `Bearer ${uni.getStorageSync("Padmin-Token")}`,
|
||
})
|
||
.then((userinfo) => {
|
||
userInfo.value = userinfo;
|
||
getCompanyInfo(userInfo.value.info.userId, options.jobFairId);
|
||
});
|
||
} else {
|
||
getCompanyInfo("", options.jobFairId);
|
||
}
|
||
});
|
||
});
|
||
|
||
function closePopup() {
|
||
CompanySignPopup.value.close();
|
||
getCompanyInfo(userInfo.value.info.userId, jobFairId.value);
|
||
}
|
||
|
||
function getCompanyInfo(userId, id) {
|
||
let data = {};
|
||
if (userInfo.value && userInfo.value.userType == "ent") {
|
||
data = {
|
||
jobFairId: id,
|
||
enterpriseId: userId,
|
||
code: userInfo.value.info.entCreditCode,
|
||
};
|
||
} else if (userInfo.value && userInfo.value.userType == "ent") {
|
||
data = {
|
||
jobFairId: id,
|
||
personId: userId,
|
||
idCard: userInfo.value.info.personCardNo,
|
||
};
|
||
} else {
|
||
data = {
|
||
jobFairId: id,
|
||
personId: userId,
|
||
};
|
||
}
|
||
$api.myRequest("/jobfair/public/jobfair/detail", data).then((resData) => {
|
||
fairInfo.value = resData.data;
|
||
});
|
||
$api
|
||
.myRequest("/jobfair/public/jobfair/enterprises-with-jobs-by-job-fair-id", {
|
||
personId: userInfo.value?.info?.userId,
|
||
jobFairId: jobFairId.value,
|
||
})
|
||
.then((resData) => {
|
||
if(resData.code == 200){
|
||
companyList.value = resData.data;
|
||
}
|
||
});
|
||
}
|
||
|
||
const hasAppointment = () => {
|
||
const isTimePassed = (timeStr) => {
|
||
const targetTime = new Date(timeStr.replace(/-/g, "/")).getTime(); // 兼容格式
|
||
const now = Date.now();
|
||
return now < targetTime;
|
||
};
|
||
|
||
hasnext.value = isTimePassed(fairInfo.value.startTime);
|
||
};
|
||
|
||
function openMap(lat, lng, name = "位置") {
|
||
const isConfirmed = window.confirm("是否打开地图查看位置？");
|
||
if (!isConfirmed) return;
|
||
|
||
// 使用高德地图或百度地图的 H5 链接打开
|
||
const url = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(
|
||
name
|
||
)}`;
|
||
window.location.href = url;
|
||
}
|
||
|
||
function expand() {
|
||
isExpanded.value = !isExpanded.value;
|
||
}
|
||
|
||
// 报名招聘会
|
||
function applyExhibitors() {
|
||
if (isLoading.value) return;
|
||
if (fairInfo.value.isSignUp == 1) {
|
||
$api.msg("请勿重复报名");
|
||
return;
|
||
}
|
||
const raw = uni.getStorageSync("Padmin-Token");
|
||
const token = typeof raw === "string" ? raw.trim() : "";
|
||
const headers = token
|
||
? {
|
||
Authorization: raw.startsWith("Bearer ") ? raw : `Bearer ${token}`,
|
||
}
|
||
: {};
|
||
isLoading.value = true;
|
||
|
||
$api
|
||
.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers)
|
||
.then((resData) => {
|
||
if (resData.code == 200) {
|
||
if (userInfo.value.userType == "ent") {
|
||
// 企业
|
||
signType.value = fairInfo.value.jobFairType;
|
||
signRole.value = userInfo.userType;
|
||
signDialogisshow.value = true;
|
||
CompanySignPopup.value.open();
|
||
isLoading.value = false;
|
||
} else {
|
||
$api
|
||
.myRequest(
|
||
"/jobfair/public/job-fair-sign-up-person/sign-up",
|
||
{
|
||
personId: userInfo.value.info.userId,
|
||
jobFairId: jobFairId.value,
|
||
idCard: userInfo.value.info.personCardNo,
|
||
},
|
||
"POST",
|
||
9100,
|
||
{ "Content-Type": "application/json", ...headers }
|
||
)
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
uni.showToast({
|
||
title: "报名成功",
|
||
icon: "success",
|
||
});
|
||
fairInfo.value.isSignUp = 1;
|
||
getCompanyInfo(userInfo.value.info.userId, jobFairId.value);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || "报名失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
isLoading.value = false;
|
||
});
|
||
}
|
||
} else {
|
||
$api.msg("请先登录");
|
||
// setTimeout(() => {
|
||
// uni.redirectTo({
|
||
// url: '/packageB/login'
|
||
// })
|
||
// }, 1000)
|
||
isLoading.value = false;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
isLoading.value = false;
|
||
});
|
||
}
|
||
|
||
function parseDateTime(datetimeStr) {
|
||
if (!datetimeStr)
|
||
return {
|
||
time: "",
|
||
date: "",
|
||
};
|
||
|
||
const dateObj = new Date(datetimeStr);
|
||
|
||
if (isNaN(dateObj.getTime()))
|
||
return {
|
||
time: "",
|
||
date: "",
|
||
}; // 无效时间
|
||
|
||
const year = dateObj.getFullYear();
|
||
const month = String(dateObj.getMonth() + 1).padStart(2, "0");
|
||
const day = String(dateObj.getDate()).padStart(2, "0");
|
||
const hours = String(dateObj.getHours()).padStart(2, "0");
|
||
const minutes = String(dateObj.getMinutes()).padStart(2, "0");
|
||
|
||
return {
|
||
time: `${hours}:${minutes}`,
|
||
date: `${year}年${month}月${day}日`,
|
||
};
|
||
}
|
||
|
||
function getTimeStatus(startTimeStr, endTimeStr) {
|
||
const now = new Date();
|
||
const startTime = new Date(startTimeStr);
|
||
const endTime = new Date(endTimeStr);
|
||
|
||
// 判断状态：0 开始中，1 过期，2 待开始
|
||
let status = 0;
|
||
let statusText = "开始中";
|
||
let color = "#13C57C"; // 进行中 - 绿色
|
||
if (now < startTime) {
|
||
status = 2; // 待开始
|
||
statusText = "待开始";
|
||
color = "#015EEA"; // 未开始 - 蓝色
|
||
} else if (now > endTime) {
|
||
status = 1; // 已过期
|
||
statusText = "已过期";
|
||
color = "#999999"; // 已过期 - 灰色
|
||
} else {
|
||
status = 0; // 进行中
|
||
statusText = "进行中";
|
||
color = "#13C57C"; // 进行中 - 绿色
|
||
}
|
||
return {
|
||
status, // 0: 进行中，1: 已过期，2: 待开始
|
||
statusText,
|
||
color,
|
||
};
|
||
}
|
||
|
||
function getHoursBetween(startTimeStr, endTimeStr) {
|
||
const start = new Date(startTimeStr);
|
||
const end = new Date(endTimeStr);
|
||
|
||
const diffMs = end - start;
|
||
const diffHours = diffMs / (1000 * 60 * 60);
|
||
|
||
return +diffHours.toFixed(2); // 保留 2 位小数
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.popup-content {
|
||
width: 90vw;
|
||
height: 80vh;
|
||
position: relative;
|
||
}
|
||
|
||
.btnback {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
image {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.content {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.content-top {
|
||
padding: 28rpx;
|
||
padding-top: 50rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
|
||
.companyinfo-left {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.companyinfo-right {
|
||
flex: 1;
|
||
|
||
.row1 {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-family: "PingFangSC-Medium", "PingFang SC", "Helvetica Neue",
|
||
Helvetica, Arial, "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
.row2 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #6c7282;
|
||
line-height: 45rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.locations {
|
||
padding: 0 28rpx;
|
||
height: 86rpx;
|
||
|
||
position: relative;
|
||
margin-bottom: 36rpx;
|
||
|
||
.location-img {
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #efefef;
|
||
}
|
||
|
||
.location-info {
|
||
position: absolute;
|
||
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.info {
|
||
padding: 0 60rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
white-space: nowrap;
|
||
|
||
.info-title {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.info-text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9b9b9b;
|
||
position: relative;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.info-text::before {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
content: "";
|
||
width: 4rpx;
|
||
height: 16rpx;
|
||
border-radius: 2rpx;
|
||
background: #9b9b9b;
|
||
transform: translate(0, -75%) rotate(-45deg);
|
||
}
|
||
|
||
.info-text::after {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
content: "";
|
||
width: 4rpx;
|
||
height: 16rpx;
|
||
border-radius: 2rpx;
|
||
background: #9b9b9b;
|
||
transform: translate(0, -25%) rotate(45deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.conetent-info {
|
||
padding: 0 28rpx;
|
||
overflow: hidden;
|
||
max-height: 0rpx;
|
||
transition: max-height 0.3s ease;
|
||
|
||
.info-title {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.info-desirption {
|
||
margin-top: 12rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #495265;
|
||
text-align: justify;
|
||
}
|
||
|
||
.title2 {
|
||
margin-top: 48rpx;
|
||
}
|
||
}
|
||
|
||
.company-times {
|
||
padding-top: 40rpx;
|
||
|
||
.info-title {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.expanded {
|
||
max-height: 1000rpx; // 足够显示完整内容
|
||
}
|
||
|
||
.expand {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
justify-content: center;
|
||
margin-bottom: 46rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #256bfa;
|
||
|
||
.expand-img {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.expand-img-active {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.Detailscroll-view {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
background: #f4f4f4;
|
||
|
||
.views {
|
||
padding: 28rpx;
|
||
|
||
.Detail-title {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
position: relative;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.Detail-title::before {
|
||
position: absolute;
|
||
content: "";
|
||
left: -14rpx;
|
||
bottom: 0;
|
||
height: 16rpx;
|
||
width: 108rpx;
|
||
background: linear-gradient(to right, #cbdeff, #ffffff);
|
||
border-radius: 8rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.cards {
|
||
padding: 32rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin-top: 22rpx;
|
||
|
||
.card-company {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.company {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.salary {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.ris {
|
||
background: #53acff;
|
||
color: #fff;
|
||
padding: 7rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.card-companyName {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #6c7282;
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.tag {
|
||
width: fit-content;
|
||
height: 30rpx;
|
||
background: #e0f0ff;
|
||
border-radius: 4rpx;
|
||
padding: 6rpx 26rpx;
|
||
line-height: 30rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #595959;
|
||
text-align: center;
|
||
margin-top: 14rpx;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-bottom {
|
||
margin-top: 15rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #6c7282;
|
||
}
|
||
}
|
||
|
||
.detail-box {
|
||
padding-top: 20rpx;
|
||
box-sizing: border-box;
|
||
.company-header1 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 12px;
|
||
.name1 {
|
||
font-weight: 600;
|
||
margin-right: 12px;
|
||
font-size: 18px;
|
||
}
|
||
.company-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 15px;
|
||
}
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
.header-detail {
|
||
background: #5599ff;
|
||
border-radius: 18px;
|
||
padding: 2px 16px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.icon {
|
||
margin-right: 6px;
|
||
color: #409eff;
|
||
}
|
||
.booth-no {
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
.detail-item {
|
||
margin-top: 16rpx;
|
||
background: linear-gradient(to bottom, #deecff 0%, #ffffff 100%);
|
||
box-shadow: 0 0 10rpx rgba(0, 95, 169, 0.19);
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #ffffff;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 10rpx;
|
||
|
||
.status {
|
||
width: 160rpx;
|
||
text-align: center;
|
||
margin-left: 24rpx;
|
||
font-size: 24rpx;
|
||
background-size: 100% 100%;
|
||
font-weight: 600;
|
||
padding: 6rpx 0;
|
||
margin: 18rpx 0;
|
||
}
|
||
.btn {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
button {
|
||
margin: 10rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.tag {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.tag-item {
|
||
padding: 6rpx 30rpx;
|
||
border-radius: 6rpx;
|
||
background-color: #e5f1ff;
|
||
color: #589bff;
|
||
font-size: 28rpx;
|
||
|
||
&.success {
|
||
background-color: #e6f8eb;
|
||
color: #21aa5b;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gw {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #1477f1;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-times {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx 30rpx 10rpx 30rpx;
|
||
|
||
.time-left,
|
||
.time-right {
|
||
text-align: center;
|
||
|
||
.left-date {
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.left-dateDay {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 40rpx;
|
||
height: 0rpx;
|
||
border: 2rpx solid #d4d4d4;
|
||
margin-top: 64rpx;
|
||
}
|
||
|
||
.time-center {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.center-date {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #ff881a;
|
||
}
|
||
|
||
.center-dateDay {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 6rpx;
|
||
line-height: 48rpx;
|
||
width: 104rpx;
|
||
height: 48rpx;
|
||
background: #f9f9f9;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
background: #ffffff;
|
||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
|
||
padding: 40rpx 28rpx 20rpx 28rpx;
|
||
|
||
.btn-wq {
|
||
height: 90rpx;
|
||
background: #256bfa;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
}
|
||
|
||
.btn-desbel {
|
||
background: #6697fb;
|
||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
|
||
}
|
||
}
|
||
</style> |