From ddb14b1bd7e12f1c4383d2b12f357aefb112cd79 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Thu, 13 Jun 2024 17:35:31 +0800
Subject: [PATCH] =?UTF-8?q?0613=E6=95=88=E6=9E=9C=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/location.png | Bin 0 -> 2624 bytes
 src/assets/json/lib.json       | 108 ++++
 src/assets/json/lib2.json      |  23 +
 src/assets/styles/index.scss   |  12 +
 src/main.js                    |  16 +
 src/views/header/index.vue     |   1 +
 src/views/index.vue            | 415 ++++++--------
 src/views/map/index.vue        | 977 +++++++++++++++++----------------
 src/views/map/index2.vue       | 795 ++++++++++++++++++++-------
 src/views/pageOne/index.vue    | 210 +++++++
 10 files changed, 1640 insertions(+), 917 deletions(-)
 create mode 100644 src/assets/images/location.png
 create mode 100644 src/assets/json/lib.json
 create mode 100644 src/assets/json/lib2.json
 create mode 100644 src/views/pageOne/index.vue

diff --git a/src/assets/images/location.png b/src/assets/images/location.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4debb65fa8470ef2505258f75b1c26d75f7d413
GIT binary patch
literal 2624
zcmV-G3cvM<P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px;`bk7VRCr$HTM4XOWflIuyS&#@APt+?HUbF(i9{(NP|8+>va7B5kRZOf(}ztc
z6j_W$Kv7xZ0@RjbO8aJ}K$I<P6$wkAP;3E#x?p5Ws0*M#A)!j?%)R&X-RZpPotgXI
z{CAf3O!$*Yliu@x=bZ1J|NQ@d&V9tkeDGuLKgNZC#ZvF~TQJq`#grhxR1#AaqSvzU
z0fbEfu*nua*v`S~J~HU$OBxdb?vU&cftjI?qX?V=;xH4Z2>1Yg6#}bzY&`sR@&l83
zX=J)ez|GSBL4XASz6fAS8p9G~H-fkw78ZHrt8HRcr+0;b<(sva+k<nZvhx!=Wo#LT
z*hpZ}b`}=(k^gBIyW<25mUM+hoC{#rk&LT^_G$s|M?VVh!-4=zhA_GOFL2PP7{rUA
zkDp|Fd22f)bd-RCuluw$+>^#e68BSB^}3B!SCG;A9(5E-nk`~3qMwoprEq1&<>k$=
zMtK>nPTe*yzgc_I#To(A8qkP0!w}1R94tGVe5)00w@TBBJ}x40;Ry5Z^c?oJg57om
z6pA`X7M@E|9tuBf$MJg1!IEZJTS@q8g1*N*hhIobLfZu7eMM_GY4mvx?@ViuiF`iL
zcOhI;FDv1)tjnuRFotE?A|U5$8G&ym7&0^Ka%~zz(#jTmoh2YC0nYIp-fN22G6DHO
z=R;Urujs?~u)~7g+TWf`99SXk<b-%jLQjpnjTs*Kv<XH_1muf43>MbaD=2Qkl=+id
zOLQj2Cdn+7wx1N@uTm@l6E94%Fr$wwHp6X=0AIHOI3o@&q3dBkk~7PtX-<gyARJg-
z+r)P=Hh<c20tS7}v4Fedzyt;|4hNel>*n)>-RP~r#*6{-Z=>l=9RYb?PXIV72Ktca
z@WgI9XNujBl!Zl}%aP6wW!O{%<b8b&z_05<|HQ1zhfIx(%l%gBeY=GHLkrWR|F=S{
z-_6B~CzD%R!Am-mST^?UCtn!}FD(H#0XQcHHt0DVNNa4)*Xa~41j~-sUzRpQSTExG
zti!unz^>VvDO{3qd2L4s7}|SZ9ol>Mj)A2<?BskcA#k3FV*+l-Iy~P*c339o>r?`(
zVsln|4rjGZz=|!}-?s7RI8b0?=K=CPQv(aW?iMh|RKBuC@5wlvn`TZS&_CkaqGe-R
zKlw%yhVc@}7j;2Yj2H$XurA~9a8ttuOPXyF^|@j#qauf}Ap~|LF%!aB0CtGuhQbN+
zTs~~7tKe(7fa=mDabCve()I}Obpuc?aFj=M(V6G+3KOH2OP_E8JP%-MOn!;yaAE!Y
zTcl6=0hR$cE%xjU-^M}bkpDK(moMoU5Rb=XmwFBpmz{A0G=y&m&+B2q(4cEUTx7Z~
zBe}e<$bn<3bA;<Wmlqr9E9wAPSRael5tmUK0-h0YNX(#Fp3BuH1{Higq1f4hz?U)(
z?;mY$!PhAQeiL)z$&ACJP4q?e3AlJYHuu?#!$aF$0{^TD;S%=pCUS#`K?PqQYTI^K
zoMdBiAGvw7xp`?a0=yq{Vspmfb|(7j=MHV%Z+H$Hi#2HuLiP84&!JKDBpgmg-In4G
z<^!#Va6pxW5C>;^80C_t!_;0QCn9ZyK<`M{Wmt2w6V|X?C8@m`TRN|JF86Kf!PY$R
zcDyj^*qCBcR$D3U69#y>N*wX-&@PZzq%|fWU(!n;s)k!OPU|PDYjo6b_7$ziJu5Ps
zJcm0rBOu|*y}@(1SF?H1^Oe%6VGuhE2`_st_iHx?JOyB8mDMIk%($|GuR8^t9(yC#
zWNdz~326@iI60OB?#eh!ss%Q{6iT{S#Lr_7e&;znqCElvT@T?~!yp1~$~v5H@<uAX
zf*-_XEgO6ElYdW|pZ66x9uZI-Y0e!Dw?bl(XD8nZjh8^dSD%2}V>THlvuIAv*IEKI
z;!Y9xrGRxPVU05ZP7vZ)2(txzB`z1qWK*0v>(3Ab&d4~tqrC`_K8*l1*UDlEd(5Ah
z{1)q#t(0~S1H5YzG4(Q*ja~Z5jV5!KZPurHT+|jpZ0s{qKhZb>BIOOtrpN>3C@AVc
zT8OH}y(Z28*rE`JXM6a9p*#}Se`jukWdZ`7JJh1ucBvqq_iP?)YFs4uxa4dI5Zx=9
z<&R~1+Bk2PK?^OeKOg8hsN7fFI*0|H%^OFuF;xWQq+J={FY&$E5{~V68NYZK@sam6
zSHgiLrboYMlA=P0u%5&Vp2M2DqY3EBl4ga(V=>uxWaBeg@|}(lP+1011Vr86;gRzk
z&NDHv+cJ4yQDHV4({rQeuzG_{(w`~<$^<lCHDLjB`yJlXZ3jogU+HU3SXZrv(DcHV
znt-Ha2;teHgCpjXrSTwPndJ8PcnXZ&Rso}Jx+MZ~zB~fC8fS&?doF)G9t7k|x*Wuh
z;<^Q7vkvpk>}iRBN)$xp@u*BbJpLPmIC7we)j~uw<(+uGqNwS%g*5;s#qe(P9G+={
z-!cK^BB_HXh8m<h#S}f@IXu-wai?VRzM>1+DOEh;y}-xO1HF9FL`Ta6l%pWfMG$Ih
z?qj$Vl0qNE#h%UUOq`Eo+9IH`D?9{Zc3nQ0?YVr!)QDE(@+BP)qP9{jJnXqVAq`&J
z1gt3OD4U4-h4Jxw*T!+(_^>fja;vmsDZrycH^$G$l?KAm11_H&QvxDoxj>gt_*tFe
zdp(D#njofz=Y2(IjxWdMMSMGJGhPEQf@?bhhPC8<-3;LD8l!+mvks3pvcym*=j#yy
z$JL47;yL_=Aw-Q>#|Wt8gFk}!Y+XKh+H+Y`2WZ963jVr=?~H{%c`iTKDrQFsh`s{f
zA;3os#t3UXm+@~3Qrnv^=}8br)=%7IW5U7~+vyQjM+qpuCFuYJ+qyC_gN=@+Nz62K
ziH3!2O!vq?q-HZVq2mNZ*ei=VB((5Mf?=y+<4lkImx<ANX?FzW4>Gp3$SM=95Qp~n
z@L3a_(PX+pK%{W+BkgNBc&T1Ff#(=vK{Mkc5@liOP<yPQ;1c@SZ{7q}>;CPK&@}=g
zqbgnDq_@3M!1-B+HJ{rIJCgHtCV?dYcCL5Mx3Rlvm)L}ut`bnm2@?<?u@6Y%vW#8(
zX=@?Sr4p`8G~UKUk8Dh`CZ3KU({%!d^%i`sRb5%U@~lwYf^w6jrx#ZP$RsSAR3Brc
z;bY7Qh>XgW^a~OVA4N!rx=tX`(7lncIP3C)G)|?F9a93zOCr!!(AGEJbP!j2HZN@|
z*M`8D6Hp-`@k8qxKZu2%%_tFeb&LxEkw=5RP9m_FwV&NZe>n7-fQ9oMKG;>yE8ycs
zK&1Z`Y40GwVgV<Wa{%z5ZDZlt<ZEN$d`0J2sTx^N-dDNp-L1bc8O_6Sjezl|z6+P3
i{|Bei*zmEBfd2uDTcK{1^3c5i0000<MNUMnLSTXyo8LVE

literal 0
HcmV?d00001

diff --git a/src/assets/json/lib.json b/src/assets/json/lib.json
new file mode 100644
index 0000000..389e9df
--- /dev/null
+++ b/src/assets/json/lib.json
@@ -0,0 +1,108 @@
+[
+  {
+    "name": "陶铸图书馆",
+    "value": [111.848657, 26.588519],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "龙山街道分馆",
+    "value": [111.86478,26.599231],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+    "name": "黎家坪分馆",
+    "value": [111.823424,26.693962],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+    "name": "大村甸分馆",
+    "value": [111.77655,26.663866],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "邵家岭自助馆",
+    "value": [111.856979,26.59469],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "下马渡分馆",
+    "value": [111.895584,26.611702],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "复兴路自助馆",
+    "value": [111.843102,26.57896],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "七里桥分馆",
+    "value": [111.902703,26.571593],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "少儿馆",
+    "value": [111.842537,26.58196],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "茅竹镇分馆",
+    "value": [111.796508,26.510589],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "观音滩镇分馆",
+    "value": [111.897118,26.48444],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "凯俊盛科城分馆",
+    "value": [111.851548,26.550191],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "进宝塘镇分馆",
+    "value": [112.085297,26.436849],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "三口塘镇分馆",
+    "value": [111.819018,26.412155],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "肖家镇分馆",
+    "value": [112.009764,26.355137],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "潘市镇分馆",
+    "value": [112.051186,26.489878],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "大忠桥镇分馆",
+    "value": [111.873254,26.369761],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "浯溪街道分馆",
+    "value": [111.855175,26.574414],
+    "place": "祁阳县茅竹镇"
+  },
+  {
+   "name": "长虹街道分馆",
+    "value": [111.850902,26.586461],
+    "place": "长虹街道"
+  },
+  {
+   "name": "白水镇分馆",
+    "value": [111.989802,26.421353],
+    "place": "白水镇"
+  },
+  {
+   "name": "白竹湖自助馆",
+    "value": [111.862001,26.580311],
+    "place": "白竹湖"
+  }
+
+]
\ No newline at end of file
diff --git a/src/assets/json/lib2.json b/src/assets/json/lib2.json
new file mode 100644
index 0000000..64572a3
--- /dev/null
+++ b/src/assets/json/lib2.json
@@ -0,0 +1,23 @@
+{
+  "陶铸图书馆":[111.848657, 26.588519],
+  "龙山街道分馆":[111.86478,26.599231],
+  "黎家坪分馆": [111.823424,26.693962],
+  "大村甸分馆": [111.77655,26.663866],
+  "邵家岭自助馆":[111.856979,26.59469],
+  "下马渡分馆":[111.895584,26.611702],
+  "复兴路自助馆":[111.843102,26.57896],
+  "七里桥分馆": [111.902703,26.571593],
+  "少儿馆":[111.842537,26.58196],
+  "茅竹镇分馆":[111.796508,26.510589],
+  "观音滩镇分馆":[111.897118,26.48444],
+  "凯俊盛科城分馆":[111.851548,26.550191],
+  "进宝塘镇分馆":[112.085297,26.436849],
+  "三口塘镇分馆":[111.819018,26.412155],
+  "肖家镇分馆":[112.009764,26.355137],
+  "潘市镇分馆": [112.051186,26.489878],
+  "大忠桥镇分馆":[111.873254,26.369761],
+  "浯溪街道分馆":[111.855175,26.574414],
+  "长虹街道分馆":[111.850902,26.586461],
+  "白水镇分馆": [111.989802,26.421353],
+  "白竹湖自助馆":[111.862001,26.580311]
+}
\ No newline at end of file
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index da42087..50eab48 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -9,6 +9,18 @@
   overflow: hidden;
 }
 
+.loading{
+  position: fixed;
+  top: 1.125rem;
+  width: 100%;
+  height:100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.9);
+  z-index: 99999999;
+}
+
 // 头部主题标题
 .header-container{
   position: relative;
diff --git a/src/main.js b/src/main.js
index 142b26b..a9e1987 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,22 @@ Vue.prototype.$echarts = echarts
 import scroll from 'vue-seamless-scroll'
 Vue.use(scroll)
 
+import {
+  loading,
+  borderBox8,
+  decoration3,
+  decoration5,
+  decoration10,
+  activeRingChart
+} from '@jiaminghi/data-view'
+
+Vue.use(loading)
+Vue.use(borderBox8)
+Vue.use(decoration3)
+Vue.use(decoration5)
+Vue.use(decoration10)
+Vue.use(activeRingChart)
+
 Vue.config.productionTip = false
 Vue.component(Message.name, Message)
 new Vue({
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 7fdc1fd..227c5c1 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -26,6 +26,7 @@
       <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" />
     </div>
     <div class="header-text header-date">{{ nowDate }}</div>
+
   </div>
 </template>
 
diff --git a/src/views/index.vue b/src/views/index.vue
index 200f399..5ad9043 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,308 +1,205 @@
 <template>
   <div id="screen-container">
+    <div v-if="isLoading" class="loading">
+      <dv-loading>Loading...</dv-loading>
+    </div>
     <Header :header-title="headerTitle" />
-    <swiper ref="mySwiperHome" class="swiper" :options="swiperOption">
-      <!-- <swiper-slide v-for="(item,index) in displayedImages" :key="index" /> -->
-      <swiper-slide class="slide">
-        <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 class="container">
-          <p>第一行书</p>
-          <!-- <div id="e" class="roll-wrap roll_row">
-            <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
-              <li v-for="(item,index) in list" :key="index">{{ index }}
-                <div class="book-img">
-                  <img :src="item.cover" :onerror="defaultImg">
-                </div>
-              </li>
-            </ul>
-          </div> -->
-          <div class="swiper-container seamless01-swiper">
-            <div class="swiper-wrapper">
-              <div v-for="(item,index) in list" :key="index" class="swiper-slide">{{ index }}
-                <div class="book-img">
-                  <img :src="item.cover" :onerror="defaultImg">
-                </div>
-              </div>
-            </div>
-          </div>
-          <p>第二行书</p>
-          <!-- <div id="f" class="roll-wrap roll_row">
-            <ul class="roll__list" :style="{'position': 'absolute', 'right': 0,'top': 0, 'width': list.length*60 + 'px'} ">
-              <li v-for="(item,index) in list" :key="index">
-                {{ index }}
-                <div class="book-img">
-                  <img :src="item.cover" :onerror="defaultImg">
-                </div>
-              </li>
-            </ul>
-          </div> -->
-          <div class="swiper-container seamless02-swiper">
-            <div class="swiper-wrapper">
-              <div v-for="(item,index) in list" :key="index" class="swiper-slide">{{ index }}
-                <div class="book-img">
-                  <img :src="item.cover" :onerror="defaultImg">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </swiper-slide>
-      <swiper-slide class="slide">
-        <Map ref="mapRefs" />
-      </swiper-slide>
-      <swiper-slide class="slide">
-        <div>第三屏</div>
+    <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>
+    </swiper> -->
+    <section ref="sectionRef">
+      <!-- <keep-alive> -->
+      <PageOne
+        v-if="active === 1"
+        ref="user"
+        :height="height"
+        :fullscreen="fullscreen"
+      />
+      <Map
+        v-if="active === 2"
+        :height="height"
+        :fullscreen="fullscreen"
+      />
+      <div v-if="active === 3">第三屏</div>
+      <div v-if="active === 4">第四屏</div>
+      <!-- </keep-alive> -->
+    </section>
   </div>
 </template>
 
 <script>
-
 import Header from '@/views/header/index.vue'
+import PageOne from '@/views/pageOne/index.vue'
 import Map from '@/views/map/index.vue'
-import data from '../views/newBookRecommend/data.json'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
-import 'swiper/dist/css/swiper.css'
-
 export default {
   name: 'Home',
   components: {
     Header,
-    Map,
-    swiper,
-    swiperSlide
+    PageOne,
+    Map
   },
   data() {
-    const _self = this
     return {
+      active: 2,
+      isLoading: false,
+      fullscreen: false,
+      height: '',
       headerTitle: '祁阳图书馆',
-      list: [],
-      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
-      swiperOption: {
-        loop: true,
-        initialSlide: 0,
-        notNextTick: false,
-        observer: true, // 开启动态检查器
-        speed: 2000,
-        autoplay: {
-          delay: 10000, // 自动切换的时间间隔，单位ms
-          stopOnLastSlide: true, // 当切换到最后一个slide时停止自动切换
-          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
-          // reverseDirection: true // 开启反向自动轮播
-          // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
+      pageData: [
+        {
+          id: 1, title: 'page1', delayed: 10
         },
-        direction: 'vertical',
-        // 显示分页
-        pagination: {
-          el: '.swiper-pagination-home',
-          type: 'fraction'
+        {
+          id: 2, title: 'page2', delayed: 0
         },
-        on: {
-          slideChangeTransitionEnd() {
-            console.log(' this.activeIndex-index', this.activeIndex)
-            $('#e').rollNoInterval().left()
-            $('#f').rollNoInterval().right()
-            _self.addAnimationClass(this.activeIndex)
-          }
+        {
+          id: 3, title: 'page3', delayed: 10
+        },
+        {
+          id: 4, title: 'page4', delayed: 0
         }
-      },
-      mySwipera1: null,
-      mySwipera2: null
+      ],
+      swiperOption: null,
+      pageIndex: 0,
+      timer: null,
+      timer2: null
     }
   },
   computed: {
-    swiper() {
-      return this.$refs.mySwiperHome.swiper
-    }
   },
   created() {
-    this.list = data
-    const METAWA = require('../assets/js/META.common.min.js')
-    const meta = new METAWA('665e845538d68')
-    meta.callback = (r) => {
-      console.log(r, '回调')
-    }
+    // const METAWA = require('../assets/js/META.common.min.js')
+    // const meta = new METAWA('665e845538d68')
+    // meta.callback = (r) => {
+    //   console.log(r, '回调')
+    // }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer2)
+    window.removeEventListener('resize', this.setElementHeight)
   },
   mounted() {
-    tagCloud({
-      selector: '#tagcloud1', // 元素选择器，id 或 class
-      fontsize: 26, // 基本字体大小, 默认16，单位px
-      radius: 260, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
-      mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
-      ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
-      direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
-      keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
-      multicolour: true // 彩色字体，颜色随机，取值：true(默认),false
+    this.showLoading()
+    this.setElementHeight()
+    window.addEventListener('resize', this.setElementHeight)
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer2)
+      window.removeEventListener('resize', this.setElementHeight)
     })
-    // $('#e').rollNoInterval().left()
-    // $('#f').rollNoInterval().right()
-    // this.mySwipera1 = new Swiper('.seamless01-swiper', {
-    //   observer: true, // 开启动态检查器，监测swiper和slide
-    //   observeParents: true, // 监测Swiper 的祖/父元素
-    //   speed: 4000, // 切换速度
-    //   loop: true, // 循环
-    //   slidesPerView: 4, // 显示数量
-    //   spaceBetween: 10, // 间隔
-    //   freeMode: true, // 自动贴合
-    //   autoplay: { // 自动播放
-    //     delay: 0, // 自动切换的时间间隔
-    //     stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换
-    //     disableOnInteraction: false// 用户操作后是否停止
-    //   },
-    //   breakpoints: {
-    //     750: { // 当屏幕宽度大于等于320
-    // 	  slidesPerView: 3
-    //     }
-    //   }
-    // })
-    // this.mySwipera2 = new Swiper('.seamless02-swiper', {
-    //   observer: true, // 开启动态检查器，监测swiper和slide
-    //   observeParents: true, // 监测Swiper 的祖/父元素
-    //   speed: 4000, // 切换速度
-    //   loop: true, // 循环
-    //   slidesPerView: 4, // 显示数量
-    //   spaceBetween: 10, // 间隔
-    //   freeMode: true, // 自动贴合
-    //   autoplay: { // 自动播放
-    //     delay: 0, // 自动切换的时间间隔
-    //     stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换
-    //     disableOnInteraction: false, // 用户操作后是否停止
-    //     reverseDirection: true// 方向切换
-    //   },
-    //   breakpoints: {
-    //     750: { // 当屏幕宽度大于等于320
-    // 	    slidesPerView: 3
-    //     }
-    //   }
-    // })
+    // this.autoPagination()
   },
   methods: {
-    addAnimationClass(activeIndex) {
-      this.$nextTick(() => {
-        const swiper = this.$refs.mySwiperHome.swiper
-        if (swiper) {
-          const slides = swiper.slides
-          const nextSlide = slides.eq(2)
-          if (activeIndex === 2) {
-            nextSlide.find('.place-point').children().addClass('bouncePoint')
-            this.$refs.mapRefs.isPage2 = true
-            this.$refs.mapRefs.libIndex = 0
-            this.$refs.mapRefs.libCurrent = this.$refs.mapRefs.libInfoData[this.$refs.mapRefs.libIndex]
-            this.$refs.mapRefs.init()
-            this.$refs.mapRefs.updatePageWithData()
+    autoPagination() {
+      this.timer2 = setInterval(() => {
+        setTimeout(() => {
+          if (this.active >= this.pageData.length) {
+            this.active = 1
           } else {
-            this.$refs.mapRefs.isPage2 = false
-            nextSlide.find('.place-point').children().removeClass('bouncePoint')
+            this.active++
           }
-        }
+          // this.showLoading()
+        }, 0)
+      }, 6000)
+      this.$once('hook:beforeDestroy', () => {
+        clearInterval(this.timer2)
       })
+    },
+    showLoading() {
+      this.isLoading = true
+      this.timer = setTimeout(() => {
+        this.isLoading = false
+        window.clearTimeout(this.timer)
+      }, 1500)
+    },
+    // 设置DOM高度
+    setElementHeight() {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.showLoading()
+        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>
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
-::v-deep .swiper-wrapper{
-  transition-timing-function: ease-in-out !important;
-}
-.tagcloud {
-  width: 5.5rem;
-  height: 5rem;
-  margin: .2rem;
-  margin-left: .3rem;
-  overflow: hidden;
- }
-a {
-  text-decoration: none;
-  cursor: pointer;
-}
-// .tagcloud>* {
-//   display: inline;
-//   white-space: nowrap;
-// }
-.container{
-  margin-left: .3rem;
-  width: 5.5rem;
-  p{
-    margin-top: .2rem;
+.swiper-home{
+  .swiper-wrapper{
+    transition-timing-function: ease-in-out !important;
   }
-}
-
-/* seamlesswrap */
-.seamlesswrap{width: 100%;box-sizing: border-box;padding: 200px;}
-.seamlesswrap img{width: 100%;display: block;}
-.seamlesswrap .swiper-container-free-mode>.swiper-wrapper{
-    -webkit-transition-timing-function:linear!important;
-  -o-transition-timing-function:linear!important;
-  transition-timing-function:linear!important; }
-.seamlesswrap .swiper-container{margin: 10px 0;}
-
-.roll-wrap{
+  .swiper-slide{
     position: relative;
     width: 100%;
-    height: 100px;
+    // height: calc(100vh - 1.125rem) !important;
     overflow: hidden;
-}
-.roll_row .roll__list{
-  display: flex;
-  flex-wrap: nowrap;
-  border: 1px solid red;
-}
-.roll_row .roll__list li{
-    display: block;
-    margin-right: 20px;
-    width: .5rem;
-    font-weight: bold;
-    font-size: .3rem;
-    text-align: center;
-}
-.book-img{
-  width: .5rem;
-  height: .5rem;
-  background: url('~@/assets/images/default-img.png') no-repeat center center;
-  background-size: contain;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  img{
-    display: block;
-    width: 100%;
+  }
+  .swiper-pagination-home{
+    position: fixed;
+    top: .2rem;
+    left: calc( 100% - 2rem);
+    font-size: .4rem;
   }
 }
-.swiper-slide{
-  width: 100%;
-  height: calc(100vh - 1.125rem);
-  overflow: hidden;
-}
-.swiper-pagination-home{
-  position: fixed;
-  top: .2rem;
-  left: calc( 100% - 2rem);
-  font-size: .4rem;
-}
+
 </style>
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index 92ca622..edd301b 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -1,19 +1,7 @@
 <template>
-  <div style="position: relative;">
-    <!-- <Header :header-title="headerTitle" /> -->
-    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height:calc(100vh - 1.125rem); border: 1px solid red;  overflow: hidden;">
-      <div style="width:6.21rem; height:8.61rem; position: relative;  overflow: hidden;">
-        <!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> -->
-        <img class="map_img" src="@/assets/images/map.png" alt="">
-        <div class="place-point">
-          <div v-for="(item,index) in libInfoData" v-show="libIndex===index" :key="index" :class="['point'+ parseInt(index+1)]" style="position: absolute">
-            <p style="font-size: .14rem; ">{{ item.name }}</p>
-            <span class="iconfont icon-weizhi" />
-            <div class="pulse" />
-          </div>
-        </div>
-      </div>
-    </div>
+  <div style="display: flex; justify-content: space-around; height: calc(100vh - 1.125rem); padding: 20px;">
+    <!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> -->
+
     <div class="lib-info">
       <div class="lib-title">{{ libCurrent && libCurrent.name }}</div>
       图片切换{{ currentIndex+1 }}
@@ -33,6 +21,7 @@
         <p>关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知</p>
       </div>
     </div>
+    <div ref="chart" class="content" style="width: 800px;" />
     <div class="read-num">
       <div class="lib-title">{{ libCurrent && libCurrent.name }}</div>
       <h6>读者数量</h6>
@@ -42,23 +31,24 @@
 </template>
 
 <script>
+import mapJson from '@/assets/json/qy.json'
+import libJson from '@/assets/json/lib2.json'
+import libJsonData from '@/assets/json/lib2.json'
+import { debounce } from 'lodash' // js工具类,按需加载
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
 export default {
   components: {
-    swiper,
-    swiperSlide
+    swiper, swiperSlide
   },
   data() {
     return {
-      isPage2: false,
-      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       timeTicket: null,
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
+      count: 0,
+      len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标
       headerTitle: '祁阳图书馆',
-      libInfoData: [
-        { 'id': '1', 'name': '龙山街道分管' }, { 'id': '2', 'name': '黎家坪分馆' }, { 'id': '3', 'name': '大村甸分馆' }, { 'id': '4', 'name': '陶铸图书馆' }, { 'id': '5', 'name': '邵家岭自助馆' }, { 'id': '6', 'name': '下马渡分馆' }, { 'id': '7', 'name': '复兴路自助馆' }, { 'id': '8', 'name': '七里桥分馆' }, { 'id': '9', 'name': '少儿馆' }, { 'id': '10', 'name': '茅竹镇分馆' }, { 'id': '11', 'name': '观音滩镇分馆' },
-        { 'id': '12', 'name': '凯俊盛科城分馆' }, { 'id': '13', 'name': '进宝塘镇分馆' }, { 'id': '14', 'name': '三口塘镇分馆' }, { 'id': '15', 'name': '肖家镇分馆' }, { 'id': '16', 'name': '潘市镇分馆' }, { 'id': '17', 'name': '大忠桥镇分馆' }, { 'id': '18', 'name': '浯溪街道分馆' }, { 'id': '19', 'name': '长虹街道分馆' }, { 'id': '20', 'name': '白水镇分馆' }, { 'id': '21', 'name': '白竹湖自助馆' }
-      ],
+      libInfoData: [],
       libImg: [
         {
           'id': 1,
@@ -96,18 +86,431 @@ export default {
   },
   beforeDestroy() {
     clearTimeout(this.timeTicket)
+    window.removeEventListener('resize', this.resize)
+  },
+  created() {
+    this.libInfoData = libJsonData
   },
-
   mounted() {
-    // this.libCurrent = this.libInfoData[this.libIndex]
+    this.count = 0
+    this.initChart() // 初始化
+    // this.updateChart() // 更新数据，散点轮播显示
+    this.mouseMove() // 鼠标移入移出效果
+    window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
   },
   methods: {
+    initChart() {
+      this.$echarts.registerMap('qiyang', mapJson) // 注册map
+      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 }]
+      ]
+      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) {
+            res.push({
+              fromName: dataItem[0].name,
+              toName: dataItem[1].name,
+              coords: [fromCoord, toCoord],
+              value: dataItem[1].value
+            })
+          }
+        }
+        return res
+      }
+      var series = [];
+      [
+        ['陶铸图书馆', XAData]
+      ].forEach(function(item, i) {
+        series.push(
+          {
+            name: item[0] + ' Top3',
+            type: 'lines',
+            zlevel: 1,
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0.7,
+              color: 'red', // arrow箭头的颜色
+              symbolSize: 3
+            },
+            lineStyle: {
+              normal: {
+                color: '#fff',
+                width: 0,
+                curveness: 0.2
+              }
+            },
+            data: convertData(item[1])
+          },
+          {
+            name: item[0] + ' Top3',
+            type: 'lines',
+            zlevel: 2,
+            symbol: ['none', 'arrow'],
+            symbolSize: 10, // 固定箭头大小
+            effect: {
+              show: true,
+              period: 6,
+              trailLength: 0,
+              symbol: 'arrow',
+              symbolSize: 10 // 动态箭头大小
+            },
+            lineStyle: {
+              normal: {
+                color: '#fff',
+                width: 1,
+                opacity: 0.6,
+                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'
+              }
+            },
+            data: item[1].map(function(dataItem) {
+              return {
+                name: dataItem[1].name,
+                value: libJson[dataItem[1].name].concat([dataItem[1].value])
+              }
+            })
+          }
+        )
+      })
+
+      const initOption = {
+        // {a}<br/>
+        // 提示框
+        tooltip: {
+          trigger: 'item',
+          formatter: function(params, ticket, callback) {
+            console.log('params', params)
+            if (params.seriesType === 'effectScatter') {
+              return '线路：' + params.data.name + '' + params.data.value[2]
+            } else if (params.seriesType === 'lines') {
+              return (
+                params.data.fromName +
+            '>' +
+            params.data.toName +
+            '<br />' +
+            params.data.value
+              )
+            } else {
+              return params.name
+            }
+          }
+          // // formatter: '{b}<br/>{c}',
+          // // position: 'top'
+          // show: true,
+          // // 鼠标是否可以进入悬浮框
+          // enterable: 'mousemove|click',
+          // // 触发方式 mousemove, click, none, mousemove|click
+          // triggerOn: 'none',
+          // // 浮层隐藏的延迟
+          // hideDelay: 100,
+          // // 背景色
+          // backgroundColor: 'rgba(0,0,0,0)',
+          // // 提示框浮层的边框颜色。
+          // borderColor: 'rgba(0,0,0,0)',
+          // // 位置
+          // // position: 'top',
+          // 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: function(params) {
+          //   return `<div style="padding:20px; background:rgba(0,0,0,.2); border-radius:4px;">
+          //           <div class=title>${params.name}</div>
+          //           <div>地址：${params.data.place}</div>
+          //         </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,
+            zoom: 1.2,
+            top: '9%', //* **********重点**********距离顶部的位置，每层向下一个百分比
+            left: '11%',
+            roam: false,
+            z: 4, //* ********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
+            itemStyle: {
+              areaColor: 'rgba(17,57,118,1)', //* ***重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
+              borderColor: '#9ffcff',
+              borderWidth: 1,
+              shadowColor: '#0f4c74',
+              shadowOffsetX: 0,
+              shadowOffsetY: 4,
+              shadowBlur: 10
+            },
+            tooltip: {
+              show: true
+            }
+          },
+          {
+            map: 'qiyang',
+            aspectScale: 0.85,
+            zoom: 1.2,
+            top: '10%', // 根据自己需要来设置
+            left: '11%',
+            roam: false,
+            z: 3, // 变小，也就是被压在下面
+            itemStyle: {
+              areaColor: 'rgba(7,107,151,1)', // 记得改颜色
+              borderColor: '#195175',
+              borderWidth: 2,
+              shadowColor: '#0f4c74',
+              shadowOffsetX: 0,
+              shadowOffsetY: 4,
+              shadowBlur: 10
+            },
+            tooltip: {
+              show: false
+            }
+          },
+          {
+            map: 'qiyang',
+            aspectScale: 0.85,
+            zoom: 1.2,
+            top: '11%', // 根据自己需要来设置
+            left: '11%',
+            roam: false,
+            z: 2, // 变小，也就是被压在下面
+            itemStyle: {
+              areaColor: 'rgba(16,69,110,1)', // 记得改颜色
+              borderColor: '#195175',
+              borderWidth: 2,
+              shadowColor: '#0f4c74',
+              shadowOffsetX: 0,
+              shadowOffsetY: 4,
+              shadowBlur: 10
+            },
+            tooltip: {
+              show: false
+            }
+          },
+          {
+            map: 'qiyang',
+            aspectScale: 0.85,
+            zoom: 1.2,
+            top: '12%', // 根据自己需要来设置
+            left: '11%',
+            roam: false,
+            z: 1, // 变小，也就是被压在下面
+            itemStyle: {
+              areaColor: 'rgba(0,0,0,1)', // 记得改颜色
+              borderColor: '#195175',
+              borderWidth: 2,
+              shadowColor: '#0f4c74',
+              shadowOffsetX: 0,
+              shadowOffsetY: 4,
+              shadowBlur: 10
+            },
+            tooltip: {
+              show: false
+            }
+          }
+        ],
+        series: series
+      }
+      this.myChart.setOption(initOption)
+    },
+    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 scatterData = libJsonData
+      // const scatterData = mapData.map((item) => {
+      //   return {
+      //     name: item.name,
+      //     value: item.centroid
+      //       ? item.centroid.concat(item.value)
+      //       : item.centroid, // [经, 纬度, 值]
+      //     itemStyle: {
+      //       color: 'red'
+      //     }
+      //     // adcode: item.adcode,
+      //   }
+      // })
+
+      const updateOption = {
+        series: [
+          {
+            data: mapData // type: 'map'
+          },
+          {
+            data: scatterData // type: 'effectScatter'
+          }
+        ]
+      }
+
+      this.len = updateOption.series[1].data.length // 此处设置的是需要轮播的次数
+      this.myChart.setOption(updateOption)
+      this.libIndex = this.count % this.len
+      this.libCurrent = this.libInfoData[this.libIndex]
+      this.initSwiper()
+      this.updatePageWithData()
+      this.autohover()
+    },
+    mouseMove() {
+      // 当鼠标移入，终止轮播，高亮显示当前区域
+      this.myChart.on('mouseover', (params) => {
+        clearInterval(this.timeTicket)
+        this.myChart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 1
+        })
+        this.myChart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 1,
+          dataIndex: params.dataIndex
+        })
+        this.myChart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 1,
+          dataIndex: params.dataIndex
+        })
+      })
+      // 当鼠标移出，轮播继续开始
+      this.myChart.on('mouseout', this.autohover)
+    },
+    autohover() {
+      // clearInterval(this.timeTicket)
+
+      // this.timeTicket = setInterval(() => {
+      console.log('555')
+      // 1. 取消上次的高亮
+      this.myChart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 1
+      })
+      // 2. 显示当前高亮
+      this.myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 1,
+        dataIndex: this.count % this.len
+      })
+      // 3. 显示提示框中的信息
+      this.myChart.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 1,
+        dataIndex: this.count % this.len
+      })
+
+      console.log('this.count', this.count)
+      // }, 2000)
+    },
+    resize() {
+      this.myChart.resize()
+    },
     updatePageWithData() {
       console.log('update')
-      console.log('_self.isPage22222', this.isPage2)
-      if (!this.isPage2) {
-        return false
-      }
       // 生成一个随机数来确定要显示的图片数量
       const displayCountOptions = [1, 2, 3, 5]
       const displayCount = displayCountOptions[Math.floor(Math.random() * displayCountOptions.length)]
@@ -118,17 +521,19 @@ export default {
 
       this.currentIndex = 0
       this.swiperKey += 1
-      console.log(this.displayedImages)
 
       if (this.displayedImages.length === 1) {
         setTimeout(() => {
-          this.libIndex++
+          console.log('111')
+          this.count++
+          this.libIndex = this.count % this.len
           this.libCurrent = this.libInfoData[this.libIndex]
           this.updatePageWithData()
+          this.autohover()
         }, 3000)
       }
     },
-    init() {
+    initSwiper() {
       const _self = this
       this.swiperOption = {
         // loop: true,
@@ -164,24 +569,25 @@ export default {
         },
         on: {
           slideChangeTransitionEnd() {
-            if (_self.isPage2) {
-              _self.$refs.mySwiper.swiper.update()
-              _self.$refs.mySwiper.swiper.autoplay.start()
-            } else {
-              _self.$refs.mySwiper.swiper.autoplay.stop()
-            }
+            // if (_self.isPage2) {
+            //   _self.$refs.mySwiper.swiper.update()
+            //   _self.$refs.mySwiper.swiper.autoplay.start()
+            // } else {
+            //   _self.$refs.mySwiper.swiper.autoplay.stop()
+            // }
             console.log(' this.activeIndex', this.activeIndex)
-            console.log('_self.libIndex', _self.libIndex)
             _self.currentIndex = this.activeIndex
             if (_self.currentIndex === _self.displayedImages.length - 1) {
               setTimeout(() => {
-                if (_self.libIndex === _self.libInfoData.length - 1) {
-                  _self.libIndex = 0
+                if (_self.count === _self.libInfoData.length - 1) {
+                  _self.count = 0
                 } else {
-                  _self.libIndex++
+                  _self.count++
                 }
+                _self.libIndex = _self.count % _self.len
                 _self.libCurrent = _self.libInfoData[_self.libIndex]
                 _self.updatePageWithData()
+                _self.autohover()
                 _self.currentIndex = 0
               }, 3000)
             }
@@ -196,129 +602,10 @@ export default {
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
-.map_img{
-  display: block;
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-}
-.place-point{
-  position: relative;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  .iconfont{
-    font-size: .3rem;
-    color: yellow;
-  }
-  .bouncePoint{
-    -webkit-animation-name: bounce;
-    -moz-animation-name: bounce;
-    -o-animation-name: bounce;
-    -ms-animation-name: bounce;
-    animation-name: bounce;
-    -webkit-animation-fill-mode: both;
-    -moz-animation-fill-mode: both;
-    -o-animation-fill-mode: both;
-    -ms-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    -o-animation-duration: 1s;
-    -ms-animation-duration: 1s;
-    animation-duration: 1s;
-  }
-  .point1{
-    left: 10px;
-    top: 40px;
-  }
-  .point2{
-    left: 90px;
-    top: 80px;
-  }
-  .point3{
-    left: 133px;
-    top: 138px;
-  }
-  .point4{
-    left: 127px;
-    top: 206px;
-  }
-  .point5{
-    left: 171px;
-    top: 277px;
-  }
-  .point6{
-    left: 176px;
-    top: 370px;
-  }
-  .point7{
-    left: 297px;
-    top: 424px;
-  }
-  .point8{
-    left: 264px;
-    top: 485px;
-  }
-  .point9{
-    left: 374px;
-    top: 624px;
-  }
-  .point10{
-    right: 49px;
-    bottom: 133px;
-  }
-  .point11{
-    right: 86px;
-    bottom: 251px;
-  }
-  .point12{
-    right: 66px;
-    bottom: 304px;
-  }
-  .point13{
-    right: 16px;
-    top: 254px;
-  }
-  .point14{
-    right: 124px;
-    top: 220px;
-  }
-  .point15{
-    right: 124px;
-    top: 174px;
-  }
-  .point16{
-    right: 169px;
-    top: 264px;
-  }
-  .point17{
-    right: 239px;
-    top: 170px;
-  }
-  .point18{
-    right: 229px;
-    top: 120px;
-  }
-  .point19{
-    right: 280px;
-    top: 80px;
-  }
-  .point20{
-    right: 289px;
-    top:40px;
-  }
-  .point21{
-    right: 380px;
-    top:10px;
-  }
-}
 .lib-info{
-  position: absolute;
-  left: 1rem;
-  top: 2rem;
+  // position: absolute;
+  // left: 1rem;
+  // top: 2rem;
   width: 400px;
   border: 1px solid #fff;
   .lib-content{
@@ -330,307 +617,71 @@ export default {
   text-align: center;
 }
 .read-num{
-  position: absolute;
-  right: 1rem;
-  top: 2rem;
+  // position: absolute;
+  // right: 1rem;
+  // top: 2rem;
   width: 200px;
   height: 600px;
   border: 1px solid #fff;
 }
-.pulse {
-  background: rgba(0,0,0,0.2);
-  border-radius: 50%;
-  height: 14px;
-  width: 14px;
-  margin: -9px 0 0 5px;
-  -webkit-transform: rotateX(55deg);
-  -moz-transform: rotateX(55deg);
-  -o-transform: rotateX(55deg);
-  -ms-transform: rotateX(55deg);
-  transform: rotateX(55deg);
-  z-index: -2;
-}
-.pulse:after {
-  content: "";
-  border-radius: 50%;
-  height: 40px;
-  width: 40px;
-  position: absolute;
-  margin: -13px 0 0 -13px;
-  -webkit-animation: pulsate 1s ease-out;
-  -moz-animation: pulsate 1s ease-out;
-  -o-animation: pulsate 1s ease-out;
-  -ms-animation: pulsate 1s ease-out;
-  animation: pulsate 1s ease-out;
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-  -o-animation-iteration-count: infinite;
-  -ms-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  opacity: 0;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  -webkit-box-shadow: 0 0 1px 2px #89849b;
-  box-shadow: 0 0 1px 2px #89849b;
-  -webkit-animation-delay: 1.1s;
-  -moz-animation-delay: 1.1s;
-  -o-animation-delay: 1.1s;
-  -ms-animation-delay: 1.1s;
-  animation-delay: 1.1s;
-}
-@-moz-keyframes pulsate {
-  0% {
-    -webkit-transform: scale(0.1, 0.1);
-    -moz-transform: scale(0.1, 0.1);
-    -o-transform: scale(0.1, 0.1);
-    -ms-transform: scale(0.1, 0.1);
-    transform: scale(0.1, 0.1);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-  50% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-  }
-  100% {
-    -webkit-transform: scale(1.2, 1.2);
-    -moz-transform: scale(1.2, 1.2);
-    -o-transform: scale(1.2, 1.2);
-    -ms-transform: scale(1.2, 1.2);
-    transform: scale(1.2, 1.2);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-}
-@-webkit-keyframes pulsate {
-  0% {
-    -webkit-transform: scale(0.1, 0.1);
-    -moz-transform: scale(0.1, 0.1);
-    -o-transform: scale(0.1, 0.1);
-    -ms-transform: scale(0.1, 0.1);
-    transform: scale(0.1, 0.1);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-  50% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-  }
-  100% {
-    -webkit-transform: scale(1.2, 1.2);
-    -moz-transform: scale(1.2, 1.2);
-    -o-transform: scale(1.2, 1.2);
-    -ms-transform: scale(1.2, 1.2);
-    transform: scale(1.2, 1.2);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-}
-@-o-keyframes pulsate {
-  0% {
-    -webkit-transform: scale(0.1, 0.1);
-    -moz-transform: scale(0.1, 0.1);
-    -o-transform: scale(0.1, 0.1);
-    -ms-transform: scale(0.1, 0.1);
-    transform: scale(0.1, 0.1);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-  50% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-  }
-  100% {
-    -webkit-transform: scale(1.2, 1.2);
-    -moz-transform: scale(1.2, 1.2);
-    -o-transform: scale(1.2, 1.2);
-    -ms-transform: scale(1.2, 1.2);
-    transform: scale(1.2, 1.2);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-}
-@keyframes pulsate {
-  0% {
-    -webkit-transform: scale(0.1, 0.1);
-    -moz-transform: scale(0.1, 0.1);
-    -o-transform: scale(0.1, 0.1);
-    -ms-transform: scale(0.1, 0.1);
-    transform: scale(0.1, 0.1);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-  50% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-  }
-  100% {
-    -webkit-transform: scale(1.2, 1.2);
-    -moz-transform: scale(1.2, 1.2);
-    -o-transform: scale(1.2, 1.2);
-    -ms-transform: scale(1.2, 1.2);
-    transform: scale(1.2, 1.2);
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-  }
-}
-@-moz-keyframes bounce {
-  0% {
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -webkit-transform: translateY(-2000px) rotate(0);
-    -moz-transform: translateY(-2000px) rotate(0);
-    -o-transform: translateY(-2000px) rotate(0);
-    -ms-transform: translateY(-2000px) rotate(0);
-    transform: translateY(-2000px) rotate(0);
-  }
-  60% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-    -webkit-transform: translateY(30px) rotate(0);
-    -moz-transform: translateY(30px) rotate(0);
-    -o-transform: translateY(30px) rotate(0);
-    -ms-transform: translateY(30px) rotate(0);
-    transform: translateY(30px) rotate(0);
-  }
-  80% {
-    -webkit-transform: translateY(-10px) rotate(0);
-    -moz-transform: translateY(-10px) rotate(0);
-    -o-transform: translateY(-10px) rotate(0);
-    -ms-transform: translateY(-10px) rotate(0);
-    transform: translateY(-10px) rotate(0);
-  }
-  100% {
-    -webkit-transform: translateY(0) rotate(0);
-    -moz-transform: translateY(0) rotate(0);
-    -o-transform: translateY(0) rotate(0);
-    -ms-transform: translateY(0) rotate(0);
-    transform: translateY(0) rotate(0);
-  }
-}
-@-webkit-keyframes bounce {
-  0% {
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -webkit-transform: translateY(-2000px) rotate(0);
-    -moz-transform: translateY(-2000px) rotate(0);
-    -o-transform: translateY(-2000px) rotate(0);
-    -ms-transform: translateY(-2000px) rotate(0);
-    transform: translateY(-2000px) rotate(0);
-  }
-  60% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-    -webkit-transform: translateY(30px) rotate(0);
-    -moz-transform: translateY(30px) rotate(0);
-    -o-transform: translateY(30px) rotate(0);
-    -ms-transform: translateY(30px) rotate(0);
-    transform: translateY(30px) rotate(0);
-  }
-  80% {
-    -webkit-transform: translateY(-10px) rotate(0);
-    -moz-transform: translateY(-10px) rotate(0);
-    -o-transform: translateY(-10px) rotate(0);
-    -ms-transform: translateY(-10px) rotate(0);
-    transform: translateY(-10px) rotate(0);
-  }
-  100% {
-    -webkit-transform: translateY(0) rotate(0);
-    -moz-transform: translateY(0) rotate(0);
-    -o-transform: translateY(0) rotate(0);
-    -ms-transform: translateY(0) rotate(0);
-    transform: translateY(0) rotate(0);
-  }
-}
-@-o-keyframes bounce {
-  0% {
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -webkit-transform: translateY(-2000px) rotate(0);
-    -moz-transform: translateY(-2000px) rotate(0);
-    -o-transform: translateY(-2000px) rotate(0);
-    -ms-transform: translateY(-2000px) rotate(0);
-    transform: translateY(-2000px) rotate(0);
-  }
-  60% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-    -webkit-transform: translateY(30px) rotate(0);
-    -moz-transform: translateY(30px) rotate(0);
-    -o-transform: translateY(30px) rotate(0);
-    -ms-transform: translateY(30px) rotate(0);
-    transform: translateY(30px) rotate(0);
-  }
-  80% {
-    -webkit-transform: translateY(-10px) rotate(0);
-    -moz-transform: translateY(-10px) rotate(0);
-    -o-transform: translateY(-10px) rotate(0);
-    -ms-transform: translateY(-10px) rotate(0);
-    transform: translateY(-10px) rotate(0);
-  }
-  100% {
-    -webkit-transform: translateY(0) rotate(0);
-    -moz-transform: translateY(0) rotate(0);
-    -o-transform: translateY(0) rotate(0);
-    -ms-transform: translateY(0) rotate(0);
-    transform: translateY(0) rotate(0);
-  }
-}
-@keyframes bounce {
-  0% {
-    opacity: 0;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    filter: alpha(opacity=0);
-    -webkit-transform: translateY(-2000px) rotate(0);
-    -moz-transform: translateY(-2000px) rotate(0);
-    -o-transform: translateY(-2000px) rotate(0);
-    -ms-transform: translateY(-2000px) rotate(0);
-    transform: translateY(-2000px) rotate(0);
-  }
-  60% {
-    opacity: 1;
-    -ms-filter: none;
-    filter: none;
-    -webkit-transform: translateY(30px) rotate(0);
-    -moz-transform: translateY(30px) rotate(0);
-    -o-transform: translateY(30px) rotate(0);
-    -ms-transform: translateY(30px) rotate(0);
-    transform: translateY(30px) rotate(0);
-  }
-  80% {
-    -webkit-transform: translateY(-10px) rotate(0);
-    -moz-transform: translateY(-10px) rotate(0);
-    -o-transform: translateY(-10px) rotate(0);
-    -ms-transform: translateY(-10px) rotate(0);
-    transform: translateY(-10px) rotate(0);
-  }
-  100% {
-    -webkit-transform: translateY(0) rotate(0);
-    -moz-transform: translateY(0) rotate(0);
-    -o-transform: translateY(0) rotate(0);
-    -ms-transform: translateY(0) rotate(0);
-    transform: translateY(0) rotate(0);
-  }
-}
-.swiperLib{
-  height: 3rem;
-}
 </style>
+<!--
+{
+  type: 'map',
+  map: 'qiyang',
+  roam: false,
+  silent: true,
+  // geoIndex: 0,  geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
+  data: null,
+  label: {
+    show: false,
+    fontSize: 0
+  }
+},
+{
+  name: item[0] + ' Top3',
+  type: 'lines',
+  zlevel: 1,
+  effect: {
+    show: true,
+    period: 6,
+    trailLength: 0.7,
+    color: 'red', // arrow箭头的颜色
+    symbolSize: 3
+  },
+  lineStyle: {
+    normal: {
+      color: color[i],
+      width: 0,
+      curveness: 0.2
+    }
+  },
+  data: convertData(item[1])
+},
+{
+  type: 'effectScatter',
+  coordinateSystem: 'geo', // 注意坐标系的设置
+  // symbol: 'image://' + require('../../assets/images/default-img.png'),
+  data: null,
+  symbolSize: [8, 4],
+  showEffectOn: 'render',
+  rippleEffect: {
+    brushType: 'stroke',
+    color: '#9ffcff',
+    period: 9,
+    scale: 5
+  },
+  label: {
+    show: true,
+    color: '#FFF',
+    formatter: '',
+    offset: [0, -12]
+  },
+  emphasis: {
+  // 设置高亮显示的状态
+    scale: 8,
+    itemStyle: {
+      color: 'pink'
+    }
+  }
+} -->
diff --git a/src/views/map/index2.vue b/src/views/map/index2.vue
index fae89b4..5470dec 100644
--- a/src/views/map/index2.vue
+++ b/src/views/map/index2.vue
@@ -1,226 +1,194 @@
 <template>
-  <div id="screen-container">
-    <Header :header-title="headerTitle" />
-    <div style="width:100%; height:calc( 100vh - 1.125rem); overflow: hidden;">
-      <!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> -->
-      <div ref="chart" class="content" style="width: 100%; height: 100%; " />
+  <div style="position: relative;">
+    <!-- <Header :header-title="headerTitle" /> -->
+    <div style="display: flex; justify-content: center; align-items: center; width: 100%; height:calc(100vh - 1.125rem); border: 1px solid red;  overflow: hidden;">
+      <div style="width:6.21rem; height:8.61rem; position: relative;  overflow: hidden;">
+        <!-- <svg-icon icon-class="map" style="width: 100%; height: 100%; " /> -->
+        <img class="map_img" src="@/assets/images/map.png" alt="">
+        <div class="place-point">
+          <div v-for="(item,index) in libInfoData" v-show="libIndex===index" :key="index" :class="['point'+ parseInt(index+1)]" style="position: absolute">
+            <p style="font-size: .14rem; ">{{ item.name }}</p>
+            <span class="iconfont icon-weizhi" />
+            <div class="pulse" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="lib-info">
+      <div class="lib-title">{{ libCurrent && libCurrent.name }}</div>
+      图片切换{{ currentIndex+1 }}
+      <swiper v-if="swiperOption" :key="swiperKey" ref="mySwiper" class="swiperLib" :options="swiperOption">
+        <swiper-slide v-for="(item,index) in displayedImages" :key="index">
+          <div class="book-img" style="width: 100%; height: 3rem;">
+            <img :src="item.cover" :onerror="defaultImg" style="width: 100%;">
+          </div>
+        </swiper-slide>
+        <!-- 标页码 -->
+        <div slot="pagination" class="swiper-pagination" />
+      </swiper>
+      <div class="lib-content">
+        <span>藏书量：4787</span>
+        <span>办证量：74</span>
+        <span>占地面积：40平方米</span>
+        <p>关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知关于XXX的通知</p>
+      </div>
+    </div>
+    <div class="read-num">
+      <div class="lib-title">{{ libCurrent && libCurrent.name }}</div>
+      <h6>读者数量</h6>
+      <h6>借阅TOP10</h6>
     </div>
   </div>
 </template>
 
 <script>
-import Header from '@/views/header/index.vue'
-import mapJson from '@/assets/json/qy.json'
-import { debounce } from 'lodash' // js工具类,按需加载
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/dist/css/swiper.css'
 export default {
   components: {
-    Header
+    swiper,
+    swiperSlide
   },
   data() {
     return {
+      isPage2: false,
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       timeTicket: null,
-      count: 0,
-      len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标
-      headerTitle: '祁阳图书馆'
+      headerTitle: '祁阳图书馆',
+      libInfoData: [
+        { 'id': '1', 'name': '龙山街道分管' }, { 'id': '2', 'name': '黎家坪分馆' }, { 'id': '3', 'name': '大村甸分馆' }, { 'id': '4', 'name': '陶铸图书馆' }, { 'id': '5', 'name': '邵家岭自助馆' }, { 'id': '6', 'name': '下马渡分馆' }, { 'id': '7', 'name': '复兴路自助馆' }, { 'id': '8', 'name': '七里桥分馆' }, { 'id': '9', 'name': '少儿馆' }, { 'id': '10', 'name': '茅竹镇分馆' }, { 'id': '11', 'name': '观音滩镇分馆' },
+        { 'id': '12', 'name': '凯俊盛科城分馆' }, { 'id': '13', 'name': '进宝塘镇分馆' }, { 'id': '14', 'name': '三口塘镇分馆' }, { 'id': '15', 'name': '肖家镇分馆' }, { 'id': '16', 'name': '潘市镇分馆' }, { 'id': '17', 'name': '大忠桥镇分馆' }, { 'id': '18', 'name': '浯溪街道分馆' }, { 'id': '19', 'name': '长虹街道分馆' }, { 'id': '20', 'name': '白水镇分馆' }, { 'id': '21', 'name': '白竹湖自助馆' }
+      ],
+      libImg: [
+        {
+          'id': 1,
+          'cover': require('../../assets/images/lib.jpg')
+        },
+        {
+          'id': 2,
+          'cover': require('../../assets/images/lib2.jpg')
+        },
+        {
+          'id': 3,
+          'cover': require('../../assets/images/lib3.jpg')
+        },
+        {
+          'id': 4,
+          'cover': require('../../assets/images/lib4.jpg')
+        },
+        {
+          'id': 5,
+          'cover': require('../../assets/images/lib5.jpg')
+        }
+      ],
+      libIndex: 0,
+      libCurrent: null,
+      swiperKey: 1,
+      currentIndex: 0,
+      displayedImages: [],
+      swiperOption: null
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper
     }
   },
   beforeDestroy() {
     clearTimeout(this.timeTicket)
-    window.removeEventListener('resize', this.resize)
   },
 
   mounted() {
-    this.initChart() // 初始化
-    this.updateChart() // 更新数据，散点轮播显示
-    this.mouseMove() // 鼠标移入移出效果
-    window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
+    // this.libCurrent = this.libInfoData[this.libIndex]
+    this.init()
   },
   methods: {
-    initChart() {
-      this.$echarts.registerMap('qiyang', mapJson) // 注册map
-      this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化
+    updatePageWithData() {
+      console.log('update')
+      console.log('_self.isPage22222', this.isPage2)
+      if (!this.isPage2) {
+        return false
+      }
+      // 生成一个随机数来确定要显示的图片数量
+      const displayCountOptions = [1, 2, 3, 5]
+      const displayCount = displayCountOptions[Math.floor(Math.random() * displayCountOptions.length)]
 
-      const initOption = {
-        backgroundColor: '#fff',
-        geo: { // 2D地图坐标系
-          show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
-          map: 'centerMap',
-          roam: false, // 禁用缩放、拖拽
-          layoutCenter: ['50%', '47%'], // 地图中心位置
-          layoutSize: '90%', // 控制地图尺寸（地图的宽度和高度都会改变）
-          aspectScale: 0.78, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
-          zlevel: 1
+      // 从 libImg 中随机选择要显示的图片对象
+      const shuffledLibImg = this.libImg.slice().sort(() => Math.random() - 0.5) // 随机打乱数组顺序
+      this.displayedImages = shuffledLibImg.slice(0, displayCount)
+
+      this.currentIndex = 0
+      this.swiperKey += 1
+      console.log(this.displayedImages)
+
+      if (this.displayedImages.length === 1) {
+        setTimeout(() => {
+          this.libIndex++
+          this.libCurrent = this.libInfoData[this.libIndex]
+          this.updatePageWithData()
+        }, 3000)
+      }
+    },
+    init() {
+      const _self = this
+      this.swiperOption = {
+        // loop: true,
+        // initialSlide: 0,
+        notNextTick: false, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
+        // slidesPerView: 3, // 数量
+        // spaceBetween: 30, // 间距
+        // slidesPerGroup: 1, // 分几组
+        // 禁止滑动
+        noSwiping: true,
+        observer: true, // 开启动态检查器
+        direction: 'horizontal', // 设置水平还是垂直vertical
+        // grabCursor: true, //光标样式
+        // setWrapperSize: true,
+        // autoHeight: true,
+        // centeredSlides: true,
+        // paginationClickable: true,
+        // keyboard: true, //键盘控制
+        // mousewheelControl: true, //鼠标轮控制
+        autoplay: {
+          delay: 3000, // 自动切换的时间间隔，单位ms
+          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
+          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
+          // reverseDirection: false, //开启反向自动轮播
+          // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
         },
-        geo3D: { // 3D地图坐标系
-          show: true, // 显示3D地图版块
-          map: 'centerMap',
-          top: '-20',
-          regionHeight: 16, // 地图版块厚度
-          label: {
-            show: true,
-            borderRadius: 0,
-            distanca: 0,
-            textStyle: {
-              fontSize: 14,
-              color: '#C23531', // 地图初始化区域字体颜色
-              borderWidth: 1,
-              borderColor: '#FFFF10'
-            }
-          },
-          itemStyle: {
-            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
-            color: 'rgba(252,85,49, 0.5)', // 地图板块的颜色
-            opacity: 1, // 图形的不透明度 [ default: 1 ]
-            borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
-            borderColor: '#FFF500' // 图形描边的颜色。[ default: #333 ]
-          },
-          emphasis: {
-            label: {
-              show: true,
-              color: '#fff000'
-            },
-            itemStyle: {
-              color: '#ff0',
-              opacity: 0.5
+        // 显示分页
+        pagination: {
+          el: '.swiper-pagination',
+          type: 'progressbar'
+          // progressbarOpposite: true,
+          // clickable: true // 允许分页点击跳转
+        },
+        on: {
+          slideChangeTransitionEnd() {
+            if (_self.isPage2) {
+              _self.$refs.mySwiper.swiper.update()
+              _self.$refs.mySwiper.swiper.autoplay.start()
+            } else {
+              _self.$refs.mySwiper.swiper.autoplay.stop()
             }
-          },
-          light: {
-            // 光照阴影
-            main: {
-              color: '#FFFFFF', // 光照颜色
-              intensity: 2, // 光照强度
-              shadowQuality: 'light', // 阴影亮度
-              shadow: true, // 是否显示阴影
-              alpha: 50,
-              beta: 10
+            console.log(' this.activeIndex', this.activeIndex)
+            console.log('_self.libIndex', _self.libIndex)
+            _self.currentIndex = this.activeIndex
+            if (_self.currentIndex === _self.displayedImages.length - 1) {
+              setTimeout(() => {
+                if (_self.libIndex === _self.libInfoData.length - 1) {
+                  _self.libIndex = 0
+                } else {
+                  _self.libIndex++
+                }
+                _self.libCurrent = _self.libInfoData[_self.libIndex]
+                _self.updatePageWithData()
+                _self.currentIndex = 0
+              }, 3000)
             }
-          },
-          viewControl: {
-            'projection': 'perspective',
-            'autoRotate': false,
-            'distance': 208, // 控制地图版块的大小
-            'alpha': 72, // 地图版块垂直方向的角度
-            'beta': 2, // 地图版块水平方向的角度
-            rotateSensitivity: 0, // 禁用旋转
-            panSensitivity: 0, // 禁用平移
-            zoomSensitivity: 0 // 禁用缩放
-          },
-          zlevel: 2
-        },
-        series: [
-          { // 动效散点图层，使用2D地图坐标系
-            type: 'effectScatter',
-            coordinateSystem: 'geo',
-            zlevel: 3,
-            rippleEffect: { // 涟漪特效
-              period: 4, // 动画时间，值越小速度越快
-              brushType: 'fill', // 波纹绘制方式 stroke, fill
-              scale: 10 // 波纹圆环最大限制，值越大波纹越大
-            },
-            symbol: 'circle',
-            symbolSize: function(val) {
-              return (5 + val[2] * 5) / 150 // 圆环大小
-            },
-            itemStyle: {
-              normal: {
-                show: true,
-                color: '#F41C19'
-              }
-            },
-            data: []
-          }
-        ]
-      }
-
-      this.myChart.setOption(initOption)
-    },
-    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 scatterData = mapData.map((item) => {
-        return {
-          name: item.name,
-          value: item.centroid
-            ? item.centroid.concat(item.value)
-            : item.centroid, // [经, 纬度, 值]
-          itemStyle: {
-            color: 'red'
           }
-          // adcode: item.adcode,
         }
-      })
-
-      const updateOption = {
-        series: [
-          {
-            data: mapData // type: 'map'
-          },
-          {
-            data: scatterData // type: 'effectScatter'
-          }
-        ]
       }
-
-      this.len = updateOption.series[1].data.length // 此处设置的是需要轮播的次数
-      this.myChart.setOption(updateOption)
-      this.autohover()
-    },
-    mouseMove() {
-      // 当鼠标移入，终止轮播，高亮显示当前区域
-      this.myChart.on('mouseover', (params) => {
-        clearInterval(this.timeTicket)
-        this.myChart.dispatchAction({
-          type: 'downplay',
-          seriesIndex: 1
-        })
-        this.myChart.dispatchAction({
-          type: 'highlight',
-          seriesIndex: 1,
-          dataIndex: params.dataIndex
-        })
-        this.myChart.dispatchAction({
-          type: 'showTip',
-          seriesIndex: 1,
-          dataIndex: params.dataIndex
-        })
-      })
-      // 当鼠标移出，轮播继续开始
-      this.myChart.on('mouseout', this.autohover)
-    },
-    autohover() {
-      clearInterval(this.timeTicket)
-      this.timeTicket = setInterval(() => {
-        // 1. 取消上次的高亮
-        this.myChart.dispatchAction({
-          type: 'downplay',
-          seriesIndex: 1
-        })
-        // 2. 显示当前高亮
-        this.myChart.dispatchAction({
-          type: 'highlight',
-          seriesIndex: 1,
-          dataIndex: this.count % this.len
-        })
-        // 3. 显示提示框中的信息
-        this.myChart.dispatchAction({
-          type: 'showTip',
-          seriesIndex: 1,
-          dataIndex: this.count % this.len
-        })
-        this.count++
-      }, 2000)
-    },
-    resize() {
-      this.myChart.resize()
     }
   }
 }
@@ -229,4 +197,441 @@ export default {
 
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
+.map_img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+.place-point{
+  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  .iconfont{
+    font-size: .3rem;
+    color: yellow;
+  }
+  .bouncePoint{
+    -webkit-animation-name: bounce;
+    -moz-animation-name: bounce;
+    -o-animation-name: bounce;
+    -ms-animation-name: bounce;
+    animation-name: bounce;
+    -webkit-animation-fill-mode: both;
+    -moz-animation-fill-mode: both;
+    -o-animation-fill-mode: both;
+    -ms-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-duration: 1s;
+    -moz-animation-duration: 1s;
+    -o-animation-duration: 1s;
+    -ms-animation-duration: 1s;
+    animation-duration: 1s;
+  }
+  .point1{
+    left: 10px;
+    top: 40px;
+  }
+  .point2{
+    left: 90px;
+    top: 80px;
+  }
+  .point3{
+    left: 133px;
+    top: 138px;
+  }
+  .point4{
+    left: 127px;
+    top: 206px;
+  }
+  .point5{
+    left: 171px;
+    top: 277px;
+  }
+  .point6{
+    left: 176px;
+    top: 370px;
+  }
+  .point7{
+    left: 297px;
+    top: 424px;
+  }
+  .point8{
+    left: 264px;
+    top: 485px;
+  }
+  .point9{
+    left: 374px;
+    top: 624px;
+  }
+  .point10{
+    right: 49px;
+    bottom: 133px;
+  }
+  .point11{
+    right: 86px;
+    bottom: 251px;
+  }
+  .point12{
+    right: 66px;
+    bottom: 304px;
+  }
+  .point13{
+    right: 16px;
+    top: 254px;
+  }
+  .point14{
+    right: 124px;
+    top: 220px;
+  }
+  .point15{
+    right: 124px;
+    top: 174px;
+  }
+  .point16{
+    right: 169px;
+    top: 264px;
+  }
+  .point17{
+    right: 239px;
+    top: 170px;
+  }
+  .point18{
+    right: 229px;
+    top: 120px;
+  }
+  .point19{
+    right: 280px;
+    top: 80px;
+  }
+  .point20{
+    right: 289px;
+    top:40px;
+  }
+  .point21{
+    right: 380px;
+    top:10px;
+  }
+}
+.lib-info{
+  position: absolute;
+  left: 1rem;
+  top: 2rem;
+  width: 400px;
+  border: 1px solid #fff;
+  .lib-content{
+    font-size: .2rem;
+  }
+}
+.lib-title{
+  line-height: .45rem;
+  text-align: center;
+}
+.read-num{
+  position: absolute;
+  right: 1rem;
+  top: 2rem;
+  width: 200px;
+  height: 600px;
+  border: 1px solid #fff;
+}
+.pulse {
+  background: rgba(0,0,0,0.2);
+  border-radius: 50%;
+  height: 14px;
+  width: 14px;
+  margin: -9px 0 0 5px;
+  -webkit-transform: rotateX(55deg);
+  -moz-transform: rotateX(55deg);
+  -o-transform: rotateX(55deg);
+  -ms-transform: rotateX(55deg);
+  transform: rotateX(55deg);
+  z-index: -2;
+}
+.pulse:after {
+  content: "";
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  margin: -13px 0 0 -13px;
+  -webkit-animation: pulsate 1s ease-out;
+  -moz-animation: pulsate 1s ease-out;
+  -o-animation: pulsate 1s ease-out;
+  -ms-animation: pulsate 1s ease-out;
+  animation: pulsate 1s ease-out;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -webkit-box-shadow: 0 0 1px 2px #89849b;
+  box-shadow: 0 0 1px 2px #89849b;
+  -webkit-animation-delay: 1.1s;
+  -moz-animation-delay: 1.1s;
+  -o-animation-delay: 1.1s;
+  -ms-animation-delay: 1.1s;
+  animation-delay: 1.1s;
+}
+@-moz-keyframes pulsate {
+  0% {
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+  50% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    -moz-transform: scale(1.2, 1.2);
+    -o-transform: scale(1.2, 1.2);
+    -ms-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+}
+@-webkit-keyframes pulsate {
+  0% {
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+  50% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    -moz-transform: scale(1.2, 1.2);
+    -o-transform: scale(1.2, 1.2);
+    -ms-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+}
+@-o-keyframes pulsate {
+  0% {
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+  50% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    -moz-transform: scale(1.2, 1.2);
+    -o-transform: scale(1.2, 1.2);
+    -ms-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+}
+@keyframes pulsate {
+  0% {
+    -webkit-transform: scale(0.1, 0.1);
+    -moz-transform: scale(0.1, 0.1);
+    -o-transform: scale(0.1, 0.1);
+    -ms-transform: scale(0.1, 0.1);
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+  50% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+  }
+  100% {
+    -webkit-transform: scale(1.2, 1.2);
+    -moz-transform: scale(1.2, 1.2);
+    -o-transform: scale(1.2, 1.2);
+    -ms-transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+  }
+}
+@-moz-keyframes bounce {
+  0% {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transform: translateY(-2000px) rotate(0);
+    -moz-transform: translateY(-2000px) rotate(0);
+    -o-transform: translateY(-2000px) rotate(0);
+    -ms-transform: translateY(-2000px) rotate(0);
+    transform: translateY(-2000px) rotate(0);
+  }
+  60% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: translateY(30px) rotate(0);
+    -moz-transform: translateY(30px) rotate(0);
+    -o-transform: translateY(30px) rotate(0);
+    -ms-transform: translateY(30px) rotate(0);
+    transform: translateY(30px) rotate(0);
+  }
+  80% {
+    -webkit-transform: translateY(-10px) rotate(0);
+    -moz-transform: translateY(-10px) rotate(0);
+    -o-transform: translateY(-10px) rotate(0);
+    -ms-transform: translateY(-10px) rotate(0);
+    transform: translateY(-10px) rotate(0);
+  }
+  100% {
+    -webkit-transform: translateY(0) rotate(0);
+    -moz-transform: translateY(0) rotate(0);
+    -o-transform: translateY(0) rotate(0);
+    -ms-transform: translateY(0) rotate(0);
+    transform: translateY(0) rotate(0);
+  }
+}
+@-webkit-keyframes bounce {
+  0% {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transform: translateY(-2000px) rotate(0);
+    -moz-transform: translateY(-2000px) rotate(0);
+    -o-transform: translateY(-2000px) rotate(0);
+    -ms-transform: translateY(-2000px) rotate(0);
+    transform: translateY(-2000px) rotate(0);
+  }
+  60% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: translateY(30px) rotate(0);
+    -moz-transform: translateY(30px) rotate(0);
+    -o-transform: translateY(30px) rotate(0);
+    -ms-transform: translateY(30px) rotate(0);
+    transform: translateY(30px) rotate(0);
+  }
+  80% {
+    -webkit-transform: translateY(-10px) rotate(0);
+    -moz-transform: translateY(-10px) rotate(0);
+    -o-transform: translateY(-10px) rotate(0);
+    -ms-transform: translateY(-10px) rotate(0);
+    transform: translateY(-10px) rotate(0);
+  }
+  100% {
+    -webkit-transform: translateY(0) rotate(0);
+    -moz-transform: translateY(0) rotate(0);
+    -o-transform: translateY(0) rotate(0);
+    -ms-transform: translateY(0) rotate(0);
+    transform: translateY(0) rotate(0);
+  }
+}
+@-o-keyframes bounce {
+  0% {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transform: translateY(-2000px) rotate(0);
+    -moz-transform: translateY(-2000px) rotate(0);
+    -o-transform: translateY(-2000px) rotate(0);
+    -ms-transform: translateY(-2000px) rotate(0);
+    transform: translateY(-2000px) rotate(0);
+  }
+  60% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: translateY(30px) rotate(0);
+    -moz-transform: translateY(30px) rotate(0);
+    -o-transform: translateY(30px) rotate(0);
+    -ms-transform: translateY(30px) rotate(0);
+    transform: translateY(30px) rotate(0);
+  }
+  80% {
+    -webkit-transform: translateY(-10px) rotate(0);
+    -moz-transform: translateY(-10px) rotate(0);
+    -o-transform: translateY(-10px) rotate(0);
+    -ms-transform: translateY(-10px) rotate(0);
+    transform: translateY(-10px) rotate(0);
+  }
+  100% {
+    -webkit-transform: translateY(0) rotate(0);
+    -moz-transform: translateY(0) rotate(0);
+    -o-transform: translateY(0) rotate(0);
+    -ms-transform: translateY(0) rotate(0);
+    transform: translateY(0) rotate(0);
+  }
+}
+@keyframes bounce {
+  0% {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transform: translateY(-2000px) rotate(0);
+    -moz-transform: translateY(-2000px) rotate(0);
+    -o-transform: translateY(-2000px) rotate(0);
+    -ms-transform: translateY(-2000px) rotate(0);
+    transform: translateY(-2000px) rotate(0);
+  }
+  60% {
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: translateY(30px) rotate(0);
+    -moz-transform: translateY(30px) rotate(0);
+    -o-transform: translateY(30px) rotate(0);
+    -ms-transform: translateY(30px) rotate(0);
+    transform: translateY(30px) rotate(0);
+  }
+  80% {
+    -webkit-transform: translateY(-10px) rotate(0);
+    -moz-transform: translateY(-10px) rotate(0);
+    -o-transform: translateY(-10px) rotate(0);
+    -ms-transform: translateY(-10px) rotate(0);
+    transform: translateY(-10px) rotate(0);
+  }
+  100% {
+    -webkit-transform: translateY(0) rotate(0);
+    -moz-transform: translateY(0) rotate(0);
+    -o-transform: translateY(0) rotate(0);
+    -ms-transform: translateY(0) rotate(0);
+    transform: translateY(0) rotate(0);
+  }
+}
+.swiperLib{
+  height: 3rem;
+}
 </style>
diff --git a/src/views/pageOne/index.vue b/src/views/pageOne/index.vue
new file mode 100644
index 0000000..698a987
--- /dev/null
+++ b/src/views/pageOne/index.vue
@@ -0,0 +1,210 @@
+<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>
+    <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>
+          </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>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import data from '@/views/newBookRecommend/data.json'
+export default {
+  components: {
+  },
+  data() {
+    return {
+      list: [],
+      defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
+      mySwipera1: {
+        notNextTick: true,
+        noSwiping: true,
+        observer: true, // 开启动态检查器，监测swiper和slide
+        observeParents: true, // 监测Swiper 的祖/父元素
+        speed: 4000, // 切换速度
+        loop: true, // 循环
+        slidesPerView: 6, // 显示数量
+        spaceBetween: 10, // 间隔
+        freeMode: true, // 自动贴合
+        autoplay: { // 自动播放
+          delay: 0, // 自动切换的时间间隔
+          stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换
+          disableOnInteraction: false// 用户操作后是否停止
+        }
+      },
+      mySwipera2: {
+        notNextTick: true,
+        observer: true, // 开启动态检查器，监测swiper和slide
+        observeParents: true, // 监测Swiper 的祖/父元素
+        speed: 4000, // 切换速度
+        loop: true, // 循环
+        slidesPerView: 6, // 显示数量
+        spaceBetween: 10, // 间隔
+        freeMode: true, // 自动贴合
+        autoplay: { // 自动播放
+          delay: 0, // 自动切换的时间间隔
+          stopOnLastSlide: false, // 切换到最后一个slide时停止自动切换
+          disableOnInteraction: false, // 用户操作后是否停止
+          reverseDirection: true// 方向切换
+        }
+      }
+    }
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 1.5, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 2, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    default2Option() {
+      return {
+        step: 1.5, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 3, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  created() {
+    this.list = data
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer2)
+  },
+  mounted() {
+    this.tagAnimation()
+  },
+  methods: {
+    tagAnimation() {
+      tagCloud({
+        selector: '#tagcloud1', // 元素选择器，id 或 class
+        fontsize: 26, // 基本字体大小, 默认16，单位px
+        radius: 260, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]
+        mspeed: 'normal', // 滚动最大速度, 取值: slow, normal(默认), fast
+        ispeed: 'normal', // 滚动初速度, 取值: slow, normal(默认), fast
+        direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
+        keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
+        multicolour: true // 彩色字体，颜色随机，取值：true(默认),false
+      })
+    }
+  }
+}
+
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/index.scss";
+.tagcloud {
+  width: 5.5rem;
+  height: 5rem;
+  margin: .2rem;
+  margin-left: .3rem;
+  overflow: hidden;
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+}
+
+.scrollBox{
+  width: 100%;
+  height: 96px;
+  box-sizing: border-box;
+  ul{
+    height: 96px;
+    display: flex;
+    li{
+      width: 240px;
+      margin-right: 10px;
+      border: solid 2px #f7f7f9;
+      cursor: pointer;
+      .bord{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-items: center;
+        .book-img{
+          width: .5rem;
+          height: .5rem;
+          background: url('~@/assets/images/default-img.png') no-repeat center center;
+          background-size: contain;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          img{
+            display: block;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>