diff --git a/src/views/front/about/index.vue b/src/views/front/about/index.vue
index bdafcce..4ddf3e5 100644
--- a/src/views/front/about/index.vue
+++ b/src/views/front/about/index.vue
@@ -1,126 +1,54 @@
 <template>
-  <div class="detail">
-    <div class="content">
-      <div style="padding: 20px; padding-top: 20px">
-        <h5 style="font-size: 24px; margin-bottom: 20px">Expertise</h5>
-        <div style="font-size: 16px; margin-bottom: 10px; text-align: justify">
-          With a wide range of expertise available at our fingertips, Elevate
-          Imaging is the right place for cutting edge and industry leading
-          guidance. Change is no longer linear; instead, it’s exponential. In
-          order to keep up with that change, relying on our experts on the
-          ground is vital. We have access to hundreds of clinical experts across
-          a wide range of indications and review criteria. No matter the need,
-          Elevate Imaging can always deliver with quality.
-        </div>
-        <div
-          style="
-            text-align: center;
-            padding: 20px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-          "
-        >
-          <div class="image_message">
-            <div class="image">
-              <img src="../../../static/images/expertise_1.png" alt="" />
-            </div>
-            <div class="message">
-              Global network of scientific & medical professionals with
-              experience on thousands of clinical trials. Use us for central
-              reading, consulting & trial design.
-            </div>
+  <div class="home">
+    <div class="banner">
+        <div class="banner_text">
+          <div style="font-size: 50px; color: #e7e7e7;">
+            来源于临床，服务于临床
           </div>
-          <div class="image_message">
-            <div class="image">
-              <img src="../../../static/images/expertise_2.png" alt="" />
-            </div>
-            <div class="message">
-              Indication specific pre-built review criteria including RECIST
-              1.1, Lugano 2014, PCWG3, RANO, iRECIST & many more. Custom eCRF
-              design enabled by our flexible technology.
-            </div>
-          </div>
-          <div class="image_message">
-            <div class="image">
-              <img src="../../../static/images/expertise_3.png" alt="" />
-            </div>
-            <div class="message">
-              Robust Quality Management System ensuring quality output. Direct
-              experience with regulatory submissions around the globe, including
-              inspection & audit support.
-            </div>
+          <div style="font-size: 35px; color: #e7e7e7;">
+            用先进的影像数据分析技术，为生命保驾护航
           </div>
         </div>
       </div>
+    <div class="content">
+
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   data () {
     return {
     }
   },
 
-  methods: {},
+  methods: {
+
+  },
   mounted () {}
 }
 </script>
 
 <style scoped lang="scss">
-.detail {
-  padding: 20px;
+.home {
   background: #fff;
-  .otherMsg {
-    padding: 10px 0;
-    border-bottom: 1px solid #bebebe;
-    p {
-      font-size: 20px;
-      color: #666;
-    }
-    ul {
-      display: flex;
-      margin-top: 10px;
-      li {
-        margin-right: 30px;
-        display: flex;
-        align-items: center;
-        span {
-          color: #999;
-          padding: 0 5px;
-        }
-      }
-    }
-  }
-  .bottom {
-    margin: 20px 0;
-    display: flex;
-    justify-content: center;
-  }
-  .image_message {
-    width: 30%;
-    .image {
+  .banner {
+    height: 340px;
+    background: url(../../../../src/static/images/banner.jpg) no-repeat center center;
+    background-size: cover;
+    position: relative;
+    overflow: hidden;
+    clear: both;
+    .banner_text {
       width: 100%;
-      height: 200px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-    .message {
-      height: 100px;
-      background-color: #e8edf0;
-      border-radius: 15px;
-      padding: 10px 20px;
-      font-size: 14px;
-      line-height: 1.4;
-      text-align: left;
+      font-size: 52px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 50px;
+      color: #fff;
+      text-align: center;
     }
   }
 }
diff --git a/src/views/front/book/index.vue b/src/views/front/book/index.vue
index 327074a..4ddf3e5 100644
--- a/src/views/front/book/index.vue
+++ b/src/views/front/book/index.vue
@@ -1,3 +1,55 @@
 <template>
-  <div>Book Demo</div>
+  <div class="home">
+    <div class="banner">
+        <div class="banner_text">
+          <div style="font-size: 50px; color: #e7e7e7;">
+            来源于临床，服务于临床
+          </div>
+          <div style="font-size: 35px; color: #e7e7e7;">
+            用先进的影像数据分析技术，为生命保驾护航
+          </div>
+        </div>
+      </div>
+    <div class="content">
+
+    </div>
+  </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+
+  },
+  mounted () {}
+}
+</script>
+
+<style scoped lang="scss">
+.home {
+  background: #fff;
+  .banner {
+    height: 340px;
+    background: url(../../../../src/static/images/banner.jpg) no-repeat center center;
+    background-size: cover;
+    position: relative;
+    overflow: hidden;
+    clear: both;
+    .banner_text {
+      width: 100%;
+      font-size: 52px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 50px;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/front/media/index.vue b/src/views/front/media/index.vue
index 7032e8d..4ddf3e5 100644
--- a/src/views/front/media/index.vue
+++ b/src/views/front/media/index.vue
@@ -1,3 +1,55 @@
 <template>
-  <div>Media  Report</div>
+  <div class="home">
+    <div class="banner">
+        <div class="banner_text">
+          <div style="font-size: 50px; color: #e7e7e7;">
+            来源于临床，服务于临床
+          </div>
+          <div style="font-size: 35px; color: #e7e7e7;">
+            用先进的影像数据分析技术，为生命保驾护航
+          </div>
+        </div>
+      </div>
+    <div class="content">
+
+    </div>
+  </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+
+  },
+  mounted () {}
+}
+</script>
+
+<style scoped lang="scss">
+.home {
+  background: #fff;
+  .banner {
+    height: 340px;
+    background: url(../../../../src/static/images/banner.jpg) no-repeat center center;
+    background-size: cover;
+    position: relative;
+    overflow: hidden;
+    clear: both;
+    .banner_text {
+      width: 100%;
+      font-size: 52px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 50px;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>