refactor : 重构首页样式

pages/index/components/index-refactor.vue

@@ -1,33 +1,92 @@
 <template>
   <view class="app-container">
-    <view class="nav-hidden hidden-animation" :class="{ 'hidden-height': isScrollingDown }">
+    <view class="nav-hidden hidden-animation" :class="{ 'hidden-height': scrollDeep, 'hidden-all': hiddenNav && scrollDeep }">
       <view class="container-search">
+        <image class="bg-text" mode="widthFix" src="@/static/icon/index-text-bg.png"></image>
+        <image class="bg-robot button-click" mode="widthFix" src="@/static/icon/index-robot.png"></image>
+        <view class="search-inner">
+          <image class="bg-text2" mode="widthFix" src="@/static/icon/index-text-bg2.png"></image>
           <view class="search-input button-click" @click="navTo('/pages/search/search')">
-          <uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
-          <text class="inpute">职位名称、薪资要求等</text>
+            <image class="icon" src="@/static/icon/index-search.png"></image>
+            <text class="inpute">请告诉我想找什么工作</text>
+          </view>
+        </view>
+      </view>
+      <view class="ai-card">
+        <image class="ai-card-bg" src="@/static/icon/ai-card-bg.png" />
+        <view class="ai-card-inner">
+          <view class="title">人工智能专区</view>
+          <view class="item-box">
+            <view class="box-l">
+              <view class="item1 button-click">
+                <view class="title">AI素质测评</view>
+                <view class="des">提高个人素质</view>
+                <image class="bg-text" mode="widthFix" src="@/static/icon/item-bg-text.png"></image>
+                <image class="bg-img" src="@/static/icon/item-bg-img1.png"></image>
+              </view>
+            </view>
+            <view class="box-r">
+              <view class="item2 button-click">
+                <view class="title">就业指导</view>
+                <view class="des">根据个人建议</view>
+                <image class="bg" src="@/static/icon/top-card-bg.png" />
+                <image class="bg-img" src="@/static/icon/item-bg-img2.png"></image>
+              </view>
+              <view class="item3 button-click">
+                <view class="title">AI模拟面试</view>
+                <view class="des">提高面试成功率</view>
+                <image class="bg" src="@/static/icon/bottom-card-bg.png" />
+                <image class="bg-img" src="@/static/icon/item-bg-img3.png"></image>
+              </view>
+            </view>
+          </view>
+          <view class="tip">
+            <image class="icon" src="@/static/icon/leart-gold.png" />
+            <view class="text">使用人工智能需要先完成素质测评、完善简历 ></view>
+          </view>
+        </view>
+      </view>
+      <view class="match-card">
+        <image class="match-card-bg" src="@/static/icon/match-card-bg.png" />
+        <view class="title">简历匹配职位</view>
+        <view class="match-item-container">
+          <view v-for="(item, index) in matchItems" :key="index" class="match-item-row">
+            <view
+              v-for="(subItem, subIndex) in item"
+              :key="subIndex"
+              class="match-item"
+              :style="{
+                fontSize: subItem.fontSize + 'rpx',
+                backgroundColor: subItem.bgColor,
+                color: subItem.textColor,
+                marginRight: subItem.marginRight + 'rpx',
+                marginLeft: subItem.marginLeft + 'rpx',
+                marginTop: subItem.marginTop + 'rpx',
+                opacity: subItem.opacity,
+                '--trail-color': subItem.bgColor,
+              }"
+              :class="subItem.trailClass"
+            >
+              <text class="text">{{ subItem.text }}</text>
+            </view>
+          </view>
         </view>
-        <!-- <view class="chart button-click">职业图谱</view> -->
       </view>
       <view class="cards">
         <view class="card card1 press-button" @click="navTo('/pages/nearby/nearby')">
           <view class="card-title">附近工作</view>
           <view class="card-text">好岗职等你来</view>
-          <image
-           class="img1"
-            src="@/static/icon/work-img1.png"
-          />
+          <image class="img1" src="@/static/icon/work-img1.png" />
         </view>
         <view class="card card2 press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
           <view class="card-title">精选企业</view>
           <view class="card-text">优选职得信赖</view>
-           <image
-           class="img2"
-            src="@/static/icon/work-img1.png"
-          />
+          <image class="img2" src="@/static/icon/work-img2.png" />
         </view>
       </view>
     </view>
