合作

src/components/common/Footer.vue

@@ -2,45 +2,31 @@
     <div class="footer">
         <div class="container">
         <div class="footer-content">
-              <div class="footer-left">
-                     <div class="company">上海宅易丞鲸致网络科技有限公司</div>
-                <div class="line-one">全国统一客服热线：</div>
-                <div class="service-phone">400-921-8987</div>
-                <div>合作鲸致邮箱：mkt@lifejingzhi.com</div>
-                <div class="joinus">加入鲸致生活：hr@lifejingzhi.com</div>
-                <div class="joinus">地址：上海市浦东新区祖冲之路1505弄100号3幢5楼</div>
-
-            </div>
+            
             <div class="footer-right">
-             
+                  <div class="company">上海宅易丞鲸致网络科技有限公司</div>
                 <div class="qrcode-block">
                     <div class="qrcode-item">
-                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-xcx.png"/>
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/jzsh-xcx.png"/>
                         <div>鲸致生活小程序</div>
                     </div>
                      <div class="qrcode-item">
-                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-gzh.png"/>
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/jzsh-gzh.png"/>
                         <div>鲸致生活公众号</div>
                     </div>
-                     <div class="qrcode-item">
-                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-hz.png"/>
-                        <div>异业合作/机构采购</div>
-                    </div>
-                     <div class="qrcode-item">
-                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-bm.png"/>
-                        <div>家政从业人员报名</div>
-                    </div>
-                     <div class="qrcode-item">
-                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-zx.png"/>
-                        <div>加盟咨询联系</div>
-                    </div>
-                     <div class="qrcode-item">
-                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-jm.png"/>
-                        <div>加盟咨询联系</div>
-                    </div>
+                    
 
                 </div>
             </div>
+              <div class="footer-left">
+                
+                <div class="line-one">全国统一客服热线：</div>
+                <div class="service-phone">400-921-8987</div>
+                <div>合作鲸致邮箱：mkt@lifejingzhi.com</div>
+                <div class="joinus">加入鲸致生活：hr@lifejingzhi.com</div>
+                <div class="joinus">地址：上海市浦东新区祖冲之路1505弄100号3幢5楼</div>
+
+            </div>
           
 
         </div>
@@ -71,30 +57,34 @@
     /* height: 396px; */
     background: #00BDFF;
     color:#fff;
-    padding:50px 0 0;
+    padding:40px 0 0;
 }
 .footer-content{
     display: flex;
-    /* align-items: center; */
+    align-items: center;
     justify-content: space-between;
      /* height: 260px; */
      font-size: 14px;
-     padding:0 6px 8px 40px;
+     padding:0 6px 36px 40px;
 }
