招聘会模块

2025-11-03 15:08:39 +08:00
parent 4ba6539850
commit 2fbd8ade5b
3 changed files with 236 additions and 157 deletions
--- a/packageA/pages/UnitDetails/UnitDetails.vue
+++ b/packageA/pages/UnitDetails/UnitDetails.vue
@@ -47,43 +47,31 @@
          <view class="Detail-title"><text class="title">在招职位</text></view>
          <template v-if="companyInfo.jobInfoList.length != 0">
            <view v-for="job in companyInfo.jobInfoList" :key="job.id">
-              <view class="cards" @click="navTo(`/packageA/pages/post/post?jobId=${JSON.stringify(job)}`)">
+              <!-- @click="navTo(`/packageA/pages/post/post?jobId=${JSON.stringify(job)}`)" -->
+              <view class="cards" :style="getItemBackgroundStyle('bj2.png')">
                <view class="card-company">
                  <text class="company">{{ job.jobTitle }}</text>
-                  <view class="salary"> {{ job.salaryRange }}元 </view>
+                  <view class="salary"> ￥{{ job.salaryRange }}/月 </view>
                </view>
-                <view class="card-companyName">{{ job.companyName }}</view>
-                <view class="card-companyName">{{ job.jobDescription }}</view>
                <view class="card-tags">
-                  <view class="tag">
-                    {{ job.educationRequirement }}
-                  </view>
-                  <view class="tag">
+                  <view class="tag jy">
+									  <image :src="`${baseUrl}/jobfair/jy.png`" mode=""></image>
                    {{ job.experienceRequirement }}
                  </view>
-                  <!-- <view class="tag">
-                 {{ vacanciesTo(job.vacancies) }}
-                </view> -->
-                  <view class="tag" v-if="job.jobRequirement">
+                  <view class="tag xl">
+									<image :src="`${baseUrl}/jobfair/xx.png`" mode=""></image>
+                    {{ job.educationRequirement }}
+                  </view>
+                  <view class="tag yd" v-if="job.jobRequirement">
+									<image :src="`${baseUrl}/jobfair/lx-1.png`" mode=""></image>
                    {{ job.jobRequirement }}
                  </view>
                </view>
-                <view class="card-bottom">
-                  <view>{{ job.postingDate }}</view>
-                  <view>
-                    <convert-distance
-                      :alat="job.latitude"
-                      :along="job.longitude"
-                      :blat="latitude"
-                      :blong="longitude"
-                    ></convert-distance>
-                    <dict-Label
-                      class="mar_le10"
-                      dictType="area"
-                      :value="job.jobLocationAreaCode"
-                    ></dict-Label>
+                <view class="card-companyName">
+									<image :src="`${baseUrl}/jobfair/hd.png`" mode=""></image>
+                  {{ job.jobDescription }}
                  </view>
-                </view>
+
              </view>
            </view>
          </template>
@@ -95,15 +83,14 @@
 </template>

 <script setup>
-import point from "@/static/icon/point.png";
 import { reactive, inject, watch, ref, onMounted, computed } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import dictLabel from "@/components/dict-Label/dict-Label.vue";
+import config from "@/config.js";
 import { storeToRefs } from "pinia";
 import useLocationStore from "@/stores/useLocationStore";
 const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
 const { $api, navTo, vacanciesTo, navBack } = inject("globalFunction");
