diff --git a/src/assets/images/about/1.png b/src/assets/images/about/1.png
new file mode 100644
index 0000000..d6c4bab
Binary files /dev/null and b/src/assets/images/about/1.png differ
diff --git a/src/assets/images/about/10.png b/src/assets/images/about/10.png
new file mode 100644
index 0000000..a617279
Binary files /dev/null and b/src/assets/images/about/10.png differ
diff --git a/src/assets/images/about/11.png b/src/assets/images/about/11.png
new file mode 100644
index 0000000..afc900d
Binary files /dev/null and b/src/assets/images/about/11.png differ
diff --git a/src/assets/images/about/12.png b/src/assets/images/about/12.png
new file mode 100644
index 0000000..4f68fe3
Binary files /dev/null and b/src/assets/images/about/12.png differ
diff --git a/src/assets/images/about/2.png b/src/assets/images/about/2.png
new file mode 100644
index 0000000..100e662
Binary files /dev/null and b/src/assets/images/about/2.png differ
diff --git a/src/assets/images/about/3.png b/src/assets/images/about/3.png
new file mode 100644
index 0000000..9ed56da
Binary files /dev/null and b/src/assets/images/about/3.png differ
diff --git a/src/assets/images/about/4.png b/src/assets/images/about/4.png
new file mode 100644
index 0000000..7982688
Binary files /dev/null and b/src/assets/images/about/4.png differ
diff --git a/src/assets/images/about/5.png b/src/assets/images/about/5.png
new file mode 100644
index 0000000..d9d1dad
Binary files /dev/null and b/src/assets/images/about/5.png differ
diff --git a/src/assets/images/about/6.png b/src/assets/images/about/6.png
new file mode 100644
index 0000000..3c8389b
Binary files /dev/null and b/src/assets/images/about/6.png differ
diff --git a/src/assets/images/about/7.png b/src/assets/images/about/7.png
new file mode 100644
index 0000000..2034a43
Binary files /dev/null and b/src/assets/images/about/7.png differ
diff --git a/src/assets/images/about/8.png b/src/assets/images/about/8.png
new file mode 100644
index 0000000..9d7376a
Binary files /dev/null and b/src/assets/images/about/8.png differ
diff --git a/src/assets/images/about/9.png b/src/assets/images/about/9.png
new file mode 100644
index 0000000..68dc21b
Binary files /dev/null and b/src/assets/images/about/9.png differ
diff --git a/src/assets/images/address.png b/src/assets/images/address.png
new file mode 100644
index 0000000..fbe3eb0
Binary files /dev/null and b/src/assets/images/address.png differ
diff --git a/src/assets/images/arrow-white.png b/src/assets/images/arrow-white.png
new file mode 100644
index 0000000..9cfaa21
Binary files /dev/null and b/src/assets/images/arrow-white.png differ
diff --git a/src/assets/images/careers/1.png b/src/assets/images/careers/1.png
new file mode 100644
index 0000000..9b3f8e8
Binary files /dev/null and b/src/assets/images/careers/1.png differ
diff --git a/src/assets/images/careers/10.png b/src/assets/images/careers/10.png
new file mode 100644
index 0000000..7d5c7e0
Binary files /dev/null and b/src/assets/images/careers/10.png differ
diff --git a/src/assets/images/careers/11.png b/src/assets/images/careers/11.png
new file mode 100644
index 0000000..ad05c33
Binary files /dev/null and b/src/assets/images/careers/11.png differ
diff --git a/src/assets/images/careers/2.png b/src/assets/images/careers/2.png
new file mode 100644
index 0000000..17fb472
Binary files /dev/null and b/src/assets/images/careers/2.png differ
diff --git a/src/assets/images/careers/3.png b/src/assets/images/careers/3.png
new file mode 100644
index 0000000..59f2903
Binary files /dev/null and b/src/assets/images/careers/3.png differ
diff --git a/src/assets/images/careers/4.png b/src/assets/images/careers/4.png
new file mode 100644
index 0000000..8b075fb
Binary files /dev/null and b/src/assets/images/careers/4.png differ
diff --git a/src/assets/images/careers/5.png b/src/assets/images/careers/5.png
new file mode 100644
index 0000000..10f8402
Binary files /dev/null and b/src/assets/images/careers/5.png differ
diff --git a/src/assets/images/careers/6.png b/src/assets/images/careers/6.png
new file mode 100644
index 0000000..082d9f0
Binary files /dev/null and b/src/assets/images/careers/6.png differ
diff --git a/src/assets/images/careers/7.png b/src/assets/images/careers/7.png
new file mode 100644
index 0000000..adc080b
Binary files /dev/null and b/src/assets/images/careers/7.png differ
diff --git a/src/assets/images/careers/8.png b/src/assets/images/careers/8.png
new file mode 100644
index 0000000..e0e73cb
Binary files /dev/null and b/src/assets/images/careers/8.png differ
diff --git a/src/assets/images/careers/9.png b/src/assets/images/careers/9.png
new file mode 100644
index 0000000..9af8f98
Binary files /dev/null and b/src/assets/images/careers/9.png differ
diff --git a/src/assets/images/comma.png b/src/assets/images/comma.png
new file mode 100644
index 0000000..b8c017b
Binary files /dev/null and b/src/assets/images/comma.png differ
diff --git a/src/assets/images/logo-black.png b/src/assets/images/logo-black.png
new file mode 100644
index 0000000..646ef04
Binary files /dev/null and b/src/assets/images/logo-black.png differ
diff --git a/src/assets/images/mail.png b/src/assets/images/mail.png
new file mode 100644
index 0000000..7280d1f
Binary files /dev/null and b/src/assets/images/mail.png differ
diff --git a/src/assets/images/map-bg.png b/src/assets/images/map-bg.png
new file mode 100644
index 0000000..ae64e1c
Binary files /dev/null and b/src/assets/images/map-bg.png differ
diff --git a/src/assets/images/phone.png b/src/assets/images/phone.png
new file mode 100644
index 0000000..0a8e8c0
Binary files /dev/null and b/src/assets/images/phone.png differ
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
new file mode 100644
index 0000000..cc38300
--- /dev/null
+++ b/src/pages/about/index.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="wrap">
+    <img width="100%" height="480" src="@/assets/images/about/1.png" alt="">
+    
+    <div class="block history">
+      <div class="inner">
+        <h2 style="margin-left: 57px">Our History</h2>
+        <div class="texts">
+          <div class="left">
+            <h2>Throughout the world, most of the top science and technology innovation centers are distributed</h2>
+            <div class="line"></div>
+            <div class="des">
+              Greater Bay area is the most economically developed China. Therefore, in 2019, the Chinese central government proposed to build this region an international science ion cente.
+
+              As one of the core cities in the bay area, with the convenient transportation infrastructure.
+            </div>
+          </div>
+          <img class="bg" width="562" height="506" src="@/assets/images/about/2.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Our Values</h2>
+        <p class="intro">What makes a light chaser</p>
+        <ul class="card">
+          <li class="item1">
+            <h6>Integrity</h6>
+            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
+          </li>
+          <li class="item2">
+            <h6>Adventure </h6>
+            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
+          </li>
+          <li class="item3">
+            <h6>Serve </h6>
+            <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen…</p>
+          </li>
+          <li class="item4">
+            <h6>Focus on Future </h6>
+            <p class="des">We are open and creative, pursuing scientific management and decision-making</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block" style="padding-bottom: 0">
+      <div class="inner">
+        <h2 class="b-title">Facts</h2>
+        <p class="intro">Strength in numbers</p>
+        <ul class="stat">
+          <li>
+            <p class="num">2020</p>
+            <p class="text">The year IASF was founded</p>
+          </li>
+          <li>
+            <p class="num">2</p>
+            <p class="text">Facility projects</p>
+          </li>
+          <li>
+            <p class="num">240</p>
+            <p class="text">Employees</p>
+          </li>
+          <li>
+            <p class="num">10</p>
+            <p class="text">Academicians</p>
+          </li>
+          <li>
+            <p class="num">45%</p>
+            <p class="text">Hold doctorates or the highest degree in their field</p>
+          </li>
+          <li>
+            <p class="num">$32B+</p>
+            <p class="text">Facility construction need-based grant aid provided </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Govening Board & Leadership</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <ul class="people">
+          <li>
+            <img class="pic" src="@/assets/images/about/6.png" alt="">
+            <div class="texts">
+              <p class="sub">Founder and 1st PRESIDENT OF THE INSTITUTE OF ADVANCED SCIENCE FACILITIES, SHENZHEN</p>
+              <h6>Sun Dongbai</h6>
+              <p class="des">Dr. Sun was the executive vice president of Sun Yat- and vice president of the University of Science and Technology Beijing (2008-2017). One of the most widely well-known material scientists aation</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+          <li>
+            <div class="texts">
+              <p class="sub">Vice President of the Institute of Advanced Scienc, Shenzhen</p>
+              <h6>Yang Xueming</h6>
+              <p class="des">Dr. Yang is a world-recognized physical chemistry scientist, an Academician of the Chinese Academy of Science, an awardee of the National Science Fund for Distinguished Young Scholars</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+            <img class="pic" src="@/assets/images/about/7.png" alt="">
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/about/8.png" alt="">
+            <div class="texts">
+              <p class="sub">The Chairman of Science and Technology Advisory Committee</p>
+              <h6>Ulf KALSSON</h6>
+              <p class="des">Dr. Ulf Karlsson is a joint professor of Linköping University and KTH Royal Institute of Technology. He established the laboratory of material science and was the director of the materials science platform</p>
+              <img class="arrow" src="@/assets/images/arrow.png" alt="">
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block list-block">
+      <div class="inner">
+        <h2 class="b-title">Committees</h2>
+        <p class="intro">What makes a ligh chinese bay chaser</p>
+        <ul class="list">
+          <li>
+            <img class="pic" src="@/assets/images/about/9.png" alt="">
+            <h6>Science and Technology</h6>
+            <p class="des">installation and nanostructuring</p>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/about/10.png" alt="">
+            <h6>User Committee</h6>
+            <p class="des"> installation and nanostructuring</p>
+          </li>
+          <li>
+            <img class="pic" src="@/assets/images/about/11.png" alt="">
+            <h6>Industry Advancement Committee</h6>
+            <p class="des">installation and nanostructuring</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block">
+      <div class="inner">
+        <h2 class="b-title">Staff & Organization Chart</h2>
+        <p class="intro">Meet the light chaser</p>
+        <div class="staff">
+          <div class="left">
+            <h6>Throughout the world, most of the top science and technology innovation centers are distributed</h6>
+            <div class="des">The IASF has over 300 employees, of which 50% hold a Ph.D. degree, and more than 25% of core positions had abroad research and management experience.</div>
+          </div>
+          <img class="pic" src="@/assets/images/about/12.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      columnId: '',
+      form: {},
+    }
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+        this.form = data
+        this.columnId = data.columnId
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.history {
+  background: #F2F6F8;
+  h2 {
+    font-size: 30px;
+    color: #333;
+  }
+  .texts {
+    display: flex;
+    justify-content: space-between;
+    padding: 82px 57px 30px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 100px 0px 0px 0px;
+  }
+  .left {
+    width: 695px;
+  }
+  .line {
+    width: 136px;
+    height: 2px;
+    margin: 20px 0;
+    background: #D7D7D7;
+  }
+  .des {
+    font-size: 22px;
+    color: #181818;
+    line-height: 31px;
+  }
+  .bg {
+    margin: -122px 0 0 0;
+  }
+}
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    width: 686px;
+    height: 277px;
+    padding: 70px 67px 20px;
+    margin-bottom: 28px;
+    color: #fff;
+    &:nth-child(odd) {
+      margin-right: 28px;
+    }
+  }
+  .item1 {
+    background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
+  }
+  .item2 {
+    background-color: #4984B6;
+  }
+  .item3 {
+    background-color: #567180;
+  }
+  .item4 {
+    background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
+  }
+  h6 {
+    margin-bottom: 10px;
+    font-size: 40px;
+  }
+  .des {
+    font-size: 18px;
+  }
+}
+.people {
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 126px;
+  }
+  .pic {
+    width: 660px;
+    height: 465px;
+  }
+  .texts {
+    width: 680px;
+    padding-top: 90px;
+  }
+  h6 {
+    margin: 20px 0;
+    font-size: 40px;
+  }
+  .sub {
+    font-size: 20px;
+    color: #020202;
+  }
+  .des {
+    font-size: 18px;
+    color: #020202;
+    line-height: 30px;
+  }
+}
+.list-block {
+  background: #F2F6F8;
+  .inner {
+    width: 80%;
+    padding: 90px 0;
+    background-color: #fff;
+  }
+}
+.list {
+  display: flex;
+  justify-content: center;
+  li {
+    padding-bottom: 30px;
+    margin-right: 28px;
+    text-align: center;
+    background-color: #F5F5F5;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  h6 {
+    margin: 35px 0 5px;
+    font-size: 24px;
+    color: #272727;
+  }
+  .des {
+    font-size: 16px;
+    color: #757575;
+  }
+}
+.staff {
+  display: flex;
+  justify-content: space-between;
+  background: #F8F8F8;
+  .left {
+    width: 658px;
+    margin: 50px 0 0 46px;
+  }
+  h6 {
+    margin-bottom: 30px;
+    font-size: 30px;
+    color: #333;
+  }
+  .des {
+    font-size: 20px;
+    color: #333;
+    line-height: 34px;
+  }
+  .pic {
+    width: 650px;
+  }
+}
+.stat {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 60px;
+  li {
+    width: 30%;
+    margin-bottom: 50px;
+  }
+  .num {
+    margin-bottom: 10px;
+    font-size: 60px;
+    font-weight: 800;
+    color: #035CE1;
+    line-height: 49px;
+  }
+  .text {
+    font-size: 24px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
new file mode 100644
index 0000000..8b0387a
--- /dev/null
+++ b/src/pages/careers/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="wrap">
+    <img width="100%" height="480" src="@/assets/images/careers/1.png" alt="">
+
+    <div class="wrap">
+      <div class="inner">
+        <ul class="card">
+          <li>
+            
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="block people-block">
+      <div class="inner">
+        <h2 class="b-title">Profiles</h2>
+        <p class="intro">What makes a light chaser</p>
+        <ul class="people">
+          <li>
+            <img class="comma" src="@/assets/images/comma.png" alt="">
+            <div class="left">
+              <h6>IASF started its journey to chase light, 
+  push the boundaries forward, and discover the unknown.</h6>
+              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
+            </div>
+            <img class="pic" src="@/assets/images/careers/6.png" alt="">
+          </li>
+          <li>
+            <img class="comma" src="@/assets/images/comma.png" alt="">
+            <div class="left">
+              <h6>IASF started its journey to chase light, 
+  push the boundaries forward, and discover the unknown.</h6>
+              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
+            </div>
+            <img class="pic" src="@/assets/images/careers/7.png" alt="">
+          </li>
+          <li>
+            <img class="comma" src="@/assets/images/comma.png" alt="">
+            <div class="left">
+              <h6>IASF started its journey to chase light, 
+  push the boundaries forward, and discover the unknown.</h6>
+              <div class="des">Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.</div>
+            </div>
+            <img class="pic" src="@/assets/images/careers/8.png" alt="">
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      columnId: '',
+      form: {},
+    }
+  },
+  watch: {
+    '$route'() {
+      this.id = this.$route.query.id
+      // this.getInfo()
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    // 获取文章详情
+    getInfo() {
+      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
+        this.form = data
+        this.columnId = data.columnId
+      }).catch(err => {})
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/page/page.scss";
+.people-block {
+  background: #F2F6F8;
+}
+.people {
+  li {
+    position: relative;
+    min-height: 450px;
+    padding: 100px 70px 30px 57px;
+    margin-bottom: 100px;
+    background-color: #fff;
+    &:nth-child(even) {
+      display: flex;
+      justify-content: flex-end;
+      .comma {
+        left: 660px;
+      }
+      .pic {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+  .comma {
+    position: absolute;
+    top: -22px;
+    left: 57px;
+  }
+  .left {
+    width: 670px;
+  }
+  h6 {
+    font-size: 24px;
+    color: #333;
+  }
+  .des {
+    margin-top: 20px;
+    font-size: 20px;
+    color: #666;
+    line-height: 32px;
+  }
+  .pic {
+    position: absolute;
+    top: -60px;
+    right: 43px;
+    width: 600px;
+    height: 450px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/channel/index.vue b/src/pages/channel/index.vue
index e277d29..35f1c55 100644
--- a/src/pages/channel/index.vue
+++ b/src/pages/channel/index.vue
@@ -171,151 +171,120 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.block {
-  padding: 118px 0;
-  .b-title {
-    position: relative;
-    margin-bottom: 50px;
-    font-size: 50px;
-    line-height: 59px;
-    text-align: center;
-    color: #1F1F1F;
-    &:after {
-      content: '';
-      position: absolute;
-      top: 70px;
-      left: 50%;
-      width: 136px;
-      height: 4px;
-      transform: translateX(-50%);
-      background: #1583FF;
-    }
+@import "../../styles/page/page.scss";
+.card {
+  display: flex;
+  justify-content: space-between;
+  li {
+    width: 660px;
   }
-  .intro {
-    margin-bottom: 80px;
-    font-size: 30px;
-    text-align: center;
-    color: #5B5B5E;
-    line-height: 40px;
+  .texts {
+    padding-left: 22px;
+    margin-top: 60px;
+    border-left: 2px solid #DFE4E9;
   }
-  .card {
-    display: flex;
-    justify-content: space-between;
-    li {
-      width: 660px;
-    }
-    .texts {
-      padding-left: 22px;
-      margin-top: 60px;
-      border-left: 2px solid #DFE4E9;
-    }
-    h6 {
-      margin-bottom: 25px;
-      font-size: 24px;
-      color: #333;
-    }
-    .des {
-      font-size: 18px;
-      color: #222;
-      line-height: 30px;
-    }
-    .arrow {
-      cursor: pointer;
-    }
+  h6 {
+    margin-bottom: 25px;
+    font-size: 24px;
+    color: #333;
   }
-
-  &.news-block {
-    background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+  .des {
+    font-size: 18px;
+    color: #222;
+    line-height: 30px;
   }
-  .news {
-    display: flex;
-    flex-wrap: wrap;
-    li {
-      display: inline-flex;
-      width: 686px;
-      padding: 34px;
-      margin-bottom: 28px;
-      background-color: #fff;
-      &:nth-child(odd) {
-        margin-right: 28px;
-      }
-    }
-    img {
-      width: 237px;
-      height: 167px;
-    }
-    .texts {
-      margin-left: 34px;
-    }
-    h6 {
-      font-size: 18px;
-      color: #0648A8;
-    }
-    .des {
-      margin: 14px 0;
-      font-size: 16px;
-      color: #333;
-      line-height: 22px;
-    }
-    .meta {
-      font-size: 16px;
-      color: #999;
-    }
+  .arrow {
+    cursor: pointer;
   }
+}
 
-  .people {
-    li {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 126px;
-    }
-    .pic {
-      width: 660px;
-      height: 465px;
-    }
-    .texts {
-      width: 680px;
-      padding-top: 150px;
-    }
-    h6 {
-      font-size: 40px;
-    }
-    .des {
-      font-size: 18px;
-      color: #020202;
-      line-height: 30px;
+.news-block {
+  background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+}
+.news {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    display: inline-flex;
+    width: 686px;
+    padding: 34px;
+    margin-bottom: 28px;
+    background-color: #fff;
+    &:nth-child(odd) {
+      margin-right: 28px;
     }
   }
-  
-  .glance {
-    padding-bottom: 50px;
-    font-size: 45px;
-    border-bottom: 1px solid #DEDEDE;
+  img {
+    width: 237px;
+    height: 167px;
+  }
+  .texts {
+    margin-left: 34px;
+  }
+  h6 {
+    font-size: 18px;
+    color: #0648A8;
+  }
+  .des {
+    margin: 14px 0;
+    font-size: 16px;
+    color: #333;
+    line-height: 22px;
+  }
+  .meta {
+    font-size: 16px;
+    color: #999;
   }
-  .stat {
+}
+
+.people {
+  li {
     display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    margin-top: 60px;
-    li {
-      width: 30%;
-      margin-bottom: 50px;
-    }
-    .num {
-      margin-bottom: 10px;
-      font-size: 60px;
-      font-weight: 800;
-      color: #035CE1;
-      line-height: 49px;
-    }
-    .text {
-      font-size: 24px;
-    }
+    justify-content: space-between;
+    margin-bottom: 126px;
+  }
+  .pic {
+    width: 660px;
+    height: 465px;
+  }
+  .texts {
+    width: 680px;
+    padding-top: 150px;
+  }
+  h6 {
+    font-size: 40px;
+  }
+  .des {
+    font-size: 18px;
+    color: #020202;
+    line-height: 30px;
   }
 }
-.inner {
-  width: 1400px;
-  margin: 0 auto;
+
+.glance {
+  padding-bottom: 50px;
+  font-size: 45px;
+  border-bottom: 1px solid #DEDEDE;
+}
+.stat {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 60px;
+  li {
+    width: 30%;
+    margin-bottom: 50px;
+  }
+  .num {
+    margin-bottom: 10px;
+    font-size: 60px;
+    font-weight: 800;
+    color: #035CE1;
+    line-height: 49px;
+  }
+  .text {
+    font-size: 24px;
+  }
 }
 .about {
   padding: 77px 0 198px;
diff --git a/src/router/modules/about.js b/src/router/modules/about.js
new file mode 100644
index 0000000..f707792
--- /dev/null
+++ b/src/router/modules/about.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'about'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/router/modules/careers.js b/src/router/modules/careers.js
new file mode 100644
index 0000000..4806a41
--- /dev/null
+++ b/src/router/modules/careers.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'careers'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
new file mode 100644
index 0000000..8cbe03a
--- /dev/null
+++ b/src/styles/page/page.scss
@@ -0,0 +1,32 @@
+.block {
+  padding: 118px 0;
+  .b-title {
+    position: relative;
+    margin-bottom: 50px;
+    font-size: 50px;
+    line-height: 59px;
+    text-align: center;
+    color: #1F1F1F;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 70px;
+      left: 50%;
+      width: 136px;
+      height: 4px;
+      transform: translateX(-50%);
+      background: #1583FF;
+    }
+  }
+  .intro {
+    margin-bottom: 80px;
+    font-size: 30px;
+    text-align: center;
+    color: #5B5B5E;
+    line-height: 40px;
+  }
+}
+.inner {
+  width: 1400px;
+  margin: 0 auto;
+}
\ No newline at end of file