'专家团队简介'

components/about/banner.vue

@@ -37,7 +37,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 885px;
+  height: 595px;
   font-size:64px;
   font-family:PingFangSC-Medium,PingFang SC;
   font-weight:500;

pages/about/brand.vue

@@ -1,413 +1,491 @@
 <template>
-    <div class="Brand-container">
-        <div class="banner-img">
-            <img src="http://res.training.luojigou.vip/FlpLqC_a2wOuyJqG7LiOb2tbmUZP?imageView2/0/q/50|imageslim" alt="">
-              <section class="label ">
-                品牌故事
-            </section>
-        </div>
-         <div class="company-intro">
-            <section class="company-intro-label wow animate__animated animate__rubberBand animate__delay-0.5s">
-                公司简介
-            </section>
-            <div class="company-intro-text  ">
-                全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，
-                用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。
-                是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、
-                请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
-            </div>
-        </div>
-        <!-- 大事记 -->
-        <div class="event">
-            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
-              <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 wow animate__animated', 'animate__rubberBand' ]" v-for="item in eventData" :key="item.id">
-                    <img @mouseenter="currentEventImg(item)" class="yearImgurl cp" :src="item.yearImgurl" alt="">
-                    <img v-if="currentEventImgId === item.id" @mouseleave="currentEventImgId = ''" class="eventImgurl"  :src="item.eventImgurl" alt="">
-                </div>
-            </div>
+  <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 wow animate__animated animate__rubberBand animate__delay-0.5s"
+      >公司简介</section>
+      <div class="company-intro-text">
+        全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，
+        用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。
+        是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、
+        请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
+      </div>
+    </div>
+    <!-- 大事记 -->
+    <div class="event">
+      <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
+        <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 wow animate__animated', 'animate__rubberBand' ]"
+          v-for="item in eventData"
+          :key="item.id"
+        >
+          <img
+            @mouseenter="currentEventImg(item)"
+            class="yearImgurl cp"
+            :src="item.yearImgurl"
+            alt=""
+          >
+          <img
+            v-if="currentEventImgId === item.id"
+            @mouseleave="currentEventImgId = ''"
+            class="eventImgurl"
+            :src="item.eventImgurl"
+            alt=""
+          >
         </div>
-        <!-- 核心团队 -->
-        <div class="kernel">
-            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
-              <div class="label-en">
-                KERNEL
-              </div>
-              <div class="label-zn">
-                核心团队
-              </div>
+      </div>
+    </div>
+    <!-- 核心团队 -->
+    <div class="kernel">
+      <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
+        <div class="label-en">KERNEL</div>
+        <div class="label-zn">核心团队</div>
+      </div>
+      <div class="kernel-box w1200">
+        <div
+          :class="['kernel-box-item wow animate__animated' , (item.id + 1) % 3 === 0 ? 'animate__lightSpeedInLeft' : item.id % 3 === 0 ? 'animate__lightSpeedInRight' : '' ]"
+          v-for="item in  kernelData"
+          :key="item.id"
+        >
+          <div class="top">
+            <img class="people-img" :src="item.imgUrl" alt="" @mouseenter="currentElement(item)">
+            <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="kernel-box">
-                <div :class="['kernel-box-item wow animate__animated' , (item.id + 1) % 3 === 0 ? 'animate__lightSpeedInLeft' : item.id % 3 === 0 ? 'animate__lightSpeedInRight' : '' ]" v-for="item in  kernelData" :key="item.id">
-                    <div class="top">
-                        <img class="people-img" :src="item.imgUrl" alt="" @mouseenter="currentElement(item)" >
-                        <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" :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}" >
-                             <div class="intro-label">简历介绍</div>
-                             <div class="resume">{{item.resume}}</div>
-                         </div>
-                    </div>
-                    <div class="bottom">
-                    
-                    </div>        
-
-                </div>
+            <div
+              class="intro"
+              :style="{display:  currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}"
+            >
+              <div class="intro-label">简历介绍</div>
+              <div class="resume">{{item.resume}}</div>
             </div>
