首页页面优化

package-lock.json

@@ -13,7 +13,9 @@
         "core-js": "^3.6.5",
         "jquery": "^3.6.0",
         "moment": "^2.29.1",
+        "popmotion": "^9.3.5",
         "vue": "^2.6.11",
+        "vue-cropper": "^0.5.8",
         "vue-router": "3.0",
         "vuex": "^3.4.0"
       },
@@ -7254,6 +7256,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framesync": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/framesync/-/framesync-5.3.0.tgz",
+      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/framesync/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -7701,6 +7716,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -11463,6 +11483,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/popmotion": {
+      "version": "9.3.5",
+      "resolved": "https://registry.npmmirror.com/popmotion/-/popmotion-9.3.5.tgz",
+      "integrity": "sha512-Lr2rq8OP0j8D7CO2/6eO17ALeFCxjx1hfTGbMg+TLqFj+KZSGOoj6gRBVTzDINGqo6LQrORQSSSDaCL5OrB3bw==",
+      "dependencies": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/popmotion/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -13918,6 +13954,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/style-value-types/-/style-value-types-4.1.4.tgz",
+      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/style-value-types/node_modules/tslib": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+    },
     "node_modules/stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -14934,6 +14984,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "node_modules/vue-cropper": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmmirror.com/vue-cropper/-/vue-cropper-0.5.8.tgz",
