适配1440/页面优化

src/assets/styles/index.scss

@@ -1102,8 +1102,7 @@
     overflow: hidden;
   }
   .lib-text{
-    position: absolute;
-    // transition: top 1s linear;
+    position: relative;
     margin-right: .175rem;
     font-size: .225rem;
     line-height: .35rem;
@@ -1111,6 +1110,22 @@
     overflow: hidden;
   }
 }
+
+
+.lib-animation {
+  animation: myLib 26s linear infinite;
+  animation-fill-mode: forwards;
+}
+
+@keyframes myLib {
+  0% {
+    transform: translateY(1rem);
+  }
+  100% {
+    transform: translateY(calc(-1 * var(--container-height)));
+  }
+}
+
 .map-hx-bg{
   width: 16.325rem;
   height: 11.3125rem;
@@ -1500,21 +1515,23 @@
         text-indent: 2em;
       }
     }
-    .scroll-animation {
+  }
+}
+
+.scroll-animation {
   animation: myMove 16s linear infinite;
   animation-fill-mode: forwards;
-    }
+}
 
-    @keyframes myMove {
+@keyframes myMove {
   0% {
     transform: translateY(1rem);
   }
   100% {
     transform: translateY(calc(-1 * var(--container-height)));
   }
-    }
-  }
 }
+
 .four-ranking{
   height: 4.85rem;
   &.lending-ranking{
@@ -1572,3 +1589,89 @@
     text-align: center;
   }
 }