-    <view class="list-card">
+    <view class="list-card" :class="{ 'no-radius': scrollDeep }">
+      <image v-if="showVideoTip" @click="showVideoTip = false" class="video-mask" src="@/static/icon/video-mask.png" />
       <view class="nav-filter">
         <view class="filter-top" @touchmove.stop.prevent>
           <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
@@ -53,7 +112,7 @@
         </view>
       </view>
       <view class="table-list">
-        <scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleScroll" @scrolltolower="scrollBottom">
+        <scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleMyScroll" @scrolltolower="scrollBottom">
           <view class="falls" v-if="list.length">
             <custom-waterfalls-flow
               :column="columnCount"
@@ -70,20 +129,20 @@
               }"
             >
               <template v-slot:default="job">
-                <view class="item btn-feel" :class="{'m-height':!job.education}" >
+                <view class="item btn-feel" :class="{ 'm-height': !job.education }">
                   <view class="falls-card" @click="nextDetail(job)">
-                    <view v-if="job.isHot" >
+                    <view v-if="job.isHot">
                       <view class="falls-card-pay">
                         <view class="pay-text">
-                          <Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary" ></Salary-Expectation>
+                          <Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary"></Salary-Expectation>
                         </view>
                         <image class="flame" src="/static/icon/flame3.png"></image>
                       </view>
                       <view class="falls-card-title">{{ job.jobTitle }}</view>
                     </view>
-                    <view v-else >
+                    <view v-else>
                       <view class="falls-card-title">{{ job.jobTitle }}</view>
-                      <view class="falls-card-pay" style="margin-top:10rpx">
+                      <view class="falls-card-pay" style="margin-top: 10rpx">
                         <view class="pay-text">
                           <Salary-Expectation :max-salary="job.maxSalary" :min-salary="job.minSalary"></Salary-Expectation>
                         </view>
@@ -91,7 +150,7 @@
                     </view>
 
                     <view class="fl_box fl_warp">
-                      <view class="falls-card-education mar_ri10" >
+                      <view class="falls-card-education mar_ri10">
                         <dict-Label dictType="education" :value="job.education"></dict-Label>
                       </view>
                       <view class="falls-card-experience" v-if="job.experience">
@@ -127,7 +186,7 @@
                                         <uni-icons type="star" size="30"></uni-icons>
                                     </view> -->
                   </view>
-                  <view v-if="!job.education" class="recommend-card" :class="{ isBut: job.isBut }" >
+                  <view v-if="!job.education" class="recommend-card" :class="{ isBut: job.isBut }">
                     <view class="card-content">
                       <view class="recommend-card-title">在找岗位：{{ job.jobCategory }}的工作吗？</view>
                       <!-- <view class="recommend-card-tip">{{ job.tip }}</view> -->
@@ -181,6 +240,27 @@ import { useScrollDirection } from "@/hook/useScrollDirection";
 import { useColumnCount } from "@/hook/useColumnCount";
 const { isScrollingDown, handleScroll } = useScrollDirection();
 const recommedIndexDb = useRecommedIndexedDBStore();
+
+const showVideoTip = ref(true);
+const clickSearch = ref(false);
+const scrollDeep = ref(false);
+const hiddenNav = ref(false);
+const handleMyScroll = (e) => {
+  const scrollTop = e.detail.scrollTop;
+  if (clickSearch.value) return;
+  if (scrollTop > 200) {
+    scrollDeep.value = true;
+    setTimeout(() => {
+      hiddenNav.value = true;
+    }, 800);
+  } else if (scrollTop == 0) {
+    hiddenNav.value = false;
+    setTimeout(() => {
+      scrollDeep.value = false;
+    }, 50);
+  }
+};
+
 const emits = defineEmits(["onShowTabbar"]);
 
 const waterfallsFlowRef = ref(null);
@@ -212,6 +292,85 @@ const rangeOptions = ref([
 ]);
 const isLoaded = ref(false);
 
