体育馆移动端完善3

src/App.vue

@@ -1,16 +1,17 @@
 <template>
-  <router-view/>
+  <router-view />
   <nav class="navbar">
-    <router-link to="/ty">体&nbsp;&nbsp;育</router-link>
+    <!-- &nbsp;&nbsp; -->
-    <router-link to="/">总&nbsp;&nbsp;览</router-link> 
+    <router-link class="narRouter" to="/ty" active-class='ative'>体育</router-link>
-    <router-link to="/wh">文&nbsp;&nbsp;化</router-link>
+    <router-link class="narRouter" to="/" active-class='ative'>总览</router-link>
+    <router-link class="narRouter" to="/wh" active-class='ative'>文化</router-link>
   </nav>
 </template>
 
 <style scoped>
-.navbar{
+.navbar {
   position: fixed;
-  height:2.8rem;
+  height: 2.8rem;
   width: 100%;
   display: block;
   margin-top: 4rem;
@@ -20,7 +21,14 @@
   z-index: 90;
 }
 
-.navbar a{
+/* .navbar a.router-link-exact-active {
+
+  background-color: #2132fa;
+  padding-bottom: 10px;
+  background-image: linear-gradient(#2132fa, #1d37fb);
+} */
+
+.navbar a {
   display: block;
   float: left;
   width: 33.33%;
@@ -29,10 +37,12 @@
   background-color: #0c2151;
 }
 
-.navbar a.router-link-exact-active{
+.ative {
-  background-color: #2132fa;
+  width: 100px !important;
-  padding-bottom: 10px;
+  text-align: center;
+  line-height: 44px;
+  /* background-color: #2132fa; */
   background-image: linear-gradient(#2132fa, #1d37fb);
+  /* background-size: 50% 50%; */
 }
-
 </style>

src/views/HomeView.vue

@@ -430,7 +430,7 @@ export default {
 
       option = {
 
-        color: ["#0780e2", "#fdff00"],
+        color: [ "#F2A0CE","#0780e2","#FF6504", "#01FE00","#00FFFF","#fdff00"],
 
         series: [
           {
@@ -458,11 +458,12 @@ export default {
               show: false
             },
             data: [
-              { value: 1048, name: 'Search Engine' },
+              { value: 348, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
+              { value: 335, name: 'Direct' },
-              { value: 580, name: 'Email' },
+              { value: 480, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
+              { value: 384, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
+              { value: 600, name: 'Video Ads' },
+              { value: 700, name: 'Video Adss' }
             ]
           }
         ]
@@ -767,6 +768,7 @@ export default {
   background-position: 0 0;
   padding-top: 2.26rem;
   height: 20rem;
+  position: relative;
 }
 
 .gymbox .gympic {
@@ -788,11 +790,13 @@ export default {
 }
 
 .gymbox .gymnum {
-  width: 60%;
+  width: 100%;
   margin: 0.6rem auto;
   text-align: center;
   height: 3rem;
-  padding-top: 1.4rem;
+  position: absolute;
+  bottom: 0.66rem;
+  /* padding-top: 0.7rem; */
 }
 
 .gymbox .gymnum span {
@@ -807,7 +811,9 @@ export default {
   font-size: 18px;
   font-weight: 600;
   display: block;
-  margin: 0.2667rem auto;
+  margin: 0;
+  margin-top: 0.5rem;
+  /* margin: 0.5rem 0 1.7rem; */
 }
 
 /* 數據box */
@@ -841,20 +847,21 @@ export default {
   display: block;
   float: left;
   width: 100%;
-  line-height: 0;
+  /* line-height: 0; */
 }
 
 .numbox .numdiv .ndtitle {
   padding-top: 0.2rem;
   font-size: 1.08rem;
   font-size: 1.1rem;
-  margin: 1.3rem 0 1rem;
+  margin: 0.7rem 0 0;
 }
 
 .numbox .numdiv .nddesc {
   color: #ccc;
-  font-size: 0.32rem;
+  font-size: 0.9rem !important;
-  padding-bottom: 0.2rem;
+  /* padding-bottom: 0.2rem; */
+  margin: 0;
 }
 
 /** 客流趋势 */
@@ -994,7 +1001,7 @@ export default {
 }
 
 .today_rs .tdrs_title {
-  background-image: url("../assets/img/left_t3_bg.png");
+  background-image: url("../assets/img/left_t2_bg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: 0 0;
@@ -1014,7 +1021,7 @@ export default {
 }
 
 .pcgrs .pcgrs_title {
-  background-image: url("../assets/img/left_t2_bg.png");
+  background-image: url("../assets/img/left_t3_bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
   height: 3.8rem;

src/views/TycView.vue

@@ -252,9 +252,9 @@
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  height: 1.8rem;
+  height: 2.5rem;
-  line-height: 1.4rem;
+  line-height: 1.8rem;
-  padding-left: 2.02rem;
+  padding-left: 2.62rem;
 }
 
 .gcgrs .gcgrs_charts {
@@ -480,13 +480,18 @@ export default {
         legend: {
           bottom: 0,
           right: 20,
-          itemGap: 15,
+          itemGap: 20,
-          itemWidth: 15,
+          itemWidth: 20,
+          itemHeight: 20,
           textStyle: {
             color: '#fff',
             fontSize: '14'
           },
-          data: name
+          data: [
+            { icon: 'image://img/tyc_icon.png', name: '体育场' },
+            { icon: 'image://img/tyg_icon.png', name: '体育馆' },
+            { icon: 'image://img/yyg_icon.png', name: '游泳场馆' },
+          ]
         },
         title: {
           // text: "负面言论分领域趋势",

src/views/WhView.vue

@@ -95,16 +95,16 @@
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: -1.8rem 0;
-    height: 12rem;
+    height: 14rem;
 }
 
 .tyclogo .tyname {
-    height: 3rem;
+    height: 2.5rem;
-    line-height: 3rem;
+    line-height: 2.5rem;
     text-align: right;
     padding-right: 6.8rem;
-    font-size: 2.02rem;
+    font-size: 1.7rem;
-    padding-top: 4.8rem;
+    padding-top: 7.8rem;
 }
 
 .tyclogo .tydesc {
@@ -112,8 +112,8 @@
     line-height: 2rem;
     font-size: 1.03rem;
     text-align: right;
-    padding-right: 1.06rem;
+    padding-right: 0.3rem;
-    color: #999;
+    color: #fff;
 }
 
 /* 总计进馆 */
@@ -234,8 +234,8 @@
     background-position: 0 0;
     background-repeat: no-repeat;
     background-size: 100%;
-    height: 1.8rem;
+    height: 2.4rem;
-    line-height: 1.8rem;
+    line-height: 1.9rem;
     padding-left: 2.02rem;
 }
 
@@ -249,15 +249,15 @@
     background-position: 0 0;
     background-repeat: no-repeat;
     background-size: 100%;
-    height: 1.8rem;
+    height: 2.4rem;
-    line-height: 1.8rem;
+    line-height: 2.4rem;
-    padding-left: 2.02rem;
+    padding-left: 2.42rem;
 }
 
 .gcgrs .gcgrs_charts {
-    margin-top: 2rem;
+    margin-top: 1.8rem;
     width: 100%;
-    height: 17rem;
+    height: 18rem;
 }
 
 /* 图书馆趋势 */
@@ -270,9 +270,9 @@
     background-position: 0 0;
     background-repeat: no-repeat;
     background-size: 100%;
-    height: 2.2rem;
+    height: 2.4rem;
-    line-height: 2.2rem;
+    line-height: 2.4rem;
-    padding-left: 2.02rem;
+    padding-left: 2.42rem;
 }
 
 .tsgbox .tsgc_charts {
@@ -506,13 +506,20 @@ export default {
                 // backgroundColor: "#141f56",
                 legend: {
                     top: 0,
+                    right:30,
                     itemGap: 15,
-                    itemWidth: 15,
+                    itemWidth: 20,
+                    itemHeight: 20,
+                    // icon: ['image://img/tyc_icon.png', 'image://img/tyg_icon.png', 'image://img/tyc_icon.png'],
                     textStyle: {
                         color: '#fff',
                         fontSize: '14'
                     },
-                    data: name
+                    data: [
+                        { icon: 'image://img/tyc_icon.png', name: '图书馆' },
+                        { icon: 'image://img/tyg_icon.png', name: '文化馆' },
+                        { icon: 'image://img/yyg_icon.png', name: '博物馆' },
+                    ]
                 },
                 title: {
                     // text: "负面言论分领域趋势",