'招商加盟'

pages/cooperate/index.vue

@@ -1,95 +1,63 @@
 <template>
-  <section class="New-container">
-    <div class="banner-img">
-      <img
-        src="http://res.training.luojigou.vip/FgJ6N8Rwz8RuK23ONJm8QCdedSe5?imageView2/0/q/50|imageslim"
-        alt=""
-      >
-      <div class="new-info">
+  <div class="coopetate">
+    <common-banner
+      :img="bgImg"
+      :height="324">
+      <h2>加盟合作</h2>
+    </common-banner>
+    <!-- 项目介绍 -->
+    <div class="project">
+      <title-content :title="'项目介绍'" :titleSub="'PROJECT INTRODUCTION'"></title-content>
+      <div class="p-content w1200">
         <div class="left">
-          <h3>中德加盟合作</h3>
-          <!-- <img
-            src="http://res.training.luojigou.vip/Fgfeo_GpH9h7tu1j3xfKnim_IlhF?imageView2/0/q/50|imageslim"
-            alt=""
-          > -->
+          <img :src="projectImg" alt="" srcset="">          
         </div>
         <div class="right">
-          <div class="submit-area">
-            <div class="label">加盟申请</div>
-            <div class="phone-num">
-              <img
-                src="http://res.training.luojigou.vip/FmUjRlN7yn8o8HkXV21yOAJt-2C0?imageView2/0/q/50|imageslim"
-                alt=""
-              >
-              <div class="num">400-6807300</div>
-            </div>
-            <div class="form">
-              <el-form :model="form" :rules="rules" ref="ruleForm">
-                <el-form-item prop="name">
-                  <el-input placeholder="姓名" v-model="form.name"></el-input>
-                </el-form-item>
-                <el-form-item prop="phone">
-                  <el-input placeholder="手机号" v-model="form.phone"></el-input>
-                </el-form-item>
-                <el-form-item prop="email">
-                  <el-input placeholder="邮箱地址" v-model="form.email"></el-input>
-                </el-form-item>
-                <el-form-item prop="city">
-                  <el-input placeholder="加盟城市" v-model="form.city"></el-input>
-                </el-form-item>
-                <div class="submit" @click="handleSubmit('ruleForm')">提交申请</div>
-              </el-form>
-              <!-- <img class="cp" src="http://res.training.luojigou.vip/Fk2Fz3gN8jDHAHiQaOBJI3KZSyHx?imageView2/0/q/50|imageslim" alt=""> -->
-            </div>
-          </div>
+          <p>
+          中德智慧教育集团旗下北京逻辑狗教育科技有限公司创立培训机构思维教育品牌加盟，开创性提出了
+          <strong>逻辑狗专柜、逻辑狗探索小镇、逻辑狗思维体验Plus、逻辑狗思维体验Home</strong>项目定位于专注3.4岁-12岁儿童优质思维能力养成的场景式、游戏化体验中心，为3~12岁儿童提供国际品质的全球同频思维训练课程与服务。
+          </p>
+          <p style="margin-top: 35px">
+            18年品牌深耕、1100万中国家庭的选择标注化、精细化运营，赋能合作伙伴，共同成就具有影响力的儿童思维教育品牌。
+          </p>
         </div>
       </div>
     </div>
