diff --git a/package.json b/package.json
index 43d6c46..8d3ec8c 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,9 @@
     "element-ui": "^2.15.9",
     "vue": "^2.6.11",
     "vue-awesome": "^4.0.2",
+    "vue-count-to": "^1.0.13",
     "vue-router": "^3.1.5",
+    "vue-seamless-scroll": "^1.1.23",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -31,6 +33,7 @@
     "eslint-plugin-vue": "^6.1.2",
     "sass": "^1.25.0",
     "sass-loader": "^8.0.2",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
diff --git a/src/assets/images/header-bg.png b/src/assets/images/header-bg.png
new file mode 100644
index 0000000..84d92c1
Binary files /dev/null and b/src/assets/images/header-bg.png differ
diff --git a/src/assets/images/header-left.png b/src/assets/images/header-left.png
new file mode 100644
index 0000000..c713888
Binary files /dev/null and b/src/assets/images/header-left.png differ
diff --git a/src/assets/images/header-right.png b/src/assets/images/header-right.png
new file mode 100644
index 0000000..18abf63
Binary files /dev/null and b/src/assets/images/header-right.png differ
diff --git a/src/assets/images/notice.gif b/src/assets/images/notice.gif
new file mode 100644
index 0000000..17f9f0d
Binary files /dev/null and b/src/assets/images/notice.gif differ
diff --git a/src/assets/images/title-big.png b/src/assets/images/title-big.png
new file mode 100644
index 0000000..2d5a0b9
Binary files /dev/null and b/src/assets/images/title-big.png differ
diff --git a/src/assets/images/top-line.png b/src/assets/images/top-line.png
new file mode 100644
index 0000000..33beb85
Binary files /dev/null and b/src/assets/images/top-line.png differ
diff --git a/src/assets/styles/ball-running-animate.css b/src/assets/styles/ball-running-animate.css
new file mode 100644
index 0000000..703374d
--- /dev/null
+++ b/src/assets/styles/ball-running-animate.css
@@ -0,0 +1,116 @@
+.ball-running-dots {
+	position: absolute;
+	top: 0.2rem;
+}
+.left-dots {
+	left: 136px;
+}
+.right-dots {
+	right: 200px;
+}
+.ball-running-dots > div {
+	position: relative;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.ball-running-dots {
+	display: block;
+	font-size: 0;
+	color: #316fd9;
+}
+.ball-running-dots > div {
+	display: inline-block;
+	float: none;
+	background-color: currentColor;
+	border: 0 solid currentColor;
+}
+.ball-running-dots {
+	width: 12px;
+	height: 12px;
+}
+.ball-running-dots > div {
+	position: absolute;
+	margin-left: 30px;
+	border-radius: 100%;
+}
+.left-dots > div {
+	animation: ball-running-dots-animate 2s linear infinite;
+}
+.right-dots > div {
+	animation: ball-running-dots-animate2 2s linear infinite;
+}
+.ball-running-dots > div:nth-child(1) {
+	animation-delay: 0s;
+}
+.ball-running-dots > div:nth-child(2) {
+	animation-delay: -0.8s;
+}
+.ball-running-dots > div:nth-child(3) {
+	animation-delay: -1.2s;
+}
+.ball-running-dots > div:nth-child(4) {
+	animation-delay: -1.6s;
+}
+@keyframes ball-running-dots-animate {
+	0%{
+		width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(-500%) scale(50%,50%);
+    opacity: 0.5;
+	}
+	80% {
+		transform: translateY(0) translateX(0);
+	}
+	85% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-125%) translateX(0);
+	}
+	90% {
+		width: 200%;
+		height: 75%;
+	}
+	95% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-100%) translateX(-500%);
+	}
+  100% {
+    width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(-500%) scale(50%,50%);
+    opacity: 1;
+	}
+}
+@keyframes ball-running-dots-animate2 {
+	0%{
+		width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(500%) scale(50%,50%);
+    opacity: 0.5;
+	}
+	80% {
+		transform: translateY(0) translateX(0);
+	}
+	85% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-125%) translateX(0);
+	}
+	90% {
+		width: 200%;
+		height: 75%;
+	}
+	95% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(-100%) translateX(500%);
+	}
+	100% {
+		width: 100%;
+		height: 100%;
+		transform: translateY(0) translateX(500%);
+    opacity: 1;
+	}
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 597b3e3..ca4180c 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -12,12 +12,32 @@
 // 头部主题标题
 .header-container{
   position: relative;
+  width: 100%;
+  height: 1.125rem;
   font-size: 0.3rem;
   color: #fff;
+  &::before,
+  &::after{
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 6.2rem;
+    height: 1.05rem;
+  }
+  &::before{
+    left: 0;
+    background: url('~@/assets/images/header-left.png') no-repeat top center;
+  }
+  &::after{
+    right: 0;
+    background: url('~@/assets/images/header-right.png') no-repeat top center;
+  }
   .header-title{
-    width: 100%;
-    height: 1.125rem;
-    background: url('~@/assets/images/top.png') no-repeat center -5px;
+    position: relative;
+    width: 15.85rem;
+    height: 1.075rem;
+    margin: 0 auto;
+    background: url('~@/assets/images/header-bg.png') no-repeat top center;
     background-size: cover;
     h2{
       font-size: 0.6rem;
@@ -37,20 +57,62 @@
   }
   .header-weather {
     left: 1rem;
-    // top: 0.32rem;
   }
   .header-date {
     right: 0.375rem;
   }
 }
 
+// 头部动态效果
+.line1,
+.line2{
+  position: absolute;
+  top: 0;
+}
+
+.line1{
+  right: 632px;
+  transform: rotateY(-180deg);
+}
+
+.line2{
+  left: 632px;
+}
+
+.top-line1,
+.top-line2{
+  display: block;
+  width: 7.925rem;
+  height: 1.075rem;
+  animation: topline 4s linear infinite both;
+}
+
+.top-line1{
+  background: url('~@/assets/images/top-line.png') no-repeat;
+}
+
+.top-line2{
+  background: url('~@/assets/images/top-line.png') no-repeat;
+}
+
+@keyframes topline {
+  from {
+      width: 0;
+  }
+  50%,
+  to {
+      width: 643px;
+  }
+}
+
 // 主题内部部分
 .screen-main{
   display: flex;
   justify-content: space-between;
-  height: calc(100% - 155px);
+  height: calc(100% - 91px);
   margin: 0.0625rem 0 0.5rem 0;
   padding: 0 0.325rem;
+  overflow: hidden;
   .screen-left,
   .screen-right{
     width: 6.375rem;
@@ -88,12 +150,13 @@
   }
   .big-module{
     height: 6.675rem;
+    margin:0.1625rem 0;
   }
   
   //排行榜-推荐 - list
   .lending-ranking{
     .module-content{
-      padding: 0.1625rem 0.25rem;
+      padding: 0 0.25rem;
       overflow: hidden;
     }
   }
@@ -102,7 +165,6 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.1rem 0.25rem;
-    // background-color: #09194B;
     .book-img{
       display: block;
       width: 0.825rem;
@@ -141,7 +203,8 @@
     margin: 0.375rem 0 .25rem 0;
     .accessToLib-item{
       width: 2.75rem;
-      p{
+      .panel-num{
+        display: block;
         height: 0.85rem;
         margin-top: 0.125rem;
         line-height: 0.85rem;
@@ -158,11 +221,16 @@
   // 视频
   .video-box{
     width: 100%;
-    height: 5.075rem;
+    height: 5.225rem;
   }
 
   // 阅读之星
   .read-star{
+    flex: 1;
+    .common-title{
+      background: url('~@/assets/images/title-big.png') no-repeat center center;
+      background-size: cover;
+    }
     .module-content{
       padding: .25rem;
       overflow: hidden;
@@ -231,17 +299,18 @@
       display: flex;
       justify-content: space-between;
       padding: 0.25rem 0.375rem 0.5rem 0.375rem;
-      .icon-tongzhi{
+      .notice-icon-gif{
+        display: block;
+        width: 3.375rem;
+        height: 2.875rem;
+        background: url('~@/assets/images/notice.gif') no-repeat left top;
+        background-size: contain;
         margin-right: 0.15rem;
-        font-size: 0.325rem;
-        color: #1AC9FF;
       }
-      p{
+      .seamless-warp{
         height: 3.1rem;
         overflow: hidden;
-        // overflow-y: auto;
       }
     }
   }
-
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e24caa5..ff320ee 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,9 @@ Vue.prototype.$axios = axios
 import echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
+import scroll from 'vue-seamless-scroll'
+Vue.use(scroll)
+
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/views/accessToLibrary.vue b/src/views/accessToLibrary.vue
index 4e8c8f4..e9af46a 100644
--- a/src/views/accessToLibrary.vue
+++ b/src/views/accessToLibrary.vue
@@ -2,22 +2,26 @@
   <div class="accessToLib-container">
     <div class="accessToLib-item">
       <span>总进馆人数</span>
-      <p>2,125,462</p>
+      <count-to :start-val="0" :end-val="2125462" :duration="3200" class="panel-num" />
     </div>
     <div class="accessToLib-item">
       <span>月进馆人数</span>
-      <p>10,062</p>
+      <count-to :start-val="0" :end-val="10062" :duration="3200" class="panel-num" />
     </div>
     <div class="accessToLib-item">
       <span>今日进馆人数</span>
-      <p>2,462</p>
+      <count-to :start-val="0" :end-val="2462" :duration="3200" class="panel-num" />
     </div>
   </div>
 </template>
 
 <script>
+import CountTo from 'vue-count-to'
 export default {
   name: 'AccessToLibrary',
+  components: {
+    CountTo
+  },
   data() {
     return {
       timer: null
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 4d989b0..af2f2f2 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,13 +1,32 @@
 <template>
   <div class="header-container">
-    <div class="header-title"><h2>东西湖区图书馆</h2></div>
+    <div class="header-title">
+      <div class="line1">
+        <span class="top-line1" />
+      </div>
+      <div class="ball-running-dots left-dots">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <h2>东西湖区图书馆</h2>
+      <div class="ball-running-dots right-dots">
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+      <div class="line2">
+        <span class="top-line2" />
+      </div>
+    </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 class="header-text header-date">{{ nowDate }}</div>
   </div>
-
 </template>
 
 <script>
@@ -33,4 +52,5 @@ export default {
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
+@import "~@/assets/styles/ball-running-animate.css";
 </style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 3ec0147..3db95b6 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -9,8 +9,8 @@
       <div class="screen-middle">
         <AccessToLibrary />
         <div class="video-box">
-          <video width="100%" height="100%" controls loop autoplay muted>
-            <source src="https://qiniu.aiyxlib.com/1658104739000.mp4" type="video/mp4">
+          <video width="100%" height="100%" controls loop autoplay muted :poster="poster">
+            <source :src="src" type="video/mp4">
           </video>
         </div>
         <ReadStar />
@@ -44,6 +44,8 @@ export default {
   },
   data() {
     return {
+      poster: 'https://image.chinamcloud.com/hbrb/upload/Image/default/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/0_640_400_1994.jpg',
+      src: 'https://hbrbvod.chinamcache.com/hbrb/vod/2021/04/12/d0b5a55806fd45d2b4232e2fc3c7f257/d0b5a55806fd45d2b4232e2fc3c7f257_h264_1000k_mp4.mp4'
     }
   },
   created() {
diff --git a/src/views/lengingRanking.vue b/src/views/lengingRanking.vue
index 3fb5147..00b279c 100644
--- a/src/views/lengingRanking.vue
+++ b/src/views/lengingRanking.vue
@@ -2,7 +2,7 @@
   <!-- 借阅排行榜 -->
   <div class="screen-item lending-ranking">
     <div class="common-title">借阅排行榜</div>
-    <div ref="lendList" class="big-module module-content">
+    <vue-seamless-scroll :data="rankingList" :class-option="defaultOption" class="big-module module-content">
       <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
         <img class="book-img" :src="item.img">
         <div class="book-info">
@@ -22,27 +22,35 @@
           <p>NO.{{ item.ranking }}</p>
         </div>
       </div>
-    </div>
+    </vue-seamless-scroll>
   </div>
 </template>
 
 <script>
 import data from './data'
-import scrollMixins from '@/common/scrollMixins'
+// import scrollMixins from '@/common/scrollMixins'
 
 export default {
   name: 'LengingRanking',
-  mixins: [scrollMixins],
+  // mixins: [scrollMixins],
   data() {
     return {
       rankingList: []
     }
   },
+  computed: {
+    defaultOption() {
+      return {
+        hoverStop: false, // 是否开启鼠标悬停stop
+        singleHeight: 102 // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+      }
+    }
+  },
   created() {
     this.rankingList = data.ranking
   },
   mounted() {
-    this.dataCompleteFun()
+    // this.dataCompleteFun()
   },
   destroyed() {
     // 清理定时器
diff --git a/src/views/newBookRecommend.vue b/src/views/newBookRecommend.vue
index 2567074..0d4acf4 100644
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend.vue
@@ -3,25 +3,29 @@
   <div class="screen-item lending-ranking">
     <div class="common-title">新书推荐</div>
     <div ref="newbook" class="big-module module-content">
-      <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>
+      <swiper ref="swiperThumbs" class="swiper gallery-thumbs directive" :options="swiperOptionThumbs">
+        <swiper-slide v-for="(item,index) in rankingList" :key="index" class="slide-1">
+          <div 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>
+        </swiper-slide>
+      </swiper>
     </div>
   </div>
 </template>
@@ -29,20 +33,40 @@
 <script>
 import data from './data'
 import scrollMixins from '@/common/scrollMixins'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
 
 export default {
   name: 'NewBookRecommend',
+  components: {
+    swiper,
+    swiperSlide
+  },
   mixins: [scrollMixins],
   data() {
     return {
-      rankingList: []
+      rankingList: [],
+      swiperOptionThumbs: {
+        direction: 'vertical',
+        autoplay: true,
+        loop: true,
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        touchRatio: 0.2,
+        autoScrollOffset: true
+      }
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.swiperThumbs.swiper
     }
   },
   created() {
     this.rankingList = data.ranking
   },
   mounted() {
-    this.dataCompleteFun()
+    // this.dataCompleteFun()
   },
   destroyed() {
     // 清理定时器
@@ -66,4 +90,19 @@ export default {
 
   <style lang="scss">
   @import "~@/assets/styles/index.scss";
+  .swiper-container{
+    overflow: initial;
+  }
+  .swiper {
+    &.gallery-thumbs {
+      height: 1.275rem;
+    }
+    &.gallery-thumbs .swiper-slide {
+      width: 100%;
+      height: 100%;
+    }
+    &.gallery-thumbs .swiper-slide-active {
+      background-color: #09194B;
+    }
+  }
   </style>
diff --git a/src/views/notice.vue b/src/views/notice.vue
index 394f108..e928700 100644
--- a/src/views/notice.vue
+++ b/src/views/notice.vue
@@ -3,8 +3,11 @@
   <div class="screen-item notice">
     <div class="common-title">通知公告</div>
     <div class="small-module module-content">
-      <i class="iconfont icon-tongzhi" />
-      <p ref="noticetxt">经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的</p>
+      <!-- <i class="iconfont icon-tongzhi" /> -->
+      <span class="notice-icon-gif" />
+      <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp">
+        <p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p>
+      </vue-seamless-scroll>
     </div>
   </div>
 </template>
@@ -16,15 +19,31 @@ export default {
   mixins: [scrollMixins],
   data() {
     return {
-      // interval: 3000,
-      // scrollTimer: null, // 滚动定时器
-      // pauseTimer: null // 暂停定时器
+      noticeData: [
+        {
+          'des': '1.经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的'
+        },
+        {
+          'des': '2.经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的'
+        }
+      ]
+    }
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 1, // 开始无缝滚动的数据量
+        hoverStop: false, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true // 开启数据实时监控刷新dom
+      }
     }
   },
   created() {
   },
   mounted() {
-    this.dataCompleteFun()
+    // this.dataCompleteFun()
   },
   destroyed() {
     // 清理定时器
diff --git a/src/views/totalLending.vue b/src/views/totalLending.vue
index f332a92..4608916 100644
--- a/src/views/totalLending.vue
+++ b/src/views/totalLending.vue
@@ -63,7 +63,6 @@ export default {
     },
     setNumberTransform() {
       var numberItems = document.getElementsByClassName('item')
-      // console.log(numberItems)
       const numberArr = this.chartNum.filter(item => !isNaN(item))
       for (var index = 0; index < numberItems.length; index++) {
         const elem = numberItems[index]