zhongde-website/pages/cooperate/index.vue

<template>
  <div class="coopetate">
    <common-banner
      :img="bgImg"
      :height="510">
      <h2>加盟合作</h2>
      <h4>合作热线：400-6807300</h4>
    </common-banner>
    <!-- 项目介绍 -->
    <div class="project">
      <title-content :title="'项目介绍'" :titleSub="'PROJECT INTRODUCTION'"></title-content>
      <div class="p-content w1200">
        <div class="left">
          <img :src="projectImg" alt="" srcset="">          
        </div>
        <div class="right">
          <p>
          中德智慧教育集团旗下北京逻辑狗教育科技有限公司创立培训机构思维教育品牌加盟，开创性提出了
          <strong>逻辑狗专柜、逻辑狗探索小镇、逻辑狗思维体验Plus、逻辑狗思维体验Home</strong>项目定位于专注3.4岁-12岁儿童优质思维能力养成的场景式、游戏化体验中心，为3~12岁儿童提供国际品质的全球同频思维训练课程与服务。
          </p>
          <p style="margin-top: 35px">
            18年品牌深耕、1100万中国家庭的选择标注化、精细化运营，赋能合作伙伴，共同成就具有影响力的儿童思维教育品牌。
          </p>
        </div>
      </div>
    </div>

    <!-- 合作模式 -->
    <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 class="tab-centent">
          <div class="tab-content-01" v-show="currentMtab == 0">
            <div class="tab-content-item left">
              <img :src="tabContent01" alt="" srcset="">
              <div class="content-info content-info-left">
                <div class="title">技术支持</div>
                <div class="desc">满足公司合作条件后，支持线上门店设立、线下门店管理和运营等技术输出</div>
              </div>
            </div>
            <div class="tab-content-item right">
              <img :src="tabContent02" alt="" srcset="">
              <div class="content-info content-info-right">
                <div class="title">整体加盟</div>
                <div class="desc">满足公司合作条件后，支付相应的整体加盟费用，整体店铺加盟，价格、服务由公司整体输出。</div>
              </div>
              <!-- <div class="title">技术支持</div>
              <div class="desc">满足公司合作条件后，支付相应的整体加盟费用，整体店铺加盟，价格、服务由公司整体输出。</div> -->
            </div>
          </div>
          <div class="tab-content-02" v-show="currentMtab == 1">
            <img class="img-content-02-01" :src="tabContent03" alt="" srcset="">
            <img class="img-content-02-02" :src="tabContent04" alt="" srcset="">
          </div>
          <div class="tab-content-03" v-show="currentMtab == 2">
            <img class="img-content-03-01" :src="tabContent05" alt="" srcset="">
            <img class="img-content-03-02" :src="tabContent06" alt="" srcset="">
          </div>
        </div>
      </div>
    </div>

    <!-- 品牌支持 -->
    <div class="support">
      <title-content :title="'品牌支持'" :titleSub="'BRAND SUPPORT'"></title-content>
      <div class="s-content w1200">
        <img :src="supportImg" alt="" srcset="">
      </div>
    </div>

    <!-- 合作案例 -->
    <div class="case bgF8">
      <title-content :title="'合作案例'" :titleSub="'COOPERATION CASE'"></title-content>
      <div class="c-content w1200">
        <div class="left">
          <img :src="caseImg[0].imgUrl" alt="" srcset="">
        </div>
        <div class="right">
          <template v-for="(item, index) in caseImg">
            <img v-if="index !==0 " :src="item.imgUrl" alt="" srcset="" :key="index">
          </template>
        </div>
      </div>
    </div>

    <!-- 加入我们 -->
    <div class="join-us">
      <div class="mask">
      </div>
      <div class="join-content">
        <div class="title-content">
          <div class="title">加入我们</div>
        </div>
        <div class="join-us-form w1200">
          <no-ssr>
            <el-form :model="form" :rules="rules" ref="ruleBottomForm">
              <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>
              <el-form-item prop="project">
                <el-select placeholder="合作项目" v-model="form.project">
                  <el-option
                    v-for="(item, index) in projectList"
                    :key="index"
                    :label="item.title"
                    :value="item.title">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button class="submit cp" :loading="loading" :disabled="disabled" @click="handleSubmit('ruleBottomForm')">提交申请</el-button>
            </el-form>
          </no-ssr>
          <div class="address">地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼一层102号</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import CommonBanner from "@/components/common/banner";
