diff --git a/src/assets/images/top.png b/src/assets/images/top.png
index a4e606f..7b4e011 100644
Binary files a/src/assets/images/top.png and b/src/assets/images/top.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 597b3e3..ed11388 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -243,5 +243,12 @@
       }
     }
   }
-
+}
+.content-main{
+  display: flex;
+  justify-content: space-between;
+  height: 880px;
+  margin: 30px 0;
+  padding: 0 40px;
+  background: #F4F4F4;
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 4a63194..a6cf340 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,14 +3,40 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{
-  path: '/',
-  name: 'index',
-  component: () => import('../views/index.vue'),
-  meta: {
-    title: '自主查询机'
+const routes = [
+  {
+    path: '/',
+    name: 'index',
+    component: () => import('../views/index.vue'),
+    meta: {
+      title: '自主查询机'
+    }
+  },
+  {
+    path: '/NewBookRecommend',
+    name: 'NewBookRecommend',
+    component: () => import('../views/newBookRecommend.vue'),
+    meta: {
+      title: '新书推荐'
+    }
+  },
+  {
+    path: '/DigitalResource',
+    name: 'DigitalResource',
+    component: () => import('../views/digitalResource.vue'),
+    meta: {
+      title: '数字资源'
+    }
+  },
+  {
+    path: '/LibraryIntroduction',
+    name: 'LibraryIntroduction',
+    component: () => import('../views/libraryIntroduction.vue'),
+    meta: {
+      title: '图书管简介'
+    }
   }
-}]
+]
 
 const router = new VueRouter({
   mode: 'history',
diff --git a/src/views/digitalResource.vue b/src/views/digitalResource.vue
new file mode 100644
index 0000000..bcff5ea
--- /dev/null
+++ b/src/views/digitalResource.vue
@@ -0,0 +1,59 @@
+<template>
+  <!-- 数字资源 -->
+  <div class="content-main">
+    <!-- <div class="common-title">新书推荐</div> -->
+    <div ref="newbook" class="big-module module-content">
+      <div v-for="(item,index) in rankingList" :key="index" class="main-item">
+        <img :src="item.bgImg">
+        <div class="title">
+          {{ item.title }}
+        </div>
+      </div>
+      <!-- <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
+        <img class="book-img" :src="item.img">
+        <div class="book-info">
+          <h4 class="title-item">{{ item.title }}</h4>
+          <p>{{ item.author }}</p>
+        </div>
+        <div class="ranking-num">
+          <svg v-if="item.ranking === 1" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no1" />
+          </svg>
+          <svg v-if="item.ranking === 2" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no21" />
+          </svg>
+          <svg v-if="item.ranking === 3" class="icon" aria-hidden="true">
+            <use xlink:href="#icon-a-no3" />
+          </svg>
+          <p>NO.{{ item.ranking }}</p>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import data from './digitalResourceJson'
+
+export default {
+  name: 'DigitalResource',
+  data() {
+    return {
+      rankingList: []
+    }
+  },
+  created() {
+    this.rankingList = data.srcList
+  },
+  mounted() {
+  },
+  destroyed() {
+  },
+  methods: {
+  }
+}
+</script>
+
+  <style lang="scss">
+  @import "~@/assets/styles/index.scss";
+  </style>
diff --git a/src/views/digitalResourceJson.json b/src/views/digitalResourceJson.json
new file mode 100644
index 0000000..07f6f62
--- /dev/null
+++ b/src/views/digitalResourceJson.json
@@ -0,0 +1,154 @@
+{
+  "listData":[
+    [
+      {
+        "id":1
+      }
+    ],
+    { "id": 2 },
+    { "id": 3 },
+    { "id": 4 },
+    { "id": 5 }
+  ],
+  "bookList":[
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定1",
+      "ranking": 1,
+      "num": 2000
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定2",
+      "ranking": 2,
+      "num": 1200
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "大个子狗与小个子猫",
+      "author": "高小定3",
+      "ranking": 3,
+      "num": 1100
+    }
+  ],
+  "srcList":[
+    {
+      "title":"图书馆公开课",
+      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a1bf2870003"
+    },
+    {
+      "title":"武汉微刊",
+      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a1b1d9e0002"
+    },
+    {
+      "title":"在线书城",
+      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a1a50720001"
+    },
+    {
+      "title":"武汉云阅读",
+      "bgImg":"http://192.168.99.84:8080/numresurces/getImgFromByte.do?nrsId=4028e3d48354830301835a16da710000"
+    }
+  ],
+  "authors":[
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》"
+    },
+    {
+      "name":"钱钟书",
+      "brief":"钱钟书（1910年11月21日—1998年12月19日），江苏无锡人，原名仰先，字哲良，后改名钟书，字默存，号槐聚，曾用笔名中书君，中国现代作家、文学研究家。代表作：《围城》《管锥编》《谈艺录》《写在人生边上》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》《人·兽·鬼》"
+    }
+  ],
+  "rackBook":[
+    {"id":100,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":101,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":102,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":103,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":104,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":105,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":106,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":107,"title":"大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":109,"title":"大个子狗与小个子猫大个子狗与小个子猫","author":"高小定","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1010,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1011,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1012,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1013,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1014,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1015,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1016,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1017,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1018,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1019,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"},
+    {"id":1020,"title":"书名书名书名","author":"作者","img":"https://qiniu.aiyxlib.com/bg.png"}
+  ]
+}
\ No newline at end of file
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 4d989b0..adaa53f 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,13 +1,34 @@
 <template>
   <div class="header-container">
-    <div class="header-title"><h2>东西湖区图书馆</h2></div>
-    <div class="header-text header-weather">
-      <!-- 天气api: https://www.tianqi.com/plugin -->
-      <iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" />
-    </div>
+    <!-- <ul class="header-nav">
+      <li>
+        <img src="~@/assets/images/top.png">
+        <p>图书检索</p>
+      </li>
+      <li @click="toHotBook">
+        <img src="~@/assets/images/top.png">
+        <p>热门图书</p>
+      </li>
+      <li @click="toAuthor">
+        <img src="~@/assets/images/top.png">
+        <p>作者推荐</p>
+      </li>
+      <li @click="toDigital">
+        <img src="~@/assets/images/top.png">
+        <p>数字资源</p>
+      </li>
+      <li>
+        <img src="~@/assets/images/top.png">
+        <p>场馆导航</p>
+      </li>
+    </ul> -->
     <div class="header-text header-date">{{ nowDate }}</div>
+  <!-- <div class="header-title"><h2>东西湖区图书馆</h2></div>
+  <div class="header-text header-weather">
+    天气api: https://www.tianqi.com/plugin -->
+    <!-- <iframe id="weather" width="210" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=24" /> -->
+  <!-- </div> -->
   </div>
-
 </template>
 
 <script>
@@ -32,5 +53,4 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~@/assets/styles/index.scss";
 </style>
diff --git a/src/views/libraryIntroduction.vue b/src/views/libraryIntroduction.vue
new file mode 100644
index 0000000..2e0df82
--- /dev/null
+++ b/src/views/libraryIntroduction.vue
@@ -0,0 +1,88 @@
+<template>
+  <!-- 图书馆简介 -->
+  <div class="content-main">
+    <div class="nav-menu">
+      <ul>
+        <li :class="{ 'is-active': selectMenuIndex === 0 }" @click="selectMenuChange(0)">关于图书馆</li>
+        <li :class="{ 'is-active': selectMenuIndex === 1 }" @click="selectMenuChange(1)">领导信息</li>
+      </ul>
+    </div>
+    <div class="introduction-info" v-html="rawHtml">
+      <!-- <div class="info-title">东西湖区图书馆服务简介</div>
+      <div class="info-img">
+        <img class="book-img" :src="item.img">
+      </div>
+      <div class="info-content">1978年区政府立项筹建新馆，投资38万元。1990年元月，位于吴家山吴祁街19号的新馆大楼建成开放，面积1,800平方米，职工7人，年拨经费30,000元，藏书36,000万册，年订购报刊200余种。2000年图书馆扩建，馆舍面积增至2,075平方米，事业经费25万元，职工10人，藏书13万册，报刊305种。已形成以收藏当代作家的著作、手稿、传略、照片等文献资料为主的特色馆藏。1993年秋，该馆在湖北省、武汉市作家协会的支持下，联合创办国内第一所当代作家文献收藏中心。1994年夏，开设当代作家代表作签</div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import data from './libraryIntroductionData'
+
+export default {
+  name: 'LibraryIntroduction',
+  data() {
+    return {
+      rankingList: [],
+      selectMenuIndex: 0,
+      rawHtml: ''
+    }
+  },
+  created() {
+    this.rawHtml = data.html
+  },
+  mounted() {
+  },
+  methods: {
+    selectMenuChange(index) {
+      this.selectMenuIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.nav-menu {
+  background: #ffffff;
+  width: 300px;
+  ul {
+    margin-top: 30px;
+    li {
+      height: 90px;
+      font-size: 30px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      line-height: 90px;
+      text-align: center;
+      &.is-active {
+        background: linear-gradient(
+          318deg,
+          #38b8d9 0%,
+          #5394f1 45%,
+          #a0a9ef 100%
+        );
+        color: #ffffff;
+      }
+    }
+  }
+}
+.introduction-info {
+  margin-left: 30px;
+  background: #ffffff;
+  width: 1510px;
+  .info-title {
+    height: 100px;
+    text-align: center;
+    font-size: 38px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #333333;
+    line-height: 100px;
+  }
+  .info-img {
+    background: url('~@/assets/images/top.png') no-repeat center -5px;
+  }
+}
+</style>
diff --git a/src/views/libraryIntroductionData.json b/src/views/libraryIntroductionData.json
new file mode 100644
index 0000000..8b60ca4
--- /dev/null
+++ b/src/views/libraryIntroductionData.json
@@ -0,0 +1,3 @@
+{
+  "html": "&lt;pre&gt;经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，&lt;/pre&gt;\r\n&lt;pre&gt;量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的《符合政府安排工作条件退役士兵服役表现量化评分办法（试行）》进行认定。\r\n经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的《符合政府安排工作条件退役士兵服役表现量化评分办法（试行）》进行认定。&lt;/pre&gt;"
+}
\ No newline at end of file