修改很多样式问题

components/bussiness/charts/chart-column-horizontal-tc-long.vue

@@ -96,7 +96,7 @@ export default {
           axisPointer: {
             type: "shadow"
           },
-          formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
+          formatter: "{b}<br/>{a0}{c0}%<br/>{a1}{c1}%"
         },
         legend: {
           show: false,

components/bussiness/charts/chart-column-horizontal-tc.vue

@@ -93,7 +93,7 @@ export default {
           axisPointer: {
             type: "shadow"
           },
-          formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
+          formatter: "{b}<br/>{a0}{c0}%<br/>{a1}{c1}%"
         },
         legend: {
           top: 20,

components/bussiness/charts/chart-column-stack.vue

@@ -142,24 +142,27 @@ export default {
             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
           },
           formatter: function (params) {
-            let relVal = params[0].name + "人数：";
+            // let relVal = params[0].name + "人数：";
+            let relVal = params[0].name + "人数";
             let value = 0;
             for (let i = 0, l = params.length; i < l; i++) {
               value += params[i].value;
             }
             relVal += value + "人";
             let divList = [];
-            divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[2] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[3] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-            divList[4] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+            divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+            divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+            divList[2] = "<div style='background: #FFB01B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+            divList[3] = "<div style='background: #39AF9A;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+            divList[4] = "<div style='background: #5D7092;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
             for (let j = params.length - 1; j >= 0; j--) {
               if(value != 0) {
                 relVal +=
-                  "<br/>" + divList[j] +
+                  // "<br/>" + divList[j] +
+                  "<br/>" + 
                   params[j].seriesName +
-                  "占比： " +
+                  "占比" +
+                  // "占比： " +
                   (
                     (100 * parseFloat(params[j].value)) /
                     parseFloat(value)
@@ -169,15 +172,12 @@ export default {
                 relVal +=
                   "<br/>" + divList[j] +
                   params[j].seriesName +
-                  "占比： "+ "0%";
+                  "占比"+ "0%";
+                  // "占比： "+ "0%";
               }
             }
             return relVal;
           }
-          // formatter: "{b}<br/>{a0}: {c0} + {c1}%<br/>{a1}: {c2}%"
-          // formatter: function(config) {
-          //   console.log('config', config);
-          // }
         },
         legend: {
           top: 20,

components/bussiness/charts/chart-column-vertical-tc.vue

@@ -93,7 +93,7 @@ export default {
             type: "shadow"
           },
           // formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}',
-          formatter: '{b}<br/>{a0}: {c0}%<br/> {a1}: {c1}%'
+          formatter: '{b}<br/>{a0}{c0}%<br/> {a1}{c1}%'
         },
         legend: {
           top: 20,

components/bussiness/course-times-list.vue

@@ -80,7 +80,7 @@ export default {
       justify-content: space-between;
       border-bottom: 1px solid #f0f1f2;
       span {
-        font-weight: 700;
+        font-weight: 400;
         color: #373839;
       }
       span:nth-child(1) {

components/common/common-area-select-old.vue

+<!-- 区域与机构选择（表头）组件 -->
+<template>
+  <ul class="common-area-select">
+    <li class="center" @click="areaClick">
+      {{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
+    </li>
+    <li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
+      {{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
+    </li>
+  </ul>
+</template>
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    areaName: {
+      type: String,
+      default: "全部"
+    },
+    orgName: {
+      type: String,
+      default: "全部机构"
+    },
+    showArea: {
+      type: Boolean,
+      default: false,
+    },
+    showOrg: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      orgList: 'orgList',
+      areaDegree: 'areaDegree'
+    }),
+    isNotVisible() {
+      if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+
+  methods: {
+    areaClick() {
+      this.$emit("areaClick");
+    },
+    orgClick() {
+      this.$emit("orgClick");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.common-area-select {
+  // padding-top: 50px;
+  display: flex;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  margin: 2px 0 10px;
+  flex-direction: row nowrap;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  justify-content: center; /* 水平居中 */
+  .center {
+    flex: 1;
+    font-size: 15px;
+    font-weight: 400;
+    color: #676869;
+    &.gray {
+      color: #C7C8C9;
+    }
+  }
+  img {
+    // padding-top: 10px;
+    position: relative;
+    left: 3px;
+    top: 1px;
+    width: 12px;
+    height: 12px;
+  }
+}
+</style>

components/common/common-area-select.vue

@@ -57,12 +57,17 @@ export default {
 
 <style lang="scss" scoped>
 .common-area-select {
+  &.fixed {
+    position: fixed;
+    top: 69px;
+    z-index: 10000000;
+  }
   // padding-top: 50px;
   display: flex;
   width: 100%;
   height: 35px;
   line-height: 35px;
-  margin: 2px 0 10px;
+  margin: 2px 0 0px;
   flex-direction: row nowrap;
   align-content: center;
   align-items: center;

components/common/common-header.vue

@@ -132,7 +132,7 @@ export default {
   background: #fff;
   color: #333;
   position: relative;
-  z-index: 10000000;
+  z-index: 100000000;
   .nav-back {
     display: inline-block;
     position: absolute;

components/common/common-swiper-item.vue

@@ -4,7 +4,7 @@
     <article class="middle">
       <div class="title">
         <span class="ratio">{{certFlag ? '获证率' : '完成率'}}
-          <img @click="tipsClick" :class="{'top-10': isAndroid}" v-show="certFlag" src="../../assets/images/what-icon-2.png" />
+          <img @click="tipsClick" :class="{'top-10': isAndroid}" src="../../assets/images/what-icon-2.png" />
         </span>
         <span>
           <img src="../../assets/images/tips-1.png" />
@@ -118,7 +118,11 @@ export default {
   },
   methods: {
     tipsClick() {
-      this.$emit('tipsClick')
+      let tipsContent = '是已完成人数/应参与人数*100%';
+      if(this.certFlag) {
+        tipsContent = '是已获证人数/应参与人数*100%'
+      }
+      this.$emit('tipsClick', tipsContent)
     }
   }
 };
@@ -132,13 +136,10 @@ export default {
   .middle {
     display: block;
     box-sizing: border-box;
-    // width: 100%;
     height: 120px;
     margin: 5px 15px;
-    // width: 345px;
     height: 128px;
     padding: 20px 15px;
-    // background: #b4d4ce;
     background: linear-gradient(
       180deg,
       rgba(6, 190, 182, 1) 0%,
@@ -146,13 +147,11 @@ export default {
     );
     box-shadow: 0px 5px 10px 0px rgba(68, 146, 132, 0.1);
     border-radius: 6px;
-    // border: 1px solid rgba(180, 212, 206, 1);
     .ratio {
       height: 24px;
       line-height: 24px;
       width: 100px;
       margin: 10px 0 24px;
-      // height: 80px;
       span {
         display: inline-block;
         height: 24px;
@@ -177,7 +176,7 @@ export default {
         left: 0;
         img {
           position: absolute;
-          top: 5px;
+          top: 3px;
           left: 46px;
           width: 14px;
           height: 14px;
@@ -195,10 +194,8 @@ export default {
   .middle-org {
     display: block;
     box-sizing: border-box;
-    // width: 100%;
     height: 120px;
     margin: 5px 15px;
-    // width: 345px;
     height: 98px;
     margin-top: 10px;
     padding: 15px;
@@ -210,7 +207,6 @@ export default {
       line-height: 21px;
       width: 100px;
       margin: 7px 0 15px;
-      // height: 80px;
       span {
         display: inline-block;
         height: 21px;
@@ -287,8 +283,5 @@ export default {
       }
     }
   }
-  .top-10 {
-
-  }
 }
 </style>

components/common/common-tabs-old.vue

+<!-- Tabs组件 -->
+<template>
+  <div class="common-tabs-wrapper">
+    <ul class="common-tabs">
+      <li
+        v-show="(item === '总体概况'
+          || item === '人群分析' 
+          || item === '课程分析' && projectInfo.existCourse === 1)
+          || (item === '考试分析' && projectInfo.existExam === 1)
+          || (item === '学习效果分析' && projectInfo.existEffect === 1)"
+        v-for="(item, index) in tapList"
+        :class="{'active': index === cIndex}"
+        :key="index"
+        @click="clickTab(index)"
+      >{{item}}</li>
+    </ul>
+    <span class="over"></span>
+    <span class="border"></span>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      cIndex: 0,
+      tapList: [
+        "总体概况",
+        "人群分析",
+        "课程分析",
+        "考试分析",
+        "学习效果分析"
+      ]
+    };
+  },
+  props: {
+    projectInfo: {
+      type: Object
+    }
+  },
+  mounted() {},
+  methods: {
+    clickTab(index) {
+      this.cIndex = index;
+      this.$emit("tabClicked", index);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.common-tabs-wrapper {
+  display: flex;
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
+      font-size: 13px;
+  .common-tabs {
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 6px;
+    font-size: 13px;
+    li {
+      display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      font-size: 13px;
+      font-weight: 700;
+      margin: 0 6px;
+      color: #979899;
+      background: #f0f1f2;
+      padding: 0 12px;
+      border-radius: 30px;
+      &:first-child {
+        margin-left: 15px;
+      }
+      &.active {
+        color: #449284;
+        background: #e3efed;
+      }
+    }
+    margin-top: 0;
+  }
+  .over {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    z-index: 2;
+    background: #fff;
+  }
+  .border {
+    display: block;
+    width: 100%;
+    height: 1px;
+    bottom: -3px;
+    left: 0;
+    border-bottom: 1px solid #f0f1f2;
+    position: absolute;
+    z-index: 2;
+  }
+}
+</style>

components/common/common-tabs.vue

 <!-- Tabs组件 -->
 <template>
-  <div class="common-tabs-wrapper">
+  <div class="common-tabs-wrapper" :class="{'fixed': needFixed}">
     <ul class="common-tabs">
       <li
         v-show="(item === '总体概况'
@@ -35,6 +35,10 @@ export default {
   props: {
     projectInfo: {
       type: Object
+    },
+    needFixed: {
+      type: Boolean,
+      default: false
     }
   },
   mounted() {},
@@ -49,17 +53,24 @@ export default {
 
 <style lang="scss" scoped>
 .common-tabs-wrapper {
+  &.fixed {
+    position: fixed;
+    top: 70px;
+    z-index: 10000000;
+    background: #fff;
+  }
   display: flex;
   position: relative;
   top: 0;
   left: 0;
   z-index: 1;
-      font-size: 13px;
+  font-size: 13px;
   .common-tabs {
     white-space: nowrap;
     overflow-x: auto;
-    padding-bottom: 6px;
+    padding: 9px 0;
     font-size: 13px;
+    // padding: 5px 0;
     li {
       display: inline-block;
       height: 30px;
@@ -87,19 +98,19 @@ export default {
     bottom: 0px;
     left: 0;
     width: 100%;
-    height: 6px;
-    z-index: 2;
+    height: 9px;
+    z-index: 10000000;
     background: #fff;
   }
   .border {
     display: block;
     width: 100%;
     height: 1px;
-    bottom: -3px;
+    bottom: 0px;
     left: 0;
     border-bottom: 1px solid #f0f1f2;
     position: absolute;
-    z-index: 2;
+    z-index: 10000000;
   }
 }
 </style>

components/common/common-title-with-what.vue

@@ -2,7 +2,6 @@
 <template>
   <ul class="common-title-with-what">
     <li class="left">{{title}}<img @click="tipsClick" src="../../assets/images/what-icon-1.png" /></li>
-    <!-- <li v-if="needRightBtn"></li> -->
   </ul>
 </template>
 <script>

package.json

@@ -18,8 +18,7 @@
     "koa": "^2.6.2",
     "nuxt": "^2.0.0",
     "v-charts": "^1.19.0",
-    "vant": "^2.2.13",
-    "vconsole": "^3.3.4"
+    "vant": "^2.2.13"
   },
   "devDependencies": {
     "@nuxtjs/axios": "^5.5.4",

pages/index.vue

@@ -2,15 +2,17 @@
   <section class="container">
     <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
     <CommonAreaSelect
-      @areaClick="areaTabClick" 
+      v-show="!isScroll"
+      @areaClick="areaTabClick"
       @orgClick="orgTabClick"
       :areaName="areaName"
       :orgName="orgName"
-      :showArea="isShowArea" 
+      :showArea="isShowArea"
       :showOrg="isShowOrg">
     </CommonAreaSelect>
-    <CommonTaps :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
+    <CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
     <!-- 总体概况 -->
+    <div v-show="isScroll" class="pd-top-60"></div>
     <article v-show="cIndex === 0">
       <CommonSwiperItem
         :isSingleOrg="isSingleOrg"
@@ -156,7 +158,7 @@ import ExamList from "@/components/bussiness/exam-list";
 import PopTips from "@/components/bussiness/pop-tips";
 import CommonCard from "@/components/common/common-card";
 import { getGeneralData } from "@/service/index";
-
+let timeOutId = null;
 export default {
   components: {
     CommonHeader,
@@ -193,6 +195,7 @@ export default {
   },
   data() {
     return {
+      isScroll: false,
       isShowArea: false,
       isShowOrg: false,
       isShowTips: false,
@@ -339,8 +342,30 @@ export default {
     if (this.$rocNative.isWeb) {
       this.getProjectInfo(this.queryParams);
     }
+    window.addEventListener(
+      'scroll',
+      () => {
+        if (timeOutId) {
+          clearTimeout(timeOutId);
+        }
+        timeOutId = setTimeout(this.handleScroll, 10);
+      },
+      false
+    );
   },
   methods: {
+		handleScroll() {
+			var scrollTop =
+				window.pageYOffset ||
+				document.documentElement.scrollTop ||
+				document.body.scrollTop;
+			if (scrollTop > 5) {
+				this.isScroll = true;
+			} else {
+				this.isScroll = false;
+			}
+    },
+
     // 获取可区域高度
     getViewportHeight() {
       var doc = document;
@@ -498,7 +523,6 @@ export default {
           if(viewportHeight > (468 + (courseLength - 1) * 60)) {
             this.needFixedBottomInfo = true;
           }
-          console.log(viewportHeight, (468 + (courseLength - 1) * 60))
         }
       });
     },
@@ -651,8 +675,8 @@ export default {
     },
 
     // 弹出提示信息二
-    tipsSwiperClick() {
-      this.tipsContent = '是已获证人数/应参与人数*100%'
+    tipsSwiperClick(tipsContent) {
+      this.tipsContent = tipsContent; //'是已获证人数/应参与人数*100%'
       this.isShowTips = true
     },
 
@@ -706,5 +730,8 @@ export default {
     bottom: 0;
     left: 0;
   }
+  .pd-top-60 {
+    padding-top: 40px;
+  }
 }
 </style>

plugins/vue-inject.js

 import Vue from 'vue'
 import rocNative from '@/utils/jsbridge'
 import echarts from 'echarts'
-import { DropdownMenu, DropdownItem } from 'vant';
 import { Toast } from 'vant';
-// import picaArea from 'pica-area'
-// Vue.use(picaArea)
 Vue.use(Toast);
 
-// Vue.filter('formatNum',function(num, arg1, arg2){
-//   var str = num + '';
-//   return str.split("").reverse().reduce((prev, next, index) => {
-//     return ((index % 3) ? next : (next + ',')) + prev;
-//   })
-// })
-
-import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
-let vConsole = new VConsole() // 初始化
-
-Vue.use(DropdownMenu).use(DropdownItem);
+// import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
+// let vConsole = new VConsole() // 初始化
 
 Vue.prototype.$echarts = echarts
 Vue.prototype.$rocNative = new rocNative();
\ No newline at end of file