-    <!-- 输出平台 -->
-    <div class="education">
-      <div class="top">
-        <!-- <img
-          class="bg-img"
-          src="http://res.training.luojigou.vip/Ft9M1i5hGV_NEYh-dvUhIhDvpMQ4?imageView2/0/q/50|imageslim"
-          alt=""
-        > -->
-        <div class="label">
-          <div class="label-en animate__fadeInDown">EDUCATION</div>
-          <img
-            class="logo"
-            src="http://res.training.luojigou.vip/Fmzni1iBgNG7OKMenDAm1JPkntZY?imageView2/0/q/50|imageslim"
-            alt=""
-          >
-          <section class="text">全国优质教育内容输出平台</section>
-          <div class="line"></div>
-          <img
-            class="town"
-            src="http://res.training.luojigou.vip/Fn5qkcUe3liE0XuppMhBYs5hItg5?imageView2/0/q/50|imageslim"
-            alt=""
-          >
-        </div>
-      </div>
-      <div class="bottom">
-        <div class="text">
-          逻辑狗·探索小镇是中德智慧教育集团旗下北京逻辑狗教育科技有限公司创立的培训机构思维教育品牌加盟。
-          定位于专注3.4岁-12岁儿童优质思维能力养成的场景式、游戏化体验中心，为3岁~12岁儿童提供国际品质的全球同频思维训练课程与服务。
-          16年品牌深耕、1100万中国家庭的选择标注化、精细化运营，赋能合作伙伴，共同成就具有影响力的儿童思维教育品牌。
+
+    <!-- 合作模式 -->
+    <div class="model bgF8">
+      <title-content :title="'合作模式'" :titleSub="'COOPERATION'"></title-content>
+      <div class="m-content w1200">
+        <div class="m-tab">
+          <div 
+            :class="['m-tab-item', `m-tab-item${index}`]"
+            :style="{ backgroundImage: currentMtab == index ? `url(${item.imgUrlSel})` : `url(${item.imgUrl})` }"
+            @mouseover="tabMouseover(index)" @mouseleave="tabMouseleave(index)"  
+            v-for="(item, index) in mTabList" :key="index">
+          </div>
         </div>
-      </div>
-    </div>
-    <!-- 优势 -->
-    <div class="advantage">
-      <div class="label">逻辑狗·探索小镇的五大优势</div>
-      <div class="advantage-show">
-        <div
-          :class="['advantage-item wow animate__animated']"
-          v-for="(imgurl, index ) in advantageImg"
-          :key="index"
-        >
-          <img :src="imgurl" alt="">
+        <div class="tab-centent">
+          <div class="tab-content-01" v-if="currentMtab == 0">
+            <div class="tab-content-item left">
+              <!-- <div class="title">技术支持</div>
+              <div class="desc">满足公司合作条件后，支持线上门店设立、线下门店管理和运营等技术输出</div> -->
+            </div>
+            <div class="tab-content-item right">
+              <!-- <div class="title">技术支持</div>
+              <div class="desc">满足公司合作条件后，支付相应的整体加盟费用，整体店铺加盟，价格、服务由公司整体输出。</div> -->
+            </div>
+          </div>
+          <div class="tab-content-02" v-else-if="currentMtab == 1">
+            1
+          </div>
+          <div class="tab-content-03" v-else>
+            2
+          </div>
         </div>
       </div>
     </div>
+
+
     <!-- 体验 -->
     <div class="exprience">
       <div class="label">
@@ -220,15 +188,14 @@
         <div class="address">地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼一层102号</div>
       </div>
     </div>
-  </section>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
+import CommonBanner from "@/components/common/banner";
+import TitleContent from '@/components/common/titleContent';
 
