zhongde-website/pages/cooperate/index.vue

<template>
  <div class="coopetate">
    <!-- <common-banner
      :img="bgImg"
      :height="510">
      <h2>加盟合作</h2>
      <h4>合作热线：400-6807300</h4>
    </common-banner> -->
    <common-banner :img="bgImg" :height="644">
      <div class="content-wrap">
        <div class="content w1200">
          <div class="left title">加盟合作</div>
          <div class="right">
            <no-ssr>
              <submit-form></submit-form>
            </no-ssr>
          </div>
        </div>
      </div>
    </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>中德智慧是一家专注于培养3-12岁核心素养能力的教育科技机构，自2003年至今，产品业务和品牌效益已辐射全国300多个城市，发展近500家合作伙伴，开设600多个专柜，服务上万所幼儿园，帮助超过5000万儿童受益，是中国母亲培养孩子思维教育的智慧首选。</p>
          <p style="margin-top: 35px"><strong>逻辑狗创意馆、逻辑狗·探索小镇</strong>
            项目，定位于儿童优质思维能力和核心素养能力养成的场景式、游戏化体验中心，结合中德智慧近20年的学前思维教育的新理念、新方法，为3-12岁儿童提供国际品质的优质教育内容。
          </p>
        </div>
      </div>
    </div> 

    <div class="list-wrap">
      <div :class="[index === 0 ? 'bgcp8' : 'ofh']" v-for="(item, index) in merchantsList" :key="index">
        <div v-if="index % 2 === 0" class="item w1200">
          <div class="item-left">
            <img :src="item.imgUrl" alt="" srcset="">
          </div>
          <div class="item-right">
            <div :class="[index === 2 ? 'halfbgc' : '']"></div>
            <div class="title">{{ item.title }}</div>
            <div class="desc" v-if="index === 2" v-html="item.desc"></div>
            <div class="desc" v-else>{{ item.desc }}</div>
            <div class="btn cp" v-if="index == 3" @click="navPage()">全国校区</div>
          </div>
        </div>
        <div class="item w1200" v-else>
          <div class="item-left2">
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
            <div class="btn cp" v-if="index == 3" @click="navPage()">全国校区</div>
          </div>
          <div class="item-right2">
            <img :src="item.imgUrl" alt="" srcset="">
          </div>
        </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 SubmitForm from '@/components/common/form';
import TitleContent from '@/components/common/titleContent';

