ks-app-employment-service/packageA/pages/exhibitors/exhibitors.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>