zhongde-website/pages/about/brand.vue

<template>
  <div class="Brand-container">
    <div class="banner-img">
      <img :src="bannerImg" alt="">
      <section class="label">品牌故事</section>
    </div>
    <div class="company-intro">
      <section
        class="company-intro-label"
      >公司简介</section>
      <div class="company-intro-text">
        全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，
        用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。
        是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、
        请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
      </div>
    </div>
    <!-- 大事记 -->
    <div class="event">
      <div class="label wow animate__animated animate__fadeInDown">
        <div class="label-en">EVENTS</div>
        <div class="label-zn">大事记</div>
      </div>
      <div class="event-box">
        <img
          class="event-bgimg"
          src="http://res.training.luojigou.vip/Fhe0g5Z_6DRjLf3-lSDXKTff-A6Q?imageView2/0/q/50|imageslim"
          alt=""
        >
        <div
          :style="{top: 139 + 240 * item.site.y + 'px'  , 
                            left: 121 + 261 * item.site.x + 'px'}"
          :class="['event-box-item']"
          v-for="item in eventData"
          :key="item.id"
        >
          <img
            @mouseenter="currentEventImg(item)"
            class="yearImgurl cp"
            :src="item.yearImgurl"
            :srcset="`${item.yearImgurlSet[0]} 1x, ${item.yearImgurlSet[1]} 2x`"
            alt=""
          >
          <img
            v-if="currentEventImgId === item.id"
            @mouseleave="currentEventImgId = ''"
            class="eventImgurl"
            :src="item.eventImgurl"
            :style="{width: item.eventImgurlWidth + 'px', height:item.eventImgurlHeight + 'px'}"
            alt=""
          >
        </div>
      </div>
    </div>
    <!-- 核心团队 -->
    <div class="kernel">
      <div class="label wow animate__animated animate__fadeInDown">
        <div class="label-en">KERNEL</div>
        <div class="label-zn">核心团队</div>
      </div>
      <div class="kernel-box w1200">
        <div
          :class="['kernel-box-item']"
          v-for="item in  kernelData"
          :key="item.id"
        >
          <div class="top">
            <img class="people-img" :src="item.imgUrl" alt="">
            <!-- <img
              class="overlay-img"
              @mouseleave="currentMouserEnter = false"
              :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}"
              src="http://res.training.luojigou.vip/FstkGdSgJ91jUeZFYT35-ZOdxXT2?imageView2/0/q/50|imageslim"
              alt=""
            > -->
            <div class="people-intro">
              <div class="name">{{item.name}}</div>
              <div class="position">{{item.position}}</div>
            </div>
            <div
              class="intro"
            >
              <div class="intro-label">简历介绍</div>
              <div class="resume">{{item.resume}}</div>
            </div>
            <div class="mask"></div>
          </div>
          <div class="bottom"></div>
        </div>
      </div>
    </div>
    <!-- 文化 -->
    <div class="cultrue">
      <div class="label wow animate__animated animate__fadeInDown">
        <div class="label-en">CULTURE OF PRACTIVE</div>
        <div class="label-zn">我们努力践行的文化</div>
      </div>
      <div class="cultrue-box">
        <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">
      <div class="label">
        <div class="label-en wow animate__animated animate__fadeInDown">THE PHILOSPHY</div>
        <div class="label-zn wow animate__animated animate__fadeInDown">我们始终秉承的理念</div>
      </div>
      <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>
if (process.browser) {
  var { WOW } = require("wowjs");
}
const kernelData = Object.freeze([
  {
    id: 0,
    imgUrl: require("~/assets/images/about/team_01.png"),
    position: "董事长",
    name: "张洁",
    resume:
      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
  },
  {
    id: 1,
    imgUrl: require("~/assets/images/about/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/about/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/about/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/about/cultrue_03@2x.png"),
    label: "愿景",
    text: "让中国的孩子幸福成长",
  },
  {
    id: 3,
    // imgUrl: "http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim",
    imgUrl: require("~/assets/images/about/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/about/idea_01@2x.png"),
    numUrl: require("~/assets/images/about/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/about/idea_02@2x.png"),
    numUrl: require("~/assets/images/about/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/about/idea_03@2x.png"),
    numUrl: require("~/assets/images/about/num_03@2x.png"),
    label: "创业伙伴",
    resume:
      "我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手 前行。",
  },
]);

