diff --git a/src/assets/images/bg.png b/src/assets/images/bg.png
new file mode 100644
index 0000000..655c21a
Binary files /dev/null and b/src/assets/images/bg.png differ
diff --git a/src/assets/images/bottom-bg.png b/src/assets/images/bottom-bg.png
new file mode 100644
index 0000000..af4972f
Binary files /dev/null and b/src/assets/images/bottom-bg.png differ
diff --git a/src/assets/images/header-bg.png b/src/assets/images/header-bg.png
index 84d92c1..57bc167 100644
Binary files a/src/assets/images/header-bg.png and b/src/assets/images/header-bg.png differ
diff --git a/src/assets/images/location.png b/src/assets/images/location.png
deleted file mode 100644
index a4debb6..0000000
Binary files a/src/assets/images/location.png and /dev/null differ
diff --git a/src/assets/images/map.png b/src/assets/images/map.png
deleted file mode 100644
index 61e2a58..0000000
Binary files a/src/assets/images/map.png and /dev/null differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 50eab48..6877614 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -1,17 +1,18 @@
 #screen-container {
   width: 100%;
   height: 100vh;
-  padding: 0 0.175rem;
+  // padding: 0 0.175rem;
   font-size: 0.25rem;
   line-height: 0.35rem;
   color: #fff;
-  background-color: #010326;
   overflow: hidden;
+  background: url('~@/assets/images/bg.png') no-repeat top center #02061A;
+  background-size: cover;
 }
 
 .loading{
   position: fixed;
-  top: 1.125rem;
+  top: 1rem;
   width: 100%;
   height:100%;
   display: flex;
@@ -25,53 +26,79 @@
 .header-container{
   position: relative;
   width: 100%;
-  height: 1.125rem;
+  height: 1rem;
   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;
-  }
+  // &::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{
     position: relative;
-    width: 15.85rem;
-    height: 1.075rem;
+    width: 15.67rem;
+    height: 1rem;
     margin: 0 auto;
-    background: url('~@/assets/images/header-bg.png') no-repeat top center;
+    background: url('~@/assets/images/header-bg.png') no-repeat top left;
     background-size: cover;
     h2{
-      font-size: 0.6rem;
-      font-family: "ZhenyanGB";
-      font-weight: normal;
-      line-height: 1.125rem;
+      font-size: 0.3rem;
+      font-weight: bold;
+      line-height: .6rem;
       text-align: center;
-      letter-spacing: 0.2rem;
-      background: linear-gradient(180deg, #FFFFFF 0%, #1AC9FF 100%);
+      /* 文字渐变色 */
+      background: -webkit-linear-gradient(180deg, #fff 30%, #77BAFF 100%);
+      background: linear-gradient(180deg, #fff 30%, #77BAFF 100%);
+      -webkit-background-clip: text;
       background-clip: text;
+      -webkit-text-fill-color: transparent;
       color: transparent;
+      /* 底部阴影 */
+      text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
     }
   }
   .header-text{
     position: absolute;
-    top: 0.65rem;
+    
   }
   .header-weather {
-    left: 0.6rem;
+    top: .15rem;
+    right: 0.08rem;
+    width: 2.3rem;
+    overflow: hidden;
   }
   .header-date {
-    right: 0.375rem;
+    top: .17rem;
+    left: .17rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .time{
+      font-size: .3rem;
+      font-weight: bold;
+      line-height: .3rem;
+      padding-right: .17rem;
+      border-right: 1px solid rgba(255,255,255,.5);
+    }
+    .time-other{
+      font-size: .14rem;
+      line-height: .22rem;
+      padding-left: .17rem;
+      span{
+        display: block;
+      }
+    }
   }
 }
 
@@ -117,6 +144,38 @@
   }
 }
 