+          </div>
+          <div class="bottom"></div>
         </div>
-        <!-- 文化 -->
-        <div class="cultrue">
-            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
-              <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', 
+      </div>
+    </div>
+    <!-- 文化 -->
+    <div class="cultrue">
+      <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
+        <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', 
                         item.id === 0 ? 'animate__lightSpeedInRight animate__delay-1s' : 
                         item.id === 3 ? 'animate__lightSpeedInLeft animate__delay-2s' :
                         item.id === 1 ? 'animate__lightSpeedInRight animate__delay-3s':
                         item.id === 2 ? 'animate__lightSpeedInLeft animate__delay-4s' : ''
-                        ]" 
-                        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>
+                        ]"
+            alt=""
+          >
+          <div class="cultrue-box-item-label">{{ item.label }}</div>
+          <div class="cultrue-box-item-text" v-html="item.text"></div>
         </div>
-        <!-- 理念 -->
-        <div class="idea">
-            <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
-              <div class="label-en">
-                THE PHILOSPHY
-              </div>
-              <div class="label-zn">
-                我们始终秉承的理念
-              </div>
-            </div>
-            <div class="idea-box">
-                <div class="idea-box-item wow animate__animated animate__swing" 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 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 wow animate__animated animate__swing"
+          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')
+  var { WOW } = require("wowjs");
 }
 const kernelData = Object.freeze([
-    {
-        id: 0,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 1,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 2,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 3,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 4,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 5,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 6,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-    {
-        id: 7,
-        imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
-        position: 'CEO',
-        name: '张洁',
-        resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
-    },
-])
+  {
+    id: 0,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 1,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 2,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 3,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 4,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 5,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 6,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+  {
+    id: 7,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim",
+    position: "CEO",
+    name: "张洁",
+    resume:
+      "简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍",
+  },
+]);
 const cultrueData = Object.freeze([
-    {
-        id: 0,
-        imgUrl: 'http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim',
-        label: '宗旨',
-        text: '关注儿童成长</br>服务中国母亲',
-    },
-    {
-        id: 1,
-        imgUrl: 'http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim',
-        label: '文化',
-        text: '缔造愿景，追求卓越</br>共生共荣，体现价值',
-    },
-    {
-        id: 2,
-        imgUrl: 'http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim',
-        label: '愿景',
-        text: '让中国的孩子</br>幸福成长',
-    },
-    {
-        id: 3,
-        imgUrl: 'http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim',
-        label: '价值观',
-        text: '客户第一</br>团队合力第二</br>专业专注</br>诚信公正</br>拥抱变化</br>激情快乐 ',
-    },
-])
+  {
+    id: 0,
+    imgUrl:
+      "http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim",
+    label: "宗旨",
+    text: "关注儿童成长</br>服务中国母亲",
+  },
+  {
+    id: 1,
+    imgUrl:
+      "http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim",
+    label: "文化",
+    text: "缔造愿景，追求卓越</br>共生共荣，体现价值",
+  },
+  {
+    id: 2,
+    imgUrl:
+      "http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim",
+    label: "愿景",
+    text: "让中国的孩子</br>幸福成长",
+  },
+  {
+    id: 3,
+    imgUrl:
+      "http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim",
+    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',
-        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',
-        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',
-        label: '创业伙伴',
-        resume: '我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手 前行。'
-    },
-])
+  {
+    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",
+    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",
+    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",
+    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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        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'
-    },
-    {
-        id: 2020,
-        site: {
-            x: 2,
-            y: 0
-        },
-        yearImgurl: 'http://res.training.luojigou.vip/FhjVzCv4CjuHsuCjJvSWGGxruzxv?imageView2/0/q/50|imageslim'
-    },
-])
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    id: 2020,
+    site: {
+      x: 2,
+      y: 0,
+    },
+    yearImgurl:
+      "http://res.training.luojigou.vip/FhjVzCv4CjuHsuCjJvSWGGxruzxv?imageView2/0/q/50|imageslim",
+  },
+]);
 export default {
-  name: 'BrandPage',
+  name: "BrandPage",
   head() {
     return {
       title: "逻辑狗官网-中德智慧教育",
@@ -425,407 +503,425 @@ export default {
       ],
     };
   },
-  components: {
-  
-  },
-  mounted () {
-    if (process.browser) { 
+  components: {},
+  mounted() {
+    if (process.browser) {
       new WOW({
-          offset: 0,   
-          live: true
-      }).init()
+        offset: 0,
+        live: true,
+      }).init();
     }
-   
-  },
-  data () {
-      return {
-        kernelData,
-        currentMouserEnter: false,
-        currentMouserId: '',
-        cultrueData,
-        ideaData,
-        eventData,
-        currentEventImgId: ''
-      }
+  },
+  data() {
+    return {
+      bannerImg: require('~/assets/images/about/about_brand.png'),
+      kernelData,
+      currentMouserEnter: false,
+      currentMouserId: "",
+      cultrueData,
+      ideaData,
+      eventData,
+      currentEventImgId: "",
+    };
   },
   methods: {
-      currentElement (item) {
-          this.currentMouserId = item.id
-          this.currentMouserEnter = true
-      },
-      currentEventImg (item) {
-          this.currentEventImgId = item.id
-      }
-  }
-}
+    currentElement(item) {
+      this.currentMouserId = item.id;
+      this.currentMouserEnter = true;
+    },
+    currentEventImg(item) {
+      this.currentEventImgId = item.id;
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 .Brand-container {
-    .banner-img {
-        position: relative;
-        img {
-            width: 100%;
-            height: 881px;
-            display: block;
-        }
-        .label {
-            font-family:PingFangSC-Semibold,PingFang SC;
-            font-weight:600;
-            color: #ffffff;
-            font-size: 80px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
+  .label {
+    .label-en {
+      height: 78px;
+      font-size: 56px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color:rgba(35,106,250,0.16);
+      line-height: 78px;
+    }
+    .label-zn {
+      height: 65px;
+      font-size: 46px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #262626;
+      line-height: 65px;
+      letter-spacing: 1px;
     }
-    .company-intro {
-        width: 1200px;
-        height: 447px;
-        border-radius:14px;
-        position: relative;
-        top: 50%;
+  }
+  .banner-img {
+    position: relative;
+    img {
+      width: 100%;
+      height: 595px;
+      display: block;
+    }
+    .label {
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #ffffff;
+      font-size: 80px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .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-size: 1200px 447px;
+    .company-intro-label {
+      text-align: center;
+      margin-top: 60px;
+      font-size: 46px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #262626;
+      line-height: 65px;
+      letter-spacing: 1px;
+    }
+    .company-intro-text {
+      width: 1009px;
+      height: 144px;
+      margin: 32px;
+      color: #999999;
+      font-size: 18px;
+      letter-spacing: 0.45px;
+      line-height: 36px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  .event {
+    position: relative;
+    height: 1500px;
+    .label {
+      position: absolute;
+      // width: 600px;
+      // left: 778px;
+      width: 100%;
+
+      .label-en {
+        // font-size: 78px;
+        // font-family: PingFangSC-Semibold, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(35, 106, 250, 1);
+        // opacity: 0.16;
+        position: absolute;
         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-size: 1200px 447px;
-        .company-intro-label {
-            color: #262626;
-            font-size: 48px;
-            letter-spacing: 1.2px;
-            text-align: center;
-            margin-top: 60px;
-        }
-        .company-intro-text {
-            width: 1009px;
-            height: 144px;
-            margin: 32px;
-            color: #999999;
-            font-size: 18px;
-            letter-spacing: 0.45px;
-            line-height: 36px;
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-        }
+      }
+      .label-zn {
+        // font-size: 58px;
+        // font-family: PingFangSC-Semibold, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(38, 38, 38, 1);
+        position: absolute;
+        top: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
     }
-    .event {
-        position: relative;
-        height: 1500px;
-        .label {
-            position: absolute;
-            // width: 600px;
-            // left: 778px;
-            width: 100%;
+    .event-box {
+      width: 1297px;
+      height: 1296px;
 
-            .label-en {
-            font-size:78px;
-            font-family:PingFangSC-Semibold,PingFang SC;
-            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,PingFang SC;
-            font-weight:600;
-            color:rgba(38,38,38,1);
-            position: absolute;
-            top: 45px;
-            left: 50%;
-            transform: translateX(-50%);
-        }
-      }
-      .event-box {
+      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, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(35, 106, 250, 1);
+        // opacity: 0.16;
+      }
+      .label-zn {
+        // font-size: 58px;
+        // font-family: PingFangSC-Semibold, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(38, 38, 38, 1);
+        // position: absolute;
+        // top: 45px;
+        // left: 32px;
+        position: absolute;
+        top: 30px;
         left: 50%;
-        top: 259px;
         transform: translateX(-50%);
-        .event-bgimg {
-            width: 1297px;
-            height: 1296px;
+        // margin-top: -65px;
+      }
+    }
+    .kernel-box {
+      // position: absolute;
+      // top: 300px;
+      // left: 50%;
+      // transform: translateX(-50%);
+      margin-top: 178px;
+      display: grid;
+      grid-template-columns: auto auto auto;
+      grid-template-rows: auto auto auto;
+      .kernel-box-item {
+        margin-right: 40px;
+        margin-bottom: 51px;
+        .top {
+          width: 373px;
+          height: 466px;
+          position: relative;
+          .people-img {
+            width: 373px;
+            height: 466px;
+            display: block;
+          }
+          .overlay-img {
+            width: 373px;
+            height: 466px;
             position: absolute;
-            left: 0;
             top: 0;
-            right: 0;
-            bottom: 0;
-            // object-fit: cover;
-        }
-        .event-box-item {
+            left: 0;
+            z-index: 1;
+          }
+          .people-intro {
             position: absolute;
-            .yearImgurl {
-                width: 65px;
-                height: 30px;
-                object-fit: cover;
+            bottom: 12px;
+            left: 37px;
+            .name {
+              font-size: 45px;
+              font-family: PingFangSC-Semibold, PingFang SC;
+              font-weight: 600;
+              color: rgba(255, 255, 255, 1);
+              letter-spacing: 1px;
             }
-            .eventImgurl {
-               position: absolute;
-               z-index: 1;
-               transform: translate(-50%, -50%);
+            .position {
+              font-size: 20px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: rgba(255, 255, 255, 1);
+              letter-spacing: 0.5px;
             }
-        }
-      }
-    }
-    .kernel {
-        margin: 208px;
-        height: 2000px;
-        position: relative;
-        .label {
+          }
+          .intro {
             position: absolute;
-            width: 100%;
-            text-align: center;
-            .label-en {
-            font-size:78px;
-            font-family:PingFangSC-Semibold,PingFang SC;
-            font-weight:600;
-            color:rgba(35,106,250,1);
-            opacity: 0.16;
+            bottom: 160px;
+            left: 37px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 1);
+            .intro-label {
+              font-size: 16px;
+              margin-bottom: 12px;
             }
-            .label-zn {
-            font-size:58px;
-            font-family:PingFangSC-Semibold,PingFang SC;
-            font-weight:600;
-            color:rgba(38,38,38,1);
-            // position: absolute;
-            // top: 45px;
-            // left: 32px;
-            margin-top: -65px;
-      
+            .resume {
+              width: 280px;
+            }
+          }
+        }
+        .bottom {
+          width: 373px;
+          height: 8px;
+          background-color: #83abf9;
         }
       }
-      .kernel-box {
-         
-          position: absolute;
-          top: 300px;
-          left: 50%;
-          transform: translateX(-50%);
-          display: grid;
-          grid-template-columns: auto auto auto;
-          grid-template-rows: auto auto auto;
-          .kernel-box-item {
-              margin-right: 40px;
-              margin-bottom: 51px;
-              .top {
-                width: 373px;
-                height: 466px;
-                position: relative;
-                .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;
-                    .name {
-                        font-size:45px;
-                        font-family:PingFangSC-Semibold,PingFang SC;
-                        font-weight:600;
-                        color:rgba(255,255,255,1);
-                        letter-spacing:1px;
-                    }
-                    .position {
-                        font-size:20px;
-                        font-family:PingFangSC-Regular,PingFang SC;
-                        font-weight:400;
-                        color:rgba(255,255,255,1);
-                        letter-spacing: 0.5px;
-                    }
-                }
-                .intro {
-                    position: absolute;
-                    bottom: 160px;
-                    left: 37px;
-                    font-family:PingFangSC-Regular,PingFang SC;
-                    font-weight:400;
-                    color:rgba(255,255,255,1);
-                    .intro-label {
-                        font-size:16px;
-                        margin-bottom: 12px;
-                    }
-                    .resume {
-                        width:280px;
-                    }
-                }
-              }
-              .bottom {
-                  width: 373px;
-                  height: 8px;
-                  background-color: #83ABF9;
-              }
-              
-          }
+    }
+  }
+  .cultrue {
+    position: relative;
+    height: 1000px;
+    overflow: hidden;
+    .label {
+      position: absolute;
+      width: 100%;
+      // left: 778px;
+      .label-en {
+        // font-size: 78px;
+        // font-family: PingFangSC-Semibold, PingFang SC;
+        // 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, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(38, 38, 38, 1);
+        position: absolute;
+        top: 30px;
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
-    .cultrue {
-        position: relative;
-        height: 1000px;
-        overflow: hidden;
-        .label {
-            position: absolute;
-            width: 100%;
-            // left: 778px;
-            .label-en {
-            font-size:78px;
-            font-family:PingFangSC-Semibold,PingFang SC;
-            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,PingFang SC;
-            font-weight:600;
-            color:rgba(38,38,38,1);
-            position: absolute;
-            top: 45px;
-            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, PingFang SC;
+          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, PingFang SC;
+          font-weight: 400;
+          color: rgba(153, 153, 153, 1);
+          letter-spacing: 0.5px;
+          margin-top: 31px;
         }
       }
-      .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,PingFang SC;
-                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,PingFang SC;
-                    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;
       }
-      .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, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(35, 106, 250, 1);
+        // opacity: 0.16;
+        // position: absolute;
+      }
+      .label-zn {
+        // font-size: 58px;
+        // font-family: PingFangSC-Semibold, PingFang SC;
+        // font-weight: 600;
+        // color: rgba(38, 38, 38, 1);
+        position: absolute;
+        top: 30px;
+        left: 100px;
+        // transform: translateX(-50%);
       }
     }
-    .idea {
-        height: 800px;
-      .label {
-            position: absolute;
-            width: 100%;
-            // left: 778px;
-            .label-en {
-            font-size:78px;
-            font-family:PingFangSC-Semibold,PingFang SC;
-            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,PingFang SC;
-            font-weight:600;
-            color:rgba(38,38,38,1);
-            position: absolute;
-            top: 45px;
-            left: 50%;
-            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: 38px 32px 51px 42px;
+        box-sizing: border-box;
+        .top {
+          img {
+            width: 67px;
+            height: 64px;
+            object-fit: cover;
+          }
         }
-      } 
-      .idea-box {
+        .center {
+          margin-top: 20px;
           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: 38px 32px 51px 42px;
-              box-sizing: border-box;
-             .top {
-                 
-                 img {
-                    width: 67px;
-                    height: 64px;
-                    object-fit: cover;
-                 }
-             }
-             .center {
-                 margin-top: 20px;
-                 display: flex;
-                 img {
-                     width: 22px;
-                     height: 36px;
-                     margin-right: 9px;
-                     object-fit: fill;
-                 }
-                 div {
-                    font-size:24px;
-                    font-family:PingFangSC-Medium,PingFang SC;
-                    font-weight:500;
-                    color:rgba(0,0,0,1);
-                 }
-             }
-             .footer {
-                font-size:15px;
-                font-family:PingFangSC-Regular,PingFang SC;
-                font-weight:400;
-                color:rgba(153,153,153,1);
-           
-                margin-top: 10px;
-             }
+          img {
+            width: 22px;
+            height: 36px;
+            margin-right: 9px;
+            object-fit: fill;
           }
+          div {
+            font-size: 24px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 1);
+          }
+        }
+        .footer {
+          font-size: 15px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: rgba(153, 153, 153, 1);
+
+          margin-top: 10px;
+        }
       }
     }
+  }
 }
 
-
 .cp {
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>

pages/about/team.vue

@@ -16,10 +16,12 @@
           <div class="mask">
             <div class="intro">简历介绍</div>
             <div class="content">
-              简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍
+              <p v-for="(ele, index) in item.content" :key="index">
+                {{ ele }}
+              </p>
             </div>
-            <div class="name">多丽丝</div>
-            <div class="info">职称/学历/所在公司</div>
+            <div class="name">{{item.name}}</div>
+            <div class="info">{{item.info}}</div>
           </div>
         </div>
       </div>
@@ -41,19 +43,40 @@ export default {
       expertList: [
         {
           imgUrl: require("~/assets/images/about/expert_01.png"),
+          content: [
+            '德国现代著名早期教育专家',
+            '哲学博士',
+          ],
+          name: '季泽拉•吕克',
+          info: 'Prof Gisela Lueck'
         },
         {
-          imgUrl: require("~/assets/images/about/expert_01.png"),
+          imgUrl: require("~/assets/images/about/expert_02.png"),
+          content: [
+            '芬肯出版社总经理',
+            '芬肯d第三代人的企业继承人',
+          ],
+          name: '霍克•科瑞克',
+          info: 'Holger Krick'
         },
         {
-          imgUrl: require("~/assets/images/about/expert_01.png"),
-        },
-        {
-          imgUrl: require("~/assets/images/about/expert_01.png"),
+          imgUrl: require("~/assets/images/about/expert_03.png"),
+          content: [
+            '德国出版界知名编辑',
+            '著名思维教育专家',
+          ],
+          name: '多丽丝•菲舍尔夫人',
+          info: 'Ms Doris Fischer'
         },
         {
-          imgUrl: require("~/assets/images/about/expert_01.png"),
-        },
+          imgUrl: require("~/assets/images/about/expert_04.png"),
+          content: [
+            '德国现代著名早期教育专家',
+            '哲学博士',
+          ],
+          name: '苏珊娜·贝尔纳',
+          info: 'Rotraut Susanne Berners'
+        }
       ],
     };
   },
@@ -109,7 +132,7 @@ export default {
   display: inline-block;
   font-size: 46px;
   font-family:PingFangSC-Semibold,PingFang SC;
-  font-weight: 500;
+  font-weight: 600;
   color:#333333;
   text-align: center;
 }
@@ -118,7 +141,7 @@ export default {
   padding: 195px 0 350px;
   .title-en {
     position: absolute;
-    top: -40px;
+    top: -30px;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -137,6 +160,11 @@ export default {
     margin-bottom: 26px;
     margin-right: 40px;
     border-radius: 10px 10px 0px 0px;
+    img {
+      width: 373px;
+      height: 542px;
+      object-fit: cover;
+    }
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -144,6 +172,8 @@ export default {
       .mask {
         display: block;
         background:rgba(0,0,0,0.5);
+        transition: all .5s;
+        -webkit-transition: all .5s;
       }
     }
     .line {
@@ -178,14 +208,15 @@ export default {
         font-weight: 400;
         padding: 0 46px;
         line-height:28px;
+        min-height: 180px;
       }
       .name {
-        font-family: PingFangSC-Semibold,PingFang SC;
+        font-size: 36px;
+        font-family: PingFangSC-Semibold, PingFang SC;
         font-weight: 600;
-        font-size:45px;
-        color: #ffffff;
+        color: #FFFFFF;
+        line-height: 50px;
         margin-top: 62px;
-        line-height: 62px;
         letter-spacing:1px;
         padding: 0 16px;
       }