zhongde-website/pages/about/brand.vue

<template>
  <div class="Brand-container">
    <common-banner :img="bgImg" :height="643">
      <h2>品牌故事</h2>
    </common-banner>

    <!-- 公司简介 -->
    <div class="company-intro">
      <div class="left">
        <img :src="companyLeft" alt="" srcset="">
      </div>
      <div class="right">
        <img :src="companyRight" alt="" srcset="">
        <div class="info">
          <div class="name-en">PROFILE</div>
          <div class="name">公司简介</div>
          <p>全球儿童思维教育专家，儿童思维教育领域中国开创者。率先创研和实践幼儿园及家庭思维游戏化教育体系，以德国优质思维教育内容为载体，填补中国思维教育领域空白，创立了行业领先的线上线下（OMO）交互的教育内容服务模式，是国际化科技思维教育的拓展者，打造具有成长型思维模式、全球胜任力的未来人才，是中国素质教育事业的发展者、创新者。</p>
          <p>中德智慧教育围绕儿童思维策略形成期，高度整合幼儿园五大领域教育内容，通过提升幼儿思维能力，培养良好学习习惯，综合促进幼儿学习品质的发展。</p>
        </div>
        <img class="bgLogo" :src="bgLogo" alt="" srcset="">
      </div>
    </div>

    <!-- 思维教育 -->
    <div class="education">
      <title-content :title="'思维教育'" :titleSub="'THINKING EDUCATION'"></title-content>
      <div class="e-content w1200">
        <img src="~/assets/images/brand/eduction_img.png" alt="" srcset="">
      </div>
    </div>

    <!-- 五大领域 -->
    <div class="field">
      <title-content :title="'中德智慧国际思维教育五大领域'" :titleSub="'FIVE FIELDS OF SINO-GERMAN INTELLIGENT INTERNATIONAL THINKING EDUCATION'"></title-content>
      <div class="f-content w1200">
        <div class="fields">
          <div class="field-container" @mouseenter="handleFieldEnter(item, index)" v-for="(item, index) in fieldData" :key="index">
            <div :class="['field-item', index == currentFieldIndex ? 'active' : '']" :style="{'background': item.background}">
              <img :src="item.imgUrl" alt="" :style="{ 'height': item.height + 'px', 'width': item.width + 'px'}" srcset="">
            </div>
          </div>
        </div>
        <div class="bar" :style="{'background': fieldData[currentFieldIndex].background}"></div>
        <div class="content">
          <div class="label" :style="{'background': fieldData[currentFieldIndex].background, 'width': fieldData[currentFieldIndex].labelWidth + 'px'}">{{fieldData[currentFieldIndex].label}}</div>
          <div class="title" :style="{'color': fieldData[currentFieldIndex].background}">{{fieldData[currentFieldIndex].title}}</div>
          <div class="detail" :style="{'background': fieldData[currentFieldIndex].lightBackground}">{{fieldData[currentFieldIndex].desc}}</div>
        </div>
        <div class="img-wrap">
          <img v-show="index == currentFieldIndex" :src="item.fieldImg" alt="" srcset="" v-for="(item, index) in fieldData" :key="index" >
        </div>
      </div>
    </div>

    <!-- 35种能力提升方式  -->
    <div class="ways">
      <title-content :title="'35种能力提升方式'" :titleSub="'35WAYS TO IMPROVE YOUR ABILITY'"></title-content>
      <div class="w-content w1200">
        <div class="img-wrap">
          <img src="~/assets/images/brand/ways_img.png" alt="" srcset="">
        </div>
      </div>
    </div>

    <!-- 中德国际思维教育三原则  -->
    <div class="principles">
      <div class="title-content">
        <div class="title">中德国际思维教育三原则</div>
        <div class="title-sub">THREE PRINCIPLES OF INTERNATIONAL THINKING EDUCATION BETWEEN CHINA AND GERMANY</div>
      </div>
      <div class="principles-box w1200">
        <div class="principles-box-item" v-for="(item, index) in principlesData" :key="index">
          <img :src="item.imgUrl" alt="">
          <div class="principles-box-item-num">{{ item.number }}</div>
          <div class="principles-box-item-label">{{ item.label }}</div>
        </div>
      </div>
    </div>

    <!-- 发展历程 -->
    <div class="development">
      <title-content :title="'发展历程'" :titleSub="'THE DEVELOPMENT COURSE'"></title-content>
      <div class="d-event">
        <div class="w1200">
          <div class="title">
            <img src="~/assets/images/brand/event_label.png" alt="" srcset="">
          </div>
          <div class="progress-bar">
            <template v-for="(item, index) in eventDurationData">
              <div :class="['node', currentDurationIndex == index ? 'active' : '' ]" :key="index" @click="chooseYear(item, index)">
                <div class="txt">{{item.text}}</div>
                <div class="core"></div>
              </div>
              <div class="line" :key="item.year" v-if="index != eventDurationData.length -1"></div>
            </template>
            <!-- <div class="node active" data-year="2016" index="1"><div class="txt">2017</div><div class="core"></div></div>
            <div class="line"></div>
            <div class="node" data-year="2012" index="2"><div class="txt">2012</div><div class="core"></div></div>
            <div class="line"></div>
            <div class="node" data-year="2007" index="3"><div class="txt">2007</div><div class="core"></div></div>
            <div class="line"></div>
            <div class="node" data-year="2003" index="4"><div class="txt">2003</div><div class="core"></div></div> -->
          </div>
        </div>
      </div>
      <div class="d-event-content" ref="event" :style="{height: eventHeight}">
        <div class="mod-con">
          <div :class="['event-main', animate ? 'animate' : '']"  ref="drag" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
            <div class="event-main-box" v-for="(item, index) in eventDataReverse" :key="index">
              <div class="event-title">{{ item.title }}</div>
              <div class="li clearfix" v-for="(ele, index) in item.eventList" :key="index">
                <div class="left">{{ ele.month }}</div>
                <div class="right">{{ ele.thing }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 大事记 -->
    <!-- <div class="event">
      <title-content :title="'大事记'" :titleSub="'MEMORABILIA'"></title-content>
      <div class="event-box w1200">
        <img class="event-bgimg" :src="eventImg" alt="" srcset="">
        <div
          :style="{top: 237 + 225 * item.site.y + 'px', left: 121 + 228 * item.site.x + 'px'}"
          :class="['event-box-item']"
          v-for="item in eventData"
          :key="item.id">
            <div class="yearNumber" @mouseenter="currentEventImg(item)">{{item.id}}</div>
            <img
              v-if="currentEventImgId === item.id"
              @mouseleave="currentEventImgId = ''"
              :class="['color' + item.id, 'eventImgurl']"
              :src="item.eventImgurl"
              :style="{width: item.eventImgurlWidth + 'px', height:item.eventImgurlHeight + 'px'}"
              alt="">
        </div>
      </div>
    </div> -->

    <!-- 核心团队 -->
    <!-- <div class="kernel">
      <title-content :title="'核心团队'" :titleSub="'THE CORE TEAM'"></title-content>
      <div class="kernel-box w1200">
        <div class="kernel-box-item item01">
          <img class="team01" :src="kernelData[0].imgUrl" alt="" srcset="">
          <div class="info">
            <div class="name">张洁</div>
            <div class="title">中德智慧董事长</div>
          </div>
        </div>
        <div class="kernel-box-item item02">
          <img class="team02" :src="kernelData[1].imgUrl" alt="" srcset="">
          <div class="info">
            <div class="name">钟建春</div>
            <div class="title">培训部总监</div>
          </div>
        </div>
        <div class="kernel-box-item item03">
          <img class="team03" :src="kernelData[1].imgUrl" alt="" srcset="">
          <div class="info">
            <div class="name">钟建春</div>
            <div class="title">培训部总监</div>
          </div>
        </div>
        <div class="kernel-box-item item04">
          <img class="team04" :src="kernelData[1].imgUrl" alt="" srcset="">
          <div class="info">
            <div class="name">钟建春</div>
            <div class="title">培训部总监</div>
          </div>
        </div>
        <div class="kernel-box-item item05">
          <img class="team05" :src="kernelData[1].imgUrl" alt="" srcset="">
          <div class="info">
            <div class="name">钟建春</div>
            <div class="title">培训部总监</div>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 文化 -->
    <!-- <div class="cultrue">
      <div class="title-content">
        <div class="title">我们努力践行的文化 </div>
        <div class="title-sub">THE CULTURE THAT WE TRY TO LIVE UP TO</div>
      </div>
      <div class="cultrue-box w1200">
        <div class="cultrue-box-item" v-for="item in cultrueData" :key="item.id">
          <img :src="item.imgUrl" :class="['wow animate__animated']" alt="" />
          <div class="cultrue-box-item-label">{{ item.label }}</div>
          <div class="cultrue-box-item-text" v-html="item.text"></div>
        </div>
      </div>
      <div class="cultrue-bgimg">
        <img
          src="http://res.training.luojigou.vip/Fj4XvDNdIw6iDP8gWQuRHKijlFwM?imageView2/0/q/50|imageslim"
          alt="">
      </div>
    </div> -->

    <!-- 理念 -->
    <!-- <div class="idea">
      <title-content :title="'我们始终秉承的理念'" :titleSub="'WE ALWAYS UPHOID THE CONCEPT'"></title-content>
      <div class="idea-box">
        <div
          class="idea-box-item"
          v-for="item in ideaData"
          :key="item.id"
        >
          <div class="top">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="center">
            <img :src="item.numUrl" alt="">
            <div>{{item.label}}</div>
          </div>
          <div class="footer">
            <div>{{item.resume}}</div>
          </div>
        </div>
      </div>
    </div> -->

  </div>
</template>

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

const kernelData = Object.freeze([
  {
    id: 0,
    imgUrl: require("~/assets/images/brand/team_01.png"),
    position: "董事长",
    name: "张洁",
    resume:
      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
  },
  {
    id: 1,
    imgUrl: require("~/assets/images/brand/team_02.png"),
    position: "培训部 总监",
    name: "钟建春",
    resume:
      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
  }
]);
const cultrueData = Object.freeze([
  {
    id: 0,
    // imgUrl: "http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/cultrue_01@2x.png"),
    label: "宗旨",
    text: "关注儿童成长</br>服务中国母亲",
  },
  {
    id: 1,
    // imgUrl: "http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/cultrue_02@2x.png"),
    label: "文化",
    text: "缔造愿景，追求卓越</br>共生共荣，体现价值",
  },
  {
    id: 2,
    // imgUrl: "http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/cultrue_03@2x.png"),
    label: "愿景",
    text: "让中国的孩子幸福成长",
  },
  {
    id: 3,
    // imgUrl: "http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/cultrue_04@2x.png"),
    label: "价值观",
    text:
      "客户第一</br>团队合力第二</br>专业专注</br>诚信公正</br>拥抱变化</br>激情快乐 ",
  },
]);
const ideaData = Object.freeze([
  {
    id: 0,
    // imgUrl: "http://res.training.luojigou.vip/FgJw7WqbyCVkQJCgCBd07qipb_PI?imageView2/0/q/50|imageslim",
    // numUrl: "http://res.training.luojigou.vip/FgX-hI1Y2fjoIvturT1uYaeVjnfB?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/idea_01@2x.png"),
    numUrl: require("~/assets/images/brand/num_01@2x.png"),
    label: "专业技术",
    resume:
      "我们拥有行业专业技术实力与自身 工程开发团队，为您的商业变现及 产品需求保驾护航。",
  },
  {
    id: 1,
    // imgUrl: "http://res.training.luojigou.vip/Fl4S2hBlBWsTvfwdvYHaE3RKpLyO?imageView2/0/q/50|imageslim",
    // numUrl: "http://res.training.luojigou.vip/Fk5hTknpr4deZWFtcfmRJSHNV3_K?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/idea_02@2x.png"),
    numUrl: require("~/assets/images/brand/num_02@2x.png"),
    label: "贴心服务",
    resume:
      "我们始终坚持优质的服务理念，无 论任何时候您遇到困难，我们都会 及时提供精准有效的解决方案。",
  },
  {
    id: 2,
    // imgUrl: "http://res.training.luojigou.vip/FkRWFwiFQu4XL1BPA96jHbmK1X1D?imageView2/0/q/50|imageslim",
    // numUrl: "http://res.training.luojigou.vip/FiBasqi9NpLdJ_U9jr-95yxgvL1C?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/brand/idea_03@2x.png"),
    numUrl: require("~/assets/images/brand/num_03@2x.png"),
    label: "创业伙伴",
    resume:
      "我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手前行。",
  },
]);
const eventData = Object.freeze([
  {
    id: 2003,
    title: 2003,
    site: {
      x: 4,
      y: 3,
    },
    // yearImgurl: "http://res.training.luojigou.vip/FsTtnNKFpIsYh69tIsWqEiocc0Jr?imageView2/0/q/50|imageslim",
    // eventImgurl: "http://res.training.luojigou.vip/FrFfg21nonbZyNSUSpAWCiREn7lk?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2003.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2003.png'), require('~/assets/images/about/year_2003@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2003@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '350',
    eventList: [
      {
        month: '2月',
        thing: '张洁女士与德国芬肯教育机构创始人Herrn Krick先生达成中德战略合作协议。'
      },
      {
        month: '4月',
        thing: '“逻辑狗儿童思维升级游戏系统”首次专家鉴定会在北京召开，多位知名教育专家参加会议。'
      },
      {
        month: '5月',
        thing: '北京中德智慧教育文化有限公司成立，张洁女士作为创始人任董事长&CEO。'
      },
      {
        month: '12月',
        thing: '“逻辑狗”儿童思维训练产品正式出版。'
      }
    ]
  },
  {
    id: 2004,
    title: 2004,
    site: {
      x: 3,
      y: 3,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fhe4VjIQDeQtQzPnSVmsDc4yYYzE?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FvnL2N118R-0Cp9OcKgK9Ru8nAyp?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2004.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2004.png'), require('~/assets/images/about/year_2004@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2004@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '246',
    eventList: [
      {
        month: '1月',
        thing: '启动“十五”国家课题《幼儿思维训练与学习能力发展的研究》开题会。'
      },
      {
        month: '8月',
        thing: '逻辑狗产品亮相全国市场，入驻北京王府井书店、中关村图书大厦等十余家商厦。'
      },
      {
        month: '12月',
        thing: '举办“十五”国家课题园际教研交流会。'
      }
    ]
  },
  {
    id: 2005,
    title: 2005,
    site: {
      x: 2,
      y: 3,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FodjYYc3-VyZyJHnfuKJQGapkJzt?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FqNcz_3P81MubVeHzAnn_RrkMoCQ?imageView2/0/q/50|imageslim",
    eventImgurl: require('~/assets/images/brand/event_year_2005@2x.png'),
    yearImgurl: require('~/assets/images/about/year_2005.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2005.png'), require('~/assets/images/about/year_2005@2x.png')],
    eventImgurlWidth: '269',
    eventImgurlHeight: '245',
    eventList: [
      {
        month: '1月',
        thing: '首届代理商年会在北京圆满召开。'
      },
      {
        month: '5月',
        thing: '与中央电视台少儿频道《智慧树》节目正式达成内容合作，每周三次播出。'
      },
      {
        month: '7月',
        thing: '举办首届中德智慧杯·思维好儿童全国幼儿思维能力挑战赛。'
      }
    ]
  },
  {
    id: 2006,
    title: 2006,
    site: {
      x: 1,
      y: 3,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fj_2tRMk_1H9NSp9rE0XK0nEcv6g?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FkvModMYKxFJcnqRrpGSULyd9Th7?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2006.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2006.png'), require('~/assets/images/about/year_2006@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2006@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '273',
    eventList: [
      {
        month: '5月',
        thing: '出版逻辑狗幼儿园教学版全线产品。'
      },
      {
        month: '6月',
        thing: '第二届“十一五”中国教育学会国家课题在全国重点幼儿园实施。'
      }
    ]
  },
  {
    id: 2007,
    title: 2007,
    site: {
      x: 0,
      y: 3,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fm4DqB0VKXcLXaa4P2suM1i-2LMZ?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/Fkp-2UvHIyIqEW9pu5tZKNpvcCov?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2007.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2007.png'), require('~/assets/images/about/year_2007@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2007@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '403',
    eventList: [
      {
        month: '5月',
        thing: '第二届幼儿思维能力挑战赛全国总决赛在北京公安部幼儿园举行。并于人民大会堂举行颁奖典礼。'
      },
      {
        month: '10月',
        thing: '亮相第六届中国玩具展，“逻辑狗”荣获“教育类玩具金奖”。'
      }
    ]
  },
  {
    id: 2008,
    title: '2008~中德智慧2.0时代',
    site: {
      x: 0,
      y: 2,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FlEj53_PWeL59J8V6qqduokmrEif?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FpIzAvfIOeIhBEtzVEZYp74y7Wh3?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2008.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2008.png'), require('~/assets/images/about/year_2008@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2008@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '245',
    eventList: [
      {
        month: '2月',
        thing: '首届品牌系列活动“智慧园长沙龙”在北京启动。'
      },
      {
        month: '7月',
        thing: '第三届幼儿思维能力挑战赛开赛。'
      }
    ]
  },
  {
    id: 2009,
    title: 2009,
    site: {
      x: 1,
      y: 2,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FtRU3rBk7D0SBEmbTujXX1o3THTU?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/Fnmlx106pwroL9I6UNo81BTpxGyO?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2009.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2009.png'), require('~/assets/images/about/year_2009@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2009@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '220',
    eventList: [
      {
        month: '1月',
        thing: '出版逻辑狗儿童思维升级游戏系统小学版全线产品。'
      },
      {
        month: '5月',
        thing: '举办首届全国师资培训会。'
      },
      {
        month: '6月',
        thing: '主办“送你一把金钥匙”思维课程交流会。'
      },
      {
        month: '7月',
        thing: '第四届中德智慧杯，思维好儿童幼儿思维能力挑战赛全国总决赛在北京成功举行。'
      }
    ]
  },
  {
    id: 2010,
    title: 2010,
    site: {
      x: 2,
      y: 2,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fmx2IObHIKURUiGbrvX4cpZ-u5MB?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/Fg2GfiNmRknqRjTbzvCq09ewERIH?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2010.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2010.png'), require('~/assets/images/about/year_2010@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2010@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '403',
    eventList: [
      {
        month: '2月',
        thing: '中德智慧教育逻辑狗品牌淘宝官方旗舰店上线。'
      },
      {
        month: '7月',
        thing: '第五届幼儿思维能力挑战赛全国总决赛在北京举行。'
      },
      {
        month: '10月',
        thing: '全新推出荣获安徒生奖的世界最美童话书——《春夏秋冬思维绘本》。'
      }
    ]
  },
  {
    id: 2011,
    title: 2011,
    site: {
      x: 3,
      y: 2,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FutAwrnX_ypeS4bUqol5xKVVqrXU?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FuPF8r4-f8-_SY_v0Tky2AnFPYeH?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2011.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2011.png'), require('~/assets/images/about/year_2011@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2011@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '480',
    eventList: [
      {
        month: '5月',
        thing: '承办第13届北京国际玩具及幼教用品展览会。'
      },
      {
        month: '6月',
        thing: '启动品牌系列活动“百城巡讲”，在全国连续举办200场思维教育宣讲活动。'
      },
      {
        month: '7月',
        thing: '第六届幼儿思维能力挑战赛全国总决赛在北京举行。'
      },
      {
        month: '10月',
        thing: '第三届中国教育学会“十一五”科研重点课题《优质教育模式对促进幼儿早期智力发展的实践研究》子课题《逻辑狗优质教育模式促进儿童思维能力发展的研究》举行结题论证会。'
      },
      {
        month: '11月',
        thing: '《蚂蚁沙丘.学前儿童情境科学》产品正式出版。'
      }
    ]
  },
  {
    id: 2012,
    title: 2012,
    site: {
      x: 4,
      y: 2,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fg3Jph3aJcX-hQtbvOs5UJZCzmj7?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/Fp5DT3Tg3CBl2rvjT9sIsCBcUSWu?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2012.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2012.png'), require('~/assets/images/about/year_2012@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2012@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '325',
    eventList: [
      {
        month: '4月',
        thing: '德国芬肯一行对中德智慧教育进行友好交流访问，就双方理念、服务理念、产品研发情况等进行了深入交流。'
      },
      {
        month: '7月',
        thing: '第七届幼儿思维能力挑战赛全国总决赛在北京举行。'
      }
    ]
  },
  {
    id: 2013,
    title: 2013,
    site: {
      x: 4,
      y: 1,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FjWOsyUqGM6eIaPW3_lCzDzw3h1M?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FirCgjTps0bLqGV5-TOpuX6q8SMl?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2013.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2013.png'), require('~/assets/images/about/year_2013@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2013@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '394',
    eventList: [
      {
        month: '3月',
        thing: '创立自媒体时代，开通品牌官方公众号。'
      },
      {
        month: '6月',
        thing: '中德智慧教育品牌入驻天猫、京东等主流电商平台。'
      },
      {
        month: '7月',
        thing: '第八届幼儿思维能力挑战赛全国总决赛在北京举行。'
      },
      {
        month: '9月',
        thing: '举办中国教育学会“十二五”科研重点规划课题。'
      },
      {
        month: '10月',
        thing: '建立全国商超系统“成长元素”专柜，覆盖全国80余个地区，专柜数量近100个。'
      },
      {
        month: '10月',
        thing: '首次承接北京市教委“幼儿科学教育教师”项目。'
      },
      {
        month: '10月',
        thing: '中德智慧教育培训突破百城，近200个地区。'
      }
    ]
  },
  {
    id: 2014,
    title: 2014,
    site: {
      x: 3,
      y: 1,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FqI9b5_4iP6WmoVE_z7o9RLm7RZe?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FlyzOxQWuiW2nYmACRUPsiCLyuw7?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2014.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2014.png'), require('~/assets/images/about/year_2014@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2014@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '688',
    eventList: [
      {
        month: '3月',
        thing: '承接北京市教委园长教师素质提升计划的培训工作。'
      },
      {
        month: '3月',
        thing: '《与克鲁德一起听说读》系列正式出版。'
      },
      {
        month: '4月',
        thing: '中德智慧商学院启动，缔造中国早期教育界首家商学院。'
      },
      {
        month: '5月',
        thing: '首次举办“中德幼儿科学教育国际论坛”，邀请德国专家来京讲座。'
      },
      {
        month: '6月',
        thing: '《儿童思维升级训练系统》、《克鲁德儿童语言升级训练系统》、《春夏秋冬思维绘本》礼盒装、聪明笔四大产品系列正式发布。'
      },
      {
        month: '6月',
        thing: '第六届中国学前教育研究会“十三五”课题《思维游戏与幼儿学习品质形成的相关性研究》在京召开课题开题会。'
      },
      {
        month: '8月',
        thing: ' 第十二届幼儿思维能力挑战赛全国总决赛在北京举行。同期举行了“思维魔法营地·小蚂蚁夏令营”。'
      },
      {
        month: '9月',
        thing: '公司受邀参加北京市教委庆祝第33个教师节“师爱无尘” 活动。'
      }
    ]
  },
  {
    id: 2015,
    title: 2015,
    site: {
      x: 2,
      y: 1,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FoeSNwPl-fQXqwwow99j9Rsd9tjB?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FmBATtftJW08bU-5KGBFuKsAQSN1?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2015.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2015.png'), require('~/assets/images/about/year_2015@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2015@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '324',
    eventList: [
      {
        month: '4月',
        thing: '第十届幼儿思维能力挑战赛启动。'
      },
      {
        month: '5月',
        thing: '中德智慧教育品牌应邀参加“2015北京长城森林儿童艺术节”。'
      },
      {
        month: '6月',
        thing: '开创中国首家体验式儿童思维培训中心“逻辑狗·探索小镇”。'
      },
      {
        month: '7月',
        thing: '第十届幼儿思维能力挑战赛全国总决赛在北京举行。'
      },
      {
        month: '9月',
        thing: '中德智慧教育官网www.zaojiao.net改版升级上线。'
      }
    ]
  },
  {
    id: 2016,
    title: 2016,
    site: {
      x: 1,
      y: 1,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fl2SA1cd8DqIzQGIQqh5qrNUMmR6?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FoaOya6X8s6j3Bzc2oBNDvX-JHW2?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2016.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2016.png'), require('~/assets/images/about/year_2016@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2016@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '584',
    eventList: [
      {
        month: '1月',
        thing: '品牌系列活动园长沙龙在北京·东澜剧场举行。'
      },
      {
        month: '5月',
        thing: '网络版“逻辑狗儿童思维升级游戏活动材料”正式全面上市。'
      },
      {
        month: '7月',
        thing: '公司受邀参加韩国首尔世界学前教育大会。'
      },
      {
        month: '8月',
        thing: '第十一届幼儿思维能力挑战赛全国总决赛在北京举行。'
      },
      {
        month: '9月',
        thing: '与德方合作成立“中德儿童学前教育交流文化中心”。'
      },
      {
        month: '12月',
        thing: '创始人·董事长张洁荣获“2016中国教育行业领军人物”并接受央广网个人专访。'
      },
      {
        month: '12月',
        thing: '与德国Westermann公司签署合作，获得LüK思维魔法游戏在中国大陆地区的独家授权。'
      }
    ]
  },
  {
    id: 2017,
    title: 2017,
    site: {
      x: 0,
      y: 1,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fi_RKVrGct2V235xsKpwsIA51YX-?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FsALqlvULFPhf-kxcPw1YtRiZjIG?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2017.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2017.png'), require('~/assets/images/about/year_2017@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2017@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '532',
    eventList: [
      {
        month: '4月',
        thing: '全新场景化幼儿园区角活动材料逻辑狗思维游戏盒子全面进入幼儿园。'
      },
      {
        month: '6月',
        thing: '德国Westermann公司LüK系列产品《思维魔法我的Pad》正式出版。'
      },
      {
        month: '6月',
        thing: '第六届中国学前教育研究会“十三五”课题《思维游戏与幼儿学习品质形成的相关性研究》在京召开课题开题会。'
      },
      {
        month: '8月',
        thing: '第十二届幼儿思维能力挑战赛全国总决赛在北京举行。同期举行了“思维魔法营地·小蚂蚁夏令营”。'
      },
      {
        month: '9月',
        thing: '公司受邀参加北京市教委庆祝第33个教师节“师爱无尘” 活动。'
      }
    ]
  },
  {
    id: 2018,
    title: 2018,
    site: {
      x: 0,
      y: 0,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FvN4BWxIckbJmo_qrN7mlILrtQKg?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/FvQZtrIRkaNzGJ8KbF1-Cl-k5hfJ?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2018.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2018.png'), require('~/assets/images/about/year_2018@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2018@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '662',
    eventList: [
      {
        month: '5月',
        thing: '携新产品“思维魔法系列”参加第八届北京国际幼教展。'
      },
      {
        month: '6月',
        thing: '创始人·董事长张洁女士创造性的提出“思维芯”理论，给孩子一颗强大起来的思维芯，构建学前儿童优质成长型思维模式。'
      },
      {
        month: '6月',
        thing: '首次举办中德智慧教育品牌系列活动园长欧洲行。'
      },
      {
        month: '7月',
        thing: '第十三届幼儿思维能力挑战赛开赛，全国500强小选手会师决赛。'
      },
      {
        month: '11月',
        thing: '品牌系列活动“成长故事”国际思维教育中国行系列活动启动。'
      },
      {
        month: '12月',
        thing: '“植根文化·专注教育”第十三届代理商年会在北京举行。'
      }
    ]
  },
  {
    id: 2019,
    title: '2019~中德智慧3.0时代',
    site: {
      x: 1,
      y: 0,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/Fgr3xXoLsgpIP2wBglovLx0e89Mb?imageView2/0/q/50|imageslim",
    // eventImgurl:
    //   "http://res.training.luojigou.vip/Flio74FIlTt_aYhyW-3scKmhSrHc?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2019.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2019.png'), require('~/assets/images/about/year_2019@2x.png')],
    eventImgurl: require('~/assets/images/brand/event_year_2019@2x.png'),
    eventImgurlWidth: '269',
    eventImgurlHeight: '766',
    eventList: [
      {
        month: '3月',
        thing: '中德智慧教育创始人张洁女士与德国芬肯教育机构达成战略合作，获得芬肯在中国大陆地区所有产品的独家研发权。'
      },
      {
        month: '4月',
        thing: '逻辑狗·探索小镇首次在校长邦加盟展中亮相。'
      },
      {
        month: '5月',
        thing: '与北京师范大学成立楚江亭教授工作室，展开院长领导力培训项目。'
      },
      {
        month: '5月',
        thing: '创始人·董事长张洁女士出席CHPEE精英俱乐部会议并出任俱乐部副主席'
      },
      {
        month: '6月',
        thing: '公司乔迁新址，全面升级，提升服务体系和数字化运营能力，在现代化充满文化和艺术气息的全新独栋办公别墅中，开启了中德智慧教育3.0时代。引领中国教育“思维芯”时代。'
      },
      {
        month: '7月',
        thing: '第十四届幼儿思维能力挑战赛全国总决赛在北京举行。'
      },
      {
        month: '8月',
        thing: '全新教材版系列《中华小熊猫·中国文化思维游戏系统》正式面世。'
      },
      {
        month: '10月',
        thing: '公司参加校长邦榜样的力量教育盛典，荣获校长邦“理事单位”，旗下逻辑狗产品获得“匠心独运”奖。'
      },
      {
        month: '11月',
        thing: '董事长&CEO张洁受邀参加腾讯“回响中国”教育盛典，荣获“2019教育行业影响力人物”；中德智慧教育荣获“2019教育行业影响力品牌”。'
      },
      {
        month: '12月',
        thing: '入选中国品牌领袖联盟。'
      }
    ]
  },
  {
    id: 2020,
    title: 2020,
    site: {
      x: 2,
      y: 0,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FhjVzCv4CjuHsuCjJvSWGGxruzxv?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2020.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2020.png'), require('~/assets/images/about/year_2020@2x.png')],
    eventList: [
      {
        month: '2月',
        thing: '疫情期间，中德智慧教育及时开展2020年春季幼教人停课不停学「四大行动」。'
      },
      {
        month: '3月',
        thing: '全新新媒体矩阵搭建。'
      },
      {
        month: '4月',
        thing: '天猫店铺设计全新优化升级。'
      },
      {
        month: '5月',
        thing: '17年周年庆创始人作客湖南卫视著名主持人张丹丹直播间带货。'
      },
      {
        month: '8月',
        thing: '新品隆重上市：《二十四节气》《思考技巧》《聪明书》。'
      },
      {
        month: '8月',
        thing: '中德智慧杯·思维好儿童·线上云大赛。'
      },
      {
        month: '9月',
        thing: '参加北京第22届北京国际幼教展。'
      },
      {
        month: '9月',
        thing: '全新包装升级：逻辑狗 网络家庭教学三渠道产品。'
      },
      {
        month: '10月',
        thing: '参加第19届中国国际玩具展。'
      },
      {
        month: '10月',
        thing: '十三五课题「十三五」《思维游戏与幼儿学习品质形成的相关性研究》结题。'
      },
      {
        month: '10月',
        thing: '成功查封河北廊坊非法盗版“逻辑狗”工厂。'
      },
      {
        month: '10月',
        thing: '加入中国玩具和婴童用品协会-理事单位。'
      },
      {
        month: '11月',
        thing: '中德全新品牌视觉升级，逻辑狗形象升级。'
      },
      {
        month: '11月',
        thing: '“中德云聚未来·智慧重构生态——2020年度中德智慧教育合作伙伴嘉年华会”在三亚隆重举行。'
      },
      {
        month: '12月',
        thing: '逻辑狗思维体验Home/Plus加盟模式全新推出。'
      },
    ]
  },
  {
    id: 2021,
    title: 2021,
    site: {
      x: 3,
      y: 0,
    },
    // yearImgurl:
    //   "http://res.training.luojigou.vip/FhjVzCv4CjuHsuCjJvSWGGxruzxv?imageView2/0/q/50|imageslim",
    yearImgurl: require('~/assets/images/about/year_2020.png'),
    yearImgurlSet: [require('~/assets/images/about/year_2020.png'), require('~/assets/images/about/year_2020@2x.png')],
    eventList: [
      {
        month: '',
        thing: '敬请期待'
      }
    ]
  },
]);
const eventDurationData = Object.freeze([
  {
    year: 2021,
    text: '现在'
  },
  {
    year: 2017,
    text: '2017'
  },
  {
    year: 2012,
    text: '2012'
  },
  {
    year: 2007,
    text: '2007'
  },
  {
    year: 2003,
    text: '2003'
  },
])
const fieldData = Object.freeze([
  {
    id: 1,
    title: '逻辑思维',
    label: '喜欢思考、爱上学习',
    labelWidth: 154,
    desc: '逻辑思维是理性认识的阶段，人运用概念、判断、推理等思维类型反映事物本质与规律的认识过程。中德智慧教育以完善的理念，独特的教学方法，运用思维启蒙、思考策略及思考技巧的阶梯式教育方式培养儿童优质思维能力。',
    background: '#FC7E4D',
    lightBackground: '#FEF4EB',
    imgUrl: require('~/assets/images/brand/field_01.png'),
    fieldImg: require('~/assets/images/brand/field_img_01.png'),
    width: 100,
    height: 19,
  },
  {
    id: 2,
    title: '科学探究',
    label: '喜欢探索、热衷钻研',
    labelWidth: 154,
    desc: '科学是幼儿教育五大领域之一，科学的本质在于探究。中德智慧教育为学前儿童创设了国际优质的情境科学探究环境，激发幼儿探究兴趣，体验探究过程、发展初步的探究和解决问题的能力，并在探究中认识周围事物和现象，培养幼儿的科学精神和科学素养。',
    background: '#FFC320',
    lightBackground: '#FFF8EB',
    imgUrl: require('~/assets/images/brand/field_02.png'),
    fieldImg: require('~/assets/images/brand/field_img_02.png'),
    width: 100,
    height: 19
  },
  {
    id: 3,
    title: '语言表达',
    label: '爱上表达、提升自信',
    labelWidth: 154,
    desc: '学前阶段是儿童口头语言发展的关键期，语言表达是幼儿教育五大领域的重要内容。中德智慧根据幼儿语言学习和思维发展的特点，将看、听、动、思、说五维结合，通过具象的趣味图片，让孩子对语言感兴趣。通过生活化的场景，让孩子动脑思考，动手操作，实现全景式、立体式、学习型的全新语言学习模式。',
    background: '#11D60D',
    lightBackground: '#F7FBF2',
    imgUrl: require('~/assets/images/brand/field_03.png'),
    fieldImg: require('~/assets/images/brand/field_img_03.png'),
    width: 100,
    height: 19
  },
  {
    id: 4,
    title: '社会与创造',
    label: '热爱创造、追求卓越',
    labelWidth: 154,
    desc: '幼儿阶段是人社会性发展的重要时期。在这个时期，幼儿逐步认识周围的社会环境，内化社会行为规范；创造的一个最大的特点是有意识地对世界进行探索性劳动。中德智慧以孩子所熟悉的社会生活环境为教育内容，让教育自然的发生，关爱社会、关爱自然，发现身边的事物、现象，去适应社会生活、创新生活，促进社会性和创造力的发展。',
    background: '#567FFF',
    lightBackground: '#EFF4FF',
    imgUrl: require('~/assets/images/brand/field_04.png'),
    fieldImg: require('~/assets/images/brand/field_img_04.png'),
    width: 125,
    height: 19
  },
  {
    id: 5,
    title: '教育+互联+职能',
    label: '喜欢探索、热衷钻研',
    labelWidth: 154,
    desc: '科学是幼儿教育五大领域之一，科学的本质在于探究。中德智慧教育为学前儿童创设了国际优质的情境科学探究环境，激发幼儿探究兴趣，体验探究过程、发展初步的探究和解决问题的能力，并在探究中认识周围事物和现象，培养幼儿的科学精神和科学素养。',
    background: '#BC5ED1',
    lightBackground: '#F9EFFB',
    imgUrl: require('~/assets/images/brand/field_05.png'),
    fieldImg: require('~/assets/images/brand/field_img_05.png'),
    width: 185,
    height: 19
  }
]);
const principlesData = Object.freeze([
  {
    id: 1,
    imgUrl: require("~/assets/images/brand/principles_01.png"),
    number: 1,
    label: "理解儿童，儿童视角",
  },
  {
    id: 2,
    imgUrl: require("~/assets/images/brand/principles_02.png"),
    number: 2,
    label: "多元化教学路径",
  },
  {
    id: 3,
    imgUrl: require("~/assets/images/brand/principles_03.png"),
    number: 3,
    label: "系统深度学习",
  }
])
export default {
  name: "BrandPage",
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  components: {
    CommonBanner,
    TitleContent
  },
  computed: {
    eventDataReverse() {
      let newArr = [];
      eventData.forEach(ele => {
        newArr.unshift(ele);
      })
      return newArr;
    } 
  },
  data() {
    return {
      isMoving: false,
      companyImg: require('@/assets/images/brand/company.png'),
      companyLeft: require('@/assets/images/brand/companyImg.png'),
      companyRight: require('@/assets/images/brand/profileImg.png'),
      bgLogo: require('@/assets/images/brand/bgLogo.png'),
      eventImg: require('@/assets/images/brand/eventImg.png'),
      bgImg: require('@/assets/images/brand/brandBg.png'),
      bannerImg: require('~/assets/images/about/about_brand.png'),
      kernelData,
      currentMouserEnter: false,
      currentMouserId: "",
      cultrueData,
      ideaData,
      eventData: [],
      eventDurationData,
      offsetLeftList: [],
      offsetLeftDurationList: [],
      fieldData,
      principlesData,
      currentFieldIndex: 0,
      currentEventImgId: 2003,
      starX: 0,
      drag: null,
      dragLeft: 0,
      disX: 0,
      currentDurationIndex: 0,
      animate: true,
      eventHeight: 0
    };
  },
  mounted() {
    this.initEvent();
    this.initDrag();
  },
  methods: {
    initEvent() {
      // 设置大事记数据
      let Elements = this.$refs.drag.children;
      let offsetLeftList = [];
      for (let index = 0; index < Elements.length; index++) {
        offsetLeftList.push(Elements[index].offsetLeft)
      }
      this.offsetLeftList = offsetLeftList;

      // 设置大事记段数据
      let offsetLeftDurationList = [];
      this.eventDataReverse.map((item, i) => {
        this.eventDurationData.map((ele, j) => {
          if(item.id == ele.year) {
            offsetLeftDurationList.push(offsetLeftList[i])
          }
        })
      });
      this.offsetLeftDurationList = offsetLeftDurationList;
    },
    initDrag() {
      this.drag = this.$refs.drag;
      this.eventHeight = this.$refs.drag.offsetHeight + 'px';
    },
    currentElement(item) {
      this.currentMouserId = item.id;
      this.currentMouserEnter = true;
    },
    currentEventImg(item) {
      this.currentEventImgId = item.id;
    },
    handleFieldEnter(item, index) {
      this.currentFieldIndex = index;
    },
    handleMouseDown(e) {
      this.animate = false;
      this.isMoving = true;
      const starX = e.clientX;
      this.starX = starX;
    },
    handleMouseMove(e) {
      if(this.isMoving) {
        let disX = this.starX - e.clientX;
        this.disX = disX;
        if(this.dragLeft <= 0 && Math.abs(this.dragLeft) <= this.offsetLeftList[this.offsetLeftList.length - 1]) {
          let left = this.dragLeft - disX;
          if(left > 0 ) {
            left = 0;
          }          
          if(Math.abs(left) >= this.offsetLeftList[this.offsetLeftList.length - 1]) {
            left = -this.offsetLeftList[this.offsetLeftList.length - 1];
          }
          // 判断当前滑动到那个区间
          this.currentDurationIndex = this.getArrayIndex(left);
          this.drag.style.left = left + 'px';
        }
      }
    },
    handleMouseUp(e) {
      this.isMoving = false;
      this.dragLeft = this.dragLeft - this.disX;
      if(this.dragLeft > 0) {
        this.dragLeft = 0;
      }
      if(Math.abs(this.dragLeft) >= this.offsetLeftList[this.offsetLeftList.length - 1]) {
        this.dragLeft = -this.offsetLeftList[this.offsetLeftList.length - 1];
      }
    },
    getArrayIndex(num) {
      let data = Math.abs(num);
      let index = 0;
      this.offsetLeftDurationList.forEach((ele, i) => {
        if(data >= ele ) {
          index = i;
        }
      });
      return index;
    },
    chooseYear(item, tab) {
      this.animate = true;
      this.currentDurationIndex = tab;
      const index = this.eventDataReverse.findIndex(ele => {
        return ele.id == item.year;
      });
      if(index != -1) {
        let left = this.offsetLeftList[index];
        this.dragLeft = -left;
        this.drag.style.left = -left + 'px';
      }
    }
  },
};
</script>
<style scoped lang="scss">
@import '~static/common/style.sass';

.Brand-container {
  .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;
    img {
      width: 100%;
      height: 595px;
      display: block;
    }
    .label {
      color: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 66px;
      font-family: PingFangSC-Medium, sans-serif;
      font-weight: 500;
    }
  }
  .company-intro {
    display: flex;
    margin: 0 auto;
    max-width: 2560px;
    .left {
      flex: 1;
    }
    .right {
      position: relative;
      flex: 1;
      .info {
        margin: 73px 0 0 39px;
        max-width: 520px;;
        position: absolute;
        top: 0;
        .name-en {
          font-size: 50px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          letter-spacing: 1px;
          opacity: 0.1;
        }
        .name {
          position: relative;
          font-size: 40px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          letter-spacing: 1px;
          transform: translateY(-44px);
          &::after {
            position: absolute;
            content: '';
            width: 47px;
            height: 2px;
            border-radius: 200px;
            background: #FFFFFF;
            left: 6px;
            bottom: -17px;
            opacity: 0.8;
          }
        }
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 36px;
          margin-bottom: 50px;
        }
      }
      .bgLogo {
        position: absolute;
        z-index: 10;
        width: 103px;
        height: 132px;
        right: 187px;
        bottom: 32px;
      }
    }
    img {
      width: 100%;
    }
  }
  .education {
    padding: 98px 0;
    .e-content {
      margin-top: 67px;
      height: 760px;
      background: url('~assets/images/brand/eduction_bg.png');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 629px;
        height: 629px;
      }
    }
  }
  .field {
    padding: 98px 0;
    background: #F8FBFF;
    .f-content {
      position: relative;
      margin-top: 90px;
      .fields {
        height: 88px;
        display: flex;
        justify-content: space-between;
      }
      .field-container {
        width: 236px;
        position: relative;
      }
      .field-item {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        padding-top: 25px;
        text-align: center;
        height: 62px;
        transition: bottom .3s ease 0s,height .3s ease 0s;
        cursor: pointer;
        &.active {
          height: 88px;
          bottom: -3px;
        }
      }
      .bar {
        margin-top: 3px;
        width: 100%;
        height: 8px;
        transition: background .3s ease 0s;
      }
      .content {
        width: 100%;
        height: 357px;
        background: #FFFFFF;
        box-shadow: 7px 10px 46px 0px rgba(207, 222, 254, 0.49);
        border-radius: 0px 0px 16px 16px;
        padding: 45px 0 0 41px;
        .label {
          padding: 0 14px;
          height: 32px;
          line-height: 32px;
          border-radius: 3px;
          font-size: 14px;
          color: #FFFFFF;
          font-family: PingFangSC-Regular, PingFang SC;
          transition: width .3s ease 0s,background .3s ease 0s;
        }
        .title {
          margin-top: 10px;
          height: 40px;
          line-height: 40px;
          font-size: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          transition: color .3s ease 0s;
        }
        .detail {
          margin-top: 6px;
          padding: 18px 30px 0 16px;
          border-radius: 10px;
          height: 184px;
          width: 731px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #6A6978;
          line-height: 22px;
          transition: background .3s ease 0s;
        }
      }
      .img-wrap {
        position: absolute;
        right: 140px;
        bottom: 70px;
        width: 190px;
        height: 192px;
        font-size: 0;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .ways {
    margin: 100px 0 78px;
    .w-content {
      margin-top: 70px;
    }
    .img-wrap {
      width: 1200px;
      font-size: 0;
      img {
        width: 100%;
      }
    }
  }
  .principles {
    position: relative;
    overflow: hidden;
    padding: 95px 0 183px;
    background: url('~assets/images/brand/cultrueBg.png');
    background-color: #0D5CFA;
    background-size: cover;
    .title-content {
      .title {
        color: #ffffff;
      }
      .title-sub {
        color: #ffffff;
      }
    }
    .principles-box {
      margin-top: 96px;
      display: flex;
      padding: 0 50px;
      justify-content: space-between;
    }
    .principles-box-item {
      img {
        width: 170px;
        height: 159px;
      }
      .principles-box-item-num {
        font-size: 45px;
        font-family: Nunito-Black, Nunito;
        font-weight: 600;
        color: #FFFFFF;
        height: 57px;
        letter-spacing: 2px;
        text-align: center;
        margin: 14px 0 42px;
      }
      .principles-box-item-label {
        font-size: 16px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 22px;
        text-align: center;
      }
    }
  }
  .development {
    padding: 100px 0;
    .d-event {
      padding-top: 133px;
      margin-top: 72px;
      height: 364px;
      background-size: cover;
      background-image: url('~assets/images/brand/event_bg.png');
      background-position: center;
      color: #fff;
      .title {
        font-size: 0;
        text-align: center;
        img {
          width: 77px;
          height: 29px;
        }
      }
      .progress-bar{ 
        width: 530px; 
        margin: auto; 
        padding-top: 70px;
        .node{ 
          width:24px ; 
          height: 24px;  
          float: left; 
          position: relative; 
          border-radius: 50%; 
          background:rgba(255,255,255,0.5);
          cursor: pointer;
          &.active {
            .core{  
              background: #fff;
            }
          }
        }
        .txt{ 
          position: absolute; 
          font-size: 16px; 
          top: -30px; 
          width: 200px; 
          text-align: center; 
          left: 50%;  
          margin-left: -100px;
        }
        .core{ 
          width:18px; 
          height: 18px; 
          position: absolute; 
          top:3px;  
          left:3px;  
          border-radius: 50%; 
        }
        .line{ 
          float: left; 
          height: 2px;
          background:rgba(255,255,255,0.5); 
          width:100px; 
          margin-top: 11px;
        }
      }
    }
    .d-event-content {
      height: 413px;
      overflow: hidden;
      .mod-con {
        width: 1200px;
        position: relative;
        margin: 0 auto;
      }
      .event-main {
        width: 10000px;
        top: 0;
        left: 0;
        z-index: 1;
        position: absolute;
        &.animate {
          transition: left .5s ease 0s;
        }
        // left: 0;
      }
      .event-main-box {
        width: 362px;
        float: left;
        margin-right: 25px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5F6464;
        line-height: 24px;
        .li {
          line-height: 24px;
          margin-bottom: 16px;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
        }
        .event-title {
          font-size: 24px;
          padding-top: 48px;
          line-height: 36px;
          font-family: Nunito-Black, Nunito;
          font-weight: 900;
          color: #2A2E2E;
          padding-bottom: 13px;
          border-bottom: 1px solid #D8D9DC;
          margin-bottom: 15px;
        }
        .left {
          float: left;
          width: 42px;
          padding-right: 10px;
          text-align: right;
        }
        .right {
          width: 300px;
          float: left;
        }
      }
    }
  }
  .event {
    position: relative;
    margin-top: 100px;
    .event-box {
      position: relative;
      margin-top: 70px;
      // width: 1297px;
      // height: 1296px;

      // position: absolute;
      // left: 50%;
      // top: 259px;
      // transform: translateX(-50%);
      .event-bgimg {
        width: 1200px;
        height: 1185px;
        // position: absolute;
        // left: 0;
        // top: 0;
        // right: 0;
        // bottom: 0;
        // object-fit: cover;
      }
      .event-box-item {
        position: absolute;
        // .yearImgurl {
        //   width: 65px;
        //   height: 30px;
        //   object-fit: cover;
        // }
        .yearNumber {
          text-align: center;
          background-color: #0D5CFA;
          width: 50px;
          height: 22px;
          line-height: 22px;
          font-size: 15px;
          font-family: Nunito-Black, Nunito;
          font-weight: 900;
          color: #FFFFFF;
          border-radius: 200px;
        }
        .eventImgurl {
          position: absolute;
          z-index: 1;
          transform: translate(-50%, -50%);
        }
        .eventInfo {
          position: absolute;
          z-index: 1;
          transform: translate(-50%, -50%);
          width: 269px;
          background-color: #0D5CFA;
          color: #FFFFFF;
          padding: 10px 20px 20px;
          border-radius: 20px;
        }
        .eventItem {
          .month {
            font-size: 18px;
            font-family: PingFangSC-Semibold, sans-serif;
            font-weight: 500;
            line-height: 26px;
          }
          .thing {
            font-size: 16px;
            font-family: PingFangSC-Regular, sans-serif;
            line-height: 26px;
          }
        }
      }
    }
  }
  .kernel {
    margin: 100px auto;
    // height: 2000px;
    position: relative;
    .label {
      // position: absolute;
      width: 100%;
      text-align: center;
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 1);
        // opacity: 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: 45px;
        // left: 32px;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        // margin-top: -65px;
      }
    }
    .kernel-box {
      // position: absolute;
      // top: 300px;
      // left: 50%;
      // transform: translateX(-50%);
      height: 604px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      align-items: center;
      position: relative;
      .kernel-box-item {
        position: absolute;
        bottom: 0;
        display: flex;
        align-self: flex-end;
        // align-items: flex-end;
        .info {
          position: absolute;
          display: flex;
          .name {
            margin: 0 auto;  
            writing-mode: vertical-lr;
            writing-mode: tb-lr;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #253149;
            line-height: 18px;
            letter-spacing: 1px;
            margin-right: 7px;
          } 
          .title {
            margin: 18px auto 0;  
            writing-mode: vertical-lr;
            writing-mode: tb-lr;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #7D8196;
            letter-spacing: 2px;
            line-height: 19px;
          }        
        }
        &.item01 {
          left: 50%;
          transform: translateX(-50%);
          width: 375px;
          z-index: 10;
          .info {
            left: 40px;
            top: -45px;
          }
        }
        &.item02 {
          left: 69%;
          transform: translateX(-50%);
          width: 253px;
          z-index: 8;
          .info {
            right: 10px;
            top: -18px;
          }
        }
        &.item03 {
          left: 30%;
          transform: translateX(-50%);
          width: 253px;
          z-index: 8;
          .info {
            left: -10px;
            top: -18px;
          }
        }
        &.item04 {
          left: 84%;
          transform: translateX(-50%);
          width: 200px;
          z-index: 6;
          .info {
            right: -25px;
            top: 5px;
          }
        }
        &.item05 {
          left: 14%;
          transform: translateX(-50%);
          width: 200px;
          z-index: 6;
          .info {
            left: -25px;
            top: 5px;
          }
        }
        img {
          width: 100%;
        }
        // .kernel-box-item {
        //   width: 100%;
        //   bottom: 0;
        //   position: absolute;
        // }
        .team03, .team05{
          transform: rotateY(180deg);   /* 水平镜像翻转 */
        }
        .top {
          width: 373px;
          height: 466px;
          position: relative;
          z-index: 66;
          .people-img {
            width: 373px;
            height: 466px;
            display: block;
          }
          .overlay-img {
            width: 373px;
            height: 466px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
          }
          .people-intro {
            position: absolute;
            bottom: 12px;
            left: 37px;
            z-index: 66;
            .name {
              font-size: 45px;
              font-family: PingFangSC-Semibold, sans-serif;
              font-weight: 600;
              color: rgba(255, 255, 255, 1);
              letter-spacing: 1px;
            }
            .position {
              font-size: 20px;
              font-family: PingFangSC-Regular, sans-serif;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              letter-spacing: 0.5px;
            }
          }
          .intro {
            display: none;
            position: absolute;
            z-index: 66;
            bottom: 160px;
            left: 37px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            .intro-label {
              font-size: 16px;
              margin-bottom: 12px;
            }
            .resume {
              width: 280px;
              font-size: 14px;
              font-family: PingFangSC-Regular, sans-serif;
              font-weight: 400;
              color: #FFFFFF;
              line-height: 28px;
            }
          }
        }
        .bottom {
          width: 373px;
          height: 8px;
          background-color: #83abf9;
        }
        .mask {
          display: none;
          position: absolute;
          border-radius: 10px;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          transition: all .5s;
          -webkit-transition: all .5s;
        }
      }
    }
  }
  .cultrue {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: url('~assets/images/brand/cultrueBg.png');
    background-color: #0D5CFA;
    background-size: cover;
    .title-content {
      .title {
        color: #ffffff;
      }
      .title-sub {
        color: #ffffff;
      }
    }
    .label {
      position: absolute;
      width: 100%;
      // left: 778px;
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 1);
        // opacity: 0.16;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .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: 50%;
        transform: translateX(-50%);
      }
    }
    .cultrue-box {
      margin-top: 96px;
      display: flex;
      padding: 0 50px;
      justify-content: space-between;
      // justify-content: center;
      .cultrue-box-item {
        // margin-right: 151px;
        color: #ffffff;
        img {
          width: 170px;
          height: 159px;
        }
        .cultrue-box-item-label {
          font-size: 30px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          text-align: center;
        }
        .cultrue-box-item-text {
          // width: 178px;
          text-align: center;
          font-size: 15px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          letter-spacing: 0.5px;
          margin-top: 30px;
        }
      }
    }
    .cultrue-bgimg {
      position: absolute;
      z-index: -1;
      right: 226px;
      bottom: 155px;
      img {
        width: 627px;
        height: 499px;
      }
    }
  }
  .idea {
    position: relative;
    margin: 100px 0;
    .label {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 540px;
      .label-en {
        // font-size: 78px;
        // font-family: PingFangSC-Semibold, sans-serif;
        // font-weight: 600;
        // color: rgba(35, 106, 250, 1);
        // opacity: 0.16;
        // position: absolute;
      }
      .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: 100px;
        // transform: translateX(-50%);
      }
    }
    .idea-box {
      display: flex;
      justify-content: center;
      .idea-box-item {
        width: 385px;
        height: 300px;
        background: #FFFFFF;
        box-shadow: 7px 10px 46px 0px rgba(207, 222, 254, 0.49);
        border-radius: 30px;
        margin-top: 67px;
        margin-right: 40px;
        padding: 22px 63px 51px 36px;
        box-sizing: border-box;
        .top {
          img {
            width: 64px;
            height: 64px;
            object-fit: cover;
          }
        }
        .center {
          margin-top: 20px;
          display: flex;
          align-items: center;
          img {
            width: 20px;
            height: 19px;
            margin-right: 18px;
            object-fit: fill;
          }
          div {
            font-size: 20px;
            font-family: PingFangSC-Medium, sans-serif;
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
          }
        }
        .footer {
          font-size: 15px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: #333333;
          line-height: 26px;
          margin-top: 10px;
          padding-left: 32px
        }
      }
    }
  }
}

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