样式兼容

src/views/recruit/personal/jobFair/details/enterprises.vue

@@ -21,19 +21,32 @@
             v-for="(val, index) in jobFair.tag" 
             :key="index" 
             class="tag-item"
-            :class="[{'tag-active': index === tab}, {'mx-5': isMobile}]" 
-            :style="{'width': `calc(100% / ${jobFair.tag.length} )`}"
+            :class="[{'tag-active-bg': index === tab && jobFair.backgroundColour}, {'mx-5': isMobile}, {'tag-active': index === tab && !jobFair.backgroundColour}]" 
+            :style="{'width': `calc(100% / ${jobFair.tag.length} )`, 'color': jobFair.backgroundColour ? '#fff' : 'var(--v-primary-base)'}"
             @click.stop="handleTabClick(index)"
           >
             {{ val.title }}
           </div>
         </div>
 
-        <div v-if="!items.length" class="emptyText">{{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}</div>
+        <div 
+          v-if="!items.length" 
+          class="text-center" 
+          :style="{'color': jobFair.backgroundColour ? '#fff' : 'var(--v-primary-base)', 'height': `calc(100vh - ${jobFair?.tag && jobFair.tag.length ? '574px': '500px'})`, 'line-height': `calc(100vh - ${jobFair?.tag && jobFair.tag.length ? '574px': '500px'})`}"
+        >
+          {{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}
+        </div>
         <template v-else>
           <EntCard v-if="jobFair?.category === '0'" :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="mt-5" />
           <JobCard v-if="jobFair?.category === '1'" :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="mt-5" />
-          <div :class="['loading', {'loadMoreText': !loadingType}]" class="pb-5" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
+          <div 
+            :class="['loading', {'cursor-pointer': !loadingType}]" 
+            :style="{'color': !jobFair?.tag || !jobFair.tag.length ? 'var(--v-primary-base)' : '#fff'}" 
+            class="py-5" 
+            @click="handleChangePage"
+          >
+            {{ loadingText[loadingType] }}
+          </div>
         </template>
       </div>
     </div>
@@ -127,7 +140,6 @@ const handleChangePage = () => {
 
 <style scoped lang="scss">
 .tag-item {
-  color: #fff;
   font-weight: 700;
   font-size: 24px;
   text-align: center;
@@ -137,7 +149,7 @@ const handleChangePage = () => {
   cursor: pointer;
   text-wrap: nowrap;
 }
-.tag-active {
+.tag-active-bg {
   opacity: 1;
   position: relative;
   &::before {
@@ -153,21 +165,26 @@ const handleChangePage = () => {
     transform: translateX(-50%);
   }
 }
-.emptyText {
-  color: #fff;
-  height: calc(100vh - 574px);
-  line-height: calc(100vh - 574px);
-  text-align: center;
+.tag-active {
+  opacity: 1;
+  position: relative;
+  &::before {
+    display: block;
+    content: '';
+    width: 34px;
+    height: 4px;
+    background-color: var(--v-primary-base);
+    position: absolute;
+    top: 62px;
+    left: 50%;
+    border-radius: 2px;
+    transform: translateX(-50%);
+  }
 }
 .loading {
   margin-top: 8px;
   text-align: center;
   font-size: 18px;
-  color: #fff;
-}
-.loadMoreText {
-  color: #fff;
-  cursor: pointer;
 }
 ::-webkit-scrollbar {
   width: 0;