import TitleContent from '@/components/common/titleContent';

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",
  "http://res.training.luojigou.vip/Ftr-z7dlfG8WhtqYnzu08qlRz8sb?imageView2/0/q/50|imageslim",
  "http://res.training.luojigou.vip/FpQyT6VRsHQVGfmXSO1kuWrYx0Jh?imageView2/0/q/50|imageslim",
  "http://res.training.luojigou.vip/FrgZIm21VIRX62rYSg-5Osx32Jkx?imageView2/0/q/50|imageslim",
]);

const exprienceImg = Object.freeze([
  {
    id: 0,
    num: '01',
    // imgUrl:
    //   "http://res.training.luojigou.vip/FoHy9wMCaPPpgzaDmwQvFwRdM1Za?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_01.png'),
    label: "招聘驱动",
    infoList: ['人员素质模型', '绩效评级体系', '招聘广告模板']
  },
  {
    id: 1,
    num: '02',
    // imgUrl:
    //   "http://res.training.luojigou.vip/FiumJtB1GJfyCphjUdlYrLTXYB6J?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_02.png'),
    label: "课程驱动",
    infoList: ['能力测评体系', '国际课程引进', '独立自主研发']
  },
  {
    id: 2,
    num: '03',
    // imgUrl:
    //   "http://res.training.luojigou.vip/FlhyrFbDqh4rUzE39K3O8tJ0RjdP?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_03.png'),
    label: "督导驱动",
    infoList: ['三维过程把握', '到点指导落地', '专家持续绑定']
  },
  {
    id: 3,
    num: '04',
    // imgUrl:
    //   "http://res.training.luojigou.vip/FgDk_mDwKmS97_IIzdGl0fNVTE4k?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_04.png'),
    label: "开店驱动",
    infoList: ['分析地理位置', '视觉识别系统', '标准装修方案']
  },
  {
    id: 4,
    num: '05',
    // imgUrl:
    //   "http://res.training.luojigou.vip/Fm3NVf5OAfxaV3KUwoh25hSC0gim?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_05.png'),
    label: "品牌驱动",
    infoList: ['品牌认证标识', '市场宣传套装', '制定区域保护', '中华品牌领袖联盟企业']
  },
  {
    id: 5,
    num: '06',
    // imgUrl:
    //   "http://res.training.luojigou.vip/Fqhl44i_bmz2fslvMe-UcnhgPMFJ?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_06.png'),
    label: "招生驱动",
    infoList: ['市场推广方案', '招生方法指导', '节日活动方案'],
  },
  {
    id: 6,
    num: '07',
    // imgUrl:
    //   "http://res.training.luojigou.vip/Fg9yIinUo_5yOjaqpRspcotcB92f?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_07.png'),
    label: "培训驱动",
    infoList: ['管理流程梳理', '教育教学培训', '线上直播培训'],
  },
  {
    id: 7,
    num: '08',
    // imgUrl:
    //   "http://res.training.luojigou.vip/Fixkl6HyDOOPy-1ZU1WN7wSTIXTl?imageView2/0/q/50|imageslim",
    imgUrl:  require('~/assets/images/cooperate/exprience_08.png'),
    label: "体系驱动",
    infoList: ['能力级别评测体系', '线上运营系统APP', 'CRM客户管理系统'],
  },
]);

