样式修改

components/SwiperAd/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view v-if="!props.hide" :style="`height: ${props.height}; margin: 10px;`">
+	<view v-if="!props.hide" :style="`height: ${props.height}; margin: ${props.margin};`">
 		<view v-if="props.list?.length">
 			<swiper
         class="swiper"
@@ -10,7 +10,7 @@
         :duration="props.duration"
         indicator-active-color="#fff"
       >
-				<swiper-item v-for="(item, index) in list" :key="'swiperItem'+index" style="border-radius: 10px;">
+				<swiper-item v-for="(item, index) in list" :key="'swiperItem'+index" :style="`border-radius: ${props.borderRadius};`">
           <image
             :mode="props.mode"
             :src="strType ? item : item[props.imgUrlKey]"
@@ -38,6 +38,9 @@ const props = defineProps({
   hide: { type: Boolean, default: false }, // 隐藏
   width: { type: String, default: '100%' },
   height: { type: String, default: '150px' },
+  borderRadius: { type: String, default: '10px' },
+  borderRadius: { type: String, default: '10px' },
+  margin: { type: String, default: '10px' },
 })
 
 const imageError = (e) => {

pagesB/jobFair/enterprises.vue

@@ -1,63 +1,61 @@
 <!-- 招聘会/企业 -->
 <template>
-  <view>
-    <view class="box defaultBgc">
-      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
-        <view>
-          <!-- 顶部 -->
-          <view class="white-bgc stick ss-p-t-10 ss-p-b-10">
-            <view class="titleBox">
-              <view class="jobFairName">{{ jobFairName }}</view>
-            </view>
-            <!-- 搜索条 -->
-            <view style="position: relative;">
-              <uni-search-bar
-                v-model="query.keyword"
-                placeholder="输入公司关键字"
-                cancelButton="none"
-                :focus="false"
-                bgColor="#fff"
-                @confirm="onSearch($event.value)"
-                @clear="query.keyword = ''; onSearch()"
-              >
-              </uni-search-bar>
-              <button class="search-btn" @tap.stop="onSearch">搜索</button>
-            </view>
+  <view class="box defaultBgc">
+    <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
+      <view>
+        <!-- 顶部 -->
+        <view class="white-bgc stick ss-p-t-10 ss-p-b-10">
+          <view class="titleBox">
+            <view class="jobFairName">{{ jobFairName }}</view>
+          </view>
+          <!-- 搜索条 -->
+          <view style="position: relative;">
+            <uni-search-bar
+              v-model="query.keyword"
+              placeholder="输入公司关键字"
+              cancelButton="none"
+              :focus="false"
+              bgColor="#fff"
+              @confirm="onSearch($event.value)"
+              @clear="query.keyword = ''; onSearch()"
+            >
+            </uni-search-bar>
+            <button class="search-btn" @tap.stop="onSearch">搜索</button>
           </view>
-          <view v-if="listData?.length" class="listDataBox">
-            <uni-card v-for="val in listData" :key="val.id" @click="toDetail(val)" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
-              <view class="d-flex align-center ss-m-30" @click="null">
-                <image class="enterAvatar" :src="val.logoUrl ? val.logoUrl : 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
-                <view class="ss-m-l-20" style="flex: 1;">
-                  <view class="font-size-16 enterpriseName">{{ formatName(val.anotherName || val.name) }}</view>
-                  <view class="ss-m-t-5">
-                    <span class="color-999">{{ val?.industryName || '' }}</span>
-                    <span class="divider tag-gap1" v-if="val?.industryName && val?.scaleName"> | </span>
-                    <span class="color-999">{{ val?.scaleName || '' }}</span>
-                  </view>
-                  <view class="ss-m-t-10" style="overflow: hidden;height: 48px;">
-                    <uni-tag 
-                      v-for="(tag,i) in val?.welfareList || []"
-                      :key="i"
-                      class="ss-m-r-5"
-                      :text="tag"
-                      inverted="false"
-                      size="mini"
-                      custom-style="background-color: #ececec; color: #666; border-color: #ececec; display: inline-block;"
-                    />
-                  </view>
+        </view>
+        <view v-if="listData?.length" class="listDataBox">
+          <uni-card v-for="val in listData" :key="val.id" @click="toDetail(val)" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
+            <view class="d-flex align-center ss-m-30" @click="null">
+              <image class="enterAvatar" :src="val.logoUrl ? val.logoUrl : 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
+              <view class="ss-m-l-20" style="flex: 1;">
+                <view class="font-size-16 enterpriseName">{{ formatName(val.anotherName || val.name) }}</view>
+                <view class="ss-m-t-5">
+                  <span class="color-999">{{ val?.industryName || '' }}</span>
+                  <span class="divider tag-gap1" v-if="val?.industryName && val?.scaleName"> | </span>
+                  <span class="color-999">{{ val?.scaleName || '' }}</span>
+                </view>
+                <view class="ss-m-t-10" style="overflow: hidden;height: 48px;">
+                  <uni-tag 
+                    v-for="(tag,i) in val?.welfareList || []"
+                    :key="i"
+                    class="ss-m-r-5"
+                    :text="tag"
+                    inverted="false"
+                    size="mini"
+                    custom-style="background-color: #ececec; color: #666; border-color: #ececec; display: inline-block;"
+                  />
                 </view>
               </view>
-              <view class="jobCount">{{ val.jobCount }}个在线职位招聘中</view>
-            </uni-card>
-            <uni-load-more :status="more" />
-          </view>
-          <view v-else class="nodata-img-parent">
-            <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
-          </view>
+            </view>
+            <view class="jobCount">{{ val.jobCount }}个在线职位招聘中</view>
+          </uni-card>
+          <uni-load-more :status="more" />
         </view>
-      </scroll-view>
-    </view>
+        <view v-else class="nodata-img-parent">
+          <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
+        </view>
+      </view>
+    </scroll-view>
   </view>
 </template>
 
@@ -95,6 +93,7 @@ const getData = async () => {
   try {
     const res = await getJobFairEnterprisePage(query)
     const list = res?.data?.list || []
+    // const list = [...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list] || []
     listData.value = listData.value.concat(dealDictArrayData([], list))
     if (listData.value?.length === +res?.data?.total) {
       more.value = 'noMore'
@@ -239,15 +238,15 @@ const toDetail = (item) =>{
   margin: auto;
 }
 .titleBox {
-  text-align: center;
-  padding: 0 20rpx 15px;
+  text-align: left;
+  padding: 15px 20rpx;
   .title {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 12px;
   }
   .jobFairName {
-    color: #999;
+    color: #00897b;
   }
 }
 </style>

pagesB/jobFair/positions.vue

@@ -1,32 +1,48 @@
 <!-- 招聘会/企业详情 -->
 <template>
-  <view>
-    <view class="box">
-      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
-        <view>
-          <!-- 顶部 -->
-          <view class="white-bgc stick ss-p-t-10">
-            <view class="titleBox">
-              <view class="entName">{{ entName }}</view>
+  <view class="box">
+    <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
+      <view>
+        <!-- 轮播图 -->
+        <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" imgUrlKey="img" margin="0" borderRadius="0" :strType="false" @click="handleToDetails"></SwiperAd>
+        <view class="stick">
+          <!-- <view class="titleBox">
+            <view class="entName">{{ entName }}</view>
+          </view> -->
+          <!-- tab页签 -->
+          <scroll-view scroll-x="true" class="scroll-container">
+            <view
+              class="scroll-item"
+              :style="`margin-left: ${index ? '24px' : ''};`"
+              v-for="(val, index) in tabList" :key="index+val"
+              @tap="handClickTab(index)"
+            >
+              <!-- <view class="text" :style="`border-bottom: 2px solid ${index === tab ? '#fff' : 'red'};`">{{ val }}</view> -->
+              <view>
+                <view class="text">{{ val }}</view>
+                <view v-if="index === tab" class="choose" style="background-color: #fff;"></view>
+                <view v-else class="choose" style="background-color: #ffffff00;"></view>
+              </view>
             </view>
-          </view>
-          <view v-if="listData?.length" class="listDataBox defaultBgc">
-			      <PositionList
-              class="pb-10"
-              :list="listData"
-              :noMore="false"
-              :showEntInfo="false"
-              :jobFairId="query.jobFairId"
-              updateTimeAlign="left"
-            ></PositionList>
-            <uni-load-more :status="more" />
-          </view>
-          <view v-else class="nodata-img-parent">
-            <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
-          </view>
+          </scroll-view>
+          <view></view>
         </view>
-      </scroll-view>
-    </view>
+        <view v-if="listData?.length" class="listDataBox">
+          <PositionList
+            :list="listData"
+            :noMore="false"
+            :showEntInfo="false"
+            :jobFairId="query.jobFairId"
+            updateTimeAlign="left"
+            noDataTextColor="#fff"
+          ></PositionList>
+          <uni-load-more :status="more" />
+        </view>
+        <view v-else class="nodata-img-parent">
+          <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
+        </view>
+      </view>
+    </scroll-view>
   </view>
 </template>
 
@@ -36,6 +52,8 @@ import { ref, reactive } from 'vue'
 import { dealDictObjData } from '@/utils/position'
 import { getJobFairEntJobPage } from '@/api/jobFair'
 import PositionList from '@/components/PositionList'
+import { getWebContent } from '@/api/common'
+import SwiperAd from '@/components/SwiperAd'
 
 const more = ref('more')
 const listData = ref([])
@@ -48,6 +66,12 @@ const query = reactive({
 
 const entName = ref('')
 
+const tab = ref(0)
+const tabList = ref(['餐饮招聘', '美业招聘', '酒店高层', '酒店中层', '酒店基层', '餐饮招聘', '美业招聘', '酒店高层', '酒店中层', '酒店基层1'])
+const handClickTab = (index) => {
+  tab.value = index
+}
+
 onLoad(async (options) => {
   entName.value = options.entName
   if (options?.jobFairId) {
@@ -57,6 +81,14 @@ onLoad(async (options) => {
 	}
 })
 
+// 获取轮播图
+const swiperAdList = ref([])
+const getSystemWebContent = async () => {
+  const { data } = await getWebContent()
+  swiperAdList.value = data?.appHomeCarousel || []
+}
+getSystemWebContent()
+
 const getData = async () => {
   if (!query.jobFairId) {
     uni.showToast({ title: '获取企业岗位失败，请重试！', icon: 'none', duration: 2000 })
@@ -108,22 +140,6 @@ const loadingMore = () => {
   position: sticky;
   top: 0;
 }
-.stickFilter {
-  z-index: 1;
-  position: sticky;
-  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
-  top: 120rpx;
-}
-.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
-.pb-10 {
-  padding-bottom: 10px;
-}
-.pb-20 { padding-bottom: 20px; }
-.px-5 { padding-left: 5px; padding-right: 5px; }
-.px-10 { padding-left: 10px; padding-right: 10px; }
-.mx-10 { margin-left: 10px; margin-right: 10px }
-.mx-20 { margin-left: 20px; margin-right: 20px; }
-.mb-10 { margin-bottom: 10px; }
 .box {
   height: 100vh;
   overflow: hidden;
@@ -131,11 +147,12 @@ const loadingMore = () => {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  background-color: #7ec04c;
 }
 .listDataBox {
-  padding: 1px 0 120rpx;
-  // padding-bottom: 120rpx;
-  margin: 0 30rpx;
+  // padding: 1px 0 120rpx;
+  padding-bottom: 120rpx;
+  margin: 0 5rpx;
 }
 .scrollBox{
   flex: 1;
@@ -143,45 +160,9 @@ const loadingMore = () => {
   padding-bottom: 24rpx;
   box-sizing: border-box;
 }
-:deep(.uni-searchbar__box) {
-  width: calc(100% - 105px);
-  height: 40px !important;
-  border: 1px solid #00897B;
-  padding-right: 20px;
-  flex: none;
-}
-.search-btn {
-  position: absolute;
-  right: 11px;
-  top: 10px;
-  width: 110px;
-  height: 40px;
-  font-size: 16px;
-  background-color: #00897B;
-  color: #fff;
-  border-radius: 0 5px 5px 0;
-  z-index: 9;
-}
-.goBack {
-  width: 110px;
-  height: 32px;
-  font-size: 13px;
-  background-color: #00897B;
-  color: #fff;
-  // border-radius: 0 5px 5px 0;
-  z-index: 9;
-}
-:deep(.picker-view) {
-  padding-bottom: 80px !important;
-}
 
-.jobCount {
-  height: 40px;
-  line-height: 40px;
-  color: #fff;
-  text-align: center;
-  font-size: 15px;
-  background: linear-gradient(to right, #12ebb0, #427daa);
+:deep(.uni-load-more__text) {
+  color: #fff !important;
 }
 
 :deep(.uni-card) {
@@ -191,16 +172,28 @@ const loadingMore = () => {
   }
 }
 
-.enterpriseName {
-  color: #404040;
-  font-weight: 700;
-}
-.enterAvatar {
-  width: 60px;
-  height: 60px;
-  // border-radius: 50%;
-  margin: auto;
+.scroll-container {
+  width: calc(100vw - 20px);
+  padding: 0 20rpx;
+  white-space: nowrap; /* 确保子元素在一行内排列 */
+  background-color: #7ec04c;
+  .scroll-item {
+    display: inline-block; /* 子元素内联块显示 */
+    color: #fff;
+    font-size: 17px;
+    font-weight: 500;
+    .text {
+      padding: 20px 2px 0;
+    }
+    .choose {
+      width: 28px;
+      height: 2px;
+      border-radius: 8px;
+      margin: 8px auto;
+    }
+  }
 }
+
 .titleBox {
   text-align: center;
   padding: 0 20rpx 15px;
@@ -210,7 +203,7 @@ const loadingMore = () => {
     margin-bottom: 12px;
   }
   .entName {
-    color: #999;
+    color: #fff;
   }
 }
 </style>