-if (process.browser) {
-  var { WOW } = require("wowjs");
-}
 const advantageImg = Object.freeze([
   "http://res.training.luojigou.vip/Fgzcc1GuXoorH_5NX1BmNQ8sCpMo?imageView2/0/q/50|imageslim",
   "http://res.training.luojigou.vip/FhtDRiZ4jCYsC2xCyV9uOilQRNqh?imageView2/0/q/50|imageslim",
@@ -368,17 +335,13 @@ const joinData = Object.freeze([
   },
 ]);
 export default {
-  name: "NewContainer",
-  mounted() {
-    if (process.browser) {
-      new WOW({
-        offset: 0,
-        live: true,
-      }).init();
-    }
-  },
+  name: "Coopetate",
+  mounted() {},
   data() {
     return {
+      currentMtab: 0,
+      bgImg: require("~/assets/images/team/teamBg@2x.png"),
+      projectImg: require("~/assets/images/cooperate/project_img.png"),
       currentId: 0,
       exprienceCurrenId: 0,
       form: {},
@@ -388,6 +351,20 @@ export default {
       showImg,
       joinImg,
       joinData,
+      mTabList: [
+        {
+          imgUrl: require("~/assets/images/cooperate/coopreate_01@2x.png"),
+          imgUrlSel: require("~/assets/images/cooperate/coopreate_01_sel@2x.png")
+        },
+        {
+          imgUrl: require("~/assets/images/cooperate/coopreate_02@2x.png"),
+          imgUrlSel: require("~/assets/images/cooperate/coopreate_02_sel@2x.png")
+        },
+        {
+          imgUrl: require("~/assets/images/cooperate/coopreate_03@2x.png"),
+          imgUrlSel: require("~/assets/images/cooperate/coopreate_03_sel@2x.png")
+        }
+      ],
       rules: {
         name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
         phone: [
@@ -410,7 +387,10 @@ export default {
       },
     };
   },
-  components: {},
+  components: {
+    CommonBanner,
+    TitleContent
+  },
   head() {
     return {
       title: "逻辑狗官网-中德智慧教育",
@@ -462,13 +442,18 @@ export default {
     },
     currentEventInfo(item) {
       this.exprienceCurrenId = item.id;
+    },
+    tabMouseover(index) {
+      this.currentMtab = index;
+    },
+    tabMouseleave(index) {
     }
   },
 };
 </script>
 
 <style lang="scss">
-.New-container {
+.coopetate {
   width: 100%;
   .label {
     .label-en {
@@ -599,7 +584,130 @@ export default {
       }
     }
   }
+  .bgF8 {
+    background: #F8FBFF;
+  }
+  .project {
+    margin-top: 100px;
+    .p-content {
+      display: flex;
+      justify-content: space-between;
+      margin: 53px auto 95px;
+      width: 1200px;
+      height: 667px;
+      background: url('~assets/images/cooperate/modeBg@2x.png') no-repeat;
+      background-size: 100% 100%;
+      .left {
+        margin-top: 57px;
+        img {
+          width: 568px;
+          height: 528px;
+        }
+      }
+      .right {
+        width: 505px;
+        margin-top: 108px;
+        p {
+          font-size: 16px;
+          line-height: 48px;
+          text-indent: 30px;
+          strong {
+            color: #0D5CFA;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+    .left {
+
+    }
+    .right {
+
+    }
+  }
+  .model {
+    padding: 100px 0 108px;
+    .m-content {
+      margin-top: 65px;
+    }
+    .m-tab {
+      padding: 0 200px;
+      display: flex;
+      justify-content: space-between;
+      .m-tab-item {
+        width: 123px;
+        height: 97px;
+        // background: url('~assets/images/cooperate/coopreate_01@2x.png') no-repeat;
+        background-size: 100%;
+        &.m-tab-item0 {
+          // background: url('~assets/images/cooperate/coopreate_01@2x.png') no-repeat;
+          // background-size: 100% 100%;
+          // &:hover {
+          //   background: url('~assets/images/cooperate/coopreate_01_sel@2x.png') no-repeat;
+          //   background-size: 100% 100%;
+          // }
+        }
+        &.m-tab-item1 {
+          // background: url('~assets/images/cooperate/coopreate_02@2x.png') no-repeat;
+          // background-size: 100% 100%;
+          // &:hover {
+          //   background: url('~assets/images/cooperate/coopreate_02_sel@2x.png') no-repeat;
+          //   background-size: 100% 100%;
+          // }
+        }
+        &.m-tab-item2 {
+          // background: url('~assets/images/cooperate/coopreate_03@2x.png') no-repeat;
+          // background-size: 100% 100%;
+          // &:hover {
+          //   background: url('~assets/images/cooperate/coopreate_03_sel@2x.png') no-repeat;
+          //   background-size: 100% 100%;
+          // }
+        }
+      }
+    }
+    .tab-centent {
+      margin-top: 100px;
+      .tab-content-01 {
+        display: flex;
+        justify-content: space-between;
+        height: 351px;
+        color: #ffffff;
+        .tab-content-item {
+          padding: 0 56px;
+          width: 579px;
+          border-radius: 30px;
+          text-align: center;
+          opacity: 0.8;
+        }
+        .left {
+          background: url('~assets/images/cooperate/tab_content_01@2x.png') no-repeat;
+          background-size: 523px 351px;
+          background-position: center;
+          // background-color: rgba(13, 92, 250);
+        }
+        .right {
+          background: url('~assets/images/cooperate/tab_content_02@2x.png') no-repeat;
+          background-size: 523px 351px;
+          background-position: center;
+          // background-color: rgba(246, 84, 25);
+        }
+        .title {
+          margin: 53px 61px;
+          font-size: 30px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          line-height: 42px;
+        }
+        .desc {
+          font-size: 16px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          line-height: 26px;
+        }
 
+      }
+    }
+  }
   .education {
     display: flex;
     flex-direction: column;