const showImg = Object.freeze([
  {
    id: 0,
    imgUrl:
      "http://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim",
    label:
      "武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱",
  },
  {
    id: 1,
    imgUrl:
      "http://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim",
    label:
      "武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱",
  },
  {
    id: 2,
    imgUrl:
      "http://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim",
    label:
      "武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱",
  },
]);
const joinImg = Object.freeze({
  hot:
    "http://res.training.luojigou.vip/Fv5jDvDdHaVLQThclUJhhoIL9ee8?imageView2/0/q/50|imageslim",
  cold:
    "http://res.training.luojigou.vip/FisuM3wRDkZawF3sXOCzsyaIGCuA?imageView2/0/q/50|imageslim",
});
const joinData = Object.freeze([
  {
    id: 0,
    label: "总部项目考察",
  },
  {
    id: 1,
    label: "签署合作协议",
  },
  {
    id: 2,
    label: "门店选址评估",
  },
  {
    id: 3,
    label: "人员招募筹备",
  },
  {
    id: 4,
    label: "门店正式营业",
  },
  {
    id: 5,
    label: "总部运营支持",
  },
]);
const caseImg = Object.freeze([
  {
    imgUrl: require("~/assets/images/cooperate/case01.png"),
  },
  {
    imgUrl: require("~/assets/images/cooperate/case02.png"),
  },
  {
    imgUrl: require("~/assets/images/cooperate/case03.png"),
  },
  {
    imgUrl: require("~/assets/images/cooperate/case04.png"),
  },
  {
    imgUrl: require("~/assets/images/cooperate/case05.png"),
  }
])

export default {
  name: "Coopetate",
  mounted() {},
  data() {
    return {
      currentMtab: 0,
      loading: false,
      disabled: false,
      bgImg: require("~/assets/images/cooperate/cooperateBg.png"),
      // projectImg: require("~/assets/images/cooperate/project_img.png"),
      projectImg: 'https://app-resources-luojigou.luojigou.vip/Fr5m-_f0ah6Jdkw6kh4QsjM8a9fy',
      tabContent01: require('~/assets/images/cooperate/tab_content_01@2x.png'),
      tabContent02: require('~/assets/images/cooperate/tab_content_02@2x.png'),
      tabContent03: require('~/assets/images/cooperate/tab_content_03@2x.png'),
      tabContent04: require('~/assets/images/cooperate/tab_content_04@2x.png'),
      tabContent05: require('~/assets/images/cooperate/tab_content_05@2x.png'),
      tabContent06: require('~/assets/images/cooperate/tab_content_06@2x.png'),
      supportImg: require('~/assets/images/cooperate/supportImg@2x.png'),
      currentId: 0,
      exprienceCurrenId: 0,
      form: {},
      bottomform: {},
      advantageImg,
      exprienceImg,
      showImg,
      joinImg,
      joinData,
      caseImg,
      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")
        }
      ],
      projectList: [
        {
          id: 1,
          title: '逻辑狗·探索小镇'
        },
        {
          id: 2,
          title: '逻辑狗专柜'
        },
        {
          id: 3,
          title: '逻辑狗思维体验Plus'
        },
        {
          id: 4,
          title: '逻辑狗思维体验Home'
        },
        {
          id: 5,
          title: '逻辑狗体验中心'
        }
      ],
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "请输入正确手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        city: [{ required: true, message: "请输入加盟城市", trigger: "blur" }],
        project: [{ required: true, message: "请选择合作项目", trigger: "blur" }]
      },
    };
  },
  components: {
    CommonBanner,
    TitleContent
  },
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  async asyncData({ params, store }) {},
  methods: {
    async handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          this.disabled = true;
          const { data } = await axios.post(`${this.$store.state.wordpressAPI}/official-api/joinIn`,{
            ...this.form
          });
          if(data.status == 200 ) {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success'
            });
            this.$refs[formName].resetFields();
          } else {
            this.$notify({
              title: '失败',
              message: '提交失败',
              type: 'info'
            });
          }
          this.loading = false;
          this.disabled = false;
        } else {
          this.loading = false;
          this.disabled = false;
          return false;
        }
      });
    },
    campusEnter(item) {
      this.currentId = item.id;
    },
    currentEventInfo(item) {
      this.exprienceCurrenId = item.id;
    },
    tabMouseover(index) {
      this.currentMtab = index;
    },
    tabMouseleave(index) {
    }
  },
};
</script>

