地图页调整

src/views/map/index.vue

@@ -47,7 +47,7 @@
         </div>
       </div>
       <!-- map -->
-      <div ref="chart" style="width: 920px; height: 924px;  z-index: 999; border:1px solid rgba(0, 0, 0, 0);" />
+      <div ref="chart" style="width: 80%; max-width: 920px;z-index: 999;" :style="mapSpaceStyle" />
       <div class="map-hx-bg">
         <div class="map-hx-small" />
         <div class="map-hx-big" />
@@ -125,7 +125,8 @@ export default {
       timer: null,
       position: 0,
       speed: 2,
-      activatedBaseSetting: {}
+      activatedBaseSetting: {},
+      mapSpaceStyle: null
     }
   },
   computed: {
@@ -144,6 +145,10 @@ export default {
           this.getReadRanking(this.activatedBaseSetting)
           this.getLendingTotal(this.activatedBaseSetting)
         }
+        if (result.map_spacing) {
+          this.mapSpaceStyle = `margin-top: ${result.map_spacing.context}px;`
+          console.log('mapSpaceStyle', this.mapSpaceStyle)
+        }
       },
       immediate: true
     }
@@ -176,8 +181,6 @@ export default {
       clearTimeout(this.timeTicket)
       clearInterval(this.rankInterval)
       clearInterval(this.timer)
-      // localStorage.setItem('libIndexItem', this.libIndex)
-      // localStorage.setItem('libCurrentItem', this.libCurrent)
       localStorage.setItem('countItem', this.count)
 
       this.rankInterval = null
@@ -443,9 +446,9 @@ export default {
       })
 
       const mainLib = this.libInfoData.find(lib => lib.branchType === 1) || {}
-      const mainLibName = mainLib.name || '总馆'
+      const mainLibName = mainLib.name
 
-      const mainLibCoord = mainLib.mapX && mainLib.mapY
+      // const mainLibCoord = mainLib.mapX && mainLib.mapY
         ? [Number(mainLib.mapX), Number(mainLib.mapY)] : [0, 0]
 
       var XAData = this.libInfoData.map(item => {
@@ -619,7 +622,7 @@ export default {
               top: '6%', // 距离顶部的位置，每层向下一个百分比
               left: '11%',
               roam: false, // 是否开启平游或缩放
-              center: mainLibCoord,
+              // center: mainLibCoord,
               z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
               itemStyle: {
                 areaColor: {

src/views/pageThree/index.vue

@@ -37,7 +37,7 @@
               <ul class="ranking-list">
                 <li v-for="(item,index) in rankingYearWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
                   <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.5rem; text-align: left;">{{ item.name }}</div>
+                  <div style="width: 1.75rem; 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>