+      "integrity": "sha512-Xgi/aLQCcNCiBTUdovy/i4LWx0G7fQnAENBpDWA3J4i87Zlk9DJRksXrClsQ6nnaFRfQVkMimij5GEvAMaXdYw=="
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -22066,6 +22121,21 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framesync": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/framesync/-/framesync-5.3.0.tgz",
+      "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -22430,6 +22500,11 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
@@ -25478,6 +25553,24 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popmotion": {
+      "version": "9.3.5",
+      "resolved": "https://registry.npmmirror.com/popmotion/-/popmotion-9.3.5.tgz",
+      "integrity": "sha512-Lr2rq8OP0j8D7CO2/6eO17ALeFCxjx1hfTGbMg+TLqFj+KZSGOoj6gRBVTzDINGqo6LQrORQSSSDaCL5OrB3bw==",
+      "requires": {
+        "framesync": "5.3.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "4.1.4",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -27614,6 +27707,22 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-value-types": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/style-value-types/-/style-value-types-4.1.4.tgz",
+      "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -28434,6 +28543,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-cropper": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmmirror.com/vue-cropper/-/vue-cropper-0.5.8.tgz",
+      "integrity": "sha512-Xgi/aLQCcNCiBTUdovy/i4LWx0G7fQnAENBpDWA3J4i87Zlk9DJRksXrClsQ6nnaFRfQVkMimij5GEvAMaXdYw=="
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.6.5",
     "jquery": "^3.6.0",
     "moment": "^2.29.1",
+    "popmotion": "^9.3.5",
     "vue": "^2.6.11",
     "vue-cropper": "^0.5.8",
     "vue-router": "3.0",

src/components/main/index.vue

@@ -8,20 +8,151 @@
       <div class="middleslogan" :style="{ opacity: isshow ? '1' : '0' }">
         <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
       </div>
-      <div class="bottominfo">
+      <div
-        Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
+        id="toAboutBill"
-        <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
+        style="height: 84px; width: 1200px; position: absolute; bottom: 0"
-          >京ICP备16043923号-9</a
+      ></div>
-        >
+      <!-- <div class="bottominfo">
+				Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
+				<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备16043923号-9</a>
+			</div> -->
+    </div>
+    <div class="navigationBar" ref="navigationBar" id="navigationBar">
+      <!-- <ul>
+				<li @click="toTargetLocation('aboutBill')">关于一手单</li>
+				<li @click="toTargetLocation('cooperativeBrand')">合作品牌</li>
+				<li @click="toTargetLocation('businessLandscape')">业务版图</li>
+				<li @click="toTargetLocation('relationUs')">联系我们</li>
+			</ul> -->
+      <a-anchor :affix="true">
+        <a-anchor-link
+          @click.prevent="false"
+          href="#toAboutBill"
+          title="关于一手单"
+        />
+        <a-anchor-link
+          @click.prevent="false"
+          href="#cooperativeBrand"
+          title="合作品牌"
+        />
+        <a-anchor-link
+          @click.prevent="false"
+          href="#businessLandscape"
+          title="业务版图"
+        />
+        <a-anchor-link
+          @click.prevent="false"
+          href="#relationUs"
+          title="联系我们"
+        />
+      </a-anchor>
+    </div>
+
+    <div class="aboutBill" id="aboutBill">
+      <div class="w">
+        <div class="title">关于一手单</div>
+        <div class="content">
+          <p>
+            伯才一手单，隶属于郑州伯才人力科技有限公司，是一个专门服务同业合作伙伴的综合平台——一个专门服务代理的平台，平台为合作伙伴提供交付全流程的产品和服务，是伯才供应链产品矩阵中的旗舰产品，平台通过直签、联合派遣和战略合作等方式，严选上线项目，深度介入服务的每一个环节，为合作伙伴的顺利交付保驾护航。
+          </p>
+          <p>
+            郑州伯才人力科技有限公司，是一家人力资源服务行业的数字化平台企业，前身为北京矩阵动力科技有公司。项目与2015年5月在郑州启动，并于2016年5月在背景正式注册成立公司，开始公司化运作。旗下有人海（北京）企业管理有限公司、江西人海企业管理有限公司等多家企业服务业务公司。2021年启用全新业务品牌——伯才。新品牌、新里程，品牌升级，但初心不变，伯才人以崭新的面貌更好的服务老乡、成就伙伴
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="cooperativeBrand" id="cooperativeBrand">
+      <div class="w">
+        <div class="title">合作品牌</div>
+        <div class="content">
+          <ul class="clearfix">
+            <li v-for="item in cooperativeImg" :key="item">
+              <img :src="`../../../${item}`" alt="" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="businessLandscape" id="businessLandscape">
+      <div class="w">
+        <div class="title">业务版图</div>
+        <div class="content">
+          <div class="left">
+            <p>合作项目覆盖</p>
+            <p>
+              华东、华南、华中、华北、西南、西北6大区域辐射18个省及直辖市，触达城市100+
+            </p>
+          </div>
+          <div class="right">
+            <img src="../../../static/img/map.svg" alt="" />
+          </div>
+        </div>
       </div>
     </div>
+    <div class="relationUs" id="relationUs">
+      <div class="w">
+        <div class="title">联系我们</div>
+        <div class="content">
+          <div class="left">
+            <p>总部地址：郑州市管城回族区东站南街升龙广场2号楼A座1116室</p>
+            <p>接待地址：伯才人力资源服务中心（航空港区店）</p>
+            <p>联系电话：168 3666 8888</p>
+          </div>
+          <div class="right">
+            <span
+              ><img src="../../../static/img/【伯才一手单】公众号.png" alt="" />
+              <p>伯才一手单公众号</p></span
+            >
+            <span
+              ><img src="../../../static/img/【伯才一手单】小程序.png" alt="" />
+              <p>伯才一手单小程序</p></span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="banner">
+      <div class="w">
+        <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
+      </div>
+    </div>
+    <footer>
+      <div class="w">
+        <ul>
+          <li @click="totop"><router-link to="/list">一手职位</router-link></li>
+          <li></li>
+          <li @click="totop">
+            <router-link to="/serviceoutlets">服务网点</router-link>
+          </li>
+          <li></li>
+          <li @click="totop">
+            <router-link to="/aboutus">关于我们</router-link>
+          </li>
+        </ul>
+        <div>
+          Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
+          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
+            >京ICP备16043923号-9</a
+          >
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script>
+import Vue from "vue";
+
+import { animate } from "popmotion";
+const path = require("path");
+const files = require.context("../../../static/img", false, /.png$/);
+
+// const modules = {}
+
+console.dir(Vue);
 export default {
   // 组件名称
-  name: "main",
+  name: "Main",
   // 局部注册的组件
   components: {},
   // 组件参数 接收来自父组件的数据
@@ -35,6 +166,7 @@ export default {
         require("../../assets/banner2.png"),
         require("../../assets/banner3.png"),
       ],
+      cooperativeImg: [],
     };
   },
   // 计算属性