<style lang="scss">
.coopetate {
  width: 100%;
  .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-size: 100%;
        &.m-tab-item0 {
        }
        &.m-tab-item1 {
        }
        &.m-tab-item2 {
        }
      }
    }
    .tab-centent {
      .tab-content-01 {
        margin-top: 85px;
        display: flex;
        justify-content: space-between;
        height: 351px;
        color: #ffffff;
        opacity: 1;
        transition: opacity 1s ease-in-out;
        .tab-content-item {
          position: relative;
          width: 579px;
          border-radius: 30px;
          text-align: center;
          .content-info {
            padding: 0 53px;
            position: absolute;
            z-index: 1;
            top: 0;
            height: 100%;
            border-radius: 30px;
            opacity: 0.79;
            &.content-info-left {
              background: #0D5CFA;
            }
            &.content-info-right {
              background-color: rgba(246, 84, 25, 1);
            }
          }
          img {
            width: 579px;
            height: 351px;
          }
        }
        .left {
          // background: url('~assets/images/cooperate/tab_content_01@2x.png') no-repeat;
          // background-size: 523px 351px;
          // background-position: center;
          width: 579px;
          border-radius: 30px;
        }
        .right {
          background: url('~assets/images/cooperate/tab_content_02@2x.png') no-repeat;
          background-size: 523px 351px;
          background-position: center;
        }
        .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;
        }

      }
      .tab-content-02 {
        margin-top: 32px;
        position: relative;
        text-align: center;
        .img-content-02-01 {
          width: 478px;
          height: 478px;
        }
        .img-content-02-02 {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 22px;
          width: 1064px;
          height: 337px;
        }
      }
      .tab-content-03 {
        position: relative;
        text-align: center;
        .img-content-03-01 {
          width: 778px;
          height: 511px;
        }
        .img-content-03-02 {
          position: absolute;
          bottom: 81px;
          left: 50%;
          transform: translateX(-50%);
          width: 1234px;
          height: 348px;
        }
      }
    }
  }
  .support {
    padding: 105px 0 170px;
    .s-content {
      margin-top: 42px;
      text-align: center;
      img {
        width: 1200px;
        height: 220px;
      }
    }
  }
  .case {
    padding: 100px 0 100px;
    .c-content {
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      .left {
        width: 588px;
        height: 392px;
        margin-right: 22px;
        img {
          width: 588px;
        }
      }
      .right {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        img {
          width: 284px;
          height: 189px;
          margin-bottom: 14px;
        }
      }
    }
  }
  .join-us {
    position: relative;
    height: 684px;
    background: url("~assets/images/cooperate/joinBgImg.png") no-repeat;
    // opacity: 0.9;
    // background: url("http://res.training.luojigou.vip/FhPOU-rQqK2TdIDILiLM5f17xb2V?imageView2/0/q/50|imageslim")
      // no-repeat;
    background-size: 100% 100%;
    // padding: 95px 0 80px;
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgb(13, 92, 250);
      opacity: 0.9;
    }
    .join-content {
      position: absolute;
      top: 0;
      z-index: 1;
      padding: 95px 0 80px;
      height: 100%;
      width: 100%;
      .el-button {
        border: none;
      }
    }
    .title-content {
      .title {
        font-size: 34px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 48rpx;
      }
    }
    .join-us-form {
      margin-top: 60px;
      .el-form {
        width: 464px;
        margin: 0 auto;
        text-align: center;
      }
      .el-form-item {
        margin-bottom: 14px;
      }
      .el-input {
        width: 464px;
        height: 44px;
        .el-input__inner {
          height: 44px;
          padding: 0 26px;
          color: #666666;
          font-size: 14px;
          border-radius: 10px;
          &::-webkit-input-placeholder {
            height: 25px;
            font-size: 14px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            color: #788DBA;
            line-height: 25px;
          }
        }
      }
      .el-form-item__error {
        padding-top: 0;
      }
      .submit {
        margin: 37px auto 25px;
        width: 150px;
        height: 36px;
        // line-height: 36px;
        background: linear-gradient(360deg, #B9D0FF 0%, #FFFFFF 100%);
        box-shadow: 0px 8px 16px 0px rgba(0, 76, 228, 0.59);
        border-radius: 100px;
        color: #0D5CFA;
        text-shadow: 0px 8px 16px rgba(0, 76, 228, 0.59);
        font-size: 14px;
        text-align: center;
      }
      .address {
        font-size: 12px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }
    }
  }
}

.cp {
  cursor: pointer;
}
</style>