招聘会模块

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;
         }
       }