+
+
+
+
+
+@media (max-width: 1440px) {
+  .pageOne-database{
+    margin-top: .375rem;
+    height: 6.5rem;
+  }
+  .pageOne-book {
+    .pageOne-book-content {
+      padding: .375rem 0;
+      .wechat-code{
+        width: 4.25rem;
+        height: 5.5rem;
+        .wechat-img{
+          width: 2.25rem;
+          height: 2.25rem;
+          line-height: 2.5rem;
+        }
+        span{
+          font-size: .275rem;
+        }
+      }
+    }
+  }
+  .scrollBox{
+    .seamless01{
+      margin-bottom: .5rem;
+    }
+    ul{
+      height: 2.3rem;
+      li{
+        width:  1.625rem;
+        height: 2.3rem;
+        margin-right: .7375rem;
+        .bord{
+          .book-img{
+            width: 1.625rem;
+            height: 2.3rem;
+          }
+        }
+      }
+    }
+  }
+
+  .page-three {
+    .three03, 
+    .three04{
+      height: calc(100vh/2 - 1.375rem);
+    }
+  }
+
+  .four-video{
+    width: 16.625rem;
+    height: calc(100vh - 2.5rem);
+    background-size: 100% 100%;
+  }
+
+  .el-carousel__container{
+    height: calc(100vh - 4.5rem);
+    overflow: hidden;
+  }
+
+  .four-notice{
+    height: 4rem;
+    .seamless-warp{
+      height: 3.25rem;
+    }
+  }
+
+  .four-contact{
+    width: 5.9375rem;
+    height: 2.5rem;
+    background-size: 100% 100%;
+    .wechat-img{
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    span{
+      font-size: .275rem;
+    }
+  }
+
+}

src/components/echart/barEcharts.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 近七日借阅统计 -->
-  <div id="main1" ref="chartContainer" :style="{height:height,width:width}" />
+  <div ref="barContainer" :style="{height:height,width:width}" />
 </template>
 
 <script>
@@ -55,10 +55,11 @@ export default {
     this.$nextTick(() => {
       this.initChart()
     })
+    window.addEventListener('resize', this.__resizeHandler)
     this.resetPieChartData()
   },
   methods: {
-    // 重绘饼图
+    // 重绘bar
     resetPieChartData() {
       clearInterval(this.timeRePie)
       this.timeRePie = setInterval(() => {
@@ -73,7 +74,7 @@ export default {
     },
     initChart() {
       // const dom = document.getElementById('main2')
-      const dom = this.$refs.chartContainer
+      const dom = this.$refs.barContainer
       this.chart = echarts.init(dom)
       this.setOptions(this.chartWeeklyData)
     },

src/components/echart/lineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="main2" ref="chartContainer" :style="{height:height,width:width}" />
+  <div ref="lineContainer" :style="{height:height,width:width}" />
 </template>
 
 <script>
@@ -37,17 +37,11 @@ export default {
       mmediate: true,
       handler(val) {
         setTimeout(() => {
-          this.setOptions(val)
+          this.initChart()
         }, 100)
       }
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-    this.resetPiechartDayData()
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -55,6 +49,13 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+    window.addEventListener('resize', this.__resizeHandler)
+    this.resetPiechartDayData()
+  },
   methods: {
     resetPiechartDayData() {
       clearInterval(this.timeRePie)
@@ -70,7 +71,7 @@ export default {
     },
     initChart() {
       // const dom = document.getElementById('main2')
-      const dom = this.$refs.chartContainer
+      const dom = this.$refs.lineContainer
       this.chart = echarts.init(dom, 'dark')
       this.setOptions(this.chartDayData)
     },

src/components/echart/yearCircle.vue

@@ -87,8 +87,12 @@ export default {
               const count = arrCount(optionData)
               if (optionData) {
                 const flag = optionData?.find(item => name === item.name)
-                if (flag) return [`{name|${name}}`, `{num|${((flag.value / count).toFixed(2)) * 100 + '%'}}`]
-              } else return name
+                if (flag) {
+                  const percentage = count > 0 ? ((flag.value / count) * 100).toFixed(0) + '%' : '0%'
+                  return [`{name|${name}}`, `{num|${percentage}}`]
+                }
+              }
+              return name
             },
             textStyle: {
               rich: {

src/utils/resizeMixins.js

@@ -1,26 +1,55 @@
-// 混入代码 resize-mixins.js
-import { debounce } from '@/utils/index'
-const resizeChartMethod = '$__resizeChartMethod'
+import { debounce } from '@/utils'
 
 export default {
   data() {
-    // 在组件内部将图表init的引用映射到chart属性上
     return {
-      chart: null
+      $_sidebarElm: null,
+      $_resizeHandler: null
     }
   },
-  created() {
-    window.addEventListener('resize', this[resizeChartMethod], false)
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
   },
   beforeDestroy() {
-    window.removeEventListener('reisze', this[resizeChartMethod])
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
   },
   methods: {
-    // 通过lodash的防抖函数来控制resize的频率
-    [resizeChartMethod]: debounce(function() {
-      if (this.chart) {
-        this.chart.resize()
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
     }
-    }, 100)
   }
 }

src/views/map/index.vue

@@ -42,7 +42,7 @@
             </li>
           </ul>
           <div ref="scrollInfo" class="scroll-container">
-            <div ref="marquee" class="lib-text" :style="{ top: position + 'px' }">{{ libCurrent && libCurrent.explain }}</div>
+            <div ref="marquee" class="lib-text" v-html="libCurrent && libCurrent.explain" />
           </div>
         </div>
       </div>
@@ -161,29 +161,42 @@ export default {
       clearTimeout(this.timeTicket)
       clearInterval(this.rankInterval)
       clearInterval(this.timer)
-      localStorage.setItem('libIndexItem', this.libIndex)
-      localStorage.setItem('libCurrentItem', this.libCurrent)
+      // localStorage.setItem('libIndexItem', this.libIndex)
+      // localStorage.setItem('libCurrentItem', this.libCurrent)
       localStorage.setItem('countItem', this.count)
 
       this.rankInterval = null
       this.timer = null
       this.timeTicket = null
     },
+    // startScrolling() {
+    //   this.timer = setInterval(() => {
+    //     this.position -= this.speed
+    //     // 当文字完全滚出容器时，重置位置
+    //     // const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
+    //     this.$nextTick(() => {
+    //       const containerHeight = this.$refs.scrollInfo.offsetHeight
+    //       const contentHeight = this.$refs.marquee.offsetHeight
+    //       if (contentHeight <= containerHeight) {
+    //         this.position = 20
+    //       } else if (Math.abs(this.position) >= contentHeight) {
+    //         this.position = containerHeight
+    //       }
+    //     })
+    //   }, 120)
+    // },
     startScrolling() {
-      this.timer = setInterval(() => {
-        this.position -= this.speed
-        // 当文字完全滚出容器时，重置位置
-        // const containerHeight = document.getElementsByClassName('scroll-container')[0].offsetHeight
       this.$nextTick(() => {
         const containerHeight = this.$refs.scrollInfo.offsetHeight
         const contentHeight = this.$refs.marquee.offsetHeight
-          if (contentHeight <= containerHeight) {
-            this.position = 20
-          } else if (Math.abs(this.position) >= contentHeight) {
-            this.position = containerHeight
+        // 设置 CSS 变量 --container-height，以便在 CSS 中使用
+        this.$refs.marquee.parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`)
+        if (contentHeight > containerHeight) {
+          this.$refs.marquee.classList.add('lib-animation')
+        } else {
+          this.$refs.marquee.classList.remove('lib-animation')
         }
       })
-      }, 40)
     },
     getReadRanking() {
       const params = {
@@ -372,12 +385,9 @@ export default {
             this.initChart() // 初始化
             setTimeout(() => {
               this.updateChart() // 更新数据，散点轮播显示
+              this.startScrolling()
               window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
             }, 300)
-
-            if (document.getElementsByClassName('scroll-container')[0]) {
-              this.startScrolling()
-            }
           }
         } else {
           this.libInfoData = []
@@ -945,6 +955,7 @@ export default {
                 console.log('_self.libCurrent', _self.libCurrent)
                 _self.updatePageWithData()
                 _self.autohover()
+                _self.startScrolling()
                 _self.currentIndex = 0
               }, 3000)
             }

src/views/pageThree/index.vue

@@ -96,14 +96,14 @@
       </div>
       <div class="three-item three03">
         <div class="database-title">今日借阅趋势</div>
-        <div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 35px);">
+        <div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 35px);">
           <LineChart :chart-day-data="chartDayData" />
         </div>
       </div>
       <div class="three-item three04">
         <div class="database-title">近7日借阅统计</div>
-        <div class="chart-wrapper" style="width: 11.25rem;height: calc(100% - 20px);">
-          <BarEcharts ref="weeklyRef" :chart-weekly-data="chartWeeklyData" />
+        <div class="chart-wrapper" style="width: 11.25rem; height: calc(100% - 20px);">
+          <BarEcharts :chart-weekly-data="chartWeeklyData" />
         </div>
       </div>
     </div>
@@ -189,7 +189,7 @@ export default {
       }
       return num
     },
-    // 获取本年今年借阅情况
+    // 获取本年/今日借阅情况
     getLendingTotal() {
       this.todayTotal = []
       this.yearTotal = []
@@ -297,13 +297,12 @@ export default {
     // 今日借还
     getTodayJH() {
       FetchTodayJH().then(res => {
-        const result = res.data
-        if (result.length !== 0) {
         this.chartDayData = {
           timeData: [],
           returnData: [],
           borrowedData: []
         }
+        const result = res.data
         const time = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
         time.forEach((hour, index) => {
           // 查找 result 中是否有对应的 logHour
@@ -320,21 +319,18 @@ export default {
             this.chartDayData.borrowedData.push(0) // 默认值为 0
           }
         })
-        } else {
-          this.chartDayData = {
-            timeData: [],
-            returnData: [],
-            borrowedData: []
-          }
-        }
       }).catch(error => {
         console.error('Error', error)
       })
     },
     getWeekJH() {
       FetchWeekJH().then(res => {
+        this.chartWeeklyData = {
+          date: [],
+          inchartWeeklyData: [],
+          outchartWeeklyData: []
+        }
         const result = res.data
-        if (result.length !== 0) {
         // 获取当天日期
         const currentDate = new Date()
         const today = currentDate.toISOString().slice(0, 10)
@@ -371,22 +367,15 @@ export default {
           jccDayTotal: matchData[date] ? matchData[date].jccDayTotal : 0,
           hccDayTotal: matchData[date] ? matchData[date].hccDayTotal : 0
         }))
-
         // 根据时间排序
         completeData.sort((a, b) => new Date(a.date) - new Date(b.date))
+
         // 日期X轴数据
         this.chartWeeklyData.date = completeData.map(item => item.date)
         // in 归还
         this.chartWeeklyData.inchartWeeklyData = completeData.map(item => item.hccDayTotal)
         // // out 借出
         this.chartWeeklyData.outchartWeeklyData = completeData.map(item => item.jccDayTotal)
-        } else {
-          this.chartWeeklyData = {
-            date: [],
-            inchartWeeklyData: [],
-            outchartWeeklyData: []
-          }
-        }
       }).catch(error => {
         console.error('Error', error)
       })