diff --git a/src/assets/images/page4_03-b.png b/src/assets/images/page4_03-b.png
new file mode 100644
index 0000000..5656503
Binary files /dev/null and b/src/assets/images/page4_03-b.png differ
diff --git a/src/assets/images/pageOne-1-b.png b/src/assets/images/pageOne-1-b.png
new file mode 100644
index 0000000..2feaedb
Binary files /dev/null and b/src/assets/images/pageOne-1-b.png differ
diff --git a/src/assets/images/pageOne-2-b.png b/src/assets/images/pageOne-2-b.png
new file mode 100644
index 0000000..74d8f51
Binary files /dev/null and b/src/assets/images/pageOne-2-b.png differ
diff --git a/src/assets/json/lib.json b/src/assets/json/lib.json
index 5514d39..50fa973 100644
--- a/src/assets/json/lib.json
+++ b/src/assets/json/lib.json
@@ -1,4 +1,4 @@
 {
-  "大湾城市书房":[114.664064,30.478882],
-  "张家湾城市书房":[114.635376,30.532215]
+  "葛店城市书房·大湾分馆":[114.664064,30.478882],
+  "葛店城市书房·张家湾分馆":[114.635376,30.532215]
 }
\ No newline at end of file
diff --git a/src/assets/styles/font-some.css b/src/assets/styles/font-some.css
index 1f88709..8519919 100644
--- a/src/assets/styles/font-some.css
+++ b/src/assets/styles/font-some.css
@@ -6,7 +6,7 @@
 .box-items {
     position: relative;
     display: flex;
-    height: .5rem;
+    height: .88rem;
     text-align: center;
 }
 /*滚动数字设置*/
@@ -15,9 +15,11 @@
   display: flex;
   justify-content: center;
   text-align: center;