+const matchItems = ref([]);
+
+const occupations = ["律师", "工程师", "医生", "教师", "设计师", "程序员", "会计师", "建筑师", "护士", "销售", "经理", "顾问", "分析师", "研究员", "编辑", "记者", "摄影师", "厨师", "司机", "保安", "客服", "行政", "人事", "市场", "运营", "产品", "测试", "运维", "前端", "后端", "全栈", "数据", "策划", "导演", "演员", "歌手", "作家", "画家", "翻译", "导游"];
+
+const colors = ["#0069FE", "#FF9400", "#FF6969", "#21EA85", "#87E2EC"];
+
+const generateMatchItems = () => {
+  const rows = 4; // 4行
+  const itemsPerRow = 4; // 每行4个item
+  const newItems = [];
+
+  for (let row = 0; row < rows; row++) {
+    const rowItems = [];
+
+    for (let col = 0; col < itemsPerRow; col++) {
+      // 生成随机职业
+      const randomIndex = Math.floor(Math.random() * occupations.length);
+      const occupation = occupations[randomIndex];
+
+      // 生成随机字体大小
+      const fontSize = Math.floor(Math.random() * 15) + 18;
+
+      // 生成随机背景色和透明度
+      const colorIndex = Math.floor(Math.random() * colors.length);
+      const opacity = (Math.random() * 1 + 0.4).toFixed(2);
+      const bgColor = hexToRgba(colors[colorIndex], opacity);
+
+      // 根据背景色亮度决定文字颜色
+      const textColor = getTextColor(colors[colorIndex]);
+
+      // 生成随机偏移量
+      const marginRight = Math.floor(Math.random() * 70) + 20;
+      const marginLeft = Math.floor(Math.random() * 40) + 20;
+      const marginTop = Math.floor(Math.random() * 60) - 60;
+
+      // 根据列位置决定拖尾效果
+      let trailClass;
+      if (col === 0) {
+        trailClass = "trail-right";
+      } else if (col === itemsPerRow - 1) {
+        trailClass = "trail-left";
+      } else {
+        trailClass = "trail-center";
+      }
+
+      rowItems.push({
+        text: occupation,
+        fontSize: fontSize,
+        bgColor: bgColor,
+        textColor: textColor,
+        marginRight: marginRight,
+        marginLeft: col == 0 ? marginLeft : 0,
+        marginTop: marginTop,
+        opacity: opacity,
+        trailClass: trailClass,
+      });
+    }
+
+    newItems.push(rowItems);
+  }
+
+  matchItems.value = newItems;
+};
+
+const hexToRgba = (hex, opacity) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+const getTextColor = (hexColor) => {
+  const r = parseInt(hexColor.slice(1, 3), 16);
+  const g = parseInt(hexColor.slice(3, 5), 16);
+  const b = parseInt(hexColor.slice(5, 7), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  return brightness > 180 ? "#1D71EF" : "#FFFFFF";
+};
+
 const { columnCount, columnSpace } = useColumnCount(() => {
   pageState.pageSize = 10 * (columnCount.value - 1);
   getJobRecommend("refresh");
@@ -222,6 +381,7 @@ const { columnCount, columnSpace } = useColumnCount(() => {
 });
 
 async function loadData() {
+  generateMatchItems(); // ******生成简历匹配职位虚拟数据
   try {
     if (isLoaded.value) return;
     isLoaded.value = true;
@@ -327,6 +487,10 @@ function handleFilterConfirm(e) {
 }
 
 function choosePosition(index) {
+  clickSearch.value = true;
+  setTimeout(() => {
+    clickSearch.value = false;
+  }, 300);
   state.tabIndex = index;
   list.value = [];
   if (index === "all") {
@@ -344,6 +508,10 @@ function choosePosition(index) {
 }
 
 function handelHostestSearch(val) {
+  clickSearch.value = true;
+  setTimeout(() => {
+    clickSearch.value = false;
+  }, 300);
   pageState.search.order = val.value;
   if (state.tabIndex === "all") {
     getJobRecommend("refresh");
@@ -544,44 +712,70 @@ defineExpose({ loadData });
 //             width: 4rpx
 //             height: 20rpx
 
-
 .app-container
     width: 100%;
     height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
+    overflow-y: auto;
+    overflow-x: hidden;
     background: url('@/static/icon/background2.png') 0 0 no-repeat;
     background-size: 100% 728rpx;
     background-color: #E5F4FB;
     display: flex;
     flex-direction: column
     .hidden-animation
-        max-height: 1000px;
-        transition: all 0.3s ease;
-        overflow: hidden;
+        max-height: 2000rpx;
+        transition:  1s ease;
     .hidden-height
-        max-height: 0;
+        max-height: 0 !important;
         padding-top: 0;
         padding-bottom: 0;
+    .hidden-all
+        overflow:hidden
 .container-search
-    padding: 16rpx 24rpx
-    display: flex
-    justify-content: space-between
+    width:100%;
+    padding:60rpx 0 40rpx;
+    position: relative
+    .bg-text
+        position :absolute
+        width:100%;
+        top:60rpx;
+        left:0
+    .bg-robot
+        position :absolute
+        width:428rpx;
+        top:80rpx;
+        right:-5rpx;
+    .search-inner
+        position relative;
+        z-index:1
+        width:100%;
+        box-sizing: border-box;
+        padding:60rpx 22rpx 0;
+        .bg-text2
+            width:355rpx;
     .search-input
         display: flex
         align-items: center;
-        width: 100%
-        height: 80rpx;
+        width: 392rpx;
+        height: 70rpx;
         line-height: 80rpx
-        // margin-right: 24rpx
         background: #FFFFFF;
-        border-radius: 75rpx 75rpx 75rpx 75rpx;
+        border-radius: 49rpx;
+        margin-top:24rpx;
+        box-sizing: border-box;
+        padding:0 24rpx;
+        .icon
+            width:40rpx;
+            height:40rpx;
+            margin-right:10rpx;
         .iconsearch
             padding-left: 36rpx
         .inpute
-            margin-left: 20rpx
+            font-family: ABeeZee;
             font-weight: 400;
-            font-size: 28rpx;
-            color: #B5B5B5;
-            width: 100%
+            font-style: Regular;
+            font-size: 24rpx;
+            color:#545454
     .chart
         font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
         width: 170rpx;
@@ -595,49 +789,261 @@ defineExpose({ loadData });
         height: 36rpx;
         color: #000000;
         padding: 20rpx 30rpx
-.cards
-    padding: 10rpx 28rpx
-    display: grid
-    grid-gap: 38rpx;
-    grid-template-columns: 1fr 1fr;
-    .card1{
-        
+.ai-card
+  width 694rpx;
+  margin 0 auto;
+  box-sizing:border-box;
+  position relative;
+  .ai-card-bg
+    width:100%;
+    height:100%;
+    position: absolute;
+    left:0;
+    top:0;
+  .ai-card-inner
+      width:100%;
+      height:100%;
+      position:relative;
+      z-index: 1
+      box-sizing:border-box;
+      padding:28rpx 36rpx 40rpx;
+      .title
+        font-family: Alibaba PuHuiTi;
+        font-weight:700;
+        font-size: 32rpx;
+        color:#333333
+      .item-box
+          width:100%;
+          margin-top:30rpx;
+          display:flex;
+          justify-content: space-between;
+          .title
+              font-family: Alibaba PuHuiTi;
+              font-weight: 700;
+              font-style: Bold;
+              font-size: 28rpx;
+              color: #2E75FF;
+              position relative;
+              z-index:1
+          .des
+              font-family: Alibaba PuHuiTi;
+              font-weight: 400;
+              font-style: Regular;
+              font-size: 24rpx;
+              margin-top:4rpx;
+              position relative;
+              z-index:1
+              color: #00000070;
+          .bg
+              position:absolute;
+              top:0;
+              left:0;
+              width:100%;
+              height:100%
+          .item1
+              height:272rpx;
+              width:298rpx;
+              border-radius: 20rpx;
+              background: linear-gradient(127.66deg, #CDE4FF 6.44%, #EAFEFF 93.56%);
+              box-sizing:border-box;
+              padding:34rpx 32rpx;
+              position:relative
+              .bg-text
+                  position:absolute;
+                  bottom:40rpx;
+                  left:0;
+                  width:100%;
+                  opacity 0.5
+              .bg-img
+                  position:absolute;
+                  width:168rpx;
+                  height:166rpx;
+                  right:16rpx;
+                  bottom:12rpx;
+          .item2
+              height:126rpx;
+              width:298rpx;
+              border-radius: 20rpx;
+              box-sizing:border-box;
+              padding:26rpx 28rpx;
+              position :relative
+              .bg-img
+                  position:absolute;
+                  width:212rpx;
+                  height:148rpx;
+                  right:-50rpx;
+                  bottom:8rpx;
+          .item3
+              height:126rpx;
+              width:298rpx;
+              border-radius: 20rpx;
+              box-sizing:border-box;
+              padding:26rpx 28rpx;
+              margin-top:20rpx;
+              position :relative
+              .bg-img
+                  position:absolute;
+                  width:102rpx;
+                  height:92rpx;
+                  right:0rpx;
+                  bottom:44rpx;
+      .tip
+          width:100%;
+          height:60rpx;
+          display:flex;
+          align-items:center;
+          box-sizing:border-box;
+          padding:0 26rpx;
+          border-radius: 20rpx;
+          background:#FFF9E1
+          margin-top:20rpx;
+          .icon
+              width:32rpx;
+              height:32rpx;
+              margin-right:14rpx;
+          .text
+              font-family: ABeeZee;
+              font-weight: 400;
+              font-style: Regular;
+              font-size: 24rpx;
+              color:#E1A374
+.match-card
+  width 694rpx;
+  margin 0 auto;
+  box-sizing:border-box;
+  position relative;
+  background: #ffffffE6;
+  border-radius: 24rpx;
+  margin-top:20rpx;
+  padding:32rpx 36rpx;
+  .title
+      font-family: Alibaba PuHuiTi;
+      font-weight:700;
+      font-size: 32rpx;
+      color:#333333
+  .match-card-bg
+    width:100%;
+    height:100%;
+    position: absolute;
+    left:0;
+    top:0;
+  .match-item-container
+    width:100%;
+    margin-top:30rpx;
+    .match-item-row
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding:30rpx 0;
+    .match-item
+      padding: 8rpx 20rpx;
+      border-radius: 30rpx;
+      white-space: nowrap;
+      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+      position: relative;
+      .text{
+        position: relative;
+        z-index:2
+        white-space: nowrap
       }
+    .trail-center::after
+        content: '';
+        position: absolute;
+        bottom: -15rpx;
+        left: 10%;
+        width: 80%;
+        height: 30rpx;
+        background: linear-gradient(to bottom, var(--trail-color), transparent);
+        border-radius: 30% 30% 100% 100%;
+        filter: blur(4rpx);
+    .trail-left::after
+        content: '';
+        position: absolute;
+        bottom: -15rpx;
+        left: -20%;
+        width: 90%;
+        height: 40rpx;
+        background: linear-gradient(to bottom, var(--trail-color), transparent);
+        border-radius: 50%;
+        filter: blur(4rpx);
+        transform: skewX(-8deg);
+    .trail-right::after
+        content: '';
+        position: absolute;
+        bottom: -20rpx;
+        right: -20%;
+        width: 90%;
+        height: 40rpx;
+        background: linear-gradient(to bottom, var(--trail-color), transparent);
+        border-radius: 50%;
+        filter: blur(4rpx);
+        transform: skewX(8deg);
+
+.cards
+    width :100%;
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding:30rpx 28rpx;
+    gap:20rpx;
+    .card1
+        background:linear-gradient(140deg, #FF6D5E,#FF999A);
+    .card2
+        background:linear-gradient(140deg,#8788DA,#C6F4FE);
     .card
-        height: calc(158rpx - 40rpx);
-        padding: 22rpx 26rpx
-        box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(210,210,210,0.14);
-        border-radius: 16rpx 16rpx 16rpx 16rpx;
-        border: 2rpx solid #FFFFFF;
+        flex:1;
+        position :relative;
+        height:158rpx;
+        box-sizing: border-box;
+        padding:36rpx 34rpx;
+        border-radius: 20rpx
+        .img1
+            width:180rpx;
+            height:122rpx;
+            position: absolute;
+            right:-20rpx;
+            bottom:4rpx
+        .img2
+            width:148rpx;
+            height:148rpx;
+            position: absolute;
+            right:-20rpx;
+            bottom:-10rpx;
         .card-title
             font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
             font-weight: 600;
             font-size: 32rpx;
-            color: #000000;
+            color: #FFFFFF;
         .card-text
             font-weight: 400;
             font-size: 24rpx;
-            color: #9E9E9E;
-            margin-top: 4rpx
-    .card:first-child
-        background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
-            url('@/static/icon/fujin.png');
-        background-size: 100%, 100%
-    .card:last-child
-        background: radial-gradient( 0% 56% at 87% 61%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.47) 100%),
-            url('@/static/icon/jinxuan.png');
-        background-size: 100%, 100%
-        background-size: cover;
-        background-position: center;
-
+            color: #FFFFFF90;
+            margin-top: 8rpx
 .list-card{
-    flex: 1;
-    overflow: hidden;
+    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom) - 90rpx);
     display:flex;
     flex-direction: column;
     background: linear-gradient(to bottom, #fff 0%, #E5F3FA 100%);
     border-radius: 40rpx 40rpx 0 0
+    position:relative;
+    z-index:3
+    transition: .5s
+    .video-mask{
+      position:absolute;
+      right:10rpx;
+      bottom:20rpx;
+      width:264rpx;
+      height:298rpx;
+      z-index:4
+    }
 }
+.no-radius
+    border-radius: 0
 .nav-filter
     padding: 32rpx 28rpx 0 28rpx
     font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;