-
 const isExpanded = ref(false);
 const pageState = reactive({
  page: 0,
@@ -112,7 +99,17 @@ const pageState = reactive({
  maxPage: 1,
  pageSize: 10,
 });
-const companyInfo = ref({});
+const companyInfo = ref({
+  jobInfoList: [],
+});
+
+const baseUrl = config.imgBaseUrl;
+const getItemBackgroundStyle = (imageName) => ({
+  backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
+  backgroundSize: "100% 100%", // 覆盖整个容器
+  backgroundPosition: "center", // 居中
+  backgroundRepeat: "no-repeat",
+});

 onLoad((options) => {
  companyInfo.value = JSON.parse(options.job);
@@ -268,6 +265,7 @@ image {
      box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 22rpx;
+      padding-bottom: 18rpx;

      .card-company {
        display: flex;
@@ -275,15 +273,15 @@ image {
        align-items: flex-start;

        .company {
-          font-weight: 500;
+          font-weight: 600;
          font-size: 32rpx;
          color: #333333;
        }

        .salary {
-          font-weight: 500;
+          font-weight: 600;
          font-size: 28rpx;
-          color: #4C6EFB;
+          color: #F83A3C;
          white-space: nowrap;
          line-height: 48rpx;
        }
@@ -292,27 +290,53 @@ image {
      .card-companyName {
        font-weight: 400;
        font-size: 28rpx;
-        color: #6C7282;
+        color: #fff;
+        margin-top: 23rpx;
+        display: flex;
+        align-items: center;
+        image{
+          width: 24rpx;
+          height: 24rpx;
+          margin-right: 8rpx;
+        }
      }

      .card-tags {
        display: flex;
        flex-wrap: wrap;
+          margin: 25rpx 0 35rpx;
+          image{
+            width: 24rpx;
+            height: 24rpx;
+            margin-right: 8rpx;
+          }
+        .jy {
+          background: #D9EDFF;
+          color: #0086FF;
+        }
+
+        .xl {
+          background: #FFF1D5;
+          color: #FF7F01;
+        }
+        .yd {
+          background: #FFD8D8;
+          color: #F83A3C;
+        }

        .tag {
          width: fit-content;
          height: 30rpx;
-          background: #F4F4F4;
          border-radius: 4rpx;
          padding: 6rpx 20rpx;
          line-height: 30rpx;
          font-weight: 400;
          font-size: 24rpx;
-          color: #6C7282;
          text-align: center;
-          margin-top: 14rpx;
          white-space: nowrap;
          margin-right: 20rpx;
+          display: flex;
+          align-items: center;
        }
      }

--- a/packageA/pages/exhibitors/exhibitors.vue
+++ b/packageA/pages/exhibitors/exhibitors.vue
@@ -68,31 +68,37 @@
 						<text class="title">参会单位（{{ companyList.length }}）</text>
 					</view>
 					<view v-for="job in companyList" :key="job.id">
-					    <view class="cards" @click="navTo('/packageA/pages/UnitDetails/UnitDetails?job='+JSON.stringify(job))">
-					        <view class="card-company">
-					            <text class="company line_1">{{ job.companyName }}</text>
-					        </view>
-					        <view class="card-bottom">
-					            <view class="fl_box fs_14">
-					                {{ job.scale }}
-					            </view>
-					            <view class="ris">
-					                <text class="fs_14">
-					                    在招职位·
-					                    <text class="color_256BFA">{{ job.jobInfoList.length || '-' }}</text>
-					                    个
-					                </text>
-					            </view>
-					        </view>
-					        <view class="card-tags">
-					            <view class="tag" v-if="job.industry">
-					                {{ job.industry }}
-					            </view>
-					            <view class="tag">
-					                {{ job.companyType }}
-					            </view>
-					        </view>
-					    </view>
+						<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>
 			</scroll-view>
@@ -109,7 +115,7 @@
 </template>

 <script setup>
-	import point from '@/static/icon/point.png';
+	import config from "@/config.js"
 	import {
 		reactive,
 		inject,
@@ -142,6 +148,14 @@
 	const fairInfo = ref({});
 	const companyList = ref([]);
 	const hasnext = ref(true);
+
+	const baseUrl = config.imgBaseUrl
+	const getItemBackgroundStyle = (imageName) => ({
+		backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
+		backgroundSize: '100% 100%', // 覆盖整个容器
+		backgroundPosition: 'center', // 居中
+		backgroundRepeat: 'no-repeat'
+	});
 	onLoad((options) => {
 		getCompanyInfo(options.jobFairId);
 	});
@@ -241,19 +255,24 @@
 		// 判断状态：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
 		};
 	}

@@ -291,25 +310,30 @@
 		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;
@@ -348,6 +372,7 @@
 					align-items: center;
 					justify-content: space-between;
 					white-space: nowrap;
+
 					.info-title {
 						font-weight: 600;
 						font-size: 28rpx;
@@ -496,10 +521,19 @@
 					display: flex;
 					justify-content: space-between;
 					align-items: flex-start;
+
 					.company {
-						font-weight: 500;
+						font-weight: 600;
 						font-size: 32rpx;
 						color: #333333;
+						display: flex;
+						align-items: center;
+						image {
+							width: 30rpx;
+							height: 30rpx;
+							margin-right: 10rpx;
+
+						}
 					}

 					.salary {
@@ -508,6 +542,13 @@
 						white-space: nowrap;
 						line-height: 48rpx;
 					}
+
+					.ris {
+						background: #53ACFF;
+						color: #fff;
+						padding: 7rpx 20rpx;
+						border-radius: 8rpx;
+					}
 				}

 				.card-companyName {
@@ -519,25 +560,33 @@
 				.card-tags {
 					display: flex;
 					flex-wrap: wrap;
+
 					.tag {
 						width: fit-content;
 						height: 30rpx;
-						background: #F4F4F4;
+						background: #E0F0FF;
 						border-radius: 4rpx;
-						padding: 6rpx 20rpx;
+						padding: 6rpx 26rpx;
 						line-height: 30rpx;
 						font-weight: 400;
 						font-size: 24rpx;
-						color: #6C7282;
+						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: 32rpx;
+					margin-top: 15rpx;
 					display: flex;
 					justify-content: space-between;
 					font-size: 28rpx;
@@ -552,14 +601,17 @@
 		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;
@@ -567,23 +619,27 @@
 				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;
--- a/pages/careerfair/careerfair.vue
+++ b/pages/careerfair/careerfair.vue
@@ -47,23 +47,6 @@
            v-model="pageState.jobFairTitle"
          />
        </view>
-        <!-- <view class="header-date">
-                    <view class="data-week">
-                        <view
-                            class="weel-days button-click"
-                            :class="{ active: currentDay.fullDate === item.fullDate }"
-                            v-for="(item, index) in weekList"
-                            :key="index"
-                            @click="selectDate(item)"
-                        >
-                            <view class="label">{{ item.day }}</view>
-                            <view class="day">{{ item.date }}</view>
-                        </view>
-                    </view>
-                    <view class="data-all">
-                        <image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
-                    </view>
-                </view> -->
      </view>

      <!-- 主体内容区域 -->
@@ -85,17 +68,14 @@
                )
              "
            >
-              <view class="card-title">{{ item.jobFairTitle }}</view>
+              <view class="card-title">
+                {{ item.jobFairTitle }}
+                <view class="center-date" :style="{ color: getTimeStatus(item.jobFairStartTime, item.jobFairEndTime).color }">
+                  {{ getTimeStatus(item.jobFairStartTime, item.jobFairEndTime).statusText }}
+                </view>
+              </view>
              <view class="card-row">
                <text class="">{{ item.jobFairAddress }}</text>
-                <text class="">
-                  <convert-distance
-                    :alat="item.latitude"
-                    :along="item.longitude"
-                    :blat="latitudeVal"
-                    :blong="longitudeVal"
-                  ></convert-distance>
-                </text>
              </view>
              <view class="card-times">
                <view class="time-left">
@@ -108,12 +88,6 @@
                </view>
                <view class="line"></view>
                <view class="time-center">
-                  <view class="center-date">
-                    {{
-                      getTimeStatus(item.jobFairStartTime, item.jobFairEndTime)
-                        .statusText
-                    }}
-                  </view>
                  <view class="center-dateDay">
                    {{
                      getHoursBetween(
@@ -161,6 +135,7 @@ import useLocationStore from "@/stores/useLocationStore";
 import { storeToRefs } from "pinia";
 import { tabbarManager } from "@/utils/tabbarManager";
 import WxAuthLogin from "@/components/WxAuthLogin/WxAuthLogin.vue";
+import config from "@/config.js";
 const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
 const wxAuthLoginRef = ref(null);
 const { $api, navTo, cloneDeep } = inject("globalFunction");
@@ -180,6 +155,7 @@ const pageState = reactive({
  pageSize: 10,
  jobFairTitle: "",
 });
+const baseUrl = config.imgBaseUrl;

 onLoad(() => {
  // const today = new Date();
@@ -246,7 +222,7 @@ function changeSwiperMsgType(e) {

 function seemsg(index) {
  state.current = index;
-  console.log(index, 'index');
+  console.log(index, "index");

  if (index != 3) {
    getFair("refresh");
@@ -276,7 +252,7 @@ const handleScrollToLower = () => {
    } else {
      this.$nextTick(() => {
        getMyFair();
-      })
+      });
    }
  }
 };
@@ -337,16 +313,18 @@ function getMyFair(type = "add") {
      params.personId = userInfo.value.info.userId;
    }
  }
-  $api.myRequest("/jobfair/public/jobfair/enterprise/my-sign-up-job-fair", params).then((resData) => {
-    if (type === "add") {
-      const reslist = resData.data.list;
-      fairList.value = fairList.value.concat(reslist);
-    } else {
-      fairList.value = resData.data.list;
-    }
-    pageState.total = resData.data.total;
-    pageState.maxPage = resData.data.pages;
-  });
+  $api
+    .myRequest("/jobfair/public/jobfair/enterprise/my-sign-up-job-fair", params)
+    .then((resData) => {
+      if (type === "add") {
+        const reslist = resData.data.list;
+        fairList.value = fairList.value.concat(reslist);
+      } else {
+        fairList.value = resData.data.list;
+      }
+      pageState.total = resData.data.total;
+      pageState.maxPage = resData.data.pages;
+    });
 }
 function getFair(type = "add") {
  if (type === "refresh") {
@@ -384,18 +362,18 @@ function getFair(type = "add") {
 function toIOSDate(input) {
  if (!input) return null;
  if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
-  if (typeof input === 'number') {
+  if (typeof input === "number") {
    const d = new Date(input);
    return isNaN(d.getTime()) ? null : d;
  }
-  if (typeof input !== 'string') return null;
+  if (typeof input !== "string") return null;
  let s = input.trim();
  // "YYYY-MM-DD HH:mm[:ss]" -> "YYYY-MM-DDTHH:mm[:ss]"
  if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}(:\d{2})?$/.test(s)) {
-    s = s.replace(' ', 'T');
+    s = s.replace(" ", "T");
    // 仅到分钟则补秒
    if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/.test(s)) {
-      s = s + ':00';
+      s = s + ":00";
    }
  }
  // 其余已是 iOS 可解析格式："YYYY/MM/DD[ HH:mm:ss]"、"YYYY-MM-DD"、ISO 8601 等
@@ -406,23 +384,23 @@ function toIOSDate(input) {
 function parseDateTime(datetimeStr) {
  if (!datetimeStr)
    return {
-      time: '',
-      date: '',
+      time: "",
+      date: "",
    };

  const dateObj = toIOSDate(datetimeStr);

  if (!dateObj)
    return {
-      time: '',
-      date: '',
+      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');
+  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}`,
@@ -436,25 +414,30 @@ function getTimeStatus(startTimeStr, endTimeStr) {
  const endTime = toIOSDate(endTimeStr);

  if (!startTime || !endTime) {
-    return { status: 1, statusText: '时间异常' };
+    return { status: 1, statusText: "时间异常", color: "#999999" };
  }

-  // 判断状态：0 开始中，1 过期，2 待开始
+  // 判断状态：0 开始中，1 过期，2 未开始
  let status = 0;
-  let statusText = '开始中';
+  let statusText = "开始中";
+  let color = "#13C57C"; // 进行中 - 绿色
  if (now < startTime) {
-    status = 2; // 待开始
-    statusText = '待开始';
+    status = 2; // 未开始
+    statusText = "未开始";
+    color = "#015EEA"; // 未开始 - 蓝色
  } else if (now > endTime) {
    status = 1; // 已过期
-    statusText = '已过期';
+    statusText = "已过期";
+    color = "#999999"; // 已过期 - 灰色
  } else {
    status = 0; // 进行中
-    statusText = '进行中';
+    statusText = "进行中";
+    color = "#13C57C"; // 进行中 - 绿色
  }
  return {
-    status, // 0: 进行中，1: 已过期，2: 待开始
+    status, // 0: 进行中，1: 已过期，2: 未开始
    statusText,
+    color
  };
 }

@@ -481,7 +464,7 @@ const selectDate = (item) => {
 };

 function getNextDates({ startDate = "", count = 6 }) {
-  const baseDate = startDate ? (toIOSDate(startDate) || new Date()) : new Date(); // 指定起点或今天
+  const baseDate = startDate ? toIOSDate(startDate) || new Date() : new Date(); // 指定起点或今天
  const dates = [];
  const dayNames = ["日", "一", "二", "三", "四", "五", "六"];

@@ -507,7 +490,7 @@ function getNextDates({ startDate = "", count = 6 }) {
 }
 </script>

-<style scoped>
+<style scoped lang="stylus">
 .app-custom-root {
  position: fixed;
  z-index: 10;
@@ -659,7 +642,7 @@ function getNextDates({ startDate = "", count = 6 }) {
 .cards .card {
  margin-top: 28rpx;
  padding: 32rpx;
-  background: #ffffff;
+  background: linear-gradient(to bottom, #e3efff 0%, #fbfdff 100%);
  box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
  border-radius: 20rpx;
 }
@@ -667,18 +650,36 @@ function getNextDates({ startDate = "", count = 6 }) {
 .cards .card-title {
  font-family: "PingFangSC-Medium", "PingFang SC", "Helvetica Neue", Helvetica,
    Arial, "Microsoft YaHei", sans-serif;
-  font-weight: 500;
-  font-size: 32rpx;
-  color: #333333;
+  font-weight: 600;
+  font-size: 34rpx;
+  color: #005eb6;
+  text-align: center;
+  position relative
+  &::after {
+    content: "";
+    width: 120rpx;
+    height: 4rpx;
+    background: linear-gradient(to right, #015EEA 0%, #00C0FA 100%);
+    position: absolute;
+    left: 50%;
+    bottom: -14rpx;
+    transform: translate(-50%, -50%);
+  }
+  .center-date {
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #ff881a;
+    position: absolute;
+    right: 0;
+  }
 }

 .cards .card-row {
  display: flex;
-  justify-content: space-between;
-  font-weight: 400;
-  font-size: 28rpx;
-  color: #495265;
-  margin-top: 4rpx;
+  justify-content: center;
+  font-size: 26rpx;
+  color: #3e8ff3;
+  margin-top: 23rpx;
 }

 .cards .card-times {
@@ -694,11 +695,13 @@ function getNextDates({ startDate = "", count = 6 }) {
 }

 .cards .card-times .left-date {
-  font-weight: 500;
+  font-weight: 600;
  font-size: 48rpx;
-  color: #333333;
  font-family: "PingFangSC-Medium", "PingFang SC", "Helvetica Neue", Helvetica,
    Arial, "Microsoft YaHei", sans-serif;
+    background: linear-gradient(180deg, #015EEA 0%, #00C0FA 100%);
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
 }

 .cards .card-times .left-dateDay {
@@ -710,8 +713,8 @@ function getNextDates({ startDate = "", count = 6 }) {

 .cards .card-times .line {
  width: 40rpx;
-  height: 0;
-  border: 2rpx solid #d4d4d4;
+  height: 2rpx;
+  background: #7BB6FF;
  margin-top: 64rpx;
 }

@@ -723,30 +726,25 @@ function getNextDates({ startDate = "", count = 6 }) {
  align-items: center;
 }

-.cards .card-times .time-center .center-date {
-  font-weight: 400;
-  font-size: 28rpx;
-  color: #ff881a;
-  padding-top: 10rpx;
-}

 .cards .card-times .time-center .center-dateDay {
  font-weight: 400;
  font-size: 24rpx;
-  color: #333333;
+  color: #fff;
  margin-top: 6rpx;
  line-height: 48rpx;
-  width: 104rpx;
+  width: max-content;
  height: 48rpx;
-  background: #f9f9f9;
+  background: #71B1FF;
  border-radius: 8rpx;
+  padding: 0 30rpx;
 }

 .cards .recommend-card-line {
  width: 100%;
  height: 0;
  border-radius: 0;
-  border: 2rpx dashed rgba(0, 0, 0, 0.14);
+  border-bottom: 2rpx dashed rgba(0, 0, 0, 0.14);
  margin-top: 32rpx;
  position: relative;
 }
@@ -781,6 +779,7 @@ function getNextDates({ startDate = "", count = 6 }) {
  font-weight: 400;
  font-size: 28rpx;
  color: #6c7282;
+  text-align: center;
 }

 .cards .card:first-child {