@@ -54,13 +186,60 @@ export default {
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
    */
-  mounted() {},
+  mounted() {
+    this.getCooperativeImg();
+    // console.log(navigationBar);
+  },
   // 组件方法
-  methods: {},
+  methods: {
+    changeStyle(e) {
+      console.log(e);
+      console.log(1);
+    },
+
+    getCooperativeImg() {
+      files.keys().forEach((key) => {
+        const names = path.basename(key, ".png"); //返回文件名 不含后缀名
+        let content = files(key).default || files(key);
+        if (
+          names.indexOf("imgList") != -1 &&
+          names.substr(names.length - 1, 1) == "1"
+        ) {
+          this.cooperativeImg.push(content);
+        }
+      });
+    },
+    toTargetLocation(target) {
+      // console.log(123);
+      const now = window.scrollY;
+      // 2. 目标位置（文章信息区域的高度）
+      const dist = document.getElementById(target).getBoundingClientRect().top;
+      console.log(dist);
+      animate({
+        from: now, // 当前的位置
+        to: dist, // 目标位置
+        onUpdate: (latest) => window.scrollTo(0, latest),
+      });
+    },
+    totop() {
+      // console.log(window);
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      // window.body.scrollY = 0;
+    },
+  },
 };
 </script>
 
 <style scoped lang="less">
