'专家团队'

components/about/header.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="header" :style="{backgroundImage: 'url(' + bgImage + ')' }" >
+    {{ title }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    bgImage: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~static/common/style.sass";
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 885px;
+  background: url('~assets/images/about/about_team.png') 100% 100% no-repeat;
+  font-size:64px;
+  font-family:PingFangSC-Medium,PingFang SC;
+  font-weight:500;
+  color:#ffffff;
+}
+
+</style>

components/home/header.vue

@@ -38,16 +38,16 @@
 							<nuxt-link target="_blank" to="/news">加盟合作</nuxt-link>
 						</li>
 						<li>
-							<nuxt-link to="/service/contact">关于我们</nuxt-link>
+							<nuxt-link to="/about">关于我们</nuxt-link>
 							<ul class="h-nav-list-child">
 								<li>
-									<nuxt-link to="/service/presales">品牌故事</nuxt-link>
+									<nuxt-link target="_blank" to="/about/brand">品牌故事</nuxt-link>
 								</li>
 								<li>
-									<nuxt-link to="/service/aftersales">专家团队</nuxt-link>
+									<nuxt-link target="_blank" to="/about/team">专家团队</nuxt-link>
 								</li>
 								<li>
-									<nuxt-link to="/service/contact">联系我们</nuxt-link>
+									<nuxt-link target="_blank" to="/about/contact">联系我们</nuxt-link>
 								</li>
 							</ul>
               <div class="expand"></div>

pages/about/contact.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <abount-header :title="title" :bgImage="bgImage"></abount-header>
+  </div>
+</template>
+
+<script>
+import AbountHeader from '~/components/about/header';
+
+export default {
+  data() {
+    return {
+      title: '联系我们',
+      bgImage: require('~/assets/images/about/about_contact.png'),
+    }
+  },
+  components: {
+    AbountHeader,
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~static/common/style.sass";
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 882px;
+  background: url('~assets/images/about/about_contact.png') 100% 100% no-repeat;
+  font-size:64px;
+  font-family:PingFangSC-Medium,PingFang SC;
+  font-weight:500;
+  color:#ffffff;
+}
+
+</style>

pages/about/team.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="container">
+    <abount-header :title="title" :bgImage="bgImage"></abount-header>
+    <!-- 专家团队 -->
+    <div class="expert w1200">
+      <div class="e-title title-zh">专家团队</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">
+              简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍
+            </div>
+            <div class="name">多丽丝</div>
+            <div class="info">职称/学历/所在公司</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AbountHeader from "~/components/about/header";
+
+export default {
+  data() {
+    return {
+      title: "专家团队",
+      bgImage: require("~/assets/images/about/about_team.png"),
+      expertList: [
+        {
+          imgUrl: require("~/assets/images/about/expert_01.png"),
+        },
+        {
+          imgUrl: require("~/assets/images/about/expert_01.png"),
+        },
+        {
+          imgUrl: require("~/assets/images/about/expert_01.png"),
+        },
+        {
+          imgUrl: require("~/assets/images/about/expert_01.png"),
+        },
+        {
+          imgUrl: require("~/assets/images/about/expert_01.png"),
+        },
+      ],
+    };
+  },
+  components: {
+    AbountHeader,
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~static/common/style.sass";
+
+.title-zh {
+  height: 81px;
+  line-height: 81px;
+  font-size: 58px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #000000;
+  letter-spacing: 1px;
+  text-align: center;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 885px;
+  background: url("~assets/images/about/about_team.png") 100% 100% no-repeat;
+  font-size: 64px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+}
+.expert {
+  padding: 195px 0 350px;
+  .e-content {
+    display: flex;
+    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;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:hover {
+      .mask {
+        display: block;
+        background:rgba(0,0,0,0.5);
+      }
+    }
+    .line {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      height: 8px;
+      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;
+      color: #ffffff;
+      .intro {  
+        font-size:16px;
+        font-family:PingFangSC-Regular,PingFang SC;
+        font-weight:400;
+        padding: 0 46px;
+        margin-top: 162px;
+      }
+      .content {
+        font-size: 14px;
+        font-family: PingFangSC-Regular,PingFang SC;
+        font-weight: 400;
+        padding: 0 46px;
+        line-height:28px;
+      }
+      .name {
+        font-family: PingFangSC-Semibold,PingFang SC;
+        font-weight: 600;
+        font-size:45px;
+        color: #ffffff;
+        margin-top: 62px;
+        line-height: 62px;
+        letter-spacing:1px;
+        padding: 0 16px;
+      }
+      .info {
+        font-size:20px;
+        font-family:PingFangSC-Regular,PingFang SC;
+        font-weight:400;
+        padding: 0 16px;
+        margin-top: 6px;
+      }
+    }
+  }
+}
+</style>