const advantageImg = Object.freeze([
  "https://res.training.luojigou.vip/Fgzcc1GuXoorH_5NX1BmNQ8sCpMo?imageView2/0/q/50|imageslim",
  "https://res.training.luojigou.vip/FhtDRiZ4jCYsC2xCyV9uOilQRNqh?imageView2/0/q/50|imageslim",
  "https://res.training.luojigou.vip/Ftr-z7dlfG8WhtqYnzu08qlRz8sb?imageView2/0/q/50|imageslim",
  "https://res.training.luojigou.vip/FpQyT6VRsHQVGfmXSO1kuWrYx0Jh?imageView2/0/q/50|imageslim",
  "https://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:
      "https://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim",
    label:
      "武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱",
  },
  {
    id: 1,
    imgUrl:
      "https://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim",
    label:
      "武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱",
  },
  {
    id: 2,
    imgUrl:
      "https://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim",
    label:
      "武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱",
  },
]);
const joinImg = Object.freeze({
  hot:
    "https://res.training.luojigou.vip/Fv5jDvDdHaVLQThclUJhhoIL9ee8?imageView2/0/q/50|imageslim",
  cold:
    "https://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")
        }
      ],
      merchantsList: [
        {
          imgUrl: require('@/assets/images/merchants/merchants_img_01.png'),
          title: '逻辑狗专柜', 
          // desc: '逻辑狗·专柜是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程服务。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。'
        },
        {
          imgUrl: require('@/assets/images/merchants/merchants_img_02.png'),
          title: '“思维芯”四大课程体系',
          // desc: '逻辑狗——中国家庭教育领军品牌，在市场上，以逻辑狗思维体验HOME、逻辑狗思维体验PLUS、逻辑狗探索小镇TOWN呈现在家庭用户端，以小而美的形式，线上线下营销模式，让家长和孩子获得更好的服务体验。爱游戏是孩子的天性！创研万种游戏，让孩子在游戏中形成良好的学习习惯，塑造优秀的学习品质。'
        },
        {
          imgUrl: require('@/assets/images/merchants/merchants_img_03.png'),
          title: '逻辑狗创意馆',
          desc: '<p>产品销售：设有陈列柜，多类产品，同时销售，销售利润<br/>体验自玩：设有自玩区，产品体验，亲子活动，进行引流<br/>游戏体验：设有游戏区，体验引导，思维提升，游戏盈利</p>',
        },
        {
          imgUrl: require('@/assets/images/merchants/merchants_img_04.png'),
          title: '逻辑狗·探索小镇',
          desc: '逻辑狗·探索小镇，专注于3-7岁儿童优质思维能力养成的场景式、游戏化体验中心，为儿童提供具有国际品质的全球思维训练内容与服务。小镇引进德国学前优质思维教育理念和体系，采用德国思维游戏教学法，结合国内学前儿童学习领域与特点，悉心为中国孩子量身定做的一套具有国际品质，具有独特的“6P、5M、10A、6T”教学 理念和方法，形成小镇特有的HABIT思维习惯教育理念。',
        }
      ],
      // 1-家庭（专柜）1-逻辑狗思维游戏HOME&PLUS馆 2-思维芯游戏室 2-“思维芯”四大课程体系 4-逻辑狗·探索小镇
      projectList: [
        {
          id: 1,
          value: 1,
          title: '逻辑狗专柜'
        },
        {
          id: 2,
          value: 1,
          title: '逻辑狗创意馆'
        },
        {
          id: 3,
          value: 2,
          title: '思维芯游戏室'
        },
        {
          id: 4,
          value: 2,
          title: '“思维芯”四大课程体系'
        },
        {
          id: 5,
          value: 4,
          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,
    SubmitForm
  },
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  async asyncData({ params, store }) {},
  methods: {
    navPage() {
      this.$router.push({ path: '/merchants/campus' });
    },
    async handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // const index = this.projectList.findIndex(item => {
          //   return item.id === this.form.project;
          // })
          // if(index == -1) {
          //   this.$notify({
          //     title: '失败',
          //     message: '选择数据有误',
          //     type: 'info'
          //   });
          //   return
          // }
          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;
      }
    }
  }
}
.list-wrap {
    margin-top: 100px;
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 88px;
      height: 418px;
      // &:hover {
      //   background: #FFFFFF;
      //   box-shadow: 20px 20px 25px 0px rgba(211, 229, 255, 0.33);
      //   .item-right {
      //     .btn {
      //       opacity: 1;
      //     }
      //   }
      // }
      .item-left {
        // margin-right: 70px;
        width: 589px;
        height: 418px;
        img {
          height: 100%;
          object-fit: cover;
        }
      }
      .item-right {
        position: relative;
        width: 551px;
        .title {
          font-size: 30px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 42px;
          margin-top: 34px;
        }
        .desc {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 28px;
          margin-top: 47px;
        }
        .btn {
          width: 104px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
          border-radius: 32px;
          color: #FFFFFF;
          opacity: 0.8;
          margin-top: 25px;
        }
      }
      .item-left2 {
        position: relative;
        // margin-right: 38px;
        width: 551px;
        .title {
          font-size: 30px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 42px;
          margin-top: 34px;
        }
        .desc {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 28px;
          margin-top: 47px;
        }
        .btn {
          width: 104px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          background: linear-gradient(180deg, #4482FE 0%, #004DE7 100%);
          box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
          border-radius: 32px;
          color: #FFFFFF;
          opacity: 0.8;
          margin-top: 25px;
        }
      }
      .item-right2 {
        // margin-right: 38px;
        margin-bottom: 38px;
        width: 589px;
        height: 418px;
        img {
          height: 100%;
          object-fit: cover;
        }
      }
      .item-right,
      .item-left2 {
        .title::before {
          content: 'SINO-GERMAN';
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
          // width: 518px;
          height: 70px;
          font-size: 70px;
          font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
          font-weight: 800;
          color: rgba(153, 153, 153, 0.08);
          line-height: 105px;
        }
      }
    }
    .bgcp8 {
      padding-top: 30px;
      width: 100%;
      background-color: #F8FBFF;
      .item {
        margin: 0 auto 162px;
        width: 1200px;
        .item-left {
          position: relative;
          bottom: -22px;
        }
        .item-right {
          margin-top: 22px;
        }
      }
    }
    
}
.halfbgc {
  position: absolute;
  top: -52px;
  left: -47px;
  z-index: -1;
  width: 1950px;
  height: 448px;
  background: #F8FBFF;
}

.cp {
  cursor: pointer;
}
.ofh {
  overflow: hidden;
}

.pt20 {
  padding-top: 20px;
}
</style>