静态页面

packageRc/pages/daiban/daiban.vue

@@ -0,0 +1,395 @@
+<!--
+ * @Date: 2025-10-16 15:15:47
+ * @LastEditors: shirlwang
+ * @LastEditTime: 2025-10-22 14:17:46
+-->
+<template>
+  <!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
+  <scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
+    <view style="padding: 40rpx 28rpx;">
+      <view class="kinggang">
+        <view>
+          <view class="num-title" style="color: #1A62CE">重点毕业生数</view>
+          <view>1120</view>
+        </view>
+        <text style="color: #B5C1D1;">｜</text>
+        <view>
+          <view class="num-title" style="color: #16ACB7">累计需求数</view>
+          <view>1120</view>
+        </view>
+        <text style="color: #B5C1D1;">｜</text>
+        <view>
+          <view class="num-title" style="color: #6A57D1">累计服务数</view>
+          <view>1120</view>
+        </view>
+      </view>
+      <view class="trace-line">
+        <view class="trace">
+          <view class="title">
+            <image src="../../../packageRc/static/trace.png"/>
+            毕业生追踪
+          </view>
+          <view style="display: flex;justify-content: space-between;">
+            <view>点击查看</view>
+            <uni-icons color="#639AEB" type="arrow-right" size="16"></uni-icons>
+          </view>
+        </view>
+        <view class="sendManager">
+          <view class="title">
+            <image src="../../../packageRc/static/sendManager.png"/>
+            任务下发管理员
+          </view>
+          <view style="display: flex;justify-content: space-between;">
+            <view>点击查看</view>
+            <uni-icons color="#DBAA4E" type="arrow-right" size="16"></uni-icons>
+          </view>
+        </view>
+      </view>
+      <view class="titles">
+        <view class="title-item active"><view>待办需求预警列表</view></view>
+        <view>共 2 条信息</view>
+      </view>
+      <view v-for="(item, index) in jobList" :key="index" class="job-list">
+        <view class="title">销售顾问</view>
+        <view class="info">
+          待办内容文字示例待办内容文字示例待办内容文字示例待办内容文字示例
+        </view>
+        <view class="bottom-line">
+          <view>发起时间：2025-09-24  15:02</view>
+          <view style="color: #EF7325;">青岛xx公司</view>
+        </view>
+      </view>
+      <view class="titles">
+        <view class="title-item active"><view>待服务毕业生列表</view></view>
+        <view>共 22 条信息</view>
+      </view>
+      <view v-for="(item, index) in jobList" :key="index" class="person-list">
+        <view class="top-info">
+          <image v-if="index%2==0" src="../../../packageRc/static/personIcon.png"/>
+          <image v-else src="../../../packageRc/static/personIconFe.png"/>
+          <view class="top-right">
+            <view class="name-line">
+              <view class="name">姓名<view class="tag">硕士</view></view>
+              <view class="service-status">·未服务</view>
+            </view>
+            <view class="info-line" style="display: flex;">
+              <view style="margin-right: 24rpx;"><text>年龄：</text>27岁</view>
+              <view><text>服务次数：</text>1次</view>
+            </view>
+          </view>
+        </view>
+        <view class="info-line">
+          <view><text>联系电话：</text>152****5488</view>
+          <view><text>详细地址：</text>山东省济南市历城区港沟街道融创文旅城鹊桥华居8号楼1单元801</view>
+        </view>
+        <view class="services">
+          <view>退回</view>
+          <view>服务</view>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from 'vue';
+let activeTab = ref(1)
+let activeTitle = ref(1)
+let jobList = ref([{},{},{},{},{}])
+function back() {
+  uni.navigateBack({
+    delta: 1
+  })
+}
+function viewMore() {
+  // uni.navigateTo({
+  //   url: '/pages/jobList/jobList'
+  // })
+}
+</script>
+
+<style lang="less" scoped>
+view{box-sizing: border-box;display: block;}
+.container{
+  background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
+  height: 100vh;
+  min-width: 100vw;
+  padding-bottom: 0;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+.kinggang{ 
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 36rpx 32rpx 33rpx 32rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  border: 3rpx solid #FFFFFF;
+  margin-bottom: 24rpx;background: linear-gradient(180deg, #EDF4FF 0%, #FFFFFF 52%);
+  >view{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    font-weight: bold;
+    >view{font-size: 50rpx;}
+    .num-title{
+      font-size: 28rpx;
+      margin-top: 16rpx;
+      font-weight: normal;
+    }
+    // text{
+    //   font-size: 28rpx;
+    // }
+  }
+  image{
+    width: 78rpx;
+    // margin-bottom: 15rpx;
+    height: 78rpx;
+  }
+}
+.trace-line{
+  width: 100%;
+  margin-bottom: 24rpx;
+  display: flex;
+  justify-content: space-between;
+  >view{
+    padding: 37.5rpx 32rpx;
+    width: calc(50% - 12rpx);
+    .title{
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #1D6AD7;
+      margin-bottom: 16rpx;
+      display: flex;
+      image{
+        width: 46rpx;
+        height: 46rpx;
+        margin-right: 11rpx;
+      }
+    }
+    .more{
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .trace{
+    color: #2E77DF;
+    border: 2rpx solid #78ADFF;
+    background: linear-gradient(0deg, #FFFFFF 1%, #D0E1FF 100%);
+    box-shadow: inset 0px 4rpx 10rpx 0px rgba(255, 255, 255, 0.302);
+    .title{
+      color: #1D6AD7;
+    }
+  }
+  .sendManager{
+    border: 2rpx solid #FFC34B;
+    color: #C68412;
+    box-shadow: inset 0px 4px 10px 0px rgba(255, 255, 255, 0.302);
+    background: linear-gradient(0deg, #FFFFFF 0%, #FBF4D1 100%);
+    .title{color: #CE9523;}
+
+  }
+}
+.tabs{
+  margin-bottom: 29rpx;
+
+	border-radius: 16rpx;
+	display: flex;
+	background: #fff;
+	color: #878787;
+	text-align: center;
+	width: 100%;
+	.tab{
+		width: 50%;
+		border: 4rpx solid transparent;
+		border-radius: 16rpx;
+		line-height: 64rpx;
+		position: relative;
+		&.active{
+      border: 4rpx solid #fff;
+			color: #fff;
+			background: linear-gradient(180deg, #79AFFF 1%, #A2B3FE 100%);
+      box-shadow: 0px 4rpx 10rpx 0px rgba(40, 102, 194, 0.4);
+		}
+	}
+}
+.titles{
+  display: flex;
+  margin-bottom: 44rpx;
+    display: flex;
+    justify-content: space-between;
+  .title-item{
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #282828;
+    margin-right: 32rpx;
+    position: relative;
+    >view{
+      position: relative;
+      z-index: 2;
+      padding: 0 16rpx;
+    }
+    &.active::after{
+      content: '';
+      position: absolute;
+      z-index: 1;
+      bottom: -12rpx;
+      left: 0;
+      width: 120%;
+      height: 24rpx;
+      border-radius: 50px 0px 0px 50px;
+      background: linear-gradient(90deg, #78AEFF 0%, rgba(120, 174, 255, 0.31) 52%, rgba(24, 116, 255, 0) 100%);
+    }
+  }
+}
+.job-list{
+  width: 100%;
+  margin: 0 auto;
+  color: #333333;
+  border-radius: 24rpx;
+  background: #FFFFFF;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  position: relative;
+  .sign{
+    position: absolute;
+    font-size: 24rpx;
+    right: 0;
+    top: 0;
+    padding: 4rpx 14rpx;
+    border: 1rpx solid #EC4827;
+    background: rgba(227, 79, 49, 0.09);
+    border-top-right-radius: 24rpx;
+    border-bottom-left-radius: 24rpx;
+    color: #EC4827;
+  }
+  .top-line{
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    color: #A2A2A2;
+    margin-bottom: 16rpx;
+    .salary{
+      font-size: 32rpx;
+      color: #4C6EFB;
+      font-weight: bold;
+    }
+  }
+  .title{
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #282828;
+    margin-bottom: 16rpx;
+    display: flex;
+    image{
+      width: 46rpx;
+      height: 46rpx;
+      margin-right: 11rpx;
+    }
+  }
+  .info{
+    font-size: 24rpx;
+    margin-bottom: 16rpx;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .bottom-line{
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    color: #A2A2A2;
+    margin-top: 12rpx;
+  }
+}
+.view-more-btn{ 
+  padding: 10rpx 56rpx;
+  background: #FFFFFF;
+  color: #4C6EFB;
+  border: 1rpx solid #4C6EFB;
+  text-align: center;
+  border-radius: 40rpx;
+  width: fit-content;
+  margin: 0 auto;
+  margin-bottom: 20rpx;
+}
+.person-list{
+  padding-top: 32rpx;
+  margin-bottom: 24rpx;
+  border-radius: 16rpx;
+  background: #FFFFFF;
+  .top-info{
+    padding: 0 32rpx;
+    margin-bottom: 24rpx;
+    display: flex;
+    image{
+      width: 86rpx;
+      height: 86rpx;
+      margin-right: 19rpx;
+      display: block;
+    }
+    .top-right{
+      flex-grow: 1;
+      flex-shrink: 1;
+      .name-line{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .name{
+          font-size: 32rpx;
+          display: flex;
+          margin-right: 15rpx;
+          margin-bottom: 3rpx;
+          align-items: center;
+          .tag{
+            font-size: 24rpx;
+            line-height: 32rpx;
+            padding: 0 12rpx;
+            margin-left: 15rpx;
+            border-radius: 4rpx;
+            background: #4D89E3;
+            color: #fff;
+          }
+        }
+        .service-status{
+          color: #E0A61F;
+          font-weight: bold;
+          font-size: 26rpx;
+        }
+      }
+      .info-line{
+        padding: 0;
+        border: 0;
+      }
+    }
+  }
+  .info-line{
+    padding: 0 32rpx 32rpx;
+    color: #3D3D3D;
+    border-bottom: 1px solid #E8E8E8;
+    >view{
+      text{
+        color: #8E8E8E;
+      }
+      font-size: 26rpx;
+    }
+  }
+  .services{
+    line-height: 40rpx;
+    padding: 28rpx 32rpx;
+    display: flex;
+    >view{
+      flex-grow: 1;
+      font-size: 26rpx;
+      color: #1A62CE;
+      text-align: center;
+      &:first-child{
+        color: #E04020;
+        border-right: 1px solid #D8D8D8;
+      }
+    }
+  }
+}
+</style>

packageRc/pages/index/index.vue

@@ -1,56 +1,78 @@
 <!--
  * @Date: 2025-10-16 15:15:47
  * @LastEditors: shirlwang
- * @LastEditTime: 2025-10-21 17:40:21
+ * @LastEditTime: 2025-10-22 09:54:53
 -->
 <template>
   <!-- @scroll="handleScroll" @scrolltolower="scrollBottom" -->
   <scroll-view :scroll-y="true" class="container" style="background-image: url('../../../packageRc/static/pageBg.png');">
-    <view class="kinggang">
+    <view style="padding: 40rpx 28rpx;">
-      <view>
+      <view class="kinggang">
-        <image src="../../../packageRc/static/kinggang1.png"/>
+        <view>
-        <view>信息维护</view>
+          <image src="../../../packageRc/static/kinggang1.png"/>
+          <view>信息维护</view>
+        </view>
+        <view>
+          <image src="../../../packageRc/static/kinggang5.png"/>
+          <view>投递记录</view>
+        </view>
+        <view>
+          <image src="../../../packageRc/static/kinggang2.png"/>
+          <view>需求上报</view>
+        </view>
+        <view>
+          <image src="../../../packageRc/static/kinggang3.png"/>
+          <view>虚拟面试</view>
+        </view>
+        <view>
+          <image src="../../../packageRc/static/kinggang4.png"/>
+          <view>素质测评</view>
+        </view>
       </view>
-      <view>
+      <view class="tabs">
-        <image src="../../../packageRc/static/kinggang5.png"/>
+        <view class="tab" :class="{active: activeTab == 1}" @click="activeTab = 1">岗位列表</view>
-        <view>投递记录</view>
+        <view class="tab" :class="{active: activeTab == 2}" @click="activeTab = 2">实习实训</view>
+        <view class="tab" :class="{active: activeTab == 3}" @click="activeTab = 3">社区实践</view>
       </view>
-      <view>
+      <view class="titles">
-        <image src="../../../packageRc/static/kinggang2.png"/>
+        <view class="title-item" :class="{active: activeTitle == 1}" @click="activeTitle = 1"><view>推荐岗位</view></view>
-        <view>需求上报</view>
+        <view class="title-item" :class="{active: activeTitle == 2}" @click="activeTitle = 2"><view>热门岗位</view></view>
       </view>
-      <view>
+      <view v-for="(item, index) in jobList" :key="index" class="job-list">
-        <image src="../../../packageRc/static/kinggang3.png"/>
+        <view class="top-line">
-        <view>虚拟面试</view>
+          <view class="salary">4000-8000/月</view>
+          <view class="time"><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：2025-10-20</view>
+        </view>
+        <view class="title">销售顾问</view>
+        <view class="infos">
+          <view>大专</view>
+          <view>1-3年</view>
+          <view>喀什 市南区</view>
+        </view>
+        <view class="bottom-line">
+          <view><uni-icons color="#A2A2A2" type="person" size="12"></uni-icons>6人</view>
+          <view>青岛xx公司</view>
+        </view>
       </view>
-      <view>
+      <view class="view-more-btn" @click="viewMore">查看更多内容</view>
-        <image src="../../../packageRc/static/kinggang4.png"/>
+      <view class="titles" style="justify-content: space-between;">
-        <view>素质测评</view>
+        <view class="title-item active"><view>政策专区</view></view>
+        <view>{{'查看更多 >'}}</view>
       </view>
-    </view>
+      <view v-for="(item, index) in jobList" :key="index" class="job-list">
-    <view class="tabs">
+        <view class="sign">推荐</view>
-      <view class="tab" :class="{active: activeTab == 1}" @click="activeTab = 1">岗位列表</view>
+        <view class="title">
-      <view class="tab" :class="{active: activeTab == 2}" @click="activeTab = 2">实习实训</view>
+          <image src="../../../packageRc/static/zcLeft.png"/>
-      <view class="tab" :class="{active: activeTab == 3}" @click="activeTab = 3">社区实践</view>
+          销售顾问</view>
-    </view>
+        <view class="infos">
-    <view class="titles">
+          <view>大专</view>
-      <view class="title-item" :class="{active: activeTitle == 1}" @click="activeTitle = 1"><view>推荐岗位</view></view>
+          <view>1-3年</view>
-      <view class="title-item" :class="{active: activeTitle == 2}" @click="activeTitle = 2"><view>热门岗位</view></view>
+          <view>喀什 市南区</view>
-    </view>
+        </view>
-    <view v-for="(item, index) in jobList" :key="index" class="job-list">
+        <view class="bottom-line">
-      <view class="top-line">
+          <view><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：2025-10-20</view>
-        <view class="salary">4000-8000/月</view>
+          <view>浏览数<text style="color: #6AA7E8">99+</text></view>
-        <view class="time"><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发布日期：2025-10-20</view>
+        </view>
-      </view>
-      <view class="title">销售顾问</view>
-      <view class="infos">
-        <view>大专</view>
-        <view>1-3年</view>
-        <view>喀什 市南区</view>
-      </view>
-      <view class="bottom-line">
-        <view><uni-icons color="#A2A2A2" type="person" size="12"></uni-icons>6人</view>
-        <view>青岛xx公司</view>
       </view>
     </view>
   </scroll-view>
@@ -66,6 +88,11 @@ function back() {
     delta: 1
   })
 }
+function viewMore() {
+  // uni.navigateTo({
+  //   url: '/pages/jobList/jobList'
+  // })
+}
 </script>
 
 <style lang="less" scoped>
@@ -74,7 +101,6 @@ view{box-sizing: border-box;display: block;}
   background-color: #F4F4F4;background-position: top center;background-size: 100% auto;
   height: 100vh;
   min-width: 100vw;
-  padding: 40rpx 28rpx;
   padding-bottom: 0;
   background-repeat: no-repeat;
   box-sizing: border-box;
@@ -158,6 +184,19 @@ view{box-sizing: border-box;display: block;}
   background: #FFFFFF;
   padding: 32rpx;
   margin-bottom: 24rpx;
+  position: relative;
+  .sign{
+    position: absolute;
+    font-size: 24rpx;
+    right: 0;
+    top: 0;
+    padding: 4rpx 14rpx;
+    border: 1rpx solid #EC4827;
+    background: rgba(227, 79, 49, 0.09);
+    border-top-right-radius: 24rpx;
+    border-bottom-left-radius: 24rpx;
+    color: #EC4827;
+  }
   .top-line{
     display: flex;
     justify-content: space-between;
@@ -175,6 +214,12 @@ view{box-sizing: border-box;display: block;}
     font-weight: bold;
     color: #282828;
     margin-bottom: 16rpx;
+    display: flex;
+    image{
+      width: 46rpx;
+      height: 46rpx;
+      margin-right: 11rpx;
+    }
   }
   .infos{
     display: flex;
@@ -196,4 +241,15 @@ view{box-sizing: border-box;display: block;}
     margin-top: 12rpx;
   }
 }
+.view-more-btn{ 
+  padding: 10rpx 56rpx;
+  background: #FFFFFF;
+  color: #4C6EFB;
+  border: 1rpx solid #4C6EFB;
+  text-align: center;
+  border-radius: 40rpx;
+  width: fit-content;
+  margin: 0 auto;
+  margin-bottom: 20rpx;
+}
 </style>