提交

src/components/FootBar.vue

@@ -187,7 +187,7 @@ export default {
         {
           title: '人才招募',
           children: [
-            { title: '人才战略', path: '/' },
+            { title: '人才战略', path: '/recruit/talentStrategy' },
             { title: '招募信息', path: '/recruit/socialRecruit' },
           ],
         },

src/components/NavBar.vue

@@ -122,7 +122,7 @@ export default {
         {
           title: '人才招募',
           children: [
-            { title: '人才战略', path: '/' },
+            { title: '人才战略', path: '/recruit/talentStrategy' },
             { title: '招募信息', path: '/recruit/socialRecruit' },
           ],
         },

src/router/index.js

@@ -172,9 +172,9 @@ const routes = [
     component: RouteView,
     children: [
       {
-        path: '/recruit/beautifulHk',
+        path: '/recruit/talentStrategy',
         component: (resolve) =>
-          require(['../views/Recruit/BeautifulHk/Index.vue'], resolve),
+          require(['../views/Recruit/TalentStrategy/Index.vue'], resolve),
       },
       {
         path: '/recruit/socialRecruit',

src/views/About/ContactUs/Index.vue

@@ -62,8 +62,6 @@ export default {
             { title: '服务时间：', value: '周一至周五AM 09:00-12:00  PM 01:00-06:00', src: '/static/img/contactUs/serviceTime.png' },
             { title: '公司地址：', value: '海南省三亚市天涯区育春路七巷九号', src: '/static/img/contactUs/address.png' },
             { title: '邮编：', value: '572022', src: '/static/img/contactUs/postcode.png' },
-            { title: '北京地址：', value: '北京市朝阳区霄云路36号国航大厦3/7楼', src: '/static/img/contactUs/address.png' },
-            { title: '邮编：', value: '100027', src: '/static/img/contactUs/postcode.png' },
           ],
         },
       ],

src/views/Recruit/TalentStrategy/Index.vue

@@ -1,20 +1,28 @@
 <template>
   <div class="page-company">
     <div class="screen1">
-      <video
+      <img
-        ref="video"
+        :src="screen1.imageurl"
-        :src="playingVideoSrc"
+        alt=""
-        style="width: 100%;filter: blur(2px);"
+        style="width: 100%;height: 100%;"
-        autoplay
+      />
-        :controls="false"
+      <div
-        loop="true"
+        class="box-posi-abs"
-        muted="true"
+        style="--w:100%;--h: 407rem;--t:50%;--l:0;z-index:10;color:#ffffff;display: flex;flex-direction: column;align-items: left;padding: 0rem 60rem;transform: translateY(-50%);"
-      ></video>
+      >
-      <div class="text-wrapper">
+        <div style="font-size: 48rem;line-height: 1;margin-bottom: 24rem;font-family: MicrosoftYaHeiLight;">
-        加入我们，展现自我
+          {{ screen1.introduction.businessName }}
+        </div>
+        <div style="font-size: 48rem;line-height: 1;margin-bottom: 80rem;font-family: MicrosoftYaHeiLight;">
+          {{ screen1.introduction.businessNameEnglish }}
+        </div>
+        <div
+          v-for="(textEn, i) in screen1.introduction.titleChinese.split('\n')"
+          :key="'text-en-' + i"
+          style="font-size: 24rem;width: 608rem;line-height: 40rem;margin-bottom: 70rem;letter-spacing: 0rem;"
+        >
+          {{ textEn }}
         </div>
-      <div class="next-page-wrapper">
-        <NextPage @click="handleNextPage" />
       </div>
     </div>
     <div
@@ -68,7 +76,7 @@
               </div>
             </el-carousel-item>
           </el-carousel>
-          <div
+          <!-- <div
             class="carousel-tab"
           >
             <div
@@ -80,7 +88,7 @@
             >
               {{carousel.businessName}}
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -113,7 +121,7 @@
               </div>
             </el-carousel-item>
           </el-carousel>
-          <div
+          <!-- <div
             class="carousel-tab"
           >
             <div
@@ -125,7 +133,7 @@
             >
               {{carousel.businessName}}
             </div>
-          </div>
+          </div> -->
         </div>
         <div
           class="screen-content-left"
@@ -211,7 +219,7 @@
               </div>
             </el-carousel-item>
           </el-carousel>
-          <div
+          <!-- <div
             class="carousel-tab"
           >
             <div
@@ -223,37 +231,49 @@
             >
               {{carousel.businessNameEnglish}}
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
     <div class="screen6">
       <div class="wrapper1680">
-        <div class="title">
-          更多福利
-        </div>
-        <div class="recommend-wrapper">
         <div
-            v-for="item in screen6.list"
+          class="box-posi-abs"
-            :key="item.id"
+          style="--t:0rem;--w:100%;--h:1rem;"
-            class="recommend-item"
+        >
+          <div class="split-line"></div>
+        </div>
+        <div
+          class="image-posi-abs"
+          style="--l:1rem;--r:1rem;--t:90rem;--w:1680rem;--h:550rem;"
         >
-            <div class="recommend-image">
           <img
-                :src="item.imageurl"
+            :src="screen6.joinUs.imageSrc"
             alt=""
-                style="width:100%;height:100%;object-fit:cover;"
+            style="width:100%;height:100%;"
           >
         </div>
-            <div class="recommend-info">
+        <transition name="fade-slide-left">
-              <div class="title">
+          <div
-                {{ item.businessName }}
+            v-show="screen6.offsetLevel >= 1"
-              </div>
+            class="text-posi-abs"
-              <div class="abstracts">
+            style="--t:243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
-                {{ item.titleChinese }}
+          >
-              </div>
+            {{ screen6.joinUs.title }}
           </div>
+        </transition>
+        <div
+          class="text-posi-abs"
+          style="--t:312rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
+        >
+          {{ screen6.joinUs.contentCn }}
         </div>
+        <div
+          @click="$router.push('/recruit/socialRecruit')"
+          class="text-posi-abs"
+          style="--l:118rem;--t:433rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
+        >
+          <span class="join-btn-text">JOIN US</span>
         </div>
       </div>
     </div>
@@ -262,51 +282,61 @@
 
 <script>
 import { mapMutations, mapState } from 'vuex';
-import NextPage from '@/components/NextPage.vue';
 
 export default {
-  components: {
-    NextPage,
-  },
   data () {
     return {
       screen1: {
-        videoLink: '',
+        imageurl: '',
+        introduction: {
+          businessName: '',
+          businessNameEnglish: '',
+          titleChinese: '',
+        },
       },
       screen2: {
-        miniTitle: '发展在昊坤',
+        miniTitle: '',
-        title: '美好源于<br />持续的成长',
+        title: '跨领域<br />的综合发展',
-        subtitle: '可持续的人才培养',
+        subtitle: '',
-        titleEn: 'DEVELOPING AT HAOKUN',
+        titleEn: '',
         carouselData: [],
         carouselAutoplay: false,
         currentIndicator: -1,
         timer: null,
       },
       screen3: {
-        miniTitle: '工作在昊坤',
+        miniTitle: '',
-        title: '美好源于<br />健康的身心',
+        title: '创新与<br />探索的氛围',
-        subtitle: '高标准的员工关爱',
+        subtitle: '',
-        titleEn: 'WORKING AT HAOKUN',
+        titleEn: '',
         carouselData: [],
         carouselAutoplay: false,
         currentIndicator: -1,
         timer: null,
       },
       screen4: {
-        miniTitle: '生活在昊坤',
+        miniTitle: '',
-        title: '美好源于<br />多彩的生活',
+        title: '合作共赢<br />的伙伴关系',
-        subtitle: '丰富多彩的文化活动',
+        subtitle: '',
-        titleEn: 'LIVING IN HAOKUN',
+        titleEn: '',
         carouselData: [],
         carouselAutoplay: false,
         currentIndicator: -1,
         timer: null,
       },
       screen6: {
-        offsets: [4500],
+        offsets: [2900, 3900],
-        offsetLevel: -1,
+        offsetLevel: 1,
-        list: [],
+        keyCase: {
+          title: '',
+          contentCn: '',
+        },
+        plateList: [],
+        joinUs: {
+          title: '',
+          contentCn: '',
+          imageSrc: '',
+        },
       },
     };
   },
@@ -314,9 +344,9 @@ export default {
     ...mapState({
       scrollTop: state => state.scroll.scrollTop,
     }),
-    playingVideoSrc () {
+    // playingVideoSrc () {
-      return process.env.VUE_APP_FILE_TARGET_URL + '/video' + this.screen1.videoLink;
+    //   return process.env.VUE_APP_FILE_TARGET_URL + '/video' + this.screen1.videoLink;
-    },
+    // },
   },
   watch: {
     scrollTop (v) {
@@ -338,6 +368,7 @@ export default {
   created () {
     this.$event.$emit('nav-theme', 'dark');
     this.getScreen1Banner();
+    this.getScreen1Info();
     this.getScreen2CarouselData(0);
     this.getScreen3ListData();
     this.getScreen4CarouselData(0);
@@ -365,19 +396,26 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 1, captionName: '加入我们/美好昊坤/banner' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/banner' } },
         );
-        this.screen1.videoLink = res.rows[0].videoLink;
+        console.log(res);
+        this.screen1.imageurl = res.rows[0].imageurl;
       } catch (error) {}
     },
-    handleNextPage () {
+    async getScreen1Info () {
-      this.forceScroll({ top: window.innerHeight, behavior: 'smooth' });
+      try {
+        const res = await this.$request.get(
+          '/official/index/list',
+          { params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/介绍信息' } },
+        );
+        Object.assign(this.screen1.introduction, res.rows[0]);
+      } catch (error) {}
     },
     async getScreen2CarouselData () {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '加入我们/美好昊坤/发展在昊坤' } },
+          { params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/跨领域的综合发展' } },
         );
         this.screen2.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
         setTimeout(() => {
@@ -389,7 +427,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '加入我们/美好昊坤/工作在昊坤' } },
+          { params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/创新与探索的氛围' } },
         );
         this.screen3.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
         setTimeout(() => {
@@ -401,7 +439,7 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 4, captionName: '加入我们/美好昊坤/生活在昊坤' } },
+          { params: { pageNum: 1, pageSize: 4, captionName: '人才招募/人才战略/合作共赢的伙伴关系' } },
         );
         this.screen4.carouselData = res.rows.sort((a, b) => a.orders - b.orders);
         setTimeout(() => {
@@ -413,9 +451,11 @@ export default {
       try {
         const res = await this.$request.get(
           '/official/index/list',
-          { params: { pageNum: 1, pageSize: 2, captionName: '加入我们/美好昊坤/福利' } },
+          { params: { pageNum: 1, pageSize: 1, captionName: '人才招募/人才战略/joinus' } },
         );
-        this.screen6.list = res.rows.sort((a, b) => a.orders - b.orders);
+        this.screen6.joinUs.title = res.rows[0].businessName;
+        this.screen6.joinUs.contentCn = res.rows[0].titleChinese;
+        this.screen6.joinUs.imageSrc = res.rows[0].imageurl;
       } catch (error) {}
     },
     startScreen4Carousel (indicator, num) {
@@ -437,43 +477,16 @@ export default {
 <style scoped>
 .page-company {
   width: 100%;
-  background-color: #ffffff;
+  margin: 0 auto;
 }
+
 .screen1 {
-  height: calc(100vw * 1080 / 1920);
+  height: calc(100vw / 1920 * 1080);
   max-height: 100vh;
   overflow: hidden;
   position: relative;
 }
-.screen1::after {
+
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000000aa;
-}
-.screen1 .text-wrapper {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 10;
-  transform: translate(-50%, -100rem);
-  font-size: 72rem;
-  font-family: MicrosoftYaHeiSemiBold;
-  color: #ffffff;
-  letter-spacing: 6rem;
-}
-.screen1 .next-page-wrapper {
-  position: absolute;
-  left: 0;
-  bottom: 100rem;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  z-index: 10;
-}
 .screen2 {
   margin-top: 134rem;
   padding: 134rem 0;
@@ -482,7 +495,7 @@ export default {
   padding: 134rem 0;
 }
 .screen4 {
-  padding: 134rem 0;
+  padding: 90rem 0;
   box-sizing: border-box;
   position: relative;
   z-index: 1;
@@ -623,97 +636,42 @@ export default {
   border-radius: 20rem;
   overflow: hidden;
 }
-.screen5 {
+
-  /*margin-top: calc(-100vw * 100 / 1920);*/
-}
 .screen6 {
-  height: auto;
-  background-color: #F5F5F7;
-  padding: 180rem 0;
-}
-.screen6 .title {
-  font-family: MicrosoftYaHei;
-  font-size: 30rem;
-  line-height: 30rem;
-  color: #141414;
-  margin-bottom: 82rem;
-}
-.screen6 .recommend-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-.screen6 .recommend-item {
-  width: 820rem;
-  height: 580rem;
-  border-radius: 20rem;
-  background-color: #FFFFFF;
-  overflow: hidden;
-  cursor: pointer;
   position: relative;
-  z-index: 1;
+  height: 733rem;
+  background-color: #ffffff;
 }
-.screen6 .recommend-item + .recommend-item {
+.screen6 .wrapper1680 {
-  margin-left: 39rem;
+  height: 100%;
+  position: relative;
 }
-.screen6 .recommend-item:hover {
+.screen6 .plate-wrapper {
-  box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
-  z-index: 10;
-}
-.screen6 .recommend-image {
-  width: 100%;
-  height: 430rem;
-}
-.screen6 .recommend-info {
-  padding: 40rem 40rem 0;
-}
-.screen6 .recommend-info .title {
-  font-family: MicrosoftYaHei;
-  font-weight: 400;
-  font-size: 24rem;
-  line-height: 24rem;
-  color: #000000;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: 20rem;
-}
-.screen6 .recommend-info .abstracts {
-  font-family: MicrosoftYaHei;
-  font-weight: 400;
-  font-size: 14rem;
-  line-height: 14rem;
-  color: #666666;
-  margin-bottom: 33rem;
-}
-.screen6 .learn-more {
-  width: fit-content;
   display: flex;
-  align-items: center;
+  justify-content: space-between;
+}
+.screen6 .plate-item {
+  width: 325rem;
+  height: 302rem;
+  position: relative;
   cursor: pointer;
+  border-radius: 20rem;
 }
-.screen6 .learn-more .label {
+.screen6 .plate-item:hover {
-  font-size: 16rem;
+  overflow: hidden;
-  font-weight: 400;
+  box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
-  line-height: 40rem;
-  color: #111111;
-  letter-spacing: 3rem;
-  margin-right: 8rem;
 }
-.screen6 .learn-more .icon-wrapper {
+.screen6 .plate-item:hover img {
-  width: 40rem;
-  height: 40rem;
-}
-.screen6 .learn-more .icon-wrapper >>> .svg-wrapper {
-  width: 40rem;
-  height: 40rem;
-}
-.screen6 .recommend-image img {
   transition: transform 0.4s;
+  transform: scale(1.1, 1.1);
 }
-.screen6 >>> .learn-more:hover .group-hover\:translate-x-0\.5 {
+.screen6 .split-line {
-  --tw-translate-x: 2rem;
+  border-bottom: 1rem solid;
+  border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
 }
-.screen6 >>> .learn-more:hover .group-hover\:dashoffset-0 {
+.screen6 .join-btn-text {
-  stroke-dashoffset: 0;
+  background-image: linear-gradient(90deg, #FF0300, #FFAA05);
+  background-clip: text;
+  color: transparent;
 }
 </style>