diff --git a/src/assets/styles/iconfont.css b/src/assets/styles/iconfont.css
index 646218f..c0063e3 100644
--- a/src/assets/styles/iconfont.css
+++ b/src/assets/styles/iconfont.css
@@ -1,7 +1,7 @@
 @font-face {font-family: "iconfont";
   src: url('./iconfont/iconfont.eot?t=1582894449865'); /* IE9 */
   src: url('./iconfont/iconfont.eot?t=1582894449865#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL0AAsAAAAABvwAAAKoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBMIE/ATYCJAMQCwoABCAFhG0HTRs2Bsiemjxts6nMMrFmQwoVIOiExcP3Y9/Ove+tapIkGnc2iUZN3kxCM2gMCRqpbMcaITLdS/hD1/wKoPenWHLZGiMpytIzCQc4oH+6oD1ujeM7XNMiuOorWFZjUiX7eEkh4RsJVeOnTIVZ5B9cTlsDA5lnb7msbWMt+igak+LA0oDGXmQFkqA3jN1E4BA2E2g3xkJvxT6WmYoK9ArEQ5dHmUrOo6pWvFVorplYxUdNWvN9/qN84N+P/4JRITUVYNj+1WOaufkVulfZt40JiuElqNObUDCPUomb2siZvLAYrPbmBYsorVolc9UU71VCpI4dC+FfHiEVohlAd4IFLVr4FcIIwa8iQvKrilLgh2haZWwKZVsnjhyQQnT2C/lTjAsQ5gDIItTPHzHNFPmMoLjYHkdzmvHL5cov18drivP5ISGfVqRIG383HcfQWye5w+vrOyJPTZsHzXnSGvzVu6jMTQdQ7SedIjcxMmiw65KBfGQ+QZHf+Dd+uCUtaC/9W9UKfo69lqc0OKrgQ4l7i7+ouGdRDaVAW6svw6LIVo2N7pFo147vmKCfO4dmqHeI0JoTW5BajELRahxbifPQpMMCNGu1Cu3mxKd3GDCQF7UNs5YKhF4XSN0+Q9HLxlbiDZoM+0Gz3shDu4MYWLDDZGyVzQFGhCnEv7BNtGJITzWRPEf+KSKXlXLmGp3f+mHq9Rfjz6jQzTHEf/EZEQPmtIQnZTsUQoNxeocJjTZE5mzsa9W9aZRomanZ5KAIQSlQ8wt0JTSF0eqkVvr8HOI+CRHXkjbgXUOOt60fBHj5e2CfVapX2r1cM/SFmxkhDGhxNAnElHZIEDTQq2+3gxJkpDMiZJzxwXKtvqrR+hr5AYVWFqBVjYwSNZq03bt3SOjfSiSLpqZ5lqEA') format('woff2'),
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAAB+wAAANnAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCfIJWATYCJAMUCwwABCAFhG0HVhvwBsiemjyJpQURxDofvNWC5hZF8fD/+33b58qbN/ePeJIkRmJRxaImQiOJNzFLmcSUiKyOr077g3YJKtUGcvovlTycS0WP0ARpakdo7FwC4FLv/7MmR0MBCsGYPGZb2/xAXeLVFMekBfYiXbABN+nOi6y4rdz/3M/XVeiO57Vnc6mmqLI1bbQzwFECzWbRRfY/yBf1P4xdeRG7CTTLrIkfCY2OEZNTGIMCcZbFyBSTS6mVmsTQC13JzCJeq/r0JHzBK//346/dQY6kZsa4k9OQHDH/pJ2kSFb8l4siHM8INo+MXcQU4nKp+SzJMLyLpKa0l3KAmKaXpLGaeScJb5P/IbFkR6pm/sMjJFkhOkb8GDiAIoUf7jZC8MMbIfEjASHzI0X0YvapoGEUp4n5iPArwSoJ5W1TRuLlsRmZ6JqUSr2gNrMhVm7vrOrz2+LpO7fkqcHFsG6/v1m72+u1mR0c0Or0NOn0+sCpya3ierZ5frhyaK5pZiD5y1f/8aP78N55+jyI234OIOsleNn7mp/3dwWI4RMTS8XEuWWtoH/TvzB1uFFkaNbhnzEYNjfBPXO8K/6gdw73z82tF316+p/dPu/TTjwwOzvDvhoa76Ryd2bYerR432J4emznEuv2dm4yuS7PkcSt97ffrlpN5C4R36zWQ2mINRIxcrSR5VS509G5jkG+/KAa0hx6JH8OvxmS4wikaxL9kKU/9zf2ji7201W9//piAd8bch/6WUOKjNev1Fr4n4QtC4oqNjS1yLm2QLZW++5QkZSyhr9jn/E6jmq+dTyhNx9DMmIJst4KuuB3QTWwBzq9/dBsC5s/MAuTFGUUW2oBhCkLkEzYgWzKJbrgX6Ba8AudqSCC5lSgueLAWrBQCMIwk8AckFUIWNkCPrJ0RCFIpEFGLjcTJ8U+PQ5iiuUDDrb22VgY5EM8xhgqj+FICAIIC3ggFOwHuVwBEGIBG2YTWyYhQk87O1T2JdtsAU9MwWEYlImAcgBZCgEs2QT4kFuaUMj9PA3EkIsrE67Jq3DGgTAKq3HAgS37FugwBb9V3rXcQ8nD4IggEADBBHiAUNAN4uISAITl3digbIQtZo+gkCc7sxhqq7CdX8V7xnXQGBvVSJGjRI1OdzVXyMrky1+Ax4ZA6tIEYYEDNTmKiQEA') format('woff2'),
   url('./iconfont/iconfont.woff?t=1582894449865') format('woff'),
   url('./iconfont/iconfont.ttf?t=1582894449865') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
   url('./iconfont/iconfont.svg?t=1582894449865#iconfont') format('svg'); /* iOS 4.1- */
diff --git a/src/assets/styles/iconfont/iconfont.eot b/src/assets/styles/iconfont/iconfont.eot
index 3faa59c..e9206e2 100644
Binary files a/src/assets/styles/iconfont/iconfont.eot and b/src/assets/styles/iconfont/iconfont.eot differ
diff --git a/src/assets/styles/iconfont/iconfont.svg b/src/assets/styles/iconfont/iconfont.svg
index 3ffd5e3..dc7e762 100644
--- a/src/assets/styles/iconfont/iconfont.svg
+++ b/src/assets/styles/iconfont/iconfont.svg
@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="tupian" unicode="&#58936;" d="M885.76 691.2v-614.4H138.24V691.2h747.52m10.24 71.68H128c-33.93024 0-61.44-27.50976-61.44-61.44v-634.88c0-33.93024 27.50976-61.44 61.44-61.44h768c33.93024 0 61.44 27.50976 61.44 61.44V701.44c0 33.93024-27.50976 61.44-61.44 61.44zM256.03584 177.59232a35.81952 35.81952 0 0 0-30.89408 17.6128c-9.91744 16.7424-3.83488 38.46656 12.49792 49.03936l190.45376 123.26912a40.96 40.96 0 0 0 44.08832 0.27136l101.376-63.86176a20.48 20.48 0 0 1 22.36416 0.34816l182.76864 123.20768a35.84512 35.84512 0 0 0 50.36544-10.61888c10.46528-16.59392 4.72576-38.68672-11.54048-49.65376l-209.19296-141.02016a40.94976 40.94976 0 0 0-44.72832-0.6912l-101.95456 64.22528a20.46976 20.46976 0 0 1-22.0416-0.13824l-164.11648-106.22464a35.67104 35.67104 0 0 0-19.44576-5.76512zM337.92 522.24m-51.2 0a51.2 51.2 0 1 1 102.4 0 51.2 51.2 0 1 1-102.4 0Z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="icon-test" unicode="&#58940;" d="M192 448c0 141.152 114.848 256 256 256s256-114.848 256-256-114.848-256-256-256-256 114.848-256 256z m710.624-409.376l-206.88 206.88A318.784 318.784 0 0 1 768 448c0 176.736-143.264 320-320 320S128 624.736 128 448s143.264-320 320-320a318.784 318.784 0 0 1 202.496 72.256l206.88-206.88 45.248 45.248z"  horiz-adv-x="1024" />
 
     
diff --git a/src/assets/styles/iconfont/iconfont.ttf b/src/assets/styles/iconfont/iconfont.ttf
index 75de9ee..b9ea6a1 100644
Binary files a/src/assets/styles/iconfont/iconfont.ttf and b/src/assets/styles/iconfont/iconfont.ttf differ
diff --git a/src/assets/styles/iconfont/iconfont.woff b/src/assets/styles/iconfont/iconfont.woff
index fe980c8..4155191 100644
Binary files a/src/assets/styles/iconfont/iconfont.woff and b/src/assets/styles/iconfont/iconfont.woff differ
diff --git a/src/assets/styles/iconfont/iconfont.woff2 b/src/assets/styles/iconfont/iconfont.woff2
index 7b013a4..6c91772 100644
Binary files a/src/assets/styles/iconfont/iconfont.woff2 and b/src/assets/styles/iconfont/iconfont.woff2 differ
diff --git a/src/commom/gallery/Gallery.vue b/src/commom/gallery/Gallery.vue
new file mode 100644
index 0000000..8f2f8d7
--- /dev/null
+++ b/src/commom/gallery/Gallery.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="container" @click="handleGalleryClick">
+    <div class="wrapper">
+      <swiper :options="swiperOptions">
+        <swiper-slide v-for="(item, index) of imgs" :key="index">
+          <img class="gallery-img" :src="item" />
+        </swiper-slide>
+        <div class="swiper-pagination" slot="pagination"></div>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CommitGallery",
+  props: {
+    imgs: {
+      type: Array,
+      default: function() {
+        return [];
+    }
+    }
+  },
+  data: function() {
+    return {
+      swiperOptions: {
+        pagination: ".swiper-pagination",
+        paginationType: "fraction",
+        observeParents: true,
+        observer: true
+      }
+    };
+  },
+  methods: {
+    handleGalleryClick: function() {
+      this.$emit("close");
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container >>> .swiper-container
+  overflow inherit
+.container
+  display flex
+  flex-direction column
+  justify-content center
+  z-index 99
+  position fixed
+  left 0
+  right 0
+  top 0
+  bottom 0
+  background #000000
+  .wrapper
+    height 0
+    width 100%
+    padding-bottom 100%
+    .gallery-img
+      width 100%
+    .swiper-pagination
+      color #ffffff
+      bottom -1rem
+</style>
diff --git a/src/pages/detail/Detail.vue b/src/pages/detail/Detail.vue
new file mode 100644
index 0000000..82b4448
--- /dev/null
+++ b/src/pages/detail/Detail.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <detail-banner></detail-banner>
+  </div>
+</template>
+
+<script>
+import DetailBanner from "./components/banner";
+
+export default {
+  name: "Detail",
+  components: {
+    DetailBanner: DetailBanner
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/pages/detail/components/banner.vue b/src/pages/detail/components/banner.vue
new file mode 100644
index 0000000..be08ec3
--- /dev/null
+++ b/src/pages/detail/components/banner.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="banner" @click="handleBannerClick">
+      <img
+        class="banner-img"
+        src="https://img1.qunarzz.com/sight/p0/1602/a2/a2db6aea3707663a90.img.jpg_600x330_95322c03.jpg"
+      />
+      <div class="banner-info">
+        <div class="banner-title">梦幻百花洲</div>
+        <div class="banner-number">
+          <span class="iconfont back-icon banner-icon">&#xe638;</span>
+          39
+        </div>
+      </div>
+    </div>
+    <commit-gallery
+      :imgs="imgs"
+      v-show="showGallery"
+      @close="handleGalleryClose"
+    ></commit-gallery>
+  </div>
+</template>
+
+<script>
+import CommitGallery from "commom/gallery/Gallery";
+
+export default {
+  name: "DetailBanner",
+  data: function() {
+    return {
+      showGallery: false,
+      imgs: [
+        "http://img1.qunarzz.com/sight/p0/1602/a2/a2db6aea3707663a90.img.jpg_r_800x800_f06fc71d.jpg",
+        "http://img1.qunarzz.com/sight/p0/1602/ec/ecf4f576181c285790.img.jpg_r_800x800_c2833cda.jpg"
+      ]
+    }
+  },
+  components: {
+    CommitGallery: CommitGallery
+  },
+  methods: {
+    handleBannerClick: function() {
+      this.showGallery = true;
+    },
+    handleGalleryClose: function() {
+      this.showGallery = false;
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.banner
+  position relative
+  overflow hidden
+  height 0
+  padding 0
+  padding-bottom 55%
+  .banner-img
+    width 100%
+  .banner-info
+    display flex
+    position absolute
+    left 0
+    right 0
+    bottom 0
+    line-height .6rem
+    color #ffffff
+    background-image linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
+    .banner-title
+      flex 1
+      font-size .32rem
+      padding 0 .2rem
+    .banner-number
+      height .32rem
+      line-height .32rem
+      margin-top .14rem
+      padding 0 .4rem
+      border-radius .2rem
+      background rgb(0, 0, 0, 0)
+      font-size .24rem
+      .banner-icon
+        font-size .24rem
+</style>
diff --git a/src/pages/home/components/Recommend.vue b/src/pages/home/components/Recommend.vue
index 9aee0b5..a74c2d0 100644
--- a/src/pages/home/components/Recommend.vue
+++ b/src/pages/home/components/Recommend.vue
@@ -3,14 +3,20 @@
     <div class="title">热销推荐</div>
     <ul>
       <!-- 这里的border-bottom是reset.css中的样式，为li标签下方添加1像素边框 -->
-      <li class="item border-bottom" v-for="item of list" :key="item.id">
+      <router-link
+        tag="li"
+        class="item border-bottom"
+        v-for="item of list"
+        :key="item.id"
+        :to="'/detail/' + item.id"
+      >
         <img class="item-img" :src="item.imgUrl" />
         <div class="item-info">
           <p class="item-title">{{ item.title }}</p>
           <p class="item-desc">{{ item.desc }}</p>
           <button class="item-button">查看详情</button>
         </div>
-      </li>
+      </router-link>
     </ul>
   </div>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index 2ea0a54..f6afa57 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,8 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "@/pages/home/Home";
+import Home from "@/pages/home/home";
 import City from "@/pages/city/City";
+import Detail from "@/pages/detail/Detail";
 
 Vue.use(VueRouter);
 
@@ -14,6 +15,10 @@ const routes = [
     path: "/city",
     name: "City",
     component: City
+  },{
+    path: "/detail/:id",
+    name: "Detail",
+    component: Detail
   }
 ];
 
diff --git a/vue.config.js b/vue.config.js
index fc7a917..c37ac4b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,7 +7,8 @@ module.exports = {
   chainWebpack: config => {
     config.resolve.alias
       .set("@", resolve("src"))
-      .set("styles", resolve("src/assets/styles"));
+      .set("styles", resolve("src/assets/styles"))
+      .set("commom", resolve("src/commom"));
   },
   lintOnSave: false,
   devServer: {