-  width: .25rem;
-  height: .5rem;
-  line-height: .4rem;
+  /* width: .25rem;
+  height: .5rem; */
+  width: .38rem;
+  height: .88rem;
+  line-height: .75rem;
 }
 .number-item span.items-int{
     position: relative;
@@ -33,7 +35,8 @@
     position: absolute;
     top: 0;
     left: 50%;
-    font-size: .35rem;
+    /* font-size: .35rem; */
+    font-size: .57rem;
     font-weight: 600;
     z-index: 99999;
     color: #fff;
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index ffb23d8..8b36524 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -343,12 +343,14 @@
     .middle2-item{
       position: absolute;
       width: 3.3375rem;
-      height: 1.275rem;
+      // height: 1.275rem;
+      height: 1.6rem;
       display: flex;
       justify-content: flex-start;
       flex-direction: column;
       p{
-        font-size: .225rem;
+        // font-size: .225rem;
+        font-size: .3rem;
         margin-top: .125rem;
         color: #CCDEFF;
         letter-spacing: .025rem;
@@ -357,7 +359,7 @@
         display: flex; 
         justify-content: flex-start;
         align-items: center;
-        margin-top: -0.0625rem;
+        margin-top: .13rem;
         .middle-unit{
           display: block;
           font-size: .175rem;
@@ -367,32 +369,32 @@
         }
       }
       &.totalBook{
-        top: 1.1625rem;
+        top: .91rem;
         left: 1.1125rem;
       }
       &.fansNum{
-        top: 3.3rem;
+        top: 3.55rem;
         left: .6125rem;
       }
       &.totalBook,
       &.fansNum{
-        background: url('~@/assets/images/pageOne-1.png') no-repeat top left;
+        background: url('~@/assets/images/pageOne-1-b.png') no-repeat top left;
 	      background-size: cover;
         p{
           padding-left: .45rem;
         }
       }
       &.lendingNum{
-        top: 3.3rem;
+        top: 3.55rem;
         right: .2375rem;
       }
       &.cardNum{
-        top: 1.1625rem;
+        top: .91rem;
         right: .7375rem;
       }
       &.lendingNum,
       &.cardNum{
-        background: url('~@/assets/images/pageOne-2.png') no-repeat top left;
+        background: url('~@/assets/images/pageOne-2-b.png') no-repeat top left;
 	      background-size: cover;
         p{
           text-align: right;
@@ -412,19 +414,23 @@
 }
 
 .small-module{
-  height: .4rem;
+  // height: .4rem;
+  height: .63rem;
   overflow: hidden;
 }
 
 .middle-img{
   position: relative;
-  width: 5.4rem;
+  // width: 5.4rem;
+  width: 5rem;
   .middle-img-book{
     position: absolute;
-    top: .375rem;
+    top: .75rem;
     left: 50%;
-    width: 4.8875rem;
-    height: 3.925rem;
+    // width: 4.8875rem;
+    // height: 3.925rem;
+    width: 4.51rem;
+    height: 3.55rem;
     transform: translateX(-50%);
     z-index: 999;
     background: url('~@/assets/images/pageOne-3.png') no-repeat center center;
@@ -435,8 +441,10 @@
     position: absolute;
     top: .375rem;
     left: 50%;
-    width: 4.8875rem;
-    height: 3.925rem;
+    // width: 4.8875rem;
+    // height: 3.925rem;
+    width: 4.51rem;
+    height: 3.55rem;
     background: url('~@/assets/images/wq.png') no-repeat center center;
     background-size: cover;
     transform: translateX(-51%);
@@ -482,10 +490,13 @@
   }
   .middle-img-bottom{
     position: absolute;
-    bottom: -0.25rem;
+    // bottom: -0.25rem;
+    bottom: 0;
     left: 0;
-    width: 5.4rem;
-    height: 3.4375rem;
+    // width: 5.4rem;
+    // height: 3.4375rem;
+     width: 5rem;
+    height: 3.19rem;
     background: url('~@/assets/images/pageOne-4.png') no-repeat center center;
     background-size: cover;
     // animation: middleMove 3s infinite linear;
@@ -494,8 +505,10 @@
       position: absolute;
       top: 0; 
       left: 0;
-      width: .75rem;
-      height: .125rem;
+      // width: .75rem;
+      // height: .125rem;
+      width: .5rem;
+      height: .06rem;
       background: linear-gradient( 
         to right, 
         rgba(0,0,0,0) 0%, 
@@ -725,7 +738,8 @@
 	height: .6rem;
 	padding-left: .4rem;
   margin-top: -0.25rem;
-	font-size: .25rem;
+	// font-size: .25rem;
+	font-size: .3rem;
 	line-height: .5625rem;
 	color: #f6f9fe;
 	text-shadow: 0px 2px 8px rgba(0, 9, 35, 1);
@@ -754,11 +768,12 @@
     flex-wrap: wrap;
     margin-left: -.38rem;
     // width: 100%;
-    height: 1.52rem; 
+    // height: 1.52rem; 
+    height: 1.88rem;
     padding-left: 2rem;
-    background: url('~@/assets/images/map_03.png') no-repeat left top;
+    background: url('~@/assets/images/map_03.png') no-repeat .3rem .25rem;
     // background-size: 5.58rem 1.1rem;
-    background-size: 1.9rem 1.52rem;
+    background-size: 1.52rem 1.15rem;
   }
   .currentNum,
   .lastYearTotal{
@@ -771,7 +786,8 @@
   .flop-figure {
     position: relative;
     display: inline-block;
-    width: .28rem;
+    // width: .28rem;
+    width: .38rem;
     height: 100%;
     line-height: .38rem;
     overflow: hidden;
@@ -795,29 +811,34 @@
 
 .pageLeft-flop-box {
   position: relative;
-  height: .63rem;
-  margin-top: .25rem;
+  // height: .63rem;
+  height:  1rem;
+  // margin-top: .25rem;
   overflow: hidden;
   & div:first-child {
-    height: .63rem;
+    // height: .63rem;
+    height:  1rem;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: flex-start;
   }
   .flop-figure {
-    width: .5rem;
+    // width: .5rem;
+    width: .81rem;
     i {
-      // font-size: .3rem;
-      font-size: .63rem;
+      // font-size: .63rem;
+      font-size: 1rem;
       font-weight: bold;
+      margin-left: 0.07rem;
     }
   }
   .flop-comma {
     margin-left: -0.025rem;
     span {
       left: 0;
-      font-size: .275rem;
+      // font-size: .275rem;
+      font-size: .38rem;
       color: #fff;
       // background: -webkit-linear-gradient(90deg,  rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%);
       // background: linear-gradient(90deg,  rgba(14,197,236,1) 10%,rgba(239,252,254,1) 100%);
@@ -833,10 +854,13 @@
     font-weight: bold;
     color: #A8CBF6;
     height: .23rem;
+    margin-top: .38rem;
+    margin-left: -0.13rem;
   }
 }
 .flop-item-name{
-  font-size: .25rem;
+  // font-size: .25rem;
+  font-size: .3rem;
   // text-align: right;
   // padding-right: .3rem;
 }
@@ -851,10 +875,11 @@
   li{
     position: relative;
     width: 100%;
-    // font-size: .225rem;
-    font-size: .25rem;
+    // font-size: .25rem;
+    font-size: .3rem;
     padding-left: .1625rem;
-    margin-top: .7rem;
+    // margin-top: .7rem;
+    margin-top: .47rem;
     p{
       position: relative;
       &::before{
@@ -872,8 +897,8 @@
       position: absolute;
       right: 0;
       top: 0;
-      // font-size: .28rem;
-      font-size: .3rem;
+      // font-size: .3rem;
+      font-size: .45rem;
       font-weight: bold;
       color: #fff;
       background: -webkit-linear-gradient(to bottom, #fff 40%,  #69A4D6 60%);
@@ -1127,9 +1152,9 @@
   .lib-text{
     position: relative;
     margin-right: .175rem;
-    font-size: .225rem;
-    line-height: .35rem;
-    color: #ADC7FF;
+    font-size: .28rem;
+    line-height: .4rem;
+    color: #fff;
     overflow: hidden;
   }
 }
@@ -1195,6 +1220,7 @@
 .read-num{
   width: 5.9375rem;
   background-color: rgba(10, 26, 66, .6);
+  // background-color: #011244;
   .online{
     height: 1.6875rem;
     background: url('~@/assets/images/map_03.png') no-repeat left top;
@@ -1306,21 +1332,69 @@
     }
   }
 }
+// .tooltip-main{
+//   font-family: 'DingTalk_JinBuTi_Regular';
+//   position: relative;
+//   // min-width: 3rem;
+//   width: 4rem;
+//   // text-wrap: wrap;
+//   .tooltip-line{
+//     width: .15rem;
+//     height: 0;
+//     background: url('~@/assets/images/line.png') no-repeat top left;
+//     position: absolute;
+//     left: -0.225rem;
+//     bottom: -0.25rem;
+//     transform-origin: bottom center;
+//     animation: growBar 1s forwards;
+//   }
+// }
+// .tooltip-content{
+//   height: 1.8125rem;
+//   opacity: 0;
+//   line-height: .35rem;
+//   border: 1px solid #D1793D;
+//   background-color:  rgba(0,31,87,0.8);
+//   animation: slideInFromLeft 1s forwards;
+//   animation-delay: 2s;
+//   .title{
+//     width: 100%;
+//     padding: .05rem .1875rem;
+//     font-weight: bold;
+//     // font-size: .225rem;
+//     font-size: .28rem;
+//     background: linear-gradient(90deg, rgba(255, 116, 32, 1), rgba(255,255,255,0.22));
+//   }
+//   .place{
+//     text-wrap: wrap;
+//     padding: .125rem .1875rem;
+//     font-size: .3rem;
+//     color: #fff;
+//   }
+// }
+// @keyframes growBar {
+//   0% {height: 0;}
+//   100% {height: 1.8125rem;}
+// }
+// @keyframes slideInFromLeft {
+//   0% {width: 0; opacity: 0;}
+//   100% {width: 100%; opacity: 1;}
+// }
+
+
 .tooltip-main{
   font-family: 'DingTalk_JinBuTi_Regular';
   position: relative;
-  // min-width: 3rem;
   width: 4rem;
-  // text-wrap: wrap;
   .tooltip-line{
-    width: .15rem;
+    width: .07rem;
     height: 0;
-    background: url('~@/assets/images/line.png') no-repeat top left;
     position: absolute;
     left: -0.225rem;
     bottom: -0.25rem;
     transform-origin: bottom center;
     animation: growBar 1s forwards;
+    filter: blur(0.01rem);
   }
 }
 .tooltip-content{
@@ -1335,13 +1409,12 @@
     width: 100%;
     padding: .05rem .1875rem;
     font-weight: bold;
-    font-size: .225rem;
-    background: linear-gradient(90deg, rgba(255, 116, 32, 1), rgba(255,255,255,0.22));
+    font-size: .28rem;
   }
   .place{
     text-wrap: wrap;
     padding: .125rem .1875rem;
-    font-size: 0.2rem;
+    font-size: .3rem;
     color: #fff;
   }
 }
@@ -1425,6 +1498,7 @@
               // text-align: center;
               transition: transform 0.6s ease-in-out;
               color: #BFE0FF;
+              margin-left: 0;
             }
           }
         }
@@ -1500,18 +1574,19 @@
   background-color: #011244;
 }
 .four-notice{
-  height: 3rem;
+  height: calc(100% / 2 + 40px);
   .seamless-warp{
     position: relative;
     width: calc(100%);
-    height: 2.25rem;
+    height: 5.5rem;
     margin-top: .125rem;
     overflow: hidden;
     .notice-text{
       position: relative;
       padding: 0 .375rem;
       margin-bottom: .25rem;
-      font-size: .225rem;
+      // font-size: .225rem;
+      font-size: .28rem;
       color: #ADC7FF;
       line-height: .375rem;
       font-weight: bold;
@@ -1528,7 +1603,8 @@
         line-height: .5rem;
         padding: 0 .375rem;
         color: #7D93C2;
-        font-size: .2rem;
+        // font-size: .2rem;
+        font-size: .25rem;
         background-color: #011244;
         span{
           display: block;
@@ -1536,33 +1612,42 @@
       }
       p{
         color: #fff;
+        white-space: pre-line; 
         text-indent: 2em;
+         padding: .5rem 0; // 给标题留空间
       }
     }
   }
 }
 
+/* 滚动动画（核心修正） */
 .scroll-animation {
-  animation: myMove 16s linear infinite;
-  animation-fill-mode: forwards;
+  animation: myMove linear forwards;
+  --scroll-duration: 20s;
+  animation-duration: var(--scroll-duration);
+  animation-delay: 0s;
+  animation-fill-mode: forwards; /* 动画结束后停在最后一帧 */
 }
 
+/* 精准的滚动动画：从顶部到完全显示底部 */
 @keyframes myMove {
   0% {
-    transform: translateY(1rem);
+    transform: translateY(0); /* 初始位置：内容顶部对齐容器顶部 */
   }
   100% {
-    transform: translateY(calc(-1 * var(--container-height)));
+    /* 最终位置：内容底部对齐容器底部（完全滚到底） */
+    transform: translateY(calc(-1 * (var(--content-height) - var(--container-height))));
   }
 }
 
 .four-ranking{
-  height: 4.85rem;
+  height: calc(100% / 2 - 70px);
   &.lending-ranking{
     padding: 0;
   }
   .ranking-cont{
     margin: .25rem .375rem 0 .3125rem;
+    padding-bottom: .13rem;
     .ranking-list{
       padding-top: .125rem;
     }
@@ -1698,4 +1783,23 @@
     }
   }
 
+}
+
+
+.five-video{
+  width: 100%;
+  height: 10.875rem;
+  padding: 0 .375rem;
+  background: url('~@/assets/images/page4_03-b.png') no-repeat top left;
+  background-size: 100% 100%;
+  overflow: hidden;
+  h4{
+    height: .9rem;
+    line-height: 1.05rem;
+    font-size: .325rem;
+    font-weight: bold;
+    color: #DFFDFE;
+    background: url('~@/assets/images/page4_02.png') no-repeat bottom left;
+    background-size: 100% .0375rem;
+  }
 }
\ No newline at end of file
diff --git a/src/components/echart/todayCircle.vue b/src/components/echart/todayCircle.vue
index 6e8890b..e56d5b9 100644
--- a/src/components/echart/todayCircle.vue
+++ b/src/components/echart/todayCircle.vue
@@ -1,274 +1,311 @@
 <template>
-  <div style="height: calc(100% - 200px); display: flex; align-items: center; justify-content: flex-start;">
-    <div id="todayType" style="width:400px; height: 230px" />
+  <!-- 1. 样式抽离到class，提升可读性和维护性 -->
+  <div class="chart-container">
+    <div ref="todayTypeRef" class="today-type-chart" />
   </div>
 </template>
 
 <script>
+import centerImg from '@/assets/images/circle-bg.png'
+
 export default {
+  name: 'TodayTypePieChart', // 3. 增加组件名，便于调试和复用
   props: {
     todayAllNum: {
       type: Object,
-      require: true,
-      default: function() {
-        return {}
-      }
+      required: true, // 4. 修正拼写错误 require -> required
+      default: () => ({}) // 5. 简化默认值写法
     }
   },
   data() {
     return {
+      myChart: null,
+      initDebounceTimer: null
     }
   },
   watch: {
-    'todayAllNum': {
+    todayAllNum: {
       handler(val) {
-        setTimeout(() => {
-          this.initTodayCircle()
-        }, 100)
+        if (!val) return
+
+        clearTimeout(this.initDebounceTimer)
+        this.initDebounceTimer = setTimeout(() => {
+          this.$nextTick(() => {
+            this.initTodayCircle()
+          })
+        }, 300)
       },
       immediate: true,
       deep: true
     }
   },
-  created() {
-  },
-  beforeDestroy() {
-  },
   mounted() {
     this.initTodayCircle()
   },
+  beforeDestroy() {
+    this.destroyChart()
+  },
   methods: {
+    /**
+     * 9. 销毁图表实例和定时器（抽离通用逻辑）
+     */
+    destroyChart() {
+      clearTimeout(this.initDebounceTimer)
+      if (this.myChart) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    },
+
+    /**
+     * 10. 计算数组value总和（抽离为独立方法，提升可读性）
+     * @param {Array} arr - 数据数组
+     * @returns {Number} 总和
+     */
+    calculateTotal(arr) {
+      if (!Array.isArray(arr) || arr.length === 0) return 0
+      return arr.reduce((total, item) => total + (item.value || 0), 0)
+    },
+
+    /**
+     * 11. 构建图例格式化文本（抽离独立方法）
+     * @param {String} name - 图例名称
+     * @param {Array} data - 图表数据
+     * @returns {Array|String} 格式化后的文本
+     */
+    formatLegendName(name, data) {
+      const total = this.calculateTotal(data)
+      const targetItem = data.find(item => item.name === name)
+
+      if (!targetItem) return name
+
+      const percentage = total > 0 ? `${((targetItem.value / total) * 100).toFixed(0)}%` : '0%'
+      return [`{name|${name}}`, `{num|${percentage}}`]
+    },
+
+    /**
+     * 初始化今日类型饼图
+     */
     initTodayCircle() {
-      const optionData = [
+      // 12. 使用ref替代getElementById，更符合Vue规范
+      const chartDom = this.$refs.todayTypeRef
+      if (!chartDom) {
+        console.warn('图表容器未找到')
+        return
+      }
+
+      // 13. 数据处理抽离，提升代码可读性
+      const chartData = [
         { value: this.todayAllNum.headerLib || 0, name: '大湾' },
         { value: this.todayAllNum.branchLib || 0, name: '张家湾' }
       ]
-      const myChart = this.$echarts.init(document.getElementById('todayType'))
 
-      function arrCount(arr) {
-        let count = 0
-        arr.forEach(item => {
-          count = count + item.value
-        })
-        return count
+      // 14. 销毁旧实例，避免内存泄漏
+      if (this.myChart) {
+        this.myChart.dispose()
       }
-      var centerImg = require('@/assets/images/circle-bg.png')
-      const option = {
-        baseOption: {
-          tooltip: {
-            show: false,
-            trigger: 'item',
-            position: 'bottom',
-            textStyle: {
-              color: '#EEF6FF',
-              fontSize: '18'
-            }
-          // backgroundColor: 'rgba(74, 144, 226, 0.84)',
-          // formatter: (params) => {
-          //   return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>`
-          // }
-          },
-          legend: {
-            orient: 'vertical',
-            right: 40,
-            top: 55,
-            // textStyle: {
-            //   color: '#EEF6FF',
-            //   padding: [20, 0, 18, 4],
-            //   fontSize: '14'
-            // },
-            itemWidth: 10,
-            itemHeight: 10,
-            icon: 'circle',
-            selectedMode: false,
-            data: ['大湾', '张家湾'],
-            formatter: (name) => {
-            // `${name}  ${((flag.value / count).toFixed(2)) * 100 + '%'}`
-              const count = arrCount(optionData)
-              if (optionData) {
-                const flag = optionData?.find(item => name === item.name)
-                if (flag) {
-                  const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
-                  return [`{name|${name}}`, `{num|${percentage}}`]
-                }
-              }
-              return name
-            },
-            textStyle: {
-              rich: {
-                name: {
-                  fontSize: 18,
-                  color: '#EEF6FF',
-                  padding: [20, 0, 20, 4],
-                  fontFamily: 'DingTalk_JinBuTi_Regular'
-                },
-                num: {
-                  fontSize: 20,
-                  fontWeight: 600,
-                  padding: [20, 0, 20, 15],
-                  color: '#4C90FF',
-                  fontFamily: 'DingTalk_JinBuTi_Regular'
-                }
+
+      // 初始化图表
+      this.myChart = this.$echarts.init(chartDom)
+
+      // 15. 抽离option配置，拆分基础配置和媒体查询配置，提升可维护性
+      const baseOption = {
+        tooltip: {
+          show: false,
+          trigger: 'item',
+          position: 'bottom',
+          textStyle: {
+            color: '#EEF6FF',
+            fontSize: 18
+          }
+        },
+        legend: {
+          orient: 'vertical',
+          right: 40,
+          top: 55,
+          itemWidth: 10,
+          itemHeight: 10,
+          icon: 'circle',
+          selectedMode: false,
+          data: ['大湾', '张家湾'],
+          formatter: (name) => this.formatLegendName(name, chartData),
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 18,
+                color: '#EEF6FF',
+                padding: [20, 0, 20, 4],
+                fontFamily: 'DingTalk_JinBuTi_Regular'
+              },
+              num: {
+                fontSize: 24,
+                fontWeight: 600,
+                padding: [20, 0, 20, 15],
+                color: '#4C90FF',
+                fontFamily: 'DingTalk_JinBuTi_Regular'
               }
             }
-          },
-          // 中心图片配置(关键代码)
-          graphic: [
-            {
-              type: 'image',
-              id: 'logo',
-              left: '8.5%', // 调整图片位置
-              top: '22%', // 调整图片位置
-              z: -10,
-              bounding: 'raw',
-              rotation: 0, // 旋转
-              origin: [64.5, 32.5], // 中心点
-              scale: [1.0, 1.0], // 缩放
-              // 设置图片样式
-              style: {
-                image: centerImg,
-                width: 132,
-                height: 131,
-                opacity: 1
-              }
+          }
+        },
+        graphic: [
+          {
+            type: 'image',
+            id: 'logo',
+            left: '8.5%',
+            top: '22%',
+            z: -10,
+            bounding: 'raw',
+            rotation: 0,
+            origin: [64.5, 32.5],
+            scale: [1.0, 1.0],
+            style: {
+              image: centerImg,
+              width: 132,
+              height: 131,
+              opacity: 1
             }
-          ],
-          series: [
-            {
-              name: '今日累计借阅',
-              type: 'pie',
-              left: '-50%',
-              radius: ['60%', '70%'],
-              avoidLabelOverlap: false,
+          }
+        ],
+        series: [
+          {
+            name: '今日累计借阅',
+            type: 'pie',
+            left: '-50%',
+            radius: ['60%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: true
+            },
+            itemStyle: {
+              borderWidth: 2,
+              borderColor: 'rgba(16,16,21,0.4)'
+            },
+            emphasis: {
               label: {
-                show: false,
-                position: 'center'
-              },
-              labelLine: {
-                show: true
-              },
-              itemStyle: {
-                borderWidth: 2,
-                borderColor: 'rgba(16,16,21,0.4)'
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  // 自定义文字显示，函数默认params接受当前指向所有属性
-                  formatter: function(params) {
-                    const { value, name } = params
-                    return [
-                      `{c| ${value}}`,
-                      `{b| ${name}}`
-                    ].join('\n') // 换行
+                show: true,
+                formatter: ({ value, name }) => [ // 16. 解构赋值简化代码
+                  `{c| ${value}}`,
+                  `{b| ${name}}`
+                ].join('\n'),
+                rich: {
+                  c: {
+                    fontSize: 24,
+                    fontWeight: 600,
+                    color: '#317FFF',
+                    fontFamily: 'DingTalk_JinBuTi_Regular',
+                    lineHeight: 34
                   },
-                  rich: {
-                    c: {
-                      fontSize: 24,
-                      fontWeight: 600,
-                      color: '#317FFF',
-                      fontFamily: 'DingTalk_JinBuTi_Regular',
-                      lineHeight: 34
-                    },
-                    b: {
-                      fontSize: 18,
-                      color: '#fff',
-                      fontFamily: 'DingTalk_JinBuTi_Regular'
-                    }
+                  b: {
+                    fontSize: 18,
+                    color: '#fff',
+                    fontFamily: 'DingTalk_JinBuTi_Regular'
                   }
                 }
-              },
-              color: ['#317FFF', '#31DFFF'],
-              data: optionData
-            }
-          ]
-        },
-        media: [
-          {
-            query: {
-              maxWidth: 317
+              }
             },
-            option: {
-              legend: {
-                right: 30,
-                top: 'center',
-                textStyle: {
-                  rich: {
-                    name: {
-                      fontSize: 14
-                    },
-                    num: {
-                      fontSize: 16
-                    }
-                  }
+            color: ['#FFD14F', '#317FFF'],
+            data: chartData
+          }
+        ]
+      }
+
+      const mediaOption = [
+        {
+          query: { maxWidth: 317 },
+          option: {
+            legend: {
+              right: 30,
+              top: 'center',
+              textStyle: {
+                rich: {
+                  name: { fontSize: 14 },
+                  num: { fontSize: 16 }
                 }
-              },
-              // 中心图片配置(关键代码)
-              graphic: [
-                {
-                  left: '8%', // 调整图片位置
-                  top: '26%', // 调整图片位置
-                  z: -10,
-                  bounding: 'raw',
-                  rotation: 0, // 旋转
-                  origin: [64.5, 32.5], // 中心点
-                  scale: [1.0, 1.0], // 缩放
-                  // 设置图片样式
-                  style: {
-                    image: centerImg,
-                    width: 110,
-                    height: 110,
-                    opacity: 1
-                  }
+              }
+            },
+            graphic: [
+              {
+                left: '8%',
+                top: '26%',
+                z: -10,
+                bounding: 'raw',
+                rotation: 0,
+                origin: [64.5, 32.5],
+                scale: [1.0, 1.0],
+                style: {
+                  image: centerImg,
+                  width: 110,
+                  height: 110,
+                  opacity: 1
                 }
-              ],
-              series: [
-                {
-                  type: 'pie',
-                  radius: ['50%', '55%'],
-                  emphasis: {
-                    label: {
-                      rich: {
-                        c: {
-                          fontSize: 22,
-                          lineHeight: 28
-                        },
-                        b: {
-                          fontSize: 16
-                        }
-                      }
+              }
+            ],
+            series: [
+              {
+                type: 'pie',
+                radius: ['50%', '55%'],
+                emphasis: {
+                  label: {
+                    rich: {
+                      c: { fontSize: 22, lineHeight: 28 },
+                      b: { fontSize: 16 }
                     }
                   }
                 }
-              ]
-            }
+              }
+            ]
           }
-        ]
-      }
-      myChart.setOption(option)
-      // // 然后可以通过定时器来旋转背景图
-      // var step = 0
-      // setInterval(function() {
-      //   // 每秒旋转1度
-      //   myChart.setOption({
-      //     graphic: {
-      //       id: 'logo',
-      //       style: {
-      //         transform: 'rotate(' + (step++ % 360) + 'deg)' // 持续旋转
-      //       }
-      //     }
-      //   })
-      // }, 1000)
+        }
+      ]
+
+      // 合并配置并设置
+      const option = { baseOption, media: mediaOption }
+      this.myChart.setOption(option)
+
+      // 自动轮播tooltip
+      this.$LoopShowTooltip(this.myChart, baseOption, { loopSeries: true, interval: 4000 })
 
-      this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
+      // 17. 监听窗口大小变化，自适应图表
+      window.addEventListener('resize', this.handleResize)
+    },
+
+    /**
+     * 18. 窗口大小变化时重绘图表
+     */
+    handleResize() {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
     }
+  },
+
+  // 19. 移除无用的created钩子
+  beforeUnmount() {
+    // 20. 移除resize监听，避免内存泄漏
+    window.removeEventListener('resize', this.handleResize)
+    this.destroyChart()
   }
 }
-
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped> // 21. 添加scoped，避免样式污染
 @import "~@/assets/styles/index.scss";
 @import "~@/assets/styles/font-some.css";
 
+// 22. 样式抽离，便于维护和修改
+.chart-container {
+  height: calc(100% - 200px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  .today-type-chart {
+    width: 400px;
+    height: 230px;
+  }
+}
 </style>
diff --git a/src/components/echart/yearCircle.vue b/src/components/echart/yearCircle.vue
index 751f71a..d03ec16 100644
--- a/src/components/echart/yearCircle.vue
+++ b/src/components/echart/yearCircle.vue
@@ -1,289 +1,312 @@
 <template>
-  <div style="height: calc(100% - 200px); display: flex; align-items: center; justify-content: flex-start;">
-    <div id="modelType" style="width:400px; height: 230px" />
+  <!-- 1. 内联样式抽离为class，提升可读性和维护性 -->
+  <div class="year-chart-container">
+    <!-- 2. 使用ref替代getElementById，符合Vue规范 -->
+    <div ref="modelTypeRef" class="model-type-chart" />
   </div>
 </template>
 
 <script>
+// 3. 图片引入改为ES6 import规范，替代require
+import centerImg from '@/assets/images/circle-bg.png'
+
 export default {
+  name: 'YearTypePieChart', // 4. 增加组件名，便于调试和复用
   props: {
     yearAllNum: {
       type: Object,
-      require: true,
-      default: function() {
-        return {}
-      }
+      required: true, // 5. 修正拼写错误 require -> required
+      default: () => ({}) // 6. 简化默认值写法
     }
   },
   data() {
     return {
+      myChart: null, // 7. 存储图表实例，便于销毁和重绘
+      resizeTimer: null // 8. 防抖定时器，优化resize性能
     }
   },
   watch: {
-    'yearAllNum': {
+    yearAllNum: {
       handler(val) {
-        setTimeout(() => {
-          this.initYearCircle()
+        // 9. 空值保护：值为空时直接返回，避免无效执行
+        if (!val) return
+
+        // 10. 防抖处理，避免频繁触发图表初始化
+        clearTimeout(this.initDebounceTimer)
+        this.initDebounceTimer = setTimeout(() => {
+          this.$nextTick(() => {
+            this.initYearCircle()
+          })
         }, 100)
       },
       immediate: true,
       deep: true
     }
   },
-  created() {
-  },
-  beforeDestroy() {
-  },
   mounted() {
+    // 11. 初始化图表
     this.initYearCircle()
+    // 12. 监听窗口大小变化，实现图表自适应
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeUnmount() {
+    // 13. 组件销毁时清理资源，避免内存泄漏
+    window.removeEventListener('resize', this.handleResize)
+    this.destroyChart()
+    clearTimeout(this.initDebounceTimer)
   },
   methods: {
+    /**
+     * 14. 销毁图表实例（抽离通用逻辑）
+     */
+    destroyChart() {
+      if (this.myChart) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    },
+
+    /**
+     * 15. 计算数组value总和（抽离独立方法，提升可读性）
+     * @param {Array} arr - 数据数组
+     * @returns {Number} 总和
+     */
+    calculateTotal(arr) {
+      if (!Array.isArray(arr) || arr.length === 0) return 0
+      return arr.reduce((total, item) => total + (item.value || 0), 0)
+    },
+
+    /**
+     * 16. 构建图例格式化文本（抽离独立方法）
+     * @param {String} name - 图例名称
+     * @param {Array} data - 图表数据
+     * @returns {Array|String} 格式化后的文本
+     */
+    formatLegendName(name, data) {
+      const total = this.calculateTotal(data)
+      const targetItem = data.find(item => item.name === name)
+
+      if (!targetItem) return name
+
+      const percentage = total > 0 ? `${((targetItem.value / total) * 100).toFixed(0)}%` : '0%'
+      return [`{name|${name}}`, `{num|${percentage}}`]
+    },
+
+    /**
+     * 初始化本年类型饼图
+     */
     initYearCircle() {
-      const optionData = [
+      // 17. 获取图表容器DOM，增加判空保护
+      const chartDom = this.$refs.modelTypeRef
+      if (!chartDom) {
+        console.warn('图表容器未找到，初始化失败')
+        return
+      }
+
+      // 18. 数据处理抽离，提升代码可读性
+      const chartData = [
         { value: this.yearAllNum.headerLib || 0, name: '大湾' },
         { value: this.yearAllNum.branchLib || 0, name: '张家湾' }
       ]
-      const myChart = this.$echarts.init(document.getElementById('modelType'))
 
-      function arrCount(arr) {
-        let count = 0
-        arr.forEach(item => {
-          count = count + item.value
-        })
-        return count
-      }
-      var centerImg = require('@/assets/images/circle-bg.png')
-      const option = {
-        baseOption: {
-          tooltip: {
-            show: false,
-            trigger: 'item',
-            position: 'bottom',
-            textStyle: {
-              color: '#EEF6FF',
-              fontSize: '18'
-            }
-          // backgroundColor: 'rgba(74, 144, 226, 0.84)',
-          // formatter: (params) => {
-          //   return `<div>${params.seriesName} <br> ${params.data.name}：${this.$parent.formatter(params.data.value)} (${params.percent}%)</div>`
-          // }
-          },
-          legend: {
-            orient: 'vertical',
-            right: 40,
-            top: 55,
-            // textStyle: {
-            //   color: '#EEF6FF',
-            //   padding: [20, 0, 18, 4],
-            //   fontSize: '14'
-            // },
-            itemWidth: 10,
-            itemHeight: 10,
-            icon: 'circle',
-            selectedMode: false,
-            data: ['大湾', '张家湾'],
-            formatter: (name) => {
-            // `${name}  ${((flag.value / count).toFixed(2)) * 100 + '%'}`
-              const count = arrCount(optionData)
-              if (optionData) {
-                const flag = optionData?.find(item => name === item.name)
-                if (flag) {
-                  const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
-                  return [`{name|${name}}`, `{num|${percentage}}`]
-                }
-              }
-              return name
-            },
-            textStyle: {
-              rich: {
-                name: {
-                  fontSize: 18,
-                  color: '#EEF6FF',
-                  fontFamily: 'DingTalk_JinBuTi_Regular',
-                  padding: [20, 0, 20, 4]
-                },
-                num: {
-                  fontSize: 20,
-                  fontWeight: 600,
-                  padding: [20, 0, 20, 15],
-                  color: '#4C90FF',
-                  fontFamily: 'DingTalk_JinBuTi_Regular'
-                }
-              }
-            }
-            // formatter: function(name) {
-            //   let tarValue
-            //   const count = arrCount(optionData)
-            //   for (let i = 0; i < optionData.length; i++) {
-            //     if (data[i].name === name) {
-            //       tarValue = data[i].value
-            //     }
-            //   }
+      // 19. 先销毁旧实例，避免多实例叠加
+      this.destroyChart()
+
+      // 20. 初始化图表实例
+      this.myChart = this.$echarts.init(chartDom)
 
-          //   return [`{name|${name}}`, `{num|${((tarValue / count).toFixed(2)) * 100 + '%'}}`].join('\n')
-          // }
-          },
-          // 中心图片配置(关键代码)
-          graphic: [
-            {
-              type: 'image',
-              id: 'logo',
-              left: '8.5%', // 调整图片位置
-              top: '22%', // 调整图片位置
-              z: -10,
-              bounding: 'raw',
-              rotation: 0, // 旋转
-              origin: [64.5, 32.5], // 中心点
-              scale: [1.0, 1.0], // 缩放
-              // 设置图片样式
-              style: {
-                image: centerImg,
-                width: 132,
-                height: 131,
-                opacity: 1
+      // 21. 拆分option配置，降低函数复杂度
+      const baseOption = {
+        tooltip: {
+          show: false,
+          trigger: 'item',
+          position: 'bottom',
+          textStyle: {
+            color: '#EEF6FF',
+            fontSize: 18
+          }
+        },
+        legend: {
+          orient: 'vertical',
+          right: 40,
+          top: 55,
+          itemWidth: 10,
+          itemHeight: 10,
+          icon: 'circle',
+          selectedMode: false,
+          data: ['大湾', '张家湾'],
+          formatter: (name) => this.formatLegendName(name, chartData),
+          textStyle: {
+            rich: {
+              name: {
+                fontSize: 18,
+                color: '#EEF6FF',
+                fontFamily: 'DingTalk_JinBuTi_Regular',
+                padding: [20, 0, 20, 4]
+              },
+              num: {
+                fontSize: 24,
+                fontWeight: 600,
+                padding: [20, 0, 20, 15],
+                color: '#4C90FF',
+                fontFamily: 'DingTalk_JinBuTi_Regular'
               }
             }
-          ],
-          series: [
-            {
-              name: '本年累计借阅',
-              type: 'pie',
-              left: '-50%',
-              radius: ['60%', '70%'],
-              avoidLabelOverlap: false,
+          }
+        },
+        graphic: [
+          {
+            type: 'image',
+            id: 'logo',
+            left: '8.5%',
+            top: '22%',
+            z: -10,
+            bounding: 'raw',
+            rotation: 0,
+            origin: [64.5, 32.5],
+            scale: [1.0, 1.0],
+            style: {
+              image: centerImg,
+              width: 132,
+              height: 131,
+              opacity: 1
+            }
+          }
+        ],
+        series: [
+          {
+            name: '本年累计借阅',
+            type: 'pie',
+            left: '-50%',
+            radius: ['60%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: true
+            },
+            itemStyle: {
+              borderWidth: 2,
+              borderColor: 'rgba(16,16,21,0.4)'
+            },
+            emphasis: {
               label: {
-                show: false,
-                position: 'center'
-              },
-              labelLine: {
-                show: true
-              },
-              itemStyle: {
-                borderWidth: 2,
-                borderColor: 'rgba(16,16,21,0.4)'
-              },
-              emphasis: {
-                label: {
-                  show: true,
-                  // 自定义文字显示，函数默认params接受当前指向所有属性
-                  formatter: function(params) {
-                    const { value, name } = params
-                    return [
-                      `{c| ${value}}`,
-                      `{b| ${name}}`
-                    ].join('\n') // 换行
+                show: true,
+                // 22. 解构赋值简化代码
+                formatter: ({ value, name }) => [
+                  `{c| ${value}}`,
+                  `{b| ${name}}`
+                ].join('\n'),
+                rich: {
+                  c: {
+                    fontSize: 24,
+                    fontWeight: 600,
+                    color: '#317FFF',
+                    fontFamily: 'DingTalk_JinBuTi_Regular',
+                    lineHeight: 34
                   },
-                  rich: {
-                    c: {
-                      fontSize: 24,
-                      fontWeight: 600,
-                      color: '#317FFF',
-                      fontFamily: 'DingTalk_JinBuTi_Regular',
-                      // color: {
-                      //   type: 'linear',
-                      //   x: 0,
-                      //   y: 0,
-                      //   x2: 0,
-                      //   y2: 1,
-                      //   colorStops: [
-                      //     {
-                      //       offset: 0,
-                      //       color: 'red' // 0% 处的颜色
-                      //     },
-                      //     {
-                      //       offset: 1,
-                      //       color: 'yellow' // 100% 处的颜色
-                      //     }
-                      //   ],
-                      //   globalCoord: false // 缺省为 false
-                      // },
-                      lineHeight: 34
-                    },
-                    b: {
-                      fontSize: 18,
-                      color: '#fff',
-                      fontFamily: 'DingTalk_JinBuTi_Regular'
-                    }
+                  b: {
+                    fontSize: 18,
+                    color: '#fff',
+                    fontFamily: 'DingTalk_JinBuTi_Regular'
                   }
                 }
-              },
-              color: ['#317FFF', '#31DFFF'],
-              data: optionData
-            }
-          ]
-        },
-        media: [
-          {
-            query: {
-              maxWidth: 317
+              }
             },
-            option: {
-              legend: {
-                right: 30,
-                top: 'center',
-                textStyle: {
-                  rich: {
-                    name: {
-                      fontSize: 14
-                    },
-                    num: {
-                      fontSize: 16
-                    }
-                  }
+            color: ['#FFD14F', '#317FFF'],
+            data: chartData
+          }
+        ]
+      }
+
+      const mediaOption = [
+        {
+          query: { maxWidth: 317 },
+          option: {
+            legend: {
+              right: 30,
+              top: 'center',
+              textStyle: {
+                rich: {
+                  name: { fontSize: 14 },
+                  num: { fontSize: 16 }
                 }
-              },
-              // 中心图片配置(关键代码)
-              graphic: [
-                {
-                  left: '8%', // 调整图片位置
-                  top: '26%', // 调整图片位置
-                  z: -10,
-                  bounding: 'raw',
-                  rotation: 0, // 旋转
-                  origin: [64.5, 32.5], // 中心点
-                  scale: [1.0, 1.0], // 缩放
-                  // 设置图片样式
-                  style: {
-                    image: centerImg,
-                    width: 110,
-                    height: 110,
-                    opacity: 1
-                  }
+              }
+            },
+            graphic: [
+              {
+                left: '8%',
+                top: '26%',
+                z: -10,
+                bounding: 'raw',
+                rotation: 0,
+                origin: [64.5, 32.5],
+                scale: [1.0, 1.0],
+                style: {
+                  image: centerImg,
+                  width: 110,
+                  height: 110,
+                  opacity: 1
                 }
-              ],
-              series: [
-                {
-                  type: 'pie',
-                  radius: ['50%', '55%'],
-                  emphasis: {
-                    label: {
-                      rich: {
-                        c: {
-                          fontSize: 22,
-                          lineHeight: 28
-                        },
-                        b: {
-                          fontSize: 16
-                        }
-                      }
+              }
+            ],
+            series: [
+              {
+                type: 'pie',
+                radius: ['50%', '55%'],
+                emphasis: {
+                  label: {
+                    rich: {
+                      c: { fontSize: 22, lineHeight: 28 },
+                      b: { fontSize: 16 }
                     }
                   }
                 }
-              ]
-            }
+              }
+            ]
           }
-        ]
-      }
-      myChart.setOption(option)
-      this.$LoopShowTooltip(myChart, option.baseOption, { loopSeries: true, interval: 4000 })
+        }
+      ]
+
+      // 23. 合并配置并设置
+      const option = { baseOption, media: mediaOption }
+      this.myChart.setOption(option)
+
+      // 自动轮播tooltip
+      this.$LoopShowTooltip(this.myChart, baseOption, { loopSeries: true, interval: 4000 })
+    },
+
+    /**
+     * 24. 窗口大小变化时防抖重绘图表
+     */
+    handleResize() {
+      clearTimeout(this.resizeTimer)
+      this.resizeTimer = setTimeout(() => {
+        if (this.myChart) {
+          this.myChart.resize()
+        }
+      }, 100)
     }
   }
 }
-
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped> // 25. 添加scoped，避免样式污染全局
 @import "~@/assets/styles/index.scss";
 @import "~@/assets/styles/font-some.css";
 
+// 26. 样式抽离，便于维护
+.year-chart-container {
+  height: calc(100% - 200px);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  .model-type-chart {
+    width: 400px;
+    height: 230px;
+  }
+}
 </style>
diff --git a/src/main.js b/src/main.js
index ce11ba1..60193a3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,7 +26,7 @@ import { Message } from 'element-ui'
 Vue.prototype.$message = Message
 
 // 馆代码 1201为东西湖馆代码 / 本地测试用FTZN
-Vue.prototype.libcode = 'DWSF'
+Vue.prototype.libcode = 'GD'
 
 // 全局注册过滤 - 时间
 import { parseTime, getFormattedDate } from '@/utils/index.js'
diff --git a/src/views/index.vue b/src/views/index.vue
index 2351e31..c7649fb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -12,7 +12,8 @@
     </keep-alive>
     <PageTwo v-if="currentIndex === 1" />
     <PageThree v-if="currentIndex=== 2" />
-    <PageFour v-if="currentIndex === 3" /> -->
+    <PageFour v-if="currentIndex === 3" />
+    <PageFive v-if="currentIndex === 4" /> -->
 
     <keep-alive>
       <component :is="currentPage && currentPage.title" />
@@ -43,6 +44,7 @@ import PageOne from '@/views/pageOne/index.vue'
 import PageTwo from '@/views/map/index.vue'
 import PageThree from '@/views/pageThree/index.vue'
 import PageFour from '@/views/pageFour/index.vue'
+import PageFive from '@/views/pageFive/index.vue'
 export default {
   name: 'Home',
   components: {
@@ -50,7 +52,8 @@ export default {
     PageOne,
     PageTwo,
     PageThree,
-    PageFour
+    PageFour,
+    PageFive
   },
   inject: ['reload'],
   data() {
@@ -64,7 +67,8 @@ export default {
         { id: 1, title: 'PageOne', delayed: 20, isShow: false },
         { id: 2, title: 'PageTwo', delayed: 20, isShow: false },
         { id: 3, title: 'PageThree', delayed: 20, isShow: false },
-        { id: 4, title: 'PageFour', delayed: 20, isShow: false }
+        { id: 5, title: 'PageFour', delayed: 20, isShow: false },
+        { id: 6, title: 'PageFive', delayed: 20, isShow: false }
       ],
       swiperOption: null,
       loadingTtimer: null,
@@ -87,6 +91,8 @@ export default {
             return 'PageOne'
           case 'PageFour':
             return 'PageFour'
+          case 'PageFive':
+            return 'PageFive'
           default:
             return null
         }
@@ -166,7 +172,7 @@ export default {
         localStorage.setItem('wecharQrCodeSrc', this.wecharQrCodeSrc)
 
         const selectorder = result.selectorder
-        const showDurations = { 1: result.show1, 2: result.show2, 3: result.show3, 4: result.show4 }
+        const showDurations = { 1: result.show1, 2: result.show2, 3: result.show3, 4: result.show4, 5: result.show4, 6: result.show5 }
         this.orderIds = selectorder.split(',').map(id => parseInt(id.trim()))
 
         const updatedPageData = this.orderIds.map((id, index) => {
diff --git a/src/views/map/index.vue b/src/views/map/index.vue
index ac742df..0e7fa9d 100644
--- a/src/views/map/index.vue
+++ b/src/views/map/index.vue
@@ -59,17 +59,18 @@
           <p>本年累计办证人数</p>
           <p class="num"><span>{{ cardTotal }}</span><i>人</i></p>
         </div>
-        <div class="lending-ranking">
-          <h5>借阅Top10</h5>
-          <div class="ranking-cont">
+        <div class="lending-ranking" style="padding: 0;">
+          <!-- <h5>借阅Top10</h5> -->
+          <div class="database-title" style="margin-bottom: 20px;">读者借阅排行榜</div>
+          <div class="ranking-cont" style="margin: 0.25rem 0.375rem 0 0.3125rem;">
             <ul class="ranking-title">
               <li style="width: 0.8rem;">排名</li>
               <li style="width: 1.25rem; text-align: left; ">姓名</li>
               <li style="flex:1;" />
               <li style="width: 1.75rem; text-align: right; padding-right: .25rem;">借阅次数</li>
             </ul>
-            <ul class="ranking-list">
-              <li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
+            <ul class="ranking-list" style="padding-top: 10px;">
+              <li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }" style="font-size: .28rem !important; line-height: 36px !important;">
                 <div style="width: 1rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
                 <div style="width: 1.25rem; text-align: left; ">{{ item.RDNAME }}</div>
                 <div class="ranking-progress" style="flex:1; align-self: center;">
@@ -368,12 +369,13 @@ export default {
                 sort: Object.keys(libCode).indexOf(library.tcId) + 1,
                 coordinate: libCode[library.tcId],
                 countCard: gdData?.countCard || 0
+
               }
             }
           }).sort((a, b) => a.sort - b.sort)
 
           this.libInfoData = updatedLibraries
-          // console.log('this.libInfoData', this.libInfoData)
+          console.log('this.libInfoData', this.libInfoData)
           if (localStorage.getItem('countItem')) {
             this.count = parseInt(localStorage.getItem('countItem'))
           } else {
@@ -401,12 +403,22 @@ export default {
       var mapImg = document.createElement('img')
       mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
       mapImg.src = require('../../assets/images/map-bg2.png')
+
+      const colorMap = {
+        '葛店城市书房·大湾分馆': '#FF7420', // 红色
+        '葛店城市书房·张家湾分馆': '#4ECDC4' // 青色
+        // '书房3': '#FFD166', // 黄色
+        // '书房4': '#6A0572' // 紫色
+      }
+
       var XAData = this.libInfoData.map(item => {
+        const pointColor = colorMap[item.name] || '#FFFFFF' // 默认白色
         return [
-          { name: '大湾城市书房' },
-          { name: item.name, value: item.address }
+          { name: '葛店城市书房·大湾分馆', color: pointColor },
+          { name: item.name, value: item.address, color: pointColor }
         ]
       })
+
       var convertData = function(data) {
         var res = []
         for (var i = 0; i < data.length; i++) {
@@ -418,29 +430,33 @@ export default {
               fromName: dataItem[0].name,
               toName: dataItem[1].name,
               coords: [fromCoord, toCoord],
-              value: dataItem[1].value
+              value: dataItem[1].value,
+              color: dataItem[1].color // 传递颜色属性
             })
           }
         }
         return res
       }
+
       var series = [];
       [
-        ['大湾城市书房', XAData]
+        ['葛店城市书房·大湾分馆', XAData]
       ].forEach(function(item, i) {
         series.push(
           {
             name: item[0],
             type: 'effectScatter',
-            symbol: 'image://' + require('@/assets/images/map_10.png'),
-            symbolSize: [26, 20],
+            // symbol: 'image://' + require('@/assets/images/map_10.png'),
+            symbol: 'circle',
+            symbolSize: [24, 14],
             coordinateSystem: 'geo',
             zlevel: 3,
             selectedMode: false,
             rippleEffect: {
-              // brushType: 'stroke',
-              color: 'transparent'
-              // scale: 1.5
+              brushType: 'fill', // 填充模式
+              color: 'rgba(255,255,255,0.4)',
+              scale: 4, // 涟漪扩散大小（可调整）
+              period: 4 // 动画周期
             },
             label: {
               normal: {
@@ -451,11 +467,54 @@ export default {
             },
             itemStyle: {
               normal: {
-                color: 'transparent',
+                color: function(params) {
+                  console.log('点位名称:', params.name) // 现在能打印出值
+
+                  // 定义渐变生成函数，复用逻辑
+                  function createRadialGradient(centerColor, edgeColor) {
+                    // 创建径向渐变：x0, y0, r0, x1, y1, r1
+                    // (0.5,0.5)是中心点，0是中心半径，(0.5,0.5)是外圆中心，1是外圆半径
+                    return {
+                      type: 'radial',
+                      x: 0.5,
+                      y: 0.5,
+                      r: 1,
+                      colorStops: [{
+                        offset: 0, // 中心位置
+                        color: centerColor // 中心颜色
+                      }, {
+                        offset: 1, // 边缘位置
+                        color: edgeColor // 边缘颜色（可以浅一点或透明）
+                      }],
+                      global: false // 局部渐变，跟随元素
+                    }
+                  }
+
+                  switch (params.name) {
+                    case '葛店城市书房·大湾分馆':
+                      // 橙红渐变：中心深橙红，边缘浅橙红
+                      return createRadialGradient('#FF7420', '#FFB380')
+                    case '葛店城市书房·张家湾分馆':
+                      // 青蓝渐变：中心深青蓝，边缘浅青蓝
+                      return createRadialGradient('#4ECDC4', '#99E6E0')
+                    default:
+                      // 白色渐变：中心纯白，边缘浅灰（避免全白看不见）
+                      return createRadialGradient('#FFFFFF', '#F0F0F0')
+                  }
+                },
                 areaColor: 'transparent'
               },
               emphasis: {
-                areaColor: '#2B91B7'
+                shadowColor: function(params) {
+                  switch (params.name) {
+                    case '葛店城市书房·大湾分馆':
+                      return '#FF7420'
+                    case '葛店城市书房·张家湾分馆':
+                      return '#4ECDC4'
+                    default:
+                      return '#FFFFFF'
+                  }
+                }
               }
             },
             tooltip: {
@@ -465,7 +524,8 @@ export default {
               return {
                 name: dataItem[1].name,
                 value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '',
-                place: dataItem[1].value
+                place: dataItem[1].value,
+                color: dataItem[1].color
               }
             })
           },
@@ -477,12 +537,16 @@ export default {
               show: true,
               period: 6,
               trailLength: 0.7,
-              color: 'red', // arrow箭头的颜色
+              color: function(params) {
+                return params.data.color || 'red'
+              },
               symbolSize: 3
             },
             lineStyle: {
               normal: {
-                color: '#fff',
+                color: function(params) {
+                  return params.data.color || '#fff'
+                },
                 width: 0,
                 curveness: 0.2
               }
@@ -496,18 +560,20 @@ export default {
             name: item[0],
             type: 'lines',
             zlevel: 2,
-            symbol: ['none', 'arrow'],
-            symbolSize: 10, // 固定箭头大小
+            symbol: ['none', 'none'],
+            symbolSize: 10,
             effect: {
               show: true,
               period: 6,
               trailLength: 0,
               symbol: 'arrow',
-              symbolSize: 10 // 动态箭头大小
+              symbolSize: 6
             },
             lineStyle: {
               normal: {
-                color: '#fff',
+                color: function(params) {
+                  return params.data.color || '#fff'
+                },
                 width: 1,
                 opacity: 0.6,
                 curveness: 0.2
@@ -524,13 +590,11 @@ export default {
       this.seriesData = series
       const initOption = {
         baseOption: {
-          // 提示框
           tooltip: {
             trigger: 'item',
             triggerOn: 'click',
-            showContent: true, // 是否显示提示框浮层
-            alwaysShowContent: true, // 是否一直显示提示框内容
-            // hideDelay: 100, // 浮层隐藏的延迟
+            showContent: true,
+            alwaysShowContent: true,
             enterable: 'mousemove|click',
             padding: [0, 0, 0, 0],
             backgroundColor: null,
@@ -539,21 +603,24 @@ export default {
             },
             formatter: (params, ticket, callback) => {
               if (params.seriesType === 'effectScatter') {
+                const pointColor = params.data.color || '#FF7420'
                 const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
+
+                // 动态设置边框颜色和背景渐变
                 return `<div class='tooltip-main' >
-                        <div class='tooltip-line'></div>
-                        <div class='tooltip-content'>
-                          <div class='title'>${params.data.name}</div>
-                         ${addressLine}
-                        </div>
-                      </div>`
+                    <div class='tooltip-line' style="background: linear-gradient(0deg, ${pointColor} 0%, rgba(255,255,255,0) 100%);"></div>
+                    <div class='tooltip-content' style="border-color: ${pointColor}; background-color: rgba(0,31,87,0.8);">
+                      <div class='title' style="background: linear-gradient(90deg, ${pointColor}, rgba(255,255,255,0.22));">${params.data.name}</div>
+                     ${addressLine}
+                    </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
@@ -565,7 +632,7 @@ export default {
             {
               map: 'qiyang',
               aspectScale: 1,
-              zoom: 1.1,
+              zoom: 0.96,
               top: '6%', // 距离顶部的位置，每层向下一个百分比
               left: '11%',
               roam: false, // 是否开启平游或缩放
@@ -617,7 +684,7 @@ export default {
             {
               map: 'qiyang',
               aspectScale: 1,
-              zoom: 1.1,
+              zoom: 0.96,
               top: '6%', // 距离顶部的位置，每层向下一个百分比
               left: '11%',
               roam: false, // 是否开启平游或缩放
@@ -659,7 +726,7 @@ export default {
             {
               map: 'qiyang',
               aspectScale: 1,
-              zoom: 1.1,
+              zoom: 0.96,
               top: '7%', // 根据自己需要来设置
               left: '10%',
               roam: false, // 是否开启平游或缩放
@@ -684,7 +751,7 @@ export default {
             {
               map: 'qiyang',
               aspectScale: 1,
-              zoom: 1.1,
+              zoom: 0.96,
               top: '9%', // 根据自己需要来设置
               left: '9%',
               roam: false,
@@ -708,7 +775,7 @@ export default {
             {
               map: 'qiyang',
               aspectScale: 1,
-              zoom: 1.1,
+              zoom: 0.96,
               top: '11%', // 根据自己需要来设置
               left: '8%',
               roam: false,
@@ -732,7 +799,7 @@ export default {
             {
               map: 'qiyang',
               aspectScale: 1,
-              zoom: 1.1,
+              zoom: 0.96,
               top: '12%', // 根据自己需要来设置
               left: '10%',
               roam: false,
@@ -775,6 +842,387 @@ export default {
         this.myChart.setOption(initOption)
       }, 200)
     },
+    // initChart() {
+    //   this.$echarts.registerMap('qiyang', mapJson) // 注册map
+    //   this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化
+
+    //   var mapImg = document.createElement('img')
+    //   mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
+    //   mapImg.src = require('../../assets/images/map-bg2.png')
+    //   var XAData = this.libInfoData.map(item => {
+    //     return [
+    //       { name: '葛店城市书房·大湾分馆' },
+    //       { name: item.name, value: item.address }
+    //     ]
+    //   })
+    //   var convertData = function(data) {
+    //     var res = []
+    //     for (var i = 0; i < data.length; i++) {
+    //       var dataItem = data[i]
+    //       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],
+    //         type: 'effectScatter',
+    //         symbol: 'image://' + require('@/assets/images/map_10.png'),
+    //         symbolSize: [26, 20],
+    //         coordinateSystem: 'geo',
+    //         zlevel: 3,
+    //         selectedMode: false,
+    //         rippleEffect: {
+    //           // brushType: 'stroke',
+    //           color: 'transparent'
+    //           // scale: 1.5
+    //         },
+    //         label: {
+    //           normal: {
+    //             show: true,
+    //             position: 'right',
+    //             formatter: ''
+    //           }
+    //         },
+    //         itemStyle: {
+    //           normal: {
+    //             color: 'transparent',
+    //             areaColor: 'transparent'
+    //           },
+    //           emphasis: {
+    //             areaColor: '#2B91B7'
+    //           }
+    //         },
+    //         tooltip: {
+    //           show: true
+    //         },
+    //         data: item[1].map(function(dataItem) {
+    //           return {
+    //             name: dataItem[1].name,
+    //             value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '',
+    //             place: dataItem[1].value
+    //           }
+    //         })
+    //       },
+    //       {
+    //         name: item[0],
+    //         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
+    //           }
+    //         },
+    //         tooltip: {
+    //           show: false
+    //         },
+    //         data: convertData(item[1])
+    //       },
+    //       {
+    //         name: item[0],
+    //         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
+    //           }
+    //         },
+    //         tooltip: {
+    //           show: false
+    //         },
+    //         data: convertData(item[1])
+    //       }
+    //     )
+    //   })
+
+    //   this.seriesData = series
+    //   const initOption = {
+    //     baseOption: {
+    //       // 提示框
+    //       tooltip: {
+    //         trigger: 'item',
+    //         triggerOn: 'click',
+    //         showContent: true, // 是否显示提示框浮层
+    //         alwaysShowContent: true, // 是否一直显示提示框内容
+    //         // hideDelay: 100, // 浮层隐藏的延迟
+    //         enterable: 'mousemove|click',
+    //         padding: [0, 0, 0, 0],
+    //         backgroundColor: null,
+    //         position: function(point, params, dom, rect, size) {
+    //           return [point[0] + 14, point[1] - 164]
+    //         },
+    //         formatter: (params, ticket, callback) => {
+    //           if (params.seriesType === 'effectScatter') {
+    //             const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
+    //             return `<div class='tooltip-main' >
+    //                     <div class='tooltip-line'></div>
+    //                     <div class='tooltip-content'>
+    //                       <div class='title'>${params.data.name}</div>
+    //                      ${addressLine}
+    //                     </div>
+    //                   </div>`
+    //           } else if (params.seriesType === 'lines') {
+    //             return (
+    //               params.data.fromName +
+    //             '>' +
+    //             params.data.toName +
+    //             '<br />' +
+    //             params.data.value
+    //             )
+    //           } else {
+    //             return params.name
+    //           }
+    //         }
+    //       },
+    //       // 设置geo坐标系
+    //       geo: [
+    //         {
+    //           map: 'qiyang',
+    //           aspectScale: 1,
+    //           zoom: 1,
+    //           top: '6%', // 距离顶部的位置，每层向下一个百分比
+    //           left: '11%',
+    //           roam: false, // 是否开启平游或缩放
+    //           z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
+    //           itemStyle: {
+    //             areaColor: {
+    //               type: 'linear',
+    //               x: 0,
+    //               y: 0,
+    //               x2: 1,
+    //               y2: 1,
+    //               colorStops: [{
+    //                 offset: 0, color: 'rgba(0,0,0,.1)'
+    //               }, {
+    //                 offset: 0.8, color: 'rgba(59,143,248,.6)'
+    //               }],
+    //               global: false
+    //             },
+    //             borderColor: '#9ffcff',
+    //             borderWidth: 1
+    //           },
+    //           emphasis: {
+    //             itemStyle: {
+    //               areaColor: {
+    //                 type: 'linear',
+    //                 x: 0,
+    //                 y: 0,
+    //                 x2: 1,
+    //                 y2: 1,
+    //                 colorStops: [{
+    //                   offset: 0, color: 'rgba(0,0,0,.1)'
+    //                 }, {
+    //                   offset: 0.8, color: 'rgba(59,143,248,.6)'
+    //                 }],
+    //                 global: false
+    //               } // 鼠标移上去时区域的颜色
+    //             }
+    //           },
+    //           label: {
+    //             emphasis: {
+    //               show: false,
+    //               color: '#fff'
+    //             }
+    //           },
+    //           tooltip: {
+    //             show: true
+    //           }
+    //         },
+    //         {
+    //           map: 'qiyang',
+    //           aspectScale: 1,
+    //           zoom: 1,
+    //           top: '6%', // 距离顶部的位置，每层向下一个百分比
+    //           left: '11%',
+    //           roam: false, // 是否开启平游或缩放
+    //           z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
+    //           itemStyle: {
+    //             areaColor: {
+    //               type: 'pattern',
+    //               image: mapImg,
+    //               repeat: 'repeat'
+    //             }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
+    //             borderColor: '#9ffcff',
+    //             borderWidth: 3,
+    //             shadowColor: '#4cd4eb',
+    //             shadowOffsetX: 0,
+    //             shadowOffsetY: 0,
+    //             shadowBlur: 0,
+    //             emphasis: { // 地图悬停高亮样式
+    //               areaColor: {
+    //                 type: 'pattern',
+    //                 image: mapImg,
+    //                 repeat: 'repeat'
+    //               }
+    //             }
+    //           },
+    //           emphasis: {
+    //             disabled: true,
+    //             areaColor: '#01215c'
+    //           },
+    //           label: {
+    //             emphasis: {
+    //               show: false,
+    //               color: '#fff'
+    //             }
+    //           },
+    //           tooltip: {
+    //             show: false
+    //           }
+    //         },
+    //         {
+    //           map: 'qiyang',
+    //           aspectScale: 1,
+    //           zoom: 1,
+    //           top: '7%', // 根据自己需要来设置
+    //           left: '10%',
+    //           roam: false, // 是否开启平游或缩放
+    //           z: 4, // 变小，也就是被压在下面
+    //           itemStyle: {
+    //             areaColor: '#05498f', // 记得改颜色
+    //             borderColor: '#0296cf',
+    //             borderWidth: 2,
+    //             shadowColor: '#0296cf',
+    //             shadowOffsetX: 0,
+    //             shadowOffsetY: 0,
+    //             shadowBlur: 0,
+    //             emphasis: { // 地图悬停高亮样式
+    //               disabled: true,
+    //               areaColor: '#05498f'
+    //             }
+    //           },
+    //           tooltip: {
+    //             show: false
+    //           }
+    //         },
+    //         {
+    //           map: 'qiyang',
+    //           aspectScale: 1,
+    //           zoom: 1,
+    //           top: '9%', // 根据自己需要来设置
+    //           left: '9%',
+    //           roam: false,
+    //           z: 3, // 变小，也就是被压在下面
+    //           itemStyle: {
+    //             areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
+    //             borderColor: '#025792',
+    //             borderWidth: 2,
+    //             shadowColor: '#025792',
+    //             shadowOffsetX: 0,
+    //             shadowOffsetY: 0,
+    //             shadowBlur: 0,
+    //             emphasis: { // 地图悬停高亮样式
+    //               areaColor: 'rgba(3,106,183,.5)'
+    //             }
+    //           },
+    //           tooltip: {
+    //             show: false
+    //           }
+    //         },
+    //         {
+    //           map: 'qiyang',
+    //           aspectScale: 1,
+    //           zoom: 1,
+    //           top: '11%', // 根据自己需要来设置
+    //           left: '8%',
+    //           roam: false,
+    //           z: 2, // 变小，也就是被压在下面
+    //           itemStyle: {
+    //             areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
+    //             borderColor: '#195175',
+    //             borderWidth: 1,
+    //             shadowColor: '#0f4c74',
+    //             shadowOffsetX: 0,
+    //             shadowOffsetY: 4,
+    //             shadowBlur: 10,
+    //             emphasis: { // 地图悬停高亮样式
+    //               areaColor: 'rgba(3,106,183,.2)'
+    //             }
+    //           },
+    //           tooltip: {
+    //             show: false
+    //           }
+    //         },
+    //         {
+    //           map: 'qiyang',
+    //           aspectScale: 1,
+    //           zoom: 1,
+    //           top: '12%', // 根据自己需要来设置
+    //           left: '10%',
+    //           roam: false,
+    //           z: 1, // 变小，也就是被压在下面
+    //           itemStyle: {
+    //             areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
+    //             borderColor: 'rgba(0,0,0,.6)',
+    //             borderWidth: 2,
+    //             shadowColor: 'rgba(0,0,0,.6)',
+    //             shadowOffsetX: 0,
+    //             shadowOffsetY: 4,
+    //             shadowBlur: 10,
+    //             emphasis: { // 地图悬停高亮样式
+    //               areaColor: 'rgba(0,0,0,.6)'
+    //             }
+    //           },
+    //           tooltip: {
+    //             show: false
+    //           }
+    //         }
+    //       ],
+    //       series: series
+    //     },
+    //     media: [
+    //       {
+    //         query: {
+    //           maxWidth: 666
+    //         },
+    //         option: {
+    //           tooltip: {
+    //             position: function(point, params, dom, rect, size) {
+    //               return [point[0] + 10, point[1] - 122]
+    //             }
+    //           }
+    //         }
+    //       }
+    //     ]
+    //   }
+    //   setTimeout(() => {
+    //     this.myChart.setOption(initOption)
+    //   }, 200)
+    // },
     updateChart() {
       // 地图数据
       // const mapData = mapJson.features.map((item) => {
diff --git a/src/views/pageFive/index.vue b/src/views/pageFive/index.vue
new file mode 100644
index 0000000..693c679
--- /dev/null
+++ b/src/views/pageFive/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="page-wrapper" style="padding: 0 !important; z-index: 9999;">
+    <el-carousel
+      ref="carousel"
+      indicator-position="none"
+      :autoplay="false"
+      :autoplay-hover-pause="true"
+      @setActiveItem="setActiveItem"
+      @change="carouselChange"
+    >
+      <div v-if="slideData && slideData.length > 0">
+        <el-carousel-item v-for="(item, index) in slideData" :key="index">
+          <video
+            ref="videos"
+            class="tsgz-video"
+            width="100%"
+            height="100%"
+            controls
+            preload="auto"
+            :src="item.cover"
+            :poster="poster"
+            autoplay
+            type="video/mp4"
+            muted
+            @ended="playNextVideo(index)"
+            @loadedmetadata="playVideo"
+          >
+            您的浏览器不支持 video 标签。
+          </video>
+        </el-carousel-item>
+      </div>
+      <el-empty
+        v-else
+        description="暂无视频"
+        style="height: 100vh"
+        :image-size="100"
+        image=""
+      />
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import { FetchTotalResource } from '@/api/library'
+export default {
+  name: 'PageFive',
+  components: {
+  },
+  data() {
+    return {
+      poster: require('@/assets/images/poster.png'),
+      videoIndex: 0,
+      slideData: []
+    }
+  },
+  computed: {
+  },
+  beforeDestroy() {
+    this.destroy()
+  },
+  created() {
+  },
+  activated() {
+    this.getVideoResource()
+    this.load()
+  },
+  deactivated() {
+    this.destroy()
+  },
+  mounted() {
+  },
+  methods: {
+    load() {
+      const videos = this.$refs.videos
+      if (videos) {
+        videos[this.videoIndex].load()
+        videos[this.videoIndex].currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0
+      }
+    },
+    destroy() {
+      localStorage.setItem('videoIndex', this.videoIndex)
+      localStorage.setItem('videoCurrentTime', this.$refs.videos[this.videoIndex].currentTime)
+      this.$refs.videos[this.videoIndex].pause()
+    },
+    // 视频资源
+    getVideoResource() {
+      FetchTotalResource().then(res => {
+        const result = JSON.parse(res.data)
+        const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API
+        this.slideData = result.map((item, index) => {
+          if (item.filePath) {
+            item.cover = linkSrc + '/downloadFile' + item.filePath
+          } else {
+            item.cover = null
+          }
+          return item
+        })
+        // 下次进入页面时优先缓存的部分
+        if (localStorage.getItem('videoIndex')) {
+          this.videoIndex = parseInt(localStorage.getItem('videoIndex'))
+          this.$nextTick(() => {
+            this.$refs.carousel.setActiveItem(this.videoIndex)
+            const videos = this.$refs.videos
+            const nextVideo = videos[this.videoIndex]
+            videos.forEach((video) => {
+              video.pause()
+              video.currentTime = 0
+            })
+            setTimeout(() => {
+              nextVideo.currentTime = localStorage.getItem('videoCurrentTime') ? localStorage.getItem('videoCurrentTime') : 0
+              nextVideo.play()
+            }, 2000)
+          })
+        }
+      }).catch(error => {
+        console.error('Error', error)
+      })
+    },
+    playVideo() {
+      this.$refs.videos[this.videoIndex].play().catch(error => {
+        console.error(error)
+      })
+    },
+    setActiveItem(index) {
+      this.$refs.carousel.setActiveItem(index)
+    },
+    carouselChange(index) {
+      const videos = this.$refs.videos
+      this.videoIndex = index
+      videos.forEach((video) => {
+        video.currentTime = 0 // 将视频回到起始时间
+        video.pause() // 暂停视频播放
+      })
+      videos[index].play()
+    },
+    playNextVideo(index) {
+      const videos = this.$refs.videos
+      let nextIndex = index
+      this.videoIndex = nextIndex
+      if (index < this.slideData.length - 1) {
+        nextIndex = nextIndex + 1
+      } else {
+        nextIndex = 0
+      }
+      const carousel = this.$refs.carousel
+      carousel.setActiveItem(nextIndex)
+      const nextVideo = videos[nextIndex]
+      videos.forEach((video) => {
+        video.pause()
+        video.currentTime = 0
+      })
+      setTimeout(() => {
+        nextVideo.play()
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/index.scss";
+.el-carousel {
+  margin-top: 0 !important;
+}
+::v-deep .el-carousel__container{
+  height: 100vh !important;
+}
+video {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pageFour/index.vue b/src/views/pageFour/index.vue
index 963a5d4..b5cddc2 100644
--- a/src/views/pageFour/index.vue
+++ b/src/views/pageFour/index.vue
@@ -44,16 +44,17 @@
       </div>
       <div class="four-right">
         <div class="four-notice">
-          <div class="database-title">重要通知</div>
+          <div class="database-title">通知公告</div>
           <div class="seamless-warp">
             <swiper ref="mySwiper" :options="swiperOption" class="big-list">
               <swiper-slide v-for="(item,index) in noticeList" :key="index">
                 <div class="notice-text">
                   <div class="notice-title">
-                    <span>{{ item.title }}</span> <span>{{ item.startTime | parseTime('{y}-{m}-{d}') }}</span>
+                    <span>{{ item.title }}</span>
+                    <span>{{ item.startTime | parseTime('{y}-{m}-{d}') }}</span>
                   </div>
                   <div style="width: calc(100%); height: .5rem;" />
-                  <p ref="marqueeItem + index" v-html="item.context" />
+                  <p :ref="el => { if (el) marqueeRefs[index] = el }" v-html="item.context" />
                 </div>
               </swiper-slide>
             </swiper>
@@ -69,7 +70,7 @@
               <li style="width: 1.5rem; padding-right: .25rem; text-align: right;">借阅数量</li>
             </ul>
             <ul class="ranking-list">
-              <li v-for="(item,index) in rankingData" :key="index" :class="{ 'hovered': index === currentHover }">
+              <li v-for="(item,index) in rankingData" :key="index" :class="{ 'hovered': index === currentHover }" style="font-size: .28rem !important; line-height: 36px !important;">
                 <div style="width: 0.725rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
                 <div style="flex:1; text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;    -webkit-line-clamp: 1; -webkit-box-orient: vertical;">{{ item.TITLE }}</div>
                 <!-- <div class="ranking-progress" style="flex:1;  align-self: center;">
@@ -80,12 +81,12 @@
             </ul>
           </div>
         </div>
-        <div class="four-contact">
+        <!-- <div class="four-contact">
           <div class="wechat-img">
             <img :src="wecharQrCodeSrc">
           </div>
           <span>扫一扫关注我们</span>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -102,7 +103,7 @@ export default {
     swiperSlide
   },
   data() {
-    const _self = this
+    // const _self = this
     return {
       wecharQrCodeSrc: null,
       currentHover: -1,
@@ -113,23 +114,22 @@ export default {
       noticeList: [],
       noticeIndex: 0,
       rankInterval: null,
+      marqueeRefs: [], // 存所有 p 元素
+      currentIndex: 0, // 当前播放的公告索引
+      scrollTimer: null, // 滚动动画定时器（防止内存泄漏）
+      waitTimer: null, // 新增：停留等待定时器
       swiperOption: {
         direction: 'vertical',
         autoHeight: true,
         observer: true,
         observeParents: true,
-        autoplay: {
-          delay: 16000,
-          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
-          disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
-        },
-        on: {
-          slideChange: function() {
-            // 获取当前index
-            _self.noticeIndex = this.activeIndex
-            // console.log('当前index：' + _self.noticeIndex)
-          }
-        }
+        autoplay: false, // 关闭自带自动轮播
+        loop: true
+      },
+      config: {
+        waitBeforeScroll: 3000, // 内容加载后先停留3秒再滚动（单位：毫秒）
+        waitAfterScroll: 1000, // 滚动到底部后停留1秒再切换（单位：毫秒）
+        scrollSpeed: 40 // 滚动速度（px/秒，数值越小越慢）
       }
     }
   },
@@ -190,6 +190,9 @@ export default {
       this.$refs.videos[this.videoIndex].pause()
 
       this.rankInterval = null
+
+      clearTimeout(this.scrollTimer)
+      clearTimeout(this.waitTimer)
     },
     getInitData() {
       // wecharQrCode 二维码 用/downloadFile/+wecharQrCode
@@ -204,27 +207,75 @@ export default {
       FetchNoticeList().then(res => {
         this.noticeList = res.data
         this.$nextTick(() => {
-          this.noticeList.forEach((item, index) => {
-            this.$refs['marqueeItem' + index] = this.$el.querySelectorAll('.notice-text p')[index]
-          })
-          this.startScrolling()
+          this.playNoticeByIndex(this.currentIndex)
         })
       }).catch(error => {
         console.error('Error', error)
       })
     },
-    startScrolling() {
-      this.noticeList.forEach((item, index) => {
-        const containerHeight = this.$el.querySelector('.seamless-warp').offsetHeight
-        const contentHeight = this.$refs['marqueeItem' + index].offsetHeight
-        // 设置 CSS 变量 --container-height，以便在 CSS 中使用
-        this.$refs['marqueeItem' + index].parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`)
+    // 播放指定索引的公告（核心优化）
+    playNoticeByIndex(index) {
+      // 清除所有定时器，避免冲突
+      clearTimeout(this.scrollTimer)
+      clearTimeout(this.waitTimer)
 
-        if (contentHeight > containerHeight) {
-          this.$refs['marqueeItem' + index].classList.add('scroll-animation')
-        } else {
-          this.$refs['marqueeItem' + index].classList.remove('scroll-animation')
-        }
+      const pEl = this.marqueeRefs[index]
+      if (!pEl) return
+
+      // 1. 重置样式和动画，先让内容完整显示
+      pEl.classList.remove('scroll-animation')
+      pEl.style.transform = 'translateY(0)' // 强制回到顶部
+      const container = this.$el.querySelector('.seamless-warp')
+      const containerHeight = container.offsetHeight
+      const contentHeight = pEl.offsetHeight
+
+      // 2. 如果内容高度 <= 容器高度（无需滚动）
+      if (contentHeight <= containerHeight) {
+        // 停留指定时间后切换下一条
+        this.waitTimer = setTimeout(() => {
+          this.switchToNextNotice()
+        }, this.config.waitBeforeScroll + 2000) // 多停留2秒
+        return
+      }
+
+      // 3. 内容需要滚动：先停留，再滚动
+      this.waitTimer = setTimeout(() => {
+        // 设置CSS变量（精准计算滚动终点）
+        pEl.style.setProperty('--content-height', `${contentHeight}px`)
+        pEl.style.setProperty('--container-height', `${containerHeight}px`)
+
+        // 计算滚动时长（速度越慢，时长越长）
+        const scrollDistance = contentHeight - containerHeight // 实际需要滚动的距离
+        const scrollDuration = scrollDistance / this.config.scrollSpeed
+
+        // 设置动画时长并启动滚动
+        pEl.style.setProperty('--scroll-duration', `${scrollDuration}s`)
+        pEl.classList.add('scroll-animation')
+
+        // 4. 滚动完成后，停留一段时间再切换
+        this.scrollTimer = setTimeout(() => {
+          // 滚动到底部后停留
+          this.waitTimer = setTimeout(() => {
+            this.switchToNextNotice()
+          }, this.config.waitAfterScroll)
+        }, scrollDuration * 1000) // 等待滚动完成
+      }, this.config.waitBeforeScroll) // 先停留再滚动
+    },
+
+    // 切换下一条（保证循环）
+    switchToNextNotice() {
+      // 计算下一个索引（循环）
+      this.currentIndex = (this.currentIndex + 1) % this.noticeList.length
+
+      // 切换swiper
+      const swiperInstance = this.$refs.mySwiper?.swiper
+      if (swiperInstance) {
+        swiperInstance.slideTo(this.currentIndex)
+      }
+
+      // 切换后播放新的一条
+      this.$nextTick(() => {
+        this.playNoticeByIndex(this.currentIndex)
       })
     },
     // 视频资源
@@ -310,7 +361,7 @@ export default {
         'libcode': this.libcode,
         'starttime': formattedDate,
         'endtime': this.getFormattedDate(new Date()),
-        'rownum': 6
+        'rownum': 5
       }
       FetchSync36(params).then(res => {
         const result = JSON.parse(res.data)
@@ -330,13 +381,13 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "~@/assets/styles/index.scss";
 .el-carousel{
-  margin-top: 0.475rem;
+  margin-top: 0.475rem !important;
 }
-.el-carousel__container{
-  height: 8.875rem;
+::v-deep .el-carousel__container{
+  height: 8.875rem !important;
 }
 video {
   width: 100%;
@@ -344,8 +395,8 @@ video {
 }
 
 .big-list>.swiper-wrapper>.swiper-slide {
-    height: 100vh;
-    overflow: hidden;
+  height: 100vh;
+  overflow: hidden;
 }
 .swiper-container-vertical .swiper-wrapper{
   flex-direction: column;
diff --git a/src/views/pageOne/index.vue b/src/views/pageOne/index.vue
index 08c4436..0935681 100644
--- a/src/views/pageOne/index.vue
+++ b/src/views/pageOne/index.vue
@@ -41,7 +41,8 @@
             </div>
           </div> -->
           <div class="middle-img-bottom">
-            <div style="width: 360; height: 200px; position: relative; margin: 50px 0 0 30px;">
+            <!-- width: 360px; height: 200px;  margin: 50px 0 0 30px; -->
+            <div style="position: relative;  margin: 50px 0 0 20px;">
               <svg width="360" height="200">
                 <path d="M0 80 S 170 160, 400 70" />
               </svg>
diff --git a/src/views/pageThree/index.vue b/src/views/pageThree/index.vue
index 0aca80f..6386856 100644
--- a/src/views/pageThree/index.vue
+++ b/src/views/pageThree/index.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable no-prototype-builtins -->
 <template>
   <div class="page-wrapper ">
     <div class="page-three">
@@ -17,7 +16,6 @@
                   <div>
                     <span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
                       <i v-if="!isNaN(ls)">0123456789</i>
-                      <!-- <span v-else>{{ ls }}</span> -->
                     </span>
                   </div>
                 </div>
@@ -44,18 +42,6 @@
                   <div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
                 </li>
               </ul>
-              <!-- <swiper v-if="rankingYearWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
-                <swiper-slide v-for="(item,index) in rankingYearWithPercentage" :key="index">
-                  <div class="ranking-item">
-                    <div style="width: .625rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
-                    <div style="width: 1.875rem; text-align: left;">{{ item.name }}</div>
-                    <div class="ranking-progress" style="flex:1;  align-self: center;">
-                      <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
-                    </div>
-                    <div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_YEAR }}<i style="padding-left:.0625rem;">本</i></div>
-                  </div>
-                </swiper-slide>
-              </swiper> -->
             </div>
           </div>
         </div>
@@ -75,7 +61,6 @@
                   <div>
                     <span v-for="(ls, i) in item.valueArr" :key="item.id + i" :class="[{'flop-figure': !isNaN(ls)}, {'flop-comma': isNaN(ls)}]">
                       <i v-if="!isNaN(ls)">0123456789</i>
-                      <!-- <span v-else>{{ ls }}</span> -->
                     </span>
                   </div>
                 </div>
@@ -102,18 +87,6 @@
                   <div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
                 </li>
               </ul>
-              <!-- <swiper v-if="rankingTodayWithPercentage.length > 1 && isKeep" ref="swiperThumbs" class="swiper ranking-list" :options="swiperOptionThumbs">
-                <swiper-slide v-for="(item,index) in rankingTodayWithPercentage" :key="index">
-                  <div class="ranking-item">
-                    <div style="width: .625rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
-                    <div style="width: 1.875rem; text-align: left;">{{ item.name }}</div>
-                    <div class="ranking-progress" style="flex:1;  align-self: center;">
-                      <el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
-                    </div>
-                    <div style="width: 1.25rem; padding-right: .125rem; text-align: right;">{{ item.JCC_DAY }}<i style="padding-left:.0625rem;">本</i></div>
-                  </div>
-                </swiper-slide>
-              </swiper> -->
             </div>
           </div>
         </div>
@@ -140,8 +113,6 @@ import LineChart from '@/components/echart/lineChart'
 import BarEcharts from '@/components/echart/barEcharts'
 import YearCircle from '@/components/echart/yearCircle'
 import TodayCircle from '@/components/echart/todayCircle'
-// import { swiper, swiperSlide } from 'vue-awesome-swiper'
-// import 'swiper/dist/css/swiper.css'
 export default {
   name: 'PageThree',
   components: {
@@ -149,8 +120,6 @@ export default {
     BarEcharts,
     YearCircle,
     TodayCircle
-    // swiper,
-    // swiperSlide
   },
   data() {
     return {
@@ -185,8 +154,6 @@ export default {
         loopedSlides: 6,
         slidesPerView: 6,
         slidesPerGroup: 6,
-        // loop: true,
-        // centeredSlides: true,
         autoplay: {
           delay: 3000,
           stopOnLastSlide: false,
@@ -204,6 +171,9 @@ export default {
   beforeDestroy() {
     clearInterval(this.rankInterval)
     this.rankInterval = null
+    // 主动清除父组件的 todayTotal/yearTotal 定时器
+    this.$parent.clearExistingTimer('todayTotal')
+    this.$parent.clearExistingTimer('yearTotal')
   },
   created() {
     this.getWeekJH()
@@ -212,21 +182,17 @@ export default {
     this.getLendingTotal()
     this.getTodayJH()
     this.isKeep = true
-    // if (this.rankingYearWithPercentage.length !== 0) {
-    //   this.currentHover = -1
-    //   this.rankInterval = setInterval(() => {
-    //     this.currentHover = (this.currentHover + 1) % this.rankingYearWithPercentage.length
-    //   }, 1000)
-    // }
   },
   deactivated() {
     clearInterval(this.rankInterval)
     this.rankInterval = null
     this.isKeep = false
+
+    // 主动清除父组件的 todayTotal/yearTotal 定时器
+    this.$parent.clearExistingTimer('todayTotal')
+    this.$parent.clearExistingTimer('yearTotal')
   },
   mounted() {
-    // this.getLendingTotal()
-    // this.getTodayJH()
   },
   methods: {
     paddingNum(num, length) {
@@ -284,23 +250,42 @@ export default {
     },
     // 分管显示内容
     getLibcodeDetails(data) {
+      console.log('data', data)
       FetchLibcodeDetails().then(res => {
         const result = JSON.parse(res.data)
         if (result.length !== 0) {
           const newDataArray = []
+
+          const nameToLibcodeMap = {
+            '葛店城市书房·大湾分馆': 'DWSF',
+            '葛店城市书房·张家湾分馆': 'ZJWSF'
+          }
+          const allowedLibcodes = ['DWSF', 'ZJWSF']
+
           data.forEach(item => {
-            const foundItem = result.find(library => library.tcId === item.LIBCODE)
+            console.log('item', item)
+            if (!allowedLibcodes.includes(item.LIBCODE)) {
+              return
+            }
+
+            const foundItem = result.find(library => {
+              // 用nameToLibcodeMap反向查找：library.name对应的LIBCODE === 当前item.LIBCODE
+              return nameToLibcodeMap[library.name] === item.LIBCODE
+            })
 
-            if (foundItem) {
-              const yearValue = item.JCC_YEAR || 0
-              const dayValue = item.JCC_DAY || 0
-              const newObj = {
-                name: foundItem.name,
-                JCC_YEAR: yearValue,
-                JCC_DAY: dayValue
-              }
-              newDataArray.push(newObj)
+            if (!foundItem) {
+              return
             }
+
+            const yearValue = item.JCC_YEAR || 0
+            const dayValue = item.JCC_DAY || 0
+            const newObj = {
+              name: foundItem.name,
+              JCC_YEAR: yearValue,
+              JCC_DAY: dayValue
+            }
+            newDataArray.push(newObj)
+            console.log('newDataArray', newDataArray)
           })
           // 2. 根据JCC_YEAR的值进行降序排序
           this.rankingYearData = newDataArray.sort((a, b) => b.JCC_YEAR - a.JCC_YEAR)
@@ -326,12 +311,6 @@ export default {
         console.log('没有数据')
         return []
       }
-
-      // eslint-disable-next-line no-prototype-builtins
-      // if (typeof rankingData[0] !== 'object' || !rankingData[0].hasOwnProperty(numType)) {
-      //   return []
-      // }
-
       const firstPlaceNum = rankingData[0][numType] // NAN
 
       if (firstPlaceNum === 0) {
@@ -448,27 +427,4 @@ export default {
 <style lang="scss">
 @import "~@/assets/styles/index.scss";
 @import "~@/assets/styles/font-some.css";
-
-// .swiper {
-//   width: 100%;
-//   height: 3rem !important;
-
-//   .swiper-slide {
-//     height: .5rem !important;
-//   }
-//   .swiper-slide-active,
-//   .swiper-slide-duplicate-active{
-//     // background-color: #142B76;
-//     // border-radius: .05rem;
-//     // animation: myListScale 1s forwards;
-// 	}
-// }
-
-// @keyframes myListScale {
-//   to {
-//     -webkit-transform: scaleX(1) scaleY(1);
-//     transform: scaleX(1) scaleY(1);
-//   }
-// }
-
 </style>