+.clearfix:after {
+  /*伪元素是行内元素 正常浏览器清除浮动方法*/
+  content: "";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
 .main-container {
   overflow: hidden;
   .bgimg {
@@ -68,10 +247,10 @@ export default {
     overflow: hidden;
     width: 100vw;
     height: calc(100% - 80px);
-    height: 100%;
+    // height: 100%;
+    height: calc(100vh - 80px);
     // background: url("../../assets/banner1.png") no-repeat center;
     img {
-      // width: 100%;
       width: 1920px !important;
       height: calc(100vh - 80px);
     }
@@ -97,5 +276,198 @@ export default {
       color: #fff;
     }
   }
+  /deep/ .navigationBar {
+    overflow: hidden;
+    width: 1200px;
+    height: 84px;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+    transform: translateX(-50%);
+    z-index: 999;
+    .ant-anchor {
+      display: flex;
+      height: 84px;
+      margin: 0 auto;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      > div {
+        margin: 0 52px;
+        font-size: 16px;
+      }
+      .ant-anchor-link-active > .ant-anchor-link-title {
+        color: #ff6a00;
+      }
+      .ant-anchor-ink {
+        display: none;
+      }
+    }
+  }
+  .aboutBill,
+  .cooperativeBrand,
+  .businessLandscape,
+  .relationUs {
+    padding-top: 25px;
+    padding-bottom: 70px;
+    background-color: #fff;
+    .title {
+      position: relative;
+      text-align: center;
+      font-size: 24px;
+      line-height: 33px;
+      padding-bottom: 12px;
+      &:after {
+        content: "";
+        display: block;
+        width: 30px;
+        height: 2px;
+        position: absolute;
+        background-color: #ff6a00;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    .content {
+      margin-top: 50px;
+      font-size: 18px;
+      line-height: 40px;
+      > p {
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .cooperativeBrand {
+    padding-top: 100px;
+    // padding-bottom: 96px;
+    height: 740px;
+    background: url("../../../static/img/cooperativeBrandBg.png") no-repeat 100%;
+    .content {
+      ul {
+        li {
+          float: left;
+          width: 186px;
+          height: 88px;
+          margin-top: 16px;
+          border-radius: 8px;
+          &:not(li:nth-child(6n)) {
+            margin-right: 16px;
+          }
+
+          &:hover {
+            background-color: #fff;
+            box-shadow: 0px 0px 12px 3px #ddd;
+          }
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .businessLandscape {
+    .title {
+      margin-top: 80px;
+    }
+    .content {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 330px;
+        font-size: 20px;
+        p:last-child {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .relationUs {
+    background: url("../../../static/img/relationUsBg.png") no-repeat 100% 100%;
+    padding-bottom: 126px;
+    .title {
+      padding-top: 80px;
+    }
+    .content {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 72px;
+      .left {
+        // display: flex;
+      }
+      .right {
+        display: flex;
+        justify-content: space-around;
+        > span {
+          text-align: center;
+          margin-right: 36px;
+        }
+      }
+    }
+  }
+  .banner {
+    height: 72px;
+    margin-top: 20px;
+    background-color: rgba(255, 106, 0);
+    margin-bottom: -20px;
+    .w {
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      i {
+        font-size: 32px;
+        color: #fff;
+      }
+      img:last-child {
+        width: 173px;
+        height: 42px;
+        margin-right: 110px;
+      }
+    }
+    // background-color: black;
+  }
+  footer {
+    padding: 30px;
+    margin-top: 20px;
+    .w {
+      ul {
+        display: flex;
+        justify-content: center;
+        li {
+          font-size: 16px;
+          text-align: center;
+          color: #4d575e;
+          line-height: 25px;
+        }
+        li:nth-of-type(2n) {
+          width: 1px;
+          height: 20px;
+          margin: 5px 54px;
+          background-color: #4d575e;
+        }
+      }
+      div {
+        text-align: center;
+        margin-top: 16px;
+        color: #4d575e;
+        font-size: 14px;
+        i {
+          display: inline-block;
+          vertical-align: middle;
+          width: 1px;
+          height: 16px;
+          margin: 0 10px;
+          background-color: #4d575e;
+        }
+      }
+    }
+  }
 }
 </style>

src/components/main/index1.vue

@@ -8,25 +8,148 @@
       <div class="middleslogan" :style="{ opacity: isshow ? '1' : '0' }">
         <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
       </div>
-      <div class="bottominfo">
+      <div
-        Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
+        id="toAboutBill"
-        <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
+        style="height: 84px; width: 1200px; position: absolute; bottom: 0"
-          >京ICP备16043923号-9</a
+      ></div>
-        >
+      <!-- <div class="bottominfo">
+				Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
+				<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备16043923号-9</a>
+			</div> -->
+    </div>
+    <div class="navigationBar" ref="navigationBar" id="navigationBar">
+      <!-- <ul>
+				<li @click="toTargetLocation('aboutBill')">关于一手单</li>
+				<li @click="toTargetLocation('cooperativeBrand')">合作品牌</li>
+				<li @click="toTargetLocation('businessLandscape')">业务版图</li>
+				<li @click="toTargetLocation('relationUs')">联系我们</li>
+			</ul> -->
+      <a-anchor :affix="true">
+        <a-anchor-link
+          @click.prevent="false"
+          href="#toAboutBill"
+          title="关于一手单"
+        />
+        <a-anchor-link
+          @click.prevent="false"
+          href="#cooperativeBrand"
+          title="合作品牌"
+        />
+        <a-anchor-link
+          @click.prevent="false"
+          href="#businessLandscape"
+          title="业务版图"
+        />
+        <a-anchor-link
+          @click.prevent="false"
+          href="#relationUs"
+          title="联系我们"
+        />
+      </a-anchor>
+    </div>
+
+    <div class="aboutBill" id="aboutBill">
+      <div class="w">
+        <div class="title">关于一手单</div>
+        <div class="content">
+          <p>
+            伯才一手单，隶属于郑州伯才人力科技有限公司，是一个专门服务同业合作伙伴的综合平台——一个专门服务代理的平台，平台为合作伙伴提供交付全流程的产品和服务，是伯才供应链产品矩阵中的旗舰产品，平台通过直签、联合派遣和战略合作等方式，严选上线项目，深度介入服务的每一个环节，为合作伙伴的顺利交付保驾护航。
+          </p>
+          <p>
+            郑州伯才人力科技有限公司，是一家人力资源服务行业的数字化平台企业，前身为北京矩阵动力科技有公司。项目与2015年5月在郑州启动，并于2016年5月在背景正式注册成立公司，开始公司化运作。旗下有人海（北京）企业管理有限公司、江西人海企业管理有限公司等多家企业服务业务公司。2021年启用全新业务品牌——伯才。新品牌、新里程，品牌升级，但初心不变，伯才人以崭新的面貌更好的服务老乡、成就伙伴
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="cooperativeBrand" id="cooperativeBrand">
+      <div class="w">
+        <div class="title">合作品牌</div>
+        <div class="content">
+          <ul class="clearfix">
+            <li v-for="item in cooperativeImg" :key="item">
+              <img :src="`../../../${item}`" alt="" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="businessLandscape" id="businessLandscape">
+      <div class="w">
+        <div class="title">业务版图</div>
+        <div class="content">
+          <div class="left">
+            <p>合作项目覆盖</p>
+            <p>
+              华东、华南、华中、华北、西南、西北6大区域辐射18个省及直辖市，触达城市100+
+            </p>
+          </div>
+          <div class="right">
+            <img src="../../../static/img/map.svg" alt="" />
+          </div>
+        </div>
       </div>
     </div>
-    <div class="navigationBar" ref="navigationBar">
+    <div class="relationUs" id="relationUs">
-      <ul>
+      <div class="w">
-        <li>关于一手单</li>
+        <div class="title">联系我们</div>
-        <li>合作品牌</li>
+        <div class="content">
-        <li>业务版图</li>
+          <div class="left">
-        <li>联系我们</li>
+            <p>总部地址：郑州市管城回族区东站南街升龙广场2号楼A座1116室</p>
-      </ul>
+            <p>接待地址：伯才人力资源服务中心（航空港区店）</p>
+            <p>联系电话：168 3666 8888</p>
+          </div>
+          <div class="right">
+            <span
+              ><img src="../../../static/img/【伯才一手单】公众号.png" alt="" />
+              <p>伯才一手单公众号</p></span
+            >
+            <span
+              ><img src="../../../static/img/【伯才一手单】小程序.png" alt="" />
+              <p>伯才一手单小程序</p></span
+            >
+          </div>
+        </div>
+      </div>
     </div>
+    <div class="banner">
+      <div class="w">
+        <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
+      </div>
+    </div>
+    <footer>
+      <div class="w">
+        <ul>
+          <li @click="totop"><router-link to="/list">一手职位</router-link></li>
+          <li></li>
+          <li @click="totop">
+            <router-link to="/serviceoutlets">服务网点</router-link>
+          </li>
+          <li></li>
+          <li @click="totop">
+            <router-link to="/aboutus">关于我们</router-link>
+          </li>
+        </ul>
+        <div>
+          Copyright © 2015 - 2022 Matripe. All Rights Reserved. <i></i>
+          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
+            >京ICP备16043923号-9</a
+          >
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script>
+import Vue from "vue";
+
+import { animate } from "popmotion";
+const path = require("path");
+const files = require.context("../../../static/img", false, /.png$/);
+
+// const modules = {}
+
+console.dir(Vue);
 export default {
   // 组件名称
   name: "Main",
@@ -43,6 +166,7 @@ export default {
         require("../../assets/banner2.png"),
         require("../../assets/banner3.png"),
       ],
+      cooperativeImg: [],
     };
   },
   // 计算属性
@@ -63,12 +187,7 @@ export default {
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
    */
   mounted() {
-    let navigationBar = this.$refs.navigationBar;
+    this.getCooperativeImg();
-    if (this.$route.fullPath == "/main1") {
-      window.addEventListener("scroll", function () {
-        console.log(navigationBar.screenTop);
-      });
-    }
     // console.log(navigationBar);
   },
   // 组件方法
@@ -77,11 +196,50 @@ export default {
       console.log(e);
       console.log(1);
     },
+
+    getCooperativeImg() {
+      files.keys().forEach((key) => {
+        const names = path.basename(key, ".png"); //返回文件名 不含后缀名
+        let content = files(key).default || files(key);
+        if (
+          names.indexOf("imgList") != -1 &&
+          names.substr(names.length - 1, 1) == "1"
+        ) {
+          this.cooperativeImg.push(content);
+        }
+      });
+    },
+    toTargetLocation(target) {
+      // console.log(123);
+      const now = window.scrollY;
+      // 2. 目标位置（文章信息区域的高度）
+      const dist = document.getElementById(target).getBoundingClientRect().top;
+      console.log(dist);
+      animate({
+        from: now, // 当前的位置
+        to: dist, // 目标位置
+        onUpdate: (latest) => window.scrollTo(0, latest),
+      });
+    },
+    totop() {
+      // console.log(window);
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+      // window.body.scrollY = 0;
+    },
   },
 };
 </script>
 
 <style scoped lang="less">
+.clearfix:after {
+  /*伪元素是行内元素 正常浏览器清除浮动方法*/
+  content: "";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
 .main-container {
   overflow: hidden;
   .bgimg {
@@ -89,7 +247,8 @@ export default {
     overflow: hidden;
     width: 100vw;
     height: calc(100% - 80px);
-    height: 100%;
+    // height: 100%;
+    height: calc(100vh - 80px);
     // background: url("../../assets/banner1.png") no-repeat center;
     img {
       width: 1920px !important;
@@ -117,17 +276,196 @@ export default {
       color: #fff;
     }
   }
-  .navigationBar {
+  /deep/ .navigationBar {
-    > ul {
+    overflow: hidden;
+    width: 1200px;
+    height: 84px;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
+    transform: translateX(-50%);
+    z-index: 999;
+    .ant-anchor {
       display: flex;
+      height: 84px;
       margin: 0 auto;
       justify-content: center;
       align-items: center;
-      width: 1200px;
-      height: 96px;
       background-color: #fff;
-      li {
+      > div {
         margin: 0 52px;
+        font-size: 16px;
+      }
+      .ant-anchor-link-active > .ant-anchor-link-title {
+        color: #ff6a00;
+      }
+      .ant-anchor-ink {
+        display: none;
+      }
+    }
+  }
+  .aboutBill,
+  .cooperativeBrand,
+  .businessLandscape,
+  .relationUs {
+    padding-top: 25px;
+    padding-bottom: 70px;
+    background-color: #fff;
+    .title {
+      position: relative;
+      text-align: center;
+      font-size: 24px;
+      line-height: 33px;
+      padding-bottom: 12px;
+      &:after {
+        content: "";
+        display: block;
+        width: 30px;
+        height: 2px;
+        position: absolute;
+        background-color: #ff6a00;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+    .content {
+      margin-top: 50px;
+      font-size: 18px;
+      line-height: 40px;
+      > p {
+        margin-bottom: 20px;
+      }
+    }
+  }
+  .cooperativeBrand {
+    padding-top: 100px;
+    // padding-bottom: 96px;
+    height: 740px;
+    background: url("../../../static/img/cooperativeBrandBg.png") no-repeat 100%;
+    .content {
+      ul {
+        li {
+          float: left;
+          width: 186px;
+          height: 88px;
+          margin-top: 16px;
+          border-radius: 8px;
+          &:not(li:nth-child(6n)) {
+            margin-right: 16px;
+          }
+
+          &:hover {
+            background-color: #fff;
+            box-shadow: 0px 0px 12px 3px #ddd;
+          }
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .businessLandscape {
+    .title {
+      margin-top: 80px;
+    }
+    .content {
+      display: flex;
+      justify-content: space-between;
+      .left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 330px;
+        font-size: 20px;
+        p:last-child {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .relationUs {
+    background: url("../../../static/img/relationUsBg.png") no-repeat 100% 100%;
+    padding-bottom: 126px;
+    .title {
+      padding-top: 80px;
+    }
+    .content {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 72px;
+      .left {
+        // display: flex;
+      }
+      .right {
+        display: flex;
+        justify-content: space-around;
+        > span {
+          text-align: center;
+          margin-right: 36px;
+        }
+      }
+    }
+  }
+  .banner {
+    height: 72px;
+    margin-top: 20px;
+    background-color: rgba(255, 106, 0);
+    margin-bottom: -20px;
+    .w {
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      i {
+        font-size: 32px;
+        color: #fff;
+      }
+      img:last-child {
+        width: 173px;
+        height: 42px;
+        margin-right: 110px;
+      }
+    }
+    // background-color: black;
+  }
+  footer {
+    padding: 30px;
+    margin-top: 20px;
+    .w {
+      ul {
+        display: flex;
+        justify-content: center;
+        li {
+          font-size: 16px;
+          text-align: center;
+          color: #4d575e;
+          line-height: 25px;
+        }
+        li:nth-of-type(2n) {
+          width: 1px;
+          height: 20px;
+          margin: 5px 54px;
+          background-color: #4d575e;
+        }
+      }
+      div {
+        text-align: center;
+        margin-top: 16px;
+        color: #4d575e;
+        font-size: 14px;
+        i {
+          display: inline-block;
+          vertical-align: middle;
+          width: 1px;
+          height: 16px;
+          margin: 0 10px;
+          background-color: #4d575e;
+        }
       }
     }
   }

src/utils/request.js

@@ -12,8 +12,8 @@ console.log(baseURL);
 axios.defaults.withCredentials = true; //添加这行代码
 // console.log(axios);
 const service = axios.create({
-  baseURL: "/api_prod", // url = base url + request url
+  // baseURL: "/api_prod", // url = base url + request url
-  // baseURL: baseURL, //  baseURL: "/api", // url = base url + request url
+  baseURL: baseURL, //  baseURL: "/api", // url = base url + request url
   withCredentials: true, // send cookies when cross-domain requests
   timeout: 10000, // request timeout
   crossDomain: true,

src/views/main.vue

@@ -31,6 +31,13 @@
               >
             </li>
             <li>
+              <router-link
+                to="/mybill"
+                :class="routertitleindex === 5 ? 'titleactiveafter' : ''"
+                >我的报名
+              </router-link>
+            </li>
+            <!-- <li>
               <router-link to="/serviceoutlets"
                 ><a
                   href="javascript:;"
@@ -47,7 +54,7 @@
                   >关于我们</a
                 >
               </router-link>
-            </li>
+            </li> -->
           </ul>
         </span>
 
@@ -99,7 +106,7 @@
             ></span
           >
         </span>
-        <span class="navigationright">
+        <!-- <span class="navigationright">
           <ul>
             <li>
               <router-link
@@ -116,7 +123,7 @@
               </router-link>
             </li>
           </ul>
-        </span>
+        </span> -->
       </div>
     </div>
     <!-- 搜索栏 -->
@@ -311,15 +318,21 @@ export default {
         console.log("ischange");
         console.log(to);
         console.log(from);
+        console.dir(this.navigationBarLocation);
+        window.addEventListener("scroll", this.navigationBarLocation);
         window.addEventListener("scroll", this.windowScroll); //监听页面滚动
         if (to.fullPath == "/list") {
+          window.removeEventListener("scroll", this.navigationBarLocation);
           return;
-        } else {
+        } else if (to.fullPath == "/main") {
           window.removeEventListener("scroll", this.windowScroll);
-          console.log("isremove");
+          return;
         }
+        window.removeEventListener("scroll", this.navigationBarLocation);
+        window.removeEventListener("scroll", this.windowScroll);
       },
       deep: true,
+      immediate: true,
     },
     // isLogin() {
     //   this.isLogin = JSON.parse(localStorage.getItem("LOGIN_DATA"));
@@ -384,6 +397,32 @@ export default {
         }
       }
     },
+    navigationBarLocation() {
+      let navigationBar = document.getElementById("navigationBar");
+      let aboutBill = document.getElementById("aboutBill");
+      // console.log(navigationBar.getBoundingClientRect().top);
+      console.log(aboutBill);
+      console.log(aboutBill.getBoundingClientRect().top);
+      if (this.$route.fullPath == "/main") {
+        if (
+          navigationBar.getBoundingClientRect().top <= 0 &&
+          aboutBill.getBoundingClientRect().top < 84
+        ) {
+          navigationBar.style.position = "fixed";
+          navigationBar.style.top = "0px";
+          navigationBar.style.boxShadow = "0 0 10px 0 #eee";
+        } else if (
+          navigationBar.getBoundingClientRect().top == 0 &&
+          aboutBill.getBoundingClientRect().top >= 84
+        ) {
+          // console.log('isbig');
+          navigationBar.style.position = "absolute";
+          navigationBar.style.top = "unset";
+          navigationBar.style.bottom = "0px";
+          navigationBar.style.boxShadow = "none";
+        }
+      }
+    },
     // 获取工作列表
     async getJobList(newdata) {
       this.isspinning = true;

static/img/定位.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="19px" viewBox="0 0 14 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>定位</title>
+    <g id="一手单页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页（下滑）" transform="translate(-818.000000, -3321.000000)" fill="#FF6A00" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(360.000000, 3315.000000)">
+                <g id="地图-地标备份" transform="translate(458.000000, 6.000000)">
+                    <path d="M7,0 C3.13964945,0 0,3.13477988 0,6.98782001 C0,8.41825355 0.430956147,9.79512192 1.23686849,10.9534687 C1.27704237,11.02286 1.31782494,11.0898165 1.36591186,11.1549468 L6.47529872,17.8785932 C6.61408121,18.032593 6.80034192,18.1178103 7,18.1178103 C7.19721114,18.1178103 7.38468924,18.0319843 7.54721083,17.8499845 L12.6328586,11.1543381 C12.6827716,11.0873817 12.7259889,11.0143383 12.7491194,10.9717296 C13.565149,9.80365046 14.0018769,8.41270938 14,6.98782001 C14,3.13477988 10.8597297,0 7,0 Z M6.99999392,9.4865135 C5.62093454,9.48584573 4.50249403,8.36931102 4.49947435,6.9902548 C4.53608413,5.63573427 5.64467439,4.55670197 6.99968957,4.55670197 C8.35470475,4.55670197 9.46329501,5.63573427 9.49990479,6.9902548 C9.49655093,8.36883581 8.37857865,9.48490261 6.99999392,9.4859048 L6.99999392,9.4865135 Z" id="定位"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>