Merge branch 'jobFair' of https://git.citupro.com/zhengnaiwen_citu/menduner into jobFair

components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
     ElBacktop: typeof import('element-plus/es')['ElBacktop']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']

src/styles/index.css

@@ -314,21 +314,61 @@ body {
   min-height: 70vh;
 }
 
-.home-title {
-  font-size: 30px;
-  color: #333333;
-  margin: 0 15px;
+.entLogoImg {
+  border-radius: 4px;
+  border: 1px solid #E1E4E9;
+}
+
+.selected {
+  display: flex;
+  align-items: baseline;
+}
+
+.selected-title {
+  font-size: 35px;
+  margin-bottom: 20px;
+  color: #0E100F;
+  font-family: MiSans-Semibold;
+}
+
+.selected .selected-title-sub {
+  line-height: 33px;
+  margin-left: 10px;
+}
+
+.selected .selected-title-sub-container {
+  width: 36px;
+  height: 6px;
   position: relative;
 }
 
-.home-title-line {
-  width: 223px;
+.selected .selected-title-sub-container-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 100%;
   background-color: #00B760;
-  height: 9px;
+  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
+}
+
+.selected .selected-title-sub-container-right {
   position: absolute;
-  top: 45px;
-  left: -50%;
-  transform: translateX(5%);
+  top: 0;
+  right: 3px;
+  width: 50%;
+  height: 100%;
+  background-color: #0E100F;
+  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.hoverShadow {
+  box-shadow: 5px 9px 12px 1px rgba(0, 183, 96, 0.17) !important;
+}
+
+.hoverShadowSolid {
+  box-shadow: 5px 9px 12px 1px rgba(0, 183, 96, 0.17) !important;
+  border: 1px solid #00B760 !important;
 }
 
 .btnColor {

src/styles/index.scss

@@ -254,18 +254,65 @@
   min-height: 70vh;
 }
 
-.home-title {
-  font-size: 30px;
-  color: #333333;
-  margin: 0 15px;
-  position: relative;
-}
+// .home-title {
+//   font-size: 30px;
+//   color: #333333;
+//   margin: 0 15px;
+//   position: relative;
+// }
 
 .entLogoImg {
   border-radius: 4px;
   border: 1px solid #E1E4E9;
 }
 
+// .home-title-line {
+//   width: 223px;
+//   background-color: #00B760;
+//   height: 9px;
+//   position: absolute;
+//   top: 45px;
+//   left: -50%;
+//   transform: translateX(5%);
+// }
+
+.selected {
+  display: flex;
+  align-items: baseline;
+  &-title {
+    font-size: 35px;
+    margin-bottom: 20px;
+    color: #0E100F;
+    font-family: MiSans-Semibold;
+  }
+  .selected-title-sub {
+    line-height: 33px;
+    margin-left: 10px;
+    &-container {
+      width: 36px;
+      height: 6px;
+      position: relative;
+      &-left {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+        background-color: #00B760;
+        clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
+      }
+      &-right {
+        position: absolute;
+        top: 0;
+        right: 3px;
+        width: 50%;
+        height: 100%;
+        background-color: #0E100F;
+        clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
+      }
+    }
+  }
+}
 .hoverShadow {
   box-shadow: 5px 9px 12px 1px rgba(0, 183, 96, 0.17) !important;
 }
@@ -274,17 +321,6 @@
   border: 1px solid #00B760 !important;
 }
 
-.home-title-line {
-  width: 223px;
-  // background: linear-gradient(to right, #12ebb0, #427daa);
-  background-color: #00B760;
-  height: 9px;
-  position: absolute;
-  top: 45px;
-  left: -50%;
-  transform: translateX(5%);
-}
-
 .btnColor {
   color: #fff;
   opacity: .7;

src/views/recruit/personal/home/components/advertisement/index.vue

@@ -1,14 +1,18 @@
 
 <template>
   <div class="contentBox py-10 px-3">
-    <div class="d-flex align-center justify-center">
-      <div class="home-title MiSans-Semibold">
-        优选集团
-        <div class="home-title-line"></div>
+    <div class="selected">
+      <div class="selected-title">优选集团</div>
+      <div class="selected-title-sub">
+        <div class="selected-title-sub-container">
+          <div class="selected-title-sub-container-left"></div>
+          <div class="selected-title-sub-container-right"></div>
+        </div>
+        <p>/Preferred Group</p>
       </div>
     </div>
 
-    <div no-gutters class="mt-5 d-flex flex-wrap" style="width: 100%;">
+    <div no-gutters class="d-flex flex-wrap" style="width: 100%;">
       <v-hover v-slot="{ isHovering, props }" v-for="(k, i) in list" :key="i">
         <v-card  v-bind="props" class="col-item" :class="isHovering ? 'elevation-10' : 'elevation-3'" @click.stop="jumpToEnterpriseDetail(k.link, true)">
           <v-img :src="k.img"/>

src/views/recruit/personal/home/components/hotPromotedPositions.vue

@@ -1,27 +1,28 @@
 <template>
   <div>
-    <div class="d-flex align-center justify-center">
-      <div class="home-title MiSans-Semibold">
-        精选职位
-        <div class="home-title-line"></div>
+    <div class="d-flex justify-space-between">
+      <div class="selected">
+        <div class="selected-title">精选职位</div>
+        <div class="selected-title-sub">
+          <div class="selected-title-sub-container">
+            <div class="selected-title-sub-container-left"></div>
+            <div class="selected-title-sub-container-right"></div>
+          </div>
+          <p>/Selected Positions</p>
+        </div>
+      </div>
+      <div>
+        <el-segmented v-model="tab" :options="tabList" @change="getPositionList" />
+        <v-hover v-slot="{ isHovering, props }">
+          <v-btn color="primary" v-bind="props" :class="isHovering ? 'elevation-5' : ''" variant="tonal" rounded size="large" class="ml-3" @click.stop="handleToMore">
+            {{ $t('position.moreBtn') }}
+            <v-icon class="ml-3">mdi-menu-right</v-icon>
+          </v-btn>
+        </v-hover>
       </div>
     </div>
-    <v-tabs v-model="tab" align-tabs="start" color="primary" @update:model-value="getPositionList">
-      <v-tab :value="1">{{ $t('position.recommend') }}</v-tab>
-      <v-tab :value="2">{{ $t('position.latest') }}</v-tab>
-      <v-tab :value="3">{{ $t('position.hire') }}</v-tab>
-    </v-tabs>
-    <v-window v-model="tab" class="pt-5 px-2 pb-2">
-      <v-window-item v-for="v in 3" :value="v" :key="v">
-        <PositionCard v-if="items.filter(Boolean) && items.length" :isOpenWindow="false" :items="items" :tab="tab" @position="handlePosition"></PositionCard>
-        <Empty v-else class="mb-3" :elevation="false"></Empty>
-      </v-window-item>
-    </v-window>
-    <div class="text-center mt-4" style="border-top: 1px solid #ccc; padding-top: 30px;">
-      <v-hover v-slot="{ isHovering, props }">
-        <v-btn v-bind="props" v-ripple.center color="primary" width="224" :class="isHovering ? 'elevation-10' : 'elevation-5'" @click.stop="handleToMore">{{ $t('position.moreBtn') }}</v-btn>
-      </v-hover>
-    </div>
+    <PositionCard v-if="items.filter(Boolean) && items.length" :isOpenWindow="false" :items="items" :tab="tab" @position="handlePosition"></PositionCard>
+    <Empty v-else class="mb-3" :elevation="false"></Empty>
   </div>
 </template>
 
@@ -35,6 +36,11 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const tab = ref(1)
 const items = ref([])
+const tabList = [
+  { label: '推荐职位', value: 1 },
+  { label: '最新职位', value: 2 },
+  { label: '众聘职位', value: 3 }
+]
 
 // 推荐职位
 const getPositionList = async () => {
@@ -57,12 +63,24 @@ const handleToMore = () => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.v-slide-group__content) {
-  border-bottom: 1px solid #ccc !important;
+.el-segmented {
+  --el-segmented-item-selected-color: #fff;
+  --el-segmented-item-selected-bg-color: #181818;
+  --el-border-radius-base: 16px;
+  --el-border-radius-base: 25px;
+  --el-segmented-item-hover-color: #181818;
+  --el-segmented-item-hover-bg-color: none;
+  height: 44px;
+  width: 300px;
+  color: #fff;
+  background-color: #00B760;
+  padding: 0;
+}
+:deep(.v-btn__content) {
+  font-size: 14px;
 }
-:deep(.v-tab) {
-  font-weight: 700;
-  color: #666;
-  font-size: 16px;
+:deep(.v-btn .v-icon) {
+  background-color: #c2e4d5;
+  border-radius: 50%;
 }
 </style>

src/views/recruit/personal/home/components/popularEnterprises.vue

@@ -1,18 +1,27 @@
 <template>
   <div>
-    <div class="d-flex align-center justify-center">
-      <div class="home-title MiSans-Semibold">
-        精选企业
-        <div class="home-title-line"></div>
+    <div class="d-flex justify-space-between">
+      <div class="selected">
+        <div class="selected-title">精选企业</div>
+        <div class="selected-title-sub">
+          <div class="selected-title-sub-container">
+            <div class="selected-title-sub-container-left"></div>
+            <div class="selected-title-sub-container-right"></div>
+          </div>
+          <p>/Selected Enterprises</p>
+        </div>
+      </div>
+      <div>
+        <v-hover v-slot="{ isHovering, props }">
+          <v-btn color="primary" v-bind="props" :class="isHovering ? 'elevation-5' : ''" variant="tonal" rounded size="large" class="ml-3" @click.stop="handleToMore">
+            {{ $t('enterprise.moreBtn') }}
+            <v-icon class="ml-3">mdi-menu-right</v-icon>
+          </v-btn>
+        </v-hover>
       </div>
     </div>
-    <HotPromoted v-if="items.length" class="mt-5" :items="items"></HotPromoted>
-    <Empty v-else :elevation="false" class="mt-3" message="暂无精选企业"></Empty>
-    <div v-if="items.length" class="text-center">
-      <v-hover v-slot="{ isHovering, props }">
-        <v-btn v-bind="props" v-ripple.center color="primary" width="224" :class="isHovering ? 'elevation-10' : 'elevation-5'" @click.stop="handleToMore">{{ $t('enterprise.moreBtn') }}</v-btn>
-      </v-hover>
-    </div>
+    <HotPromoted v-if="items.length" :items="items"></HotPromoted>
+    <Empty v-else :elevation="false" message="暂无精选企业"></Empty>
   </div>
 </template>