'专家团队'

components/common/banner.vue

@@ -49,9 +49,9 @@ export default {
   }
   h2 {
     position: absolute;
-    top: 250px;
+    top: 50%;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
     font-size: 66px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;

pages/about/team.vue

@@ -1,39 +1,26 @@
 <template>
   <div class="container">
-    <abount-header :title="title" :bgImage="bgImage"></abount-header>
+    <common-banner
+      :img="bgImg"
+      :height="324">
+      <h2>专家团队</h2>
+    </common-banner>
     <!-- 专家团队 -->
-    <div class="expert w1200">
-      <div class="title-content">
-        <div class="e-title title-zh wow animate__animated animate__fadeInDown">
-          <div class="title-en">EXPERT</div>
-          专家团队
-        </div>
-      </div>
-      <div class="e-content">
-      <div :class="['expert-item']" v-for="(item, index) in expertList" :key="index">
-          <img :src="item.imgUrl" alt="">
-          <div class="line"></div>
-          <!-- <div class="mask">
-            <div class="intro">简历介绍</div>
-            <div class="content">
-              <p v-for="(ele, index) in item.content" :key="index">
-                {{ ele }}
-              </p>
+    <div class="expert">
+      <div class="e-content w1200">
+        <div :class="['expert-item']" v-for="(item, index) in expertList" :key="index">
+          <div class="item-info">
+            <div class="item-img">
+              <img :src="item.imgUrl" alt="">
+              <div class="mask">
+                {{ item.info }}
+              </div>
             </div>
-            <div class="name">{{item.name}}</div>
-            <div class="info">{{item.info}}</div>
-          </div> -->
-          <div class="content">
-            <div class="intro">简历介绍</div>
-            <div class="desc" v-for="(ele, index) in item.content" :key="index">
-              {{ ele }}
+            <div class="user-info">
+              <div class="name">{{item.name}}</div>
+              <div class="info">{{item.info}}</div>
             </div>
           </div>
-          <div class="user-info">
-            <div class="name">{{item.name}}</div>
-            <div class="info">{{item.info}}</div>
-          </div>
-          <div class="mask"></div>
         </div>
       </div>
     </div>
@@ -41,181 +28,125 @@
 </template>
 
 <script>
-if (process.browser) {
-  var {WOW} = require('wowjs')
-}
-import AbountHeader from "~/components/about/banner";
+import CommonBanner from "@/components/common/banner";
 
 export default {
   data() {
     return {
       title: "专家团队",
-      bgImage: require("~/assets/images/about/about_team.png"),
+      bgImg: require("~/assets/images/team/teamBg@2x.png"),
       expertList: [
         {
-          imgUrl: require("~/assets/images/about/expert_01.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '季泽拉•吕克',
+          imgUrl: require("~/assets/images/team/expert_01@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "季泽拉•吕克",
           // info: 'Prof Gisela Lueck'
-          info: '职称/学历/所在公司'
+          info: "德国现代著名早期教育专家",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_02.png"),
-          content: [
-            '芬肯出版社总经理',
-            '芬肯d第三代人的企业继承人',
-          ],
-          name: '霍克•科瑞克',
+          imgUrl: require("~/assets/images/team/expert_02@2x.png"),
+          content: ["芬肯出版社总经理", "芬肯d第三代人的企业继承人"],
+          name: "霍克•科瑞克",
           // info: 'Holger Krick'
-          info: '职称/学历/所在公司'
+          info: "芬肯出版社总经理",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_03.png"),
-          content: [
-            '德国出版界知名编辑',
-            '著名思维教育专家',
-          ],
-          name: '多丽丝•菲舍尔夫人',
+          imgUrl: require("~/assets/images/team/expert_03@2x.png"),
+          content: ["德国出版界知名编辑", "著名思维教育专家"],
+          name: "多丽丝•菲舍尔夫人",
           // info: 'Ms Doris Fischer'
-          info: '职称/学历/所在公司'
+          info: "德国著名思维教育专家",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_04.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '苏珊娜·贝尔纳',
+          imgUrl: require("~/assets/images/team/expert_04@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "苏珊娜·贝尔纳",
           // info: '职称/学历/所在公司 '
-          info: '职称/学历/所在公司'
+          info: "德国最著名的绘本画家",
         },
+        // {
+        //   imgUrl: require("~/assets/images/team/expert_05@2x.png"),
+        //   content: ["德国现代著名早期教育专家", "哲学博士"],
+        //   name: "楚江亭",
+        //   info: "北京教育科学研究院副研究员",
+        // },
         {
-          imgUrl: require("~/assets/images/about/expert_05.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '楚江亭',
-          info: '职称/学历/所在公司'
+          imgUrl: require("~/assets/images/team/expert_06@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "廖丽英",
+          info: "北京教育科学研究院副研究员",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_06.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '廖丽英',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_07@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "祝士媛",
+          info: "北京师范大学教育学院教授",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_07.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '祝士媛',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_08@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "刘占兰",
+          info: "世界(OMEP)中国委员会秘书长",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_08.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '刘占兰',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_09@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "杜继纲",
+          info: "北京师范大学教育学部副教授",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_09.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '杜继纲',
-          info: '职称/学历/所在公司 '
-        },{
-          imgUrl: require("~/assets/images/about/expert_10.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '肖晶',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_10@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "肖晶",
+          info: "首都师范大学心理学院教授",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_11.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '苏靖',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_11@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "苏靖",
+          info: "北京科学研究院早期教育所长",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_12.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '刘秀丽',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_12@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "刘秀丽",
+          info: "东北师范大学心理学教授",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_13.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '许晓晖',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_13@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "许晓晖",
+          info: "教育专家",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_14.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '庄薇',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_14@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "庄薇",
+          info: "董事长",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_15.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '王瑜元',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_15@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "王瑜元",
+          info: "学前儿童教育管理学专家",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_16.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '许晓晖',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_16@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "姜维静",
+          info: "北京市学前教育研究会副秘书长",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_17.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '安颖',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_17@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "安颖",
+          info: "教育专家",
         },
         {
-          imgUrl: require("~/assets/images/about/expert_18.png"),
-          content: [
-            '德国现代著名早期教育专家',
-            '哲学博士',
-          ],
-          name: '吴晓慧',
-          info: '职称/学历/所在公司 '
+          imgUrl: require("~/assets/images/team/expert_18@2x.png"),
+          content: ["德国现代著名早期教育专家", "哲学博士"],
+          name: "吴晓慧",
+          info: "教育专家",
         },
       ],
     };
@@ -236,16 +167,9 @@ export default {
       ],
     };
   },
-  mounted () {
-    if (process.browser) { 
-      new WOW({
-          offset: 0,   
-          live: true
-      }).init()
-    }
-  },
+  mounted() {},
   components: {
-    AbountHeader,
+    CommonBanner,
   },
   methods: {},
 };
@@ -258,12 +182,13 @@ export default {
   position: relative;
   text-align: center;
 }
+
 .title-en {
   position: absolute;
   font-size: 56px;
   font-family: PingFangSC-Semibold, sans-serif;
   font-weight: 600;
-  color:rgba(35,106,250,1);
+  color: rgba(35, 106, 250, 1);
   opacity: 0.16;
 }
 
@@ -271,14 +196,18 @@ export default {
   position: relative;
   display: inline-block;
   font-size: 46px;
-  font-family:PingFangSC-Semibold, sans-serif;
+  font-family: PingFangSC-Semibold, sans-serif;
   font-weight: 600;
-  color:#333333;
+  color: #333333;
   text-align: center;
 }
 
 .expert {
-  padding: 195px 0 350px;
+  // padding: 195px 0 350px;
+  margin: 142px auto 82px;
+  padding-bottom: 232px;
+  background: url('~assets/images/team/expertBg.png') no-repeat bottom 0 right 161px;
+  background-size: 1220px 1167px;
   .title-en {
     position: absolute;
     top: -30px;
@@ -290,30 +219,70 @@ export default {
     flex-wrap: wrap;
     // justify-content: space-between;
     align-items: center;
-    margin-top: 150px;
   }
   .e-title {
     text-align: center;
   }
   .expert-item {
     position: relative;
-    margin-bottom: 26px;
-    margin-right: 40px;
-    border-radius: 10px 10px 0px 0px;
+    margin: 0 30px 42px 0;
     &:hover {
       .mask {
         display: block;
-        background: rgba(0, 0, 0, 0.44);
-        transition: all .5s;
-        -webkit-transition: all .5s;
+        background: rgba(41, 110, 251, 0.8);
+        transition: all 0.5s;
+        -webkit-transition: all 0.5s;
       }
       .content {
         display: block;
       }
     }
-    &:nth-child(3n) {
+    &:nth-child(5n) {
       margin-right: 0;
     }
+    .mask {
+      display: none;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 15px;
+      top: 0;
+      z-index: 1;
+      width: 190px;
+      height: 199px;
+      transition: all 0.5s;
+      -webkit-transition: all 0.5s;
+      color: #FFFFFF;
+      padding: 43px 15px 0 35px;
+      text-align: left;
+    }
+    .item-info {
+      width: 215px;
+      height: 313px;
+      text-align: center;
+      padding-top: 24px;
+      box-shadow: 20px 20px 25px 0px rgba(211, 229, 255, 0.33);
+      border-radius: 15px;
+      .item-img {
+        position: relative;
+        img {
+          width: 189px;
+          height: 199px;
+          border-radius: 15px;
+        }
+        // .mask {
+        //   display: none;
+        //   position: absolute;
+        //   border-radius: 10px;
+        //   top: 0;
+        //   bottom: 0;
+        //   left: 0;
+        //   right: 0;
+        //   transition: all 0.5s;
+        //   -webkit-transition: all 0.5s;
+        // }
+      }
+    }
     img {
       width: 373px;
       height: 542px;
@@ -321,27 +290,28 @@ export default {
       border-radius: 12px 12px 0px 0px;
     }
     .user-info {
-      position: absolute;
-      bottom: 20px;
+      // position: absolute;
+      // bottom: 20px;
+      margin-top: 17px;
+      text-align: left;
       z-index: 66;
-      color: #FFFFFF;
+      color: #333333;
+      margin-left: 13px;
       .name {
         z-index: 66;
-        font-size: 36px;
-        font-family: PingFangSC-Semibold, sans-serif;
-        font-weight: 600;
-        line-height: 50px;
-        margin-top: 62px;
-        letter-spacing:1px;
-        padding: 0 16px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        line-height: 25px;
       }
       .info {
+        margin-top: 10px;
         z-index: 3;
-        font-size:20px;
-        font-family:PingFangSC-Regular, sans-serif;
-        font-weight:400;
-        padding: 0 16px;
-        margin-top: 6px;
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
+        line-height: 18px;
       }
     }
     .content {
@@ -352,7 +322,7 @@ export default {
       font-family: PingFangSC-Regular, sans-serif;
       font-weight: 400;
       padding: 0 46px;
-      line-height:28px;
+      line-height: 28px;
       min-height: 180px;
       color: #ffffff;
       z-index: 66;
@@ -360,7 +330,7 @@ export default {
         font-size: 16px;
         font-family: PingFangSC-Regular, sans-serif;
         font-weight: 500;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 22px;
         margin-bottom: 5px;
       }
@@ -368,11 +338,11 @@ export default {
         font-size: 14px;
         font-family: PingFangSC-Regular, sans-serif;
         font-weight: 400;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 28px;
       }
     }
-    
+
     .line {
       width: 100%;
       position: absolute;
@@ -381,17 +351,6 @@ export default {
       background: rgba(131, 171, 249, 1);
       z-index: 66;
     }
-    .mask {
-      display: none;
-      position: absolute;
-      border-radius: 10px;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      transition: all .5s;
-      -webkit-transition: all .5s;
-    }
   }
 }
 </style>