zhongde-website/pages/cooperate/index.vue

<template>
  <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">
          <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-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">
        <div class="label-en wow animate__animated animate__fadeInDown">SERVICE</div>
        <div class="label-zn wow animate__animated animate__fadeInDown">体验店八项服务支持</div>
      </div>
      <div class="bg-img">
        <img
          src="http://res.training.luojigou.vip/Fgx5y0lTvWmAyzj29S0vIB1gteFW?imageView2/0/q/50|imageslim"
          alt=""
        >
      </div>
      <div class="exprience-box">
        <div
          :class="['exprience-item wow']"
          :style="{'margin-top': item.id % 2 === 0 ? '49px' : ''}"
          v-for="item in exprienceImg"
          :key="item.id"
          @mouseenter="currentEventInfo(item)"
        >
          <img :src="item.imgUrl" alt="">
          <section>{{item.label}}</section>
          <div class="exprience-info" v-if="item.id == exprienceCurrenId">
            <div class="num" :class="[item.id % 2 === 0 ? 'red' : 'blue']">{{ item.num }}</div>
            <div class="item-text" v-for="(ele, index) in item.infoList" :key="index">{{ele}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 校区 -->
    <div class="campus">
      <div class="label">
        <div class="label-en wow animate__animated animate__fadeInDown">CAMPUS</div>
        <div class="label-zn wow animate__animated animate__fadeInDown">全国校区分布</div>
      </div>
      <img
        class="campus-img"
        src="http://res.training.luojigou.vip/Fo5hmXpt-2GUZZSWJTfkF-mqC4qx?imageView2/0/q/50|imageslim"
        alt=""
      >
    </div>
    <!-- 风采 -->
    <div class="show cp">
      <div class="label">
        <div class="label-en wow animate__animated animate__fadeInDown">SHOW</div>
        <div class="label-zn wow animate__animated animate__fadeInDown">校园风采</div>
      </div>
      <div class="show-box">
        <div :class="['show-item', item.id == currentId ? 'active' : '']" v-for="item in showImg" :key="item.id" @mouseenter="campusEnter(item)">
          <div class="ani-box">
            <img :src="item.imgUrl" alt="">
            <div class="text">{{item.label}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 加盟流程 -->
    <div class="join">
      <div class="label">
        <div class="label-en wow animate__animated animate__fadeInDown">FLOW</div>
        <div class="label-zn wow animate__animated animate__fadeInDown">加盟流程</div>
      </div>
      <div class="flow">
        <div class="line-box">
          <div class="line"></div>
          <div class="join-box">
            <div
              class="join-box-item"
              v-for="item in joinData"
              :key="item.id"
            >
              <img
                :style="{width: item.id === 0 ? '34px' : '22px', 
                                  height:  item.id === 0 ? '34px' : '22px',
                                  marginTop: item.id !== 0 ? '5px' : 0,
                                  marginBottom: item.id !== 0 ? '7px' : 0,
                                  }"
                :src="item.id === 0 ? joinImg.hot : joinImg.cold"
                alt=""
              >
              <div class="join-box-step" :style="{}">
                <span class="join-box-step-num">{{item.id + 1}}</span>步
              </div>
              <div class="join-box-label">{{item.label}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="join-btn cp">
        <img
          src="http://res.training.luojigou.vip/Fot92LmuZDqWjSXLQPWxln_-4DsH?imageView2/0/q/50|imageslim"
          alt=""
        >
      </div>
    </div>
    <!-- 加入我们 -->
    <div class="join-us">
      <div class="label">
        <div class="label-en wow animate__animated animate__fadeInDown">JOIN US</div>
        <div class="label-zn wow animate__animated animate__fadeInDown">加入我们</div>
      </div>
      <div class="line"></div>
      <div class="join-us-form">
        <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>
          <!-- <div class="submit" @click="handleSubmit('ruleForm')">提交申请</div> -->
        </el-form>
        <!-- <el-input placeholder="姓名:"></el-input>
              <el-input placeholder="手机号:"></el-input>
              <el-input placeholder="邮箱地址:"></el-input>
        <el-input placeholder="加盟城市:"></el-input>-->
        <img
          @click="handleSubmit('ruleBottomForm')"
          src="http://res.training.luojigou.vip/FipijbS16GJiwUe4oaWOBWjFxGLO?imageView2/0/q/50|imageslim"
          alt=""
        >
        <div class="address">地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼一层102号</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: "总部运营支持",
  },
]);
export default {
  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: {},
      bottomform: {},
      advantageImg,
      exprienceImg,
      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: [
          { 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" }],
      },
    };
  },
  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) {
          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.$message.success('提交成功');
        } else {
          console.log('err');
          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%;
  .label {
    .label-en {
      height: 78px;
      font-size: 56px;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      color:rgba(35,106,250,0.16);
      line-height: 78px;
    }
    .label-zn {
      height: 65px;
      font-size: 46px;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      color: #262626;
      line-height: 65px;
      letter-spacing: 1px;
    }
  }
  .banner-img {
    position: relative;
    .new-info {
      .left {
        h3 {
          height: 92px;
          font-size: 66px;
          font-family: PingFangSC-Semibold, sans-serif;
          font-weight: 600;
          color: #236AFA;
          line-height: 92px;
        }
      }
    }
    img {
      width: 100%;
      // height: 100vh;
      height: calc(100vh - 72px);
      // height: 595px;
    }
    .new-info {
      width: 1194px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        img {
          width: 469px;
          height: 76px;
        }
      }
      .right {
        width: 327px;
        height: 450px;
        background-color: #fff;
        padding: 34px 38px 12px 39px;
        .submit-area {
          .label {
            font-size: 14px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            color: rgba(91, 95, 93, 1);
            margin-bottom: 7px;
          }
          .phone-num {
            display: flex;
            align-items: center;
            img {
              width: 22px;
              height: 22px;
              display: block;
              margin-right: 15px;
            }
            .num {
              font-size: 26px;
              font-family: PingFangSC-Medium, sans-serif;
              font-weight: bold;
              color: rgba(0, 0, 0, 1);
            }
          }
          .form {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .el-input {
              width: 250px;
              height: 44px;
            }
            .el-form-item__error {
              color: #cd2026;
              // left: 124px;
            }
            .el-form-item {
              &.is-error {
                .el-input__inner {
                  border-color: #dcdfe6;
                }
              }
            }
            .submit {
              margin: 0 auto;
              text-align: center;
              font-size: 14px;
              width: 148px;
              height: 27px;
              line-height: 27px;
              background: linear-gradient(
                180deg,
                rgba(88, 144, 251, 1) 0%,
                rgba(51, 117, 252, 1) 100%
              );
              box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
              border-radius: 3px;
              color: #ffffff;
            }
            img {
              width: 176px;
              height: 55px;
            }
          }
        }
      }
    }
  }
  .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;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 106px;
    padding-bottom: 96px;
    box-sizing: border-box;
    position: relative;
    height: 488px;
    .label {
      position: relative;
      .label-en {
        position: absolute;
        left: -45px;
        top: -15px;
      }
    }
    .top {
      position: relative;
      // display: flex;
      width: 100%;
      height: 134px;
      border-bottom: 1px solid rgba(216, 216, 216, 1);
      .bg-img {
        width: 449px;
        height: 59px;
        position: absolute;
        left: 502px;
        // transform: translateX(-50%);
      }
      .label {
        position: absolute;
        top: 10px;
        // left: 548px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 796px;
        height: 81px;

        left: 50%;
        transform: translateX(-50%);
        // position: absolute;
        // width: 350px;
        // /* left: 763px; */
        .logo {
          width: 40px;
          height: 40px;
          display: block;
        }
        .text {
          height: 65px;
          font-size: 46px;
          font-family: PingFangSC-Semibold, sans-serif;
          font-weight: 600;
          color: #262626;
          line-height: 65px;
          letter-spacing: 1px;
        }
        .line {
          width: 1px;
          height: 54px;
          background: rgba(153, 153, 153, 1);
          opacity: 0.4146;
          margin-left: 30px;
          margin-right: 37px;
        }
        .town {
          width: 93px;
          height: 63px;
        }
      }
    }
    .bottom {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        text-indent: 2em;
        width: 1200px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color: #333333;
        font-size: 20px;
        line-height: 38px;
      }
    }
  }
  .advantage {
    width: 100%;
    height: 625px;
    background: rgba(247, 251, 255, 1);
    padding: 73px 0 143px;
    .label {
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      text-align: center;
      font-size: 46px;
      color: #236AFA;
      line-height: 65px;
      letter-spacing: 1px;

      // left: 50%;
      // position: absolute;
      // width: 350px;
      // /* left: 763px; */
      // transform: translateX(-50%);
    }
    .advantage-show {
      margin: 48px auto 0;
      display: flex;
      justify-content: center;
      // width: 1280px;
      .advantage-item {
        width: 272px;
        height: 280px;
        margin-left: -30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .exprience {
    width: 100%;
    height: 746px;
    padding-top: 80px;
    position: relative;
    box-sizing: border-box;
    .label {
      position: absolute;
      // width: 600px;
      width: 440px;
      left: 50%;
      /* left: 763px; */
      transform: translateX(-50%);
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 0.16);
      }
      .label-zn {
        // font-size: 58px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(38, 38, 38, 1);
        position: absolute;
        top: 30px;
        left: 8px;
      }
    }
    .bg-img {
      img {
        width: 710px;
        height: 320px;
        position: absolute;
        // left: 850px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        z-index: -1;
      }
    }
    .exprience-box {
      display: flex;
      position: absolute;
      top: 321px;
      left: 50%;
      transform: translateX(-50%);
      // left: 344px;
      .exprience-item {
        height: 176px;
        position: relative;
        img {
          width: 160px;
          height: 172px;
          object-fit: cover;
        }
        section {
          width: 160px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, sans-serif;
          font-weight: bold;
          color: #000;
          position: absolute;
          top: 86%;
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
          letter-spacing: 0.5px;
        }
        .exprience-info {
          z-index: 66;
          position: absolute;
          top: 38px;
          left: 35px;
          padding: 10px 0 0 20px;
          width: 225px;
          height: 155px;
          background: rgba(0, 0, 0, 0.65);
          border-radius: 10px;
          .num {
            font-size: 18px;
            font-family: Nunito-Black, Nunito;
            &.blue {
              color: #408CFF;
            }
            &.red {
              color: #FF6321;
            }
          }
          .item-text {
            font-size: 16px;
            font-family: PingFangSC-Regular, sans-serif;
            color: #B4B4B4;
            line-height: 26px;
          }
        }
      }
    }
  }
  .campus {
    height: 1264px;
    background: rgba(240, 255, 246, 0.24);
    overflow: hidden;
    .label {
      margin-top: 32px;
      position: absolute;
      width: 430px;
      // left: 700px;
      left: 50%;
      /* left: 763px; */
      transform: translateX(-50%);
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 0.16);
      }
      .label-zn {
        // font-size: 58px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(38, 38, 38, 1);
        position: absolute;
        top: 30px;
        left: 78px;
      }
    }
    .campus-img {
      width: 1200px;
      height: 1034px;
      margin: 0 auto;
      display: block;
      margin-top: 100px;
    }
  }
  .show {
    width: 100%;
    position: relative;
    height: 672px;
    background: rgba(247, 251, 255, 1);
    padding-top: 70px;
    box-sizing: border-box;
    .label {
      position: absolute;
      width: 280px;
      // left: 763px;
      left: 50%;
      transform: translateX(-50%);
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 0.16);
      }
      .label-zn {
        // font-size: 58px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(38, 38, 38, 1);
        position: absolute;
        top: 30px;
        left: 32px;
      }
    }
    .show-box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 281px;
      left: 50%;
      transform: translateX(-50%);
      .show-item {
        .ani-box {
          width: 396px;
          height: 327px;
          border-radius: 20px;
          padding: 18px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          background-color: transparent;
          box-sizing: border-box;
          img {
            width: 360px;
            height: 191px;
          }
          .text {
            margin-top: 30px;
            width: 340px;
            font-size: 20px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
        &.active {
          .ani-box {
            background-color: #fff;
            transition: background-color 4s;
            box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.22);
            border-bottom: 1px solid blue;
            box-sizing: border-box;
          }
        }
      }
    }
  }
  .join {
    width: 100%;
    height: 700px;
    padding-top: 70px;
    box-sizing: border-box;
    position: relative;
    .label {
      position: absolute;
      // width: 600px;
      // left: 763px;
      left: 50%;
      transform: translateX(-50%);
      width: 280px;
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 0.16);
      }
      .label-zn {
        // font-size: 58px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(38, 38, 38, 1);
        position: absolute;
        top: 30px;
        left: 32px;
      }
    }
    .flow {
      width: 100%;
      position: absolute;
      top: 254px;
      .line-box {
        position: relative;
        .line {
          width: 100%;
          height: 1px;
          background-color: #d8d8d8;
        }
        .join-box {
          width: 1118px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          top: -16px;
          left: 50%;
          transform: translateX(-50%);
          .join-box-item {
            height: 145px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            img {
            }
            .join-box-step {
              color: #999999;
              font-size: 20px;
              margin-bottom: 16px;
              .join-box-step-num {
                color: #262626;
                font-size: 50px;
                margin-right: 5px;
              }
            }
            .join-box-label {
              font-size: 18px;
              font-family: PingFangSC-Regular, sans-serif;
              font-weight: 400;
              color: #999999;
              line-height: 25px;
            }
          }
        }
      }
    }
    .join-btn {
      position: absolute;
      bottom: 126px;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 373px;
        height: 68px;
      }
    }
  }
  .join-us {
    height: 936px;
    background: url("~assets/images/cooperate/btImg.png") no-repeat;
    // background: url("http://res.training.luojigou.vip/FhPOU-rQqK2TdIDILiLM5f17xb2V?imageView2/0/q/50|imageslim")
      // no-repeat;
    background-size: 100% 100%;
    position: relative;
    .label {
      position: absolute;
      // width: 600px;
      width: 320px;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      // left: 763px;
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        color: rgba(255, 255, 255, 0.16);
      }
      .label-zn {
        // font-size: 58px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        color: rgba(255, 255, 255, 1);
        position: absolute;
        top: 30px;
        left: 100px;
      }
    }
    .line {
      width: 1200px;
      height: 1px;
      background: rgba(216, 216, 216, 1);
      position: absolute;
      top: 240px;
      left: 50%;
      transform: translateX(-50%);
    }
    .join-us-form {
      width: 700px;
      position: absolute;
      top: 284px;
      left: 50%;
      transform: translateX(-50%);
      .el-input {
        width: 700px;
        height: 80px;
        // margin-bottom: 32px;
        .el-input__inner {
          height: 70px;
          padding: 0 26px;
          color: #666666;
          font-size: 18px;
          border-radius: 10px;
          &::-webkit-input-placeholder {
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            color: #666666;
            line-height: 25px;
          }
        }
      }
      img {
        width: 700px;
        height: 68px;
        margin-top: 41px;
        margin-bottom: 27px;
      }
      .address {
        font-size: 20px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }
    }
  }
}

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