+.bottom-bg{
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 15.82rem;
+  height: .48rem;
+  background: url('~@/assets/images/bottom-bg.png') no-repeat top left;
+  background-size: cover;
+}
+
+// pageOne
+.pageOne-database{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: .46rem;
+  .database-left,
+  .database-right{
+    width: 463px;
+    height: 419px;
+    background-color: #041231;
+  }
+  .database-middle{
+    flex: 1 ;
+  }
+  .database-title{
+
+  }
+}
+
+
+
 // 主题内部部分
 .screen-main{
   display: flex;
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 227c5c1..e6824bd 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,32 +1,38 @@
 <template>
   <div class="header-container">
+    <div class="header-text header-date">
+      <div class="time">{{ nowDate.split(' ')[1] }}</div>
+      <div class="time-other">
+        <span>{{ currentWeek }}</span>
+        <span>{{ nowDate.split(' ')[0] }}</span>
+      </div>
+    </div>
     <div class="header-title">
-      <div class="line1">
+      <h2>{{ headerTitle }}</h2>
+      <!-- <div class="line1">
         <span class="top-line1" />
-      </div>
-      <div class="ball-running-dots left-dots">
+      </div> -->
+      <!-- <div class="ball-running-dots left-dots">
         <div />
         <div />
         <div />
         <div />
       </div>
-      <h2>{{ headerTitle }}</h2>
       <div class="ball-running-dots right-dots">
         <div />
         <div />
         <div />
         <div />
-      </div>
-      <div class="line2">
+      </div> -->
+      <!-- <div class="line2">
         <span class="top-line2" />
-      </div>
+      </div> -->
     </div>
     <div class="header-text header-weather">
       <!-- 天气api: https://www.tianqi.com/plugin -->
-      <iframe id="weather" width="400" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=18" />
+      <!-- <iframe id="weather" width="400" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=34&color=%23FFFFFF&icon=1&py=wuhan&site=18" /> -->
+      <iframe width="250" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="https://i.tianqi.com?c=code&id=26&color=%23FFFFFF&icon=1&py=qiyang&site=12" />
     </div>
-    <div class="header-text header-date">{{ nowDate }}</div>
-
   </div>
 </template>
 
@@ -44,7 +50,8 @@ export default {
   },
   data() {
     return {
-      nowDate: ''
+      nowDate: '',
+      currentWeek: this.getCurrentWeek()
     }
   },
   watch: {
@@ -59,6 +66,11 @@ export default {
   mounted() {
   },
   methods: {
+    getCurrentWeek() {
+      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      const date = new Date()
+      return days[date.getDay()]
+    }
   }
 }
 </script>
diff --git a/src/views/index.vue b/src/views/index.vue
index 5ad9043..cba687a 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -4,23 +4,16 @@
       <dv-loading>Loading...</dv-loading>
     </div>
     <Header :header-title="headerTitle" />
-    <div style="position: fixed; right: 40px; top: 10px; font-size: .4rem;">{{ active +' / '+ pageData.length }}</div>
-    <!-- <swiper ref="mySwiperHome" class="swiper-home" :options="swiperOption">
-      <swiper-slide v-for="(item,index) in pageData" :key="index" class="slide">
-        <PageOne v-if="item.name==='page1'" />
-        <Map v-if="item.name==='page2'" ref="mapRefs" />
-        <div v-if="item.name==='page3'">第三屏</div>
-      </swiper-slide>
-      <div slot="pagination" class="swiper-pagination-home" />
-    </swiper> -->
+    <div style="position: fixed; right: .14rem; top: .14rem; font-size: .14rem; background: rgba(82,146,255,0.2);border: 1px solid #5292FF; padding: .03rem .06rem; line-height: .25rem;">{{ active +' / '+ pageData.length }}</div>
     <section ref="sectionRef">
-      <!-- <keep-alive> -->
-      <PageOne
-        v-if="active === 1"
-        ref="user"
-        :height="height"
-        :fullscreen="fullscreen"
-      />
+      <keep-alive>
+        <PageOne
+          v-if="active === 1"
+          ref="user"
+          :height="height"
+          :fullscreen="fullscreen"
+        />
+      </keep-alive>
       <Map
         v-if="active === 2"
         :height="height"
@@ -28,8 +21,8 @@
       />
       <div v-if="active === 3">第三屏</div>
       <div v-if="active === 4">第四屏</div>
-      <!-- </keep-alive> -->
     </section>
+    <div class="bottom-bg" />
   </div>
 </template>
 
@@ -46,11 +39,11 @@ export default {
   },
   data() {
     return {
-      active: 2,
+      active: 1,
       isLoading: false,
       fullscreen: false,
       height: '',
-      headerTitle: '祁阳图书馆',
+      headerTitle: '祁阳陶铸图书馆智慧大屏馆情数据总览',
       pageData: [
         {
           id: 1, title: 'page1', delayed: 10
@@ -96,6 +89,7 @@ export default {
   },
   methods: {
     autoPagination() {
+      clearInterval(this.timer2)
       this.timer2 = setInterval(() => {
         setTimeout(() => {
           if (this.active >= this.pageData.length) {
@@ -125,59 +119,6 @@ export default {
         this.height = `${(this.$refs.sectionRef.offsetHeight - 30) / 3}px`
       }, 100)
     }
-    // init() {
-    //   const _self = this
-    //   this.swiperOption = {
-    //     loop: false,
-    //     initialSlide: _self.pageIndex,
-    //     observer: true, // 修改swiper自己或子元素时，自动初始化swiper
-    //     observeParents: true, // 修改swiper的父元素时，自动初始化swiper
-    //     notNextTick: false,
-    //     speed: 1500,
-    //     autoplay: {
-    //       delay: 10000, // 自动切换的时间间隔，单位ms
-    //       stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
-    //       disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
-    //       // reverseDirection: true // 开启反向自动轮播
-    //       // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
-    //     },
-    //     direction: 'vertical',
-    //     // 显示分页
-    //     pagination: {
-    //       el: '.swiper-pagination-home',
-    //       type: 'fraction'
-    //     },
-    //     on: {
-    //       slideChangeTransitionEnd() {
-    //         console.log(' this.activeIndex-index', this.realIndex)
-    //         _self.pageIndex = this.realIndex
-    //         _self.addAnimationClass(this.realIndex)
-    //       }
-    //     }
-    //   }
-    // },
-    // addAnimationClass(realIndex) {
-    //   this.$nextTick(() => {
-    //     const swiper = this.$refs.mySwiperHome.swiper
-    //     if (swiper) {
-    //       const slides = swiper.slides
-    //       const nextSlide = slides.eq(2)
-    //       if (realIndex === 1) {
-    //         // nextSlide.find('.place-point').children().addClass('bouncePoint')
-    //         this.$nextTick(() => {
-    //           console.log(this.$refs.mapRefs.initChart)
-    //           this.$refs.mapRefs.isPage2 = true
-    //           this.$refs.mapRefs.count = 0
-    //           this.$refs.mapRefs.initChart()
-    //           this.$refs.mapRefs.updateChart()
-    //         })
-    //       } else {
-    //         this.$refs.mapRefs.isPage2 = false
-    //         nextSlide.find('.place-point').children().removeClass('bouncePoint')
-    //       }
-    //     }
-    //   })
-    // }
   }
 }
 </script>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index edd301b..4bd08dc 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -33,7 +33,7 @@
 <script>
 import mapJson from '@/assets/json/qy.json'
 import libJson from '@/assets/json/lib2.json'
-import libJsonData from '@/assets/json/lib2.json'
+import libJsonData from '@/assets/json/lib.json'
 import { debounce } from 'lodash' // js工具类,按需加载
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
@@ -76,7 +76,8 @@ export default {
       swiperKey: 1,
       currentIndex: 0,
       displayedImages: [],
-      swiperOption: null
+      swiperOption: null,
+      seriesData: []
     }
   },
   computed: {
@@ -94,7 +95,7 @@ export default {
   mounted() {
     this.count = 0
     this.initChart() // 初始化
-    // this.updateChart() // 更新数据，散点轮播显示
+    this.updateChart() // 更新数据，散点轮播显示
     this.mouseMove() // 鼠标移入移出效果
     window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
   },
@@ -104,32 +105,32 @@ export default {
       this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化
 
       var XAData = [
-        [{ name: '陶铸图书馆' }, { name: '龙山街道分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '黎家坪分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '大村甸分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '邵家岭自助馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '下马渡分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '复兴路自助馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '七里桥分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '少儿馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '茅竹镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '观音滩镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '凯俊盛科城分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '进宝塘镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '三口塘镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '肖家镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '潘市镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '大忠桥镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '浯溪街道分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '长虹街道分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '白水镇分馆', value: 100 }],
-        [{ name: '陶铸图书馆' }, { name: '白竹湖自助馆', value: 100 }]
+        [{ name: '陶铸图书馆' }, { name: '陶铸图书馆', value: '陶铸' }],
+        [{ name: '陶铸图书馆' }, { name: '龙山街道分馆', value: '龙山街道' }],
+        [{ name: '陶铸图书馆' }, { name: '黎家坪分馆', value: '黎家坪' }],
+        [{ name: '陶铸图书馆' }, { name: '大村甸分馆', value: '大村甸' }],
+        [{ name: '陶铸图书馆' }, { name: '邵家岭自助馆', value: '邵家岭' }],
+        [{ name: '陶铸图书馆' }, { name: '下马渡分馆', value: '下马渡' }],
+        [{ name: '陶铸图书馆' }, { name: '复兴路自助馆', value: '复兴路' }],
+        [{ name: '陶铸图书馆' }, { name: '七里桥分馆', value: '七里桥' }],
+        [{ name: '陶铸图书馆' }, { name: '少儿馆', value: '少儿馆' }],
+        [{ name: '陶铸图书馆' }, { name: '茅竹镇分馆', value: '祁阳县茅竹镇' }],
+        [{ name: '陶铸图书馆' }, { name: '观音滩镇分馆', value: '观音滩镇' }],
+        [{ name: '陶铸图书馆' }, { name: '凯俊盛科城分馆', value: '凯俊盛科城' }],
+        [{ name: '陶铸图书馆' }, { name: '进宝塘镇分馆', value: '进宝塘镇' }],
+        [{ name: '陶铸图书馆' }, { name: '三口塘镇分馆', value: '三口塘镇' }],
+        [{ name: '陶铸图书馆' }, { name: '肖家镇分馆', value: '肖家镇' }],
+        [{ name: '陶铸图书馆' }, { name: '潘市镇分馆', value: '潘市镇' }],
+        [{ name: '陶铸图书馆' }, { name: '大忠桥镇分馆', value: '大忠桥镇' }],
+        [{ name: '陶铸图书馆' }, { name: '浯溪街道分馆', value: '浯溪街道' }],
+        [{ name: '陶铸图书馆' }, { name: '长虹街道分馆', value: '长虹街道' }],
+        [{ name: '陶铸图书馆' }, { name: '白水镇分馆', value: '白水镇' }],
+        [{ name: '陶铸图书馆' }, { name: '白竹湖自助馆', value: '白竹湖' }]
       ]
       var convertData = function(data) {
         var res = []
         for (var i = 0; i < data.length; i++) {
           var dataItem = data[i]
-          console.log(dataItem)
           var fromCoord = libJson[dataItem[0].name]
           var toCoord = libJson[dataItem[1].name]
           if (fromCoord && toCoord) {
@@ -149,7 +150,45 @@ export default {
       ].forEach(function(item, i) {
         series.push(
           {
-            name: item[0] + ' Top3',
+            name: item[0],
+            type: 'effectScatter',
+            symbolSize: [8, 4],
+            coordinateSystem: 'geo',
+            zlevel: 2,
+            rippleEffect: {
+              brushType: 'stroke',
+              color: '#9ffcff',
+              period: 9,
+              scale: 3
+            },
+            label: {
+              normal: {
+                show: true,
+                position: 'right',
+                formatter: ''
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#fff'
+              },
+              emphasis: {
+                areaColor: '#2B91B7'
+              }
+            },
+            tooltip: {
+              show: true
+            },
+            data: item[1].map(function(dataItem) {
+              return {
+                name: dataItem[1].name,
+                value: libJson[dataItem[1].name].concat([dataItem[1].value]),
+                place: dataItem[1].value
+              }
+            })
+          },
+          {
+            name: item[0],
             type: 'lines',
             zlevel: 1,
             effect: {
@@ -166,10 +205,13 @@ export default {
                 curveness: 0.2
               }
             },
+            tooltip: {
+              show: false
+            },
             data: convertData(item[1])
           },
           {
-            name: item[0] + ' Top3',
+            name: item[0],
             type: 'lines',
             zlevel: 2,
             symbol: ['none', 'arrow'],
@@ -189,61 +231,45 @@ export default {
                 curveness: 0.2
               }
             },
-            data: convertData(item[1])
-          },
-          {
-            name: item[0] + ' Top3',
-            type: 'effectScatter',
-            symbolSize: [8, 4],
-            coordinateSystem: 'geo',
-            zlevel: 2,
-            rippleEffect: {
-              brushType: 'stroke',
-              color: '#9ffcff',
-              period: 9,
-              scale: 3
-            },
-            label: {
-              normal: {
-                show: true,
-                position: 'right',
-                formatter: ''
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#fff'
-              },
-              emphasis: {
-                areaColor: '#2B91B7'
-              }
+            tooltip: {
+              show: false
             },
-            data: item[1].map(function(dataItem) {
-              return {
-                name: dataItem[1].name,
-                value: libJson[dataItem[1].name].concat([dataItem[1].value])
-              }
-            })
+            data: convertData(item[1])
           }
         )
       })
 
+      this.seriesData = series
       const initOption = {
         // {a}<br/>
         // 提示框
         tooltip: {
+          show: true,
           trigger: 'item',
-          formatter: function(params, ticket, callback) {
+          enterable: 'click',
+          triggerOn: 'click',
+          hideDelay: 100,
+          position: function(point, params, dom, rect, size) {
+            console.log('point', point)
             console.log('params', params)
+            console.log('dom', dom)
+            console.log('rect', rect)
+            console.log('size', size)
+            return [point[0] - 100, point[1] - 100]
+          },
+          formatter: (params, ticket, callback) => {
             if (params.seriesType === 'effectScatter') {
-              return '线路：' + params.data.name + '' + params.data.value[2]
+              return `<div style="padding:5px; ">
+                        <div class=title>${params.data.name}</div>
+                        <div>地址：${params.data.place}</div>
+                      </div>`
             } else if (params.seriesType === 'lines') {
               return (
                 params.data.fromName +
-            '>' +
-            params.data.toName +
-            '<br />' +
-            params.data.value
+                '>' +
+                params.data.toName +
+                '<br />' +
+                params.data.value
               )
             } else {
               return params.name
@@ -279,59 +305,16 @@ export default {
           //         </div>`
           // }
         },
-        // visualMap: {
-        //   show: false,
-        //   type: 'continuous',
-        //   showLabel: true,
-        //   left: '10',
-        //   min: 0,
-        //   inRange: {
-        //     color: ['#0B3B79', '#01215c']
-        //   }
-        // },
         // 设置geo坐标系
         geo: [
-          // {
-          //   map: 'qiyang',
-          //   itemStyle: {
-          //     normal: {
-          //     // areaColor: '#01215c',
-          //     // borderColor: '#9ffcff',
-          //     // borderWidth: 3,
-          //     // shadowColor: 'rgba(0,54,255, 1)',
-          //     // shadowBlur: 20,
-          //     // shadowOffsetX: -10,
-          //     // shadowOffsetY: 10
-          //       areaColor: '#004b75', //* ***重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
-          //       borderColor: '#195175',
-          //       borderWidth: 2,
-          //       shadowColor: '#0f4c74',
-          //       shadowOffsetX: 0,
-          //       shadowOffsetY: 4,
-          //       shadowBlur: 10
-          //     },
-          //     emphasis: {
-          //       areaColor: '#2B91B7'
-          //     }
-          //   },
-          //   emphasis: {
-          //     areaColor: '#01215c'
-          //   },
-          //   label: {
-          //     emphasis: {
-          //       show: true,
-          //       color: '#fff'
-          //     }
-          //   }
-          // },
           {
             map: 'qiyang',
-            aspectScale: 0.85,
+            aspectScale: 1,
             zoom: 1.2,
-            top: '9%', //* **********重点**********距离顶部的位置，每层向下一个百分比
+            top: '8%', //* **********重点**********距离顶部的位置，每层向下一个百分比
             left: '11%',
             roam: false,
-            z: 4, //* ********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
+            z: 5, //* ********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
             itemStyle: {
               areaColor: 'rgba(17,57,118,1)', //* ***重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
               borderColor: '#9ffcff',
@@ -339,28 +322,68 @@ export default {
               shadowColor: '#0f4c74',
               shadowOffsetX: 0,
               shadowOffsetY: 4,
-              shadowBlur: 10
+              shadowBlur: 10,
+              emphasis: { // 地图悬停高亮样式
+                areaColor: 'rgba(17,57,118,1)'
+              }
+            },
+            emphasis: {
+              areaColor: '#01215c'
+            },
+            label: {
+              emphasis: {
+                show: true,
+                color: '#fff'
+              }
             },
             tooltip: {
               show: true
             }
           },
+
+          {
+            map: 'qiyang',
+            aspectScale: 1,
+            zoom: 1.2,
+            top: '9%', // 根据自己需要来设置
+            left: '11%',
+            roam: false,
+            z: 4, // 变小，也就是被压在下面
+            itemStyle: {
+              areaColor: 'rgba(7,107,151,1)', // 记得改颜色
+              borderColor: '#195175',
+              borderWidth: 2,
+              shadowColor: '#0f4c74',
+              shadowOffsetX: 0,
+              shadowOffsetY: 4,
+              shadowBlur: 10,
+              emphasis: { // 地图悬停高亮样式
+                areaColor: 'rgba(7,107,151,1)'
+              }
+            },
+            tooltip: {
+              show: false
+            }
+          },
           {
             map: 'qiyang',
-            aspectScale: 0.85,
+            aspectScale: 1,
             zoom: 1.2,
             top: '10%', // 根据自己需要来设置
             left: '11%',
             roam: false,
             z: 3, // 变小，也就是被压在下面
             itemStyle: {
-              areaColor: 'rgba(7,107,151,1)', // 记得改颜色
+              areaColor: 'rgba(16,69,110,1)', // 记得改颜色
               borderColor: '#195175',
               borderWidth: 2,
               shadowColor: '#0f4c74',
               shadowOffsetX: 0,
               shadowOffsetY: 4,
-              shadowBlur: 10
+              shadowBlur: 10,
+              emphasis: { // 地图悬停高亮样式
+                areaColor: 'rgba(16,69,110,1)'
+              }
             },
             tooltip: {
               show: false
@@ -368,20 +391,23 @@ export default {
           },
           {
             map: 'qiyang',
-            aspectScale: 0.85,
+            aspectScale: 1,
             zoom: 1.2,
             top: '11%', // 根据自己需要来设置
             left: '11%',
             roam: false,
             z: 2, // 变小，也就是被压在下面
             itemStyle: {
-              areaColor: 'rgba(16,69,110,1)', // 记得改颜色
+              areaColor: 'rgba(0,0,0,1)', // 记得改颜色
               borderColor: '#195175',
               borderWidth: 2,
               shadowColor: '#0f4c74',
               shadowOffsetX: 0,
               shadowOffsetY: 4,
-              shadowBlur: 10
+              shadowBlur: 10,
+              emphasis: { // 地图悬停高亮样式
+                areaColor: 'rgba(0,0,0,1)'
+              }
             },
             tooltip: {
               show: false
@@ -389,20 +415,23 @@ export default {
           },
           {
             map: 'qiyang',
-            aspectScale: 0.85,
+            aspectScale: 1,
             zoom: 1.2,
             top: '12%', // 根据自己需要来设置
             left: '11%',
             roam: false,
             z: 1, // 变小，也就是被压在下面
             itemStyle: {
-              areaColor: 'rgba(0,0,0,1)', // 记得改颜色
-              borderColor: '#195175',
+              areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
+              borderColor: 'rgba(0,0,0,.6)',
               borderWidth: 2,
-              shadowColor: '#0f4c74',
+              shadowColor: 'rgba(0,0,0,.6)',
               shadowOffsetX: 0,
               shadowOffsetY: 4,
-              shadowBlur: 10
+              shadowBlur: 10,
+              emphasis: { // 地图悬停高亮样式
+                areaColor: 'rgba(0,0,0,.6)'
+              }
             },
             tooltip: {
               show: false
@@ -415,17 +444,17 @@ export default {
     },
     updateChart() {
       // 地图数据
-      const mapData = mapJson.features.map((item) => {
-        return {
-          name: item.properties.name,
-          value: Math.round(Math.random() * 100),
-          centroid: item.properties.centroid,
-          adcode: item.properties.adcode
-        }
-      })
+      // const mapData = mapJson.features.map((item) => {
+      //   return {
+      //     name: item.properties.name,
+      //     value: Math.round(Math.random() * 100),
+      //     centroid: item.properties.centroid,
+      //     adcode: item.properties.adcode
+      //   }
+      // })
 
       // 散点数据
-      const scatterData = libJsonData
+      // const scatterData = libJsonData
       // const scatterData = mapData.map((item) => {
       //   return {
       //     name: item.name,
@@ -439,19 +468,23 @@ export default {
       //   }
       // })
 
-      const updateOption = {
-        series: [
-          {
-            data: mapData // type: 'map'
-          },
-          {
-            data: scatterData // type: 'effectScatter'
-          }
-        ]
-      }
+      // const updateOption = {
+      //   series: [
+      //     {
+      //       data: mapData // type: 'map'
+      //     },
+      //     {
+      //       data: mapData // type: 'map'
+      //     },
+      //     {
+      //       data: scatterData // type: 'effectScatter'
+      //     }
+      //   ]
+      // }
 
-      this.len = updateOption.series[1].data.length // 此处设置的是需要轮播的次数
-      this.myChart.setOption(updateOption)
+      console.log('this.series', this.seriesData)
+      this.len = this.seriesData[0].data.length // 此处设置的是需要轮播的次数
+      // this.myChart.setOption(updateOption)
       this.libIndex = this.count % this.len
       this.libCurrent = this.libInfoData[this.libIndex]
       this.initSwiper()
@@ -464,16 +497,16 @@ export default {
         clearInterval(this.timeTicket)
         this.myChart.dispatchAction({
           type: 'downplay',
-          seriesIndex: 1
+          seriesIndex: 0
         })
         this.myChart.dispatchAction({
           type: 'highlight',
-          seriesIndex: 1,
+          seriesIndex: 0,
           dataIndex: params.dataIndex
         })
         this.myChart.dispatchAction({
           type: 'showTip',
-          seriesIndex: 1,
+          seriesIndex: 0,
           dataIndex: params.dataIndex
         })
       })
@@ -482,28 +515,24 @@ export default {
     },
     autohover() {
       // clearInterval(this.timeTicket)
-
       // this.timeTicket = setInterval(() => {
-      console.log('555')
       // 1. 取消上次的高亮
       this.myChart.dispatchAction({
         type: 'downplay',
-        seriesIndex: 1
+        seriesIndex: 0
       })
       // 2. 显示当前高亮
       this.myChart.dispatchAction({
         type: 'highlight',
-        seriesIndex: 1,
+        seriesIndex: 0,
         dataIndex: this.count % this.len
       })
       // 3. 显示提示框中的信息
       this.myChart.dispatchAction({
         type: 'showTip',
-        seriesIndex: 1,
+        seriesIndex: 0,
         dataIndex: this.count % this.len
       })
-
-      console.log('this.count', this.count)
       // }, 2000)
     },
     resize() {
@@ -528,6 +557,7 @@ export default {
           this.count++
           this.libIndex = this.count % this.len
           this.libCurrent = this.libInfoData[this.libIndex]
+          console.log('this.libCurrent', this.libCurrent)
           this.updatePageWithData()
           this.autohover()
         }, 3000)
diff --git a/src/views/pageOne/index.vue b/src/views/pageOne/index.vue
index 698a987..44c5466 100644
--- a/src/views/pageOne/index.vue
+++ b/src/views/pageOne/index.vue
@@ -1,64 +1,75 @@
 <template>
-  <div>
-    <div id="tagcloud1" class="tagcloud">
-      <div>自动驾驶</div>
-      <a href="##">辅助驾驶</a>
-      <div>AEB</div>
-      <div href="##"><p>路测</p></div>
-      <div href="##">量子芯片</div>
-      <i>光速</i>
-      <div href="##">激光雷达</div>
-      <b>纳米科技</b>
-      <a href="##">电子信息</a>
-      <a href="##">超级计算机</a>
-      <div>自动驾驶</div>
-      <a href="##">辅助驾驶</a>
-      <div>AEB</div>
-      <div href="##"><p>路测</p></div>
-      <div href="##">量子芯片</div>
-      <i>光速</i>
-      <div href="##">激光雷达</div>
-      <b>纳米科技</b>
-      <a href="##">电子信息</a>
-      <a href="##">超级计算机</a>
+  <div style="padding: 0 .4rem;">
+    <div class="pageOne-database">
+      <div class="database-left">
+        <h3 class="database-title">到馆统计</h3>
+      </div>
+      <div class="database-middle">中间大数据</div>
+      <div class="database-right">
+        <h3 class="database-title">热门搜索</h3>
+        <div id="tagcloud1" class="tagcloud">
+          <div>自动驾驶</div>
+          <a href="##">辅助驾驶</a>
+          <div>AEB</div>
+          <div href="##"><p>路测</p></div>
+          <div href="##">量子芯片</div>
+          <i>光速</i>
+          <div href="##">激光雷达</div>
+          <b>纳米科技</b>
+          <a href="##">电子信息</a>
+          <a href="##">超级计算机</a>
+          <div>自动驾驶</div>
+          <a href="##">辅助驾驶</a>
+          <div>AEB</div>
+          <div href="##"><p>路测</p></div>
+          <div href="##">量子芯片</div>
+          <i>光速</i>
+          <div href="##">激光雷达</div>
+          <b>纳米科技</b>
+          <a href="##">电子信息</a>
+          <a href="##">超级计算机</a>
+        </div>
+      </div>
     </div>
-    <div class="scrollBox">
-      <p>第一行书</p>
-      <vue-seamless-scroll
-        ref="listData"
-        :data="list"
-        :class-option="defaultOption"
-        style="height: 100px; overflow: hidden"
-      >
-        <ul>
-          <li v-for="(item, index) in list" :key="index">
-            <div class="bord">
-              {{ index }}
-              <div class="book-img">
-                <img :src="item.cover" :onerror="defaultImg">
+    <div class="pageOne-book">
+      <div class="scrollBox">
+        <p>第一行书</p>
+        <vue-seamless-scroll
+          ref="listData"
+          :data="list"
+          :class-option="defaultOption"
+          style="height: 100px; overflow: hidden"
+        >
+          <ul>
+            <li v-for="(item, index) in list" :key="index">
+              <div class="bord">
+                {{ index }}
+                <div class="book-img">
+                  <img :src="item.cover" :onerror="defaultImg">
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
-      </vue-seamless-scroll>
-      <p>第二行书</p>
-      <vue-seamless-scroll
-        ref="listData2"
-        :data="list"
-        :class-option="default2Option"
-        style="height: 100px; overflow: hidden"
-      >
-        <ul>
-          <li v-for="(item, index) in list" :key="index">
-            <div class="bord">
-              {{ index }}
-              <div class="book-img">
-                <img :src="item.cover" :onerror="defaultImg">
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+        <p>第二行书</p>
+        <vue-seamless-scroll
+          ref="listData2"
+          :data="list"
+          :class-option="default2Option"
+          style="height: 100px; overflow: hidden"
+        >
+          <ul>
+            <li v-for="(item, index) in list" :key="index">
+              <div class="bord">
+                {{ index }}
+                <div class="book-img">
+                  <img :src="item.cover" :onerror="defaultImg">
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
-      </vue-seamless-scroll>
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </div>
     </div>
   </div>
 </template>