const eventData = Object.freeze([
  {
    id: 2003,
    site: {
      x: 3,
      y: 4,
    },
    // 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: "http://res.training.luojigou.vip/FrFfg21nonbZyNSUSpAWCiREn7lk?imageView2/0/q/50|imageslim",
    eventImgurlWidth: '270',
    eventImgurlHeight: '350'
  },
  {
    id: 2004,
    site: {
      x: 2,
      y: 4,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '240'
  },
  {
    id: 2005,
    site: {
      x: 1,
      y: 4,
    },
    // 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",
    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: '270',
    eventImgurlHeight: '212'
  },
  {
    id: 2006,
    site: {
      x: 0,
      y: 4,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '264'
  },
  {
    id: 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '392'
  },
  {
    id: 2008,
    site: {
      x: 1,
      y: 3,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '238'
  },
  {
    id: 2009,
    site: {
      x: 2,
      y: 3,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '212'
  },
  {
    id: 2010,
    site: {
      x: 3,
      y: 3,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '392'
  },
  {
    id: 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '420'
  },
  {
    id: 2012,
    site: {
      x: 2,
      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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '314'
  },
  {
    id: 2013,
    site: {
      x: 1,
      y: 2,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '394'
  },
  {
    id: 2014,
    site: {
      x: 0,
      y: 2,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '654'
  },
  {
    id: 2015,
    site: {
      x: 0,
      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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '316'
  },
  {
    id: 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')],
    eventImgurlWidth: '269',
    eventImgurlHeight: '576'
  },
  {
    id: 2017,
    site: {
      x: 2,
      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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '524'
  },
  {
    id: 2018,
    site: {
      x: 3,
      y: 1,
    },
    // 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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '550'
  },
  {
    id: 2019,
    site: {
      x: 3,
      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')],
    eventImgurlWidth: '270',
    eventImgurlHeight: '706'
  },
  {
    id: 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')],
  },
]);
export default {
  name: "BrandPage",
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  components: {},
  mounted() {
    if (process.browser) {
      new WOW({
        offset: 0,
        live: true,
      }).init();
    }
  },
  data() {
    return {
      bannerImg: require('~/assets/images/about/about_brand.png'),
      kernelData,
      currentMouserEnter: false,
      currentMouserId: "",
      cultrueData,
      ideaData,
      eventData,
      currentEventImgId: 2019,
    };
  },
  methods: {
    currentElement(item) {
      this.currentMouserId = item.id;
      this.currentMouserEnter = true;
    },
    currentEventImg(item) {
      this.currentEventImgId = item.id;
    },
  },
};
</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 {
    width: 1200px;
    height: 447px;
    border-radius: 14px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    overflow: hidden;
    margin-top: -80px;
    // background: url("http://res.training.luojigou.vip/FnRDWlB5l2fF-qQ8xtP6LQC1MRwq?imageView2/0/q/50|imageslim") no-repeat;
    background: url("~assets/images/about/tabImg.png") no-repeat;
    background-size: 1200px 447px;
    .company-intro-label {
      text-align: center;
      margin-top: 60px;
      font-size: 46px;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      color: #262626;
      line-height: 65px;
      letter-spacing: 1px;
    }
    .company-intro-text {
      width: 1009px;
      // height: 144px;
      margin: 32px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      font-family: PingFangSC-Regular, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 36px;
    }
  }
  .event {
    position: relative;
    height: 1500px;
    .label {
      position: absolute;
      // width: 600px;
      // left: 778px;
      width: 100%;

      .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%);
      }
    }
    .event-box {
      width: 1297px;
      height: 1296px;

      position: absolute;
      left: 50%;
      top: 259px;
      transform: translateX(-50%);
      .event-bgimg {
        width: 1297px;
        height: 1296px;
        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;
        }
        .eventImgurl {
          position: absolute;
          z-index: 1;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .kernel {
    margin: 200px 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%);
      margin-top: 178px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      align-items: center;
      .kernel-box-item {
        position: relative;
        margin-right: 40px;
        margin-bottom: 51px;
        &:hover {
          .mask {
            display: block;
            background: rgba(0, 0, 0, 0.44);
            transition: all .5s;
            -webkit-transition: all .5s;
          }
          .top {
            .intro {
              display: block;
            }
          }
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
        .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;
    height: 1000px;
    overflow: hidden;
    .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 {
      display: flex;
      justify-content: center;
      margin-top: 313px;
      .cultrue-box-item {
        margin-right: 151px;
        img {
          width: 178px;
          height: 159px;
        }
        .cultrue-box-item-label {
          font-size: 38px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          text-align: center;
        }
        .cultrue-box-item-text {
          // width: 178px;
          text-align: center;
          font-size: 18px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          letter-spacing: 0.5px;
          margin-top: 31px;
        }
      }
    }
    .cultrue-bgimg {
      position: absolute;
      z-index: -1;
      right: 226px;
      bottom: 155px;
      img {
        width: 627px;
        height: 499px;
      }
    }
  }
  .idea {
    height: 800px;
    position: relative;
    .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 {
        margin-top: 286px;
        margin-right: 40px;
        width: 373px;
        height: 299px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 14px 0px rgba(201, 199, 195, 0.25);
        border-radius: 6px;
        padding: 22px 63px 51px 36px;
        box-sizing: border-box;
        .top {
          img {
            width: 77px;
            height: 79px;
            object-fit: cover;
          }
        }
        .center {
          margin-top: 20px;
          display: flex;
          align-items: flex-end;
          img {
            width: 22px;
            height: 36px;
            margin-right: 9px;
            object-fit: fill;
          }
          div {
            font-size: 24px;
            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: #999999;
          line-height: 26px;
          margin-top: 10px;
          padding-left: 32px
        }
      }
    }
  }
}

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