-.company{
+.footer-left{
+    flex:1;
     font-size: 16px;
-    margin-bottom:36px;
+}
+.company{
+    font-size: 20px;
+    margin-bottom:28px;
 }
 .line-one{
-    font-size: 16px;
-    line-height: 16px;
+    font-size: 18px;
+    line-height: 20px;
 }
 .service-phone{
-    font-size: 24px;
-    height: 24px;
-    line-height: 24px;
+    font-size: 30px;
+    height: 36px;
+    line-height: 36px;
     font-weight: bold;
-    margin:10px 0 36px;
+    margin:16px 0 36px;
 }
 .joinus{
     margin-top:14px;
@@ -109,30 +99,27 @@
 .copyright{
     margin-left:8px;
 }
-.footer-left{
-    flex:1;
-}
+
 .footer-right{
-   
+   margin-right:190px;
 }
 .qrcode-block{
    display: flex;
-   flex-wrap: wrap;
-    width:372px;
+   /* flex-wrap: wrap;
+    width:372px; */
 }
 .qrcode-item{
-    margin-right:20px;
+    margin-right:40px;
     text-align: center;
-    font-size: 12px;
-    margin-bottom:20px;
+    font-size: 16px;
     flex:1;
 }
 .qrcode-item:last-child{
     /* margin-left:-8px; */
 }
 .qrcode-item img{
-  width:84px;
-  height: 84px;
+  width:110px;
+  height: 110px;
   margin:0 0 10px 0;
 }
 </style>

src/components/common/FooterOld.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="footer">
+        <div class="container">
+        <div class="footer-content">
+              <div class="footer-left">
+                     <div class="company">上海宅易丞鲸致网络科技有限公司</div>
+                <div class="line-one">全国统一客服热线：</div>
+                <div class="service-phone">400-921-8987</div>
+                <div>合作鲸致邮箱：mkt@lifejingzhi.com</div>
+                <div class="joinus">加入鲸致生活：hr@lifejingzhi.com</div>
+                <div class="joinus">地址：上海市浦东新区祖冲之路1505弄100号3幢5楼</div>
+
+            </div>
+            <div class="footer-right">
+             
+                <div class="qrcode-block">
+                    <div class="qrcode-item">
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-xcx.png"/>
+                        <div>鲸致生活小程序</div>
+                    </div>
+                     <div class="qrcode-item">
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-gzh.png"/>
+                        <div>鲸致生活公众号</div>
+                    </div>
+                     <div class="qrcode-item">
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-hz.png"/>
+                        <div>异业合作/机构采购</div>
+                    </div>
+                     <div class="qrcode-item">
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-bm.png"/>
+                        <div>家政从业人员报名</div>
+                    </div>
+                     <div class="qrcode-item">
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-zx.png"/>
+                        <div>加盟咨询联系</div>
+                    </div>
+                     <div class="qrcode-item">
+                        <img src="https://mall.zhaijieshi.cc/file/jz-gw/code-jm.png"/>
+                        <div>加盟咨询联系</div>
+                    </div>
+
+                </div>
+            </div>
+          
+
+        </div>
+        <div class="tcp">沪ICP备 18034149号-2 <span class="copyright">copyright©2023 All Rights Reserved</span></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name:"Footer",
+        data(){
+            return {
+               
+            }
+        },
+       
+        created(){
+           
+        },
+        methods:{
+
+        }
+    }
+</script>
+<style scoped>
+.footer{
+    /* height: 396px; */
+    background: #00BDFF;
+    color:#fff;
+    padding:50px 0 0;
+}
+.footer-content{
+    display: flex;
+    /* align-items: center; */
+    justify-content: space-between;
+     /* height: 260px; */
+     font-size: 14px;
+     padding:0 6px 8px 40px;
+}
+.company{
+    font-size: 16px;
+    margin-bottom:36px;
+}
+.line-one{
+    font-size: 16px;
+    line-height: 16px;
+}
+.service-phone{
+    font-size: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-weight: bold;
+    margin:10px 0 36px;
+}
+.joinus{
+    margin-top:14px;
+}
+.tcp{
+   /* padding-top:30px; */
+   border-top:1px solid  #EBE6E1;
+   text-align: center;
+   line-height: 74px;
+   height: 74px;
+}
+.copyright{
+    margin-left:8px;
+}
+.footer-left{
+    flex:1;
+}
+.footer-right{
+   
+}
+.qrcode-block{
+   display: flex;
+   flex-wrap: wrap;
+    width:372px;
+}
+.qrcode-item{
+    margin-right:20px;
+    text-align: center;
+    font-size: 12px;
+    margin-bottom:20px;
+    flex:1;
+}
+.qrcode-item:last-child{
+    /* margin-left:-8px; */
+}
+.qrcode-item img{
+  width:84px;
+  height: 84px;
+  margin:0 0 10px 0;
+}
+</style>

src/components/common/Header.vue

@@ -9,6 +9,7 @@
             <div :class="[currentPage=='home'?'active-nav':'']" @click="goView('home')">首页</div>
             <div :class="[currentPage=='service'?'active-nav':'']" @click="goView('service')">服务</div>
             <div :class="[currentPage=='us'?'active-nav':'']" @click="goView('aboutUs')">我们</div>
+            <div :class="[currentPage=='hz'?'active-nav':'']" @click="goView('cooperation')">合作</div>
         </div>
          
     </div>

src/components/cooperation.vue

@@ -0,0 +1,223 @@
+<template>
+  <div style="background:#fff">
+    <jz-header :currentPage="'hz'"></jz-header>
+    <div class="hz-page">
+      <div class="container main-body">
+        <div class="nav-menu">
+          <img src="https://mall.zhaijieshi.cc/file/jz-gw/hz-hand.png" class="hz-hand" />
+          <div :class="[activeNav==0?'active-nav':'','nav-item']" @click="switchNav(0)">
+            <div class="nav-title">异业合作/机构采购</div>
+            <div class="arrow-block" v-show="activeNav==0">
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow.png"
+                class="arrow-right"
+              />
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow-left.png"
+                class="arrow-left"
+              />
+            </div>
+          </div>
+          <div :class="[activeNav==1?'active-nav':'','nav-item']" @click="switchNav(1)">
+            <div class="nav-title">家政从业人员报名</div>
+            <div class="arrow-block" v-show="activeNav==1">
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow.png"
+                class="arrow-right"
+              />
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow-left.png"
+                class="arrow-left"
+              />
+            </div>
+          </div>
+          <div :class="[activeNav==2?'active-nav':'','nav-item']" @click="switchNav(2)">
+            <div class="nav-title">
+              <div>加盟咨询</div>
+              <div class="nav-tag">总部</div>
+            </div>
+            <div class="arrow-block" v-show="activeNav==2">
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow.png"
+                class="arrow-right"
+              />
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow-left.png"
+                class="arrow-left"
+              />
+            </div>
+          </div>
+          <div :class="[activeNav==3?'active-nav':'','nav-item']" @click="switchNav(3)">
+            <div class="nav-title">加盟咨询</div>
+            <div class="arrow-block" v-show="activeNav==3">
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow.png"
+                class="arrow-right"
+              />
+              <img
+                src="https://mall.zhaijieshi.cc/file/jz-gw/hz-icon-arrow-left.png"
+                class="arrow-left"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="main-content" :style="'background-image:url('+bgUrl+')'">
+          <div class="code-wrapper">
+            <img :src="codeUrl" />
+            <div>扫码联系</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <jz-footer></jz-footer>
+  </div>
+</template>
+<script>
+import jzHeader from "@/components/common/Header";
+import jzFooter from "@/components/common/Footer";
+export default {
+  data() {
+    return {
+      activeNav: 0,
+      bgUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-yyhz-bg.png",
+      codeUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-code-yehz.png",
+      urlList: [
+        {
+          bgUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-yyhz-bg.png",
+          codeUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-code-yehz.png"
+        },
+        {
+          bgUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-jzcy-bg.png",
+          codeUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-code-jzcy.png"
+        },
+        {
+          bgUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-jmzx1-bg.png",
+          codeUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-code-jmzx1.png"
+        },
+        {
+          bgUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-jmzx2-bg.png",
+          codeUrl: "https://mall.zhaijieshi.cc/file/jz-gw/hz-code-jmzx2.png"
+        }
+      ]
+    };
+  },
+  methods: {
+    switchNav(id) {
+      this.activeNav = id;
+      this.bgUrl = this.urlList[id].bgUrl;
+      this.codeUrl = this.urlList[id].codeUrl;
+    }
+  },
+  components: {
+    jzHeader,
+    jzFooter
+  }
+};
+</script>
+<style  scoped>
+.main-body {
+  display: flex;
+  height: 712px;
+}
+.nav-menu {
+  width: 224px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 30px;
+  background: #F9FBFD;
+}
+.hz-hand {
+  width: 72px;
+  height: 54px;
+  margin-bottom: 6px;
+}
+.nav-item {
+  width: 164px;
+  height: 45px;
+  color: #333333;
+  border-radius: 10px;
+  line-height: 45px;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 24px;
+  position: relative;
+}
+.active-nav.nav-item {
+  background: #00bdff;
+  color: #fff;
+}
+.nav-title {
+  display: flex;
+  align-items: center;
+  width: 164px;
+  justify-content: center;
+  cursor: pointer;
+}
+.nav-tag {
+  padding: 2px 4px;
+  line-height: 14px;
+  background: #00bdff;
+  border-radius: 3px;
+  font-size: 10px;
+  color: #fff;
+  margin-left: 6px;
+  box-sizing: border-box;
+}
+.active-nav.nav-item .nav-tag {
+  border: 1px solid #fff;
+  padding: 1px 4px;
+}
+.main-content {
+  width: 756px;
+  height: 712px;
+  background: url("https://mall.zhaijieshi.cc/file/jz-gw/hz-yyhz-bg.png")
+    no-repeat;
+  background-size: 100% 100%;
+  padding: 114px 0 0 46px;
+  opacity: 1;
+ transition: background 0.3s;
+}
+.code-wrapper {
+  width: 200px;
+  height: 255px;
+  background: #1d202a;
+  border-radius: 10px;
+  border: 1px solid #000000;
+  padding: 50px 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+.code-wrapper img {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 20px;
+}
+.code-wrapper div {
+  font-size: 14px;
+  color: #ffffff;
+  text-align: center;
+}
+.arrow-block {
+  height: 66px;
+  display: flex;
+  align-items: center;
+  width: 51px;
+  position: absolute;
+  left: 191px;
+  top: -10px;
+  justify-content: space-between;
+ opacity: 1;
+ transition: opacity 1s ease-in-out;
+}
+.arrow-right {
+  height: 66px;
+  width: 21px;
+}
+.arrow-left {
+  width: 10px;
+  height: 20px;
+}
+</style>

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 import home from '@/components/home'
 import service from '@/components/service'
 import aboutUs from '@/components/aboutUs'
+import cooperation from '@/components/cooperation'
 
 Vue.use(Router)
 const originalPush = Router.prototype.push;
@@ -25,6 +26,11 @@ export default new Router({
         component: service
       },
       {
+        path: '/cooperation',
+        name: 'cooperation',
+        component: cooperation
+      },
+      {
         path: '/aboutUs',
         name: 'aboutUs',
         component: aboutUs