首页岗位/政策左右结构

packageRc/pages/index/index.vue

@@ -1,11 +1,11 @@
 <!--
  * @Date: 2025-10-16 15:15:47
  * @LastEditors: shirlwang
- * @LastEditTime: 2025-12-08 16:10:47
+ * @LastEditTime: 2026-01-27 09:26:57
 -->
 <template>
   <!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
-  <scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
+  <scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBgIndex.png');">
     <view style="padding: 40rpx 28rpx;">
          <!-- #ifdef MP-WEIXIN -->
       <view class="kinggang">
@@ -31,56 +31,71 @@
         </view>
       </view>
       <!-- #endif -->
-      <view class="tabs">
+      <view class="showtab">
-        <view class="tab" :class="{active: pageState.type == ''}" @click="changeJobType('')">岗位列表</view>
+        <view class="tabItem" @click="changeType(1)">
-        <view class="tab" :class="{active: pageState.type == 2}" @click="changeJobType(2)">实习实训</view>
+          <image src="/packageRc/static/gw.png"/>
-        <view class="tab" :class="{active: pageState.type == 3}" @click="changeJobType(3)">社区实践</view>
+          <image v-show="tabType == 1" class="activeImg" src="/packageRc/static/activeTangle.png"/>
-      </view>
-      <view class="titles">
-        <view class="title-item" :class="{active: activeTitle == 1}" @click="activeTitle = 1,getJobRecommed()"><view>推荐岗位</view></view>
-        <view class="title-item" :class="{active: activeTitle == 2}" @click="activeTitle = 2,getJobList()"><view>热门岗位</view></view>
-      </view>
-        <view v-for="(item, index) in jobList" :key="index" @click="nextDetail(item)" class="job-list">
-        <view class="top-line">
-          <view class="salary">{{item.minSalary}}-{{item.maxSalary}}/月</view>
-          <view class="time"><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：{{ item.postingDate }}</view>
         </view>
-        <view class="title">{{ item.jobTitle }}</view>
+        <view class="tabItem" @click="changeType(2)">
-        <view class="infos">
+          <image src="/packageRc/static/zc.png"/>
-          <view>
+          <image v-show="tabType == 2" class="activeImg" src="/packageRc/static/activeTangle.png"/>
-             <dict-Label dictType="education" :value="item.education"></dict-Label>
+        </view>
+      </view>
+      <template v-if="tabType == 1">
+        <view class="tabs">
+          <view class="tab" :class="{active: pageState.type == ''}" @click="changeJobType('')">岗位列表</view>
+          <view class="tab" :class="{active: pageState.type == 2}" @click="changeJobType(2)">实习实训</view>
+          <view class="tab" :class="{active: pageState.type == 3}" @click="changeJobType(3)">社区实践</view>
+        </view>
+        <view class="titles">
+          <view class="title-item" :class="{active: activeTitle == 1}" @click="activeTitle = 1,getJobRecommed()"><view>推荐岗位</view></view>
+          <view class="title-item" :class="{active: activeTitle == 2}" @click="activeTitle = 2,getJobList()"><view>热门岗位</view></view>
+        </view>
+          <view v-for="(item, index) in jobList" :key="index" @click="nextDetail(item)" class="job-list">
+          <view class="top-line">
+            <view class="salary">{{item.minSalary}}-{{item.maxSalary}}/月</view>
+            <view class="time"><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：{{ item.postingDate }}</view>
           </view>
-          <view>
+          <view class="title">{{ item.jobTitle }}</view>
-            <dict-Label dictType="experience" :value="item.experience"></dict-Label>
+          <view class="infos">
+            <view>
+              <dict-Label dictType="education" :value="item.education"></dict-Label>
+            </view>
+            <view>
+              <dict-Label dictType="experience" :value="item.experience"></dict-Label>
+            </view>
+            <view>{{ item.jobLocation }}</view>
+          </view>
+          <view class="bottom-line">
+            <view><uni-icons color="#A2A2A2" type="person" size="12"></uni-icons>{{item.vacancies}}人</view>
+            <view>{{ item.companyName }}</view>
           </view>
-          <view>{{ item.jobLocation }}</view>
         </view>
-        <view class="bottom-line">
+        
-          <view><uni-icons color="#A2A2A2" type="person" size="12"></uni-icons>{{item.vacancies}}人</view>
+        <view class="view-more-btn" @click="viewMore">查看更多内容</view>
-          <view>{{ item.companyName }}</view>
+
+      </template>
+      <template v-else>
+        <view class="titles" style="justify-content: space-between;">
+          <view class="title-item active"><view>政策专区</view></view>
+          <view @click="toPolicyList">{{'查看更多 >'}}</view>
         </view>
-       </view>
+        <view v-for="(item, index) in policyList" :key="index" class="job-list" @click="toPolicyDetail(item)">
-      
+          <view class="sign">推荐</view>
-      <view class="view-more-btn" @click="viewMore">查看更多内容</view>
+          <view class="title">
-      <view class="titles" style="justify-content: space-between;">
+            <image src="../../../packageRc/static/zcLeft.png"/>
-        <view class="title-item active"><view>政策专区</view></view>
+            {{item.zcmc}}</view>
-        <view @click="toPolicyList">{{'查看更多 >'}}</view>
+          <view class="infos">
-      </view>
+            <view v-if="item.zclx">{{item.zclx}}</view>
-      <view v-for="(item, index) in policyList" :key="index" class="job-list" @click="toPolicyDetail(item)">
+            <view v-if="item.zcLevel">{{item.zcLevel}}</view>
-        <view class="sign">推荐</view>
+            <view v-if="item.sourceUnit">{{item.sourceUnit}}</view>
-        <view class="title">
+          </view>
-          <image src="../../../packageRc/static/zcLeft.png"/>
+          <view class="bottom-line">
-          {{item.zcmc}}</view>
+            <view><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：{{item.createTime}}</view>
-        <view class="infos">
+            <view>浏览数<text style="color: #6AA7E8">{{item.viewNum}}</text></view>
-          <view v-if="item.zclx">{{item.zclx}}</view>
+          </view>
-          <view v-if="item.zcLevel">{{item.zcLevel}}</view>
-          <view v-if="item.sourceUnit">{{item.sourceUnit}}</view>
         </view>
-        <view class="bottom-line">
+      </template>
-          <view><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：{{item.createTime}}</view>
-          <view>浏览数<text style="color: #6AA7E8">{{item.viewNum}}</text></view>
-        </view>
-      </view>
     </view>
   </scroll-view>
 </template>
@@ -96,7 +111,10 @@ function getPolicy() {
     policyList.value = res.rows
   })
 }
-
+let tabType = ref(1)
+function changeType(type) {
+  tabType.value = type
+}
 function toPolicyList() {
   navTo(`/packageRc/pages/policy/policyList`)
 }
@@ -379,4 +397,22 @@ view{box-sizing: border-box;display: block;}
   margin: 0 auto;
   margin-bottom: 20rpx;
 }
+.showtab{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40rpx;
+  .tabItem{
+    position: relative;
+    width: calc(50% - 8rpx);
+    height: 144rpx;
+  }
+  .activeImg{
+    position: absolute;
+    width: 143rpx;
+    height: 18rpx;
+    bottom: -24rpx;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
 </style>