UI样式优化等

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

@@ -5,7 +5,7 @@
       <div v-show="isShow" :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
       <NoContent v-show="!isShow" :id="id" :style="{width: '100%', height: '220px'}"></NoContent>
     </div>
-    <CommonNoMore v-show="isShow"></CommonNoMore>
+    <CommonNoMore v-show="isShow && dataList.length >= 10"></CommonNoMore>
   </div>
 </template>
 <script>

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

@@ -185,7 +185,7 @@ export default {
         },
         legend: {
           top: 20,
-          data: vm.legendData,
+          data: vm.legendData.reverse(),
           // data: ["获优秀人数", "获及格人数", "未获证人数"],
           textStyle: {
             fontSize: 12,

components/bussiness/course-times-list.vue

@@ -76,7 +76,7 @@ export default {
   }
   .list {
     font-size: 16px;
-    margin: 0 15px 20px;
+    margin: 0 15px;
     li {
       display: flex;
       flex-direction: row;
@@ -85,7 +85,7 @@ export default {
       justify-content: space-between;
       border-bottom: 1px solid #f0f1f2;
       span {
-        font-weight: 400;
+        font-weight: 700;
         color: #373839;
       }
       span:nth-child(1) {

components/bussiness/exam-score-list.vue

 <!-- 完成项目考试分数情况 -->
 <template>
-  <div class="exam-times-wrapper">
+  <div class="exam-score-wrapper">
     <TipsInfo></TipsInfo>
     <ul class="title">
       <li>考试分数(分)</li>
@@ -30,7 +30,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.exam-times-wrapper {
+.exam-score-wrapper {
   font-size: 14px;
   .title {
     display: flex;
@@ -67,7 +67,7 @@ export default {
       // justify-content: space-between;
       border-bottom: 1px solid #f0f1f2;
       span {
-        font-weight: 400;
+        font-weight: 700;
         color: #373839;
       }
       span:nth-child(1) {

components/common/common-bottom-info.vue

@@ -31,7 +31,7 @@ export default {
   color: #979899;
   font-size: 12px;
   background: #f8f9fa;
-  margin-top: 10px;
+  margin-top: -1px;
   span {
     height: 20px;
     line-height: 20px;

components/common/common-title-mini-old.vue

+<!-- 标题组件 -->
+<template>
+  <div class="common-title-wrapper">
+    <ul class="mini">
+      <li class="left">{{title}}</li>
+      <!-- <li class="right" v-if="needRightBtn">
+        <span>按获证比例排名</span>
+        <img src="../../assets/images/arr-down.png" alt />
+      </li>-->
+      <van-dropdown-menu v-if="needRightBtn">
+        <van-dropdown-item v-model="value2" :options="option2" />
+      </van-dropdown-menu>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "证书分布情况"
+    },
+    needRightBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      value1: 0,
+      value2: "a",
+      option1: [
+        { text: "全部商品", value: 0 },
+        { text: "新款商品", value: 1 },
+        { text: "活动商品", value: 2 }
+      ],
+      option2: [
+        { text: "默认排序", value: "a" },
+        { text: "好评排序", value: "b" },
+        { text: "销量排序", value: "c" }
+      ]
+    };
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+.common-title-wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  height: 44px;
+  line-height: 44px;
+  background: #f8f9fa;
+  .mini {
+    padding: 0px 15px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 44px;
+    line-height: 44px;
+    background: #f8f9fa;
+    li {
+      display: inline-block;
+      &.left {
+        // width: 216px;
+        display: block;
+        height: 44px;
+        line-height: 44px;
+        font-size: 15px;
+        font-weight: 700;
+        color: #676869;
+      }
+      &.right {
+        font-size: 15px;
+        font-weight: 700;
+        color: #676869;
+        img {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+  .van-dropdown-menu {
+    height: 44px;
+    line-height: 44px;
+    background: #f8f9fa;
+    color: #676869 !important;
+    font-size: 15px;
+    font-weight: 700;
+  }
+  .van-dropdown-menu__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #676869 !important;
+    .van-ellipsis {
+      color: #676869 !important;
+    }
+  }
+  .van-dropdown-item__option--active,
+  .van-dropdown-item__option--active .van-dropdown-item__icon {
+    .van-cell__title span{
+      color: #449284 !important;
+      font-weight: 400 !important;
+    }
+  }
+  // .van-cell {
+  //   // color: #676869 !important;
+  //   font-size: 15px;
+  //   font-weight: 400;
+  // }
+  .van-cell .van-cell--clickable .van-dropdown-item__option {
+      color: #676869 !important;
+      font-size: 15px;
+      font-weight: 400 !important;
+  }
+}
+</style>

components/common/common-title-mini.vue

@@ -7,9 +7,9 @@
         <span>按获证比例排名</span>
         <img src="../../assets/images/arr-down.png" alt />
       </li>-->
-      <van-dropdown-menu v-if="needRightBtn">
+      <!-- <van-dropdown-menu v-if="needRightBtn">
         <van-dropdown-item v-model="value2" :options="option2" />
-      </van-dropdown-menu>
+      </van-dropdown-menu> -->
     </ul>
   </div>
 </template>
@@ -47,9 +47,10 @@ export default {
 
 <style lang="scss">
 .common-title-wrapper {
-  position: relative;
+  position: fixed;
+  width: 100%;
   left: 0;
-  top: 0;
+  top: 74px;
   z-index: 1;
   height: 44px;
   line-height: 44px;

components/common/common-title-with-dropdown-old.vue

+<!-- 标题组件 - 带下拉选择 -->
+<template>
+  <div class="common-title-wd-wrapper">
+    <div v-show="isShowDropdown" class="mask" @click="isShowDropdown = !isShowDropdown"></div>
+    <ul class="mini">
+      <li class="left">{{title}}</li>
+      <li class="right" v-if="needRightBtn" @click="isShowDropdown = !isShowDropdown">
+        <span>{{cDesc || (dataList[0] && dataList[0].desc)}}</span>
+        <img src="../../assets/images/arr-down.png" alt />
+      </li>
+    </ul>
+    <ul v-show="isShowDropdown" class="dropdown-menu">
+      <li v-for="(item, index) in dataList" :key="index" @click="selectSortItem(index)">
+        <span :class="{'active': cIndex === index }">{{item.desc}}</span>
+        <img v-show="cIndex === index" src="../../assets/images/sort-select-icon.png" alt="">
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "共0条数据"
+      // default: "共34个省"
+    },
+    needRightBtn: {
+      type: Boolean,
+      default: false
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isShowDropdown: false,
+      cIndex: 0,
+      cDesc: '',
+      cType: 1
+    };
+  },
+
+  methods: {
+    selectSortItem(index) {
+      this.isShowDropdown = false;
+      this.cIndex = index;
+      this.cDesc = this.dataList[index].desc;
+      this.cType = this.dataList[index].type;
+      this.$emit('selectSortItem', this.cType);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.common-title-wd-wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+  height: 44px;
+  line-height: 44px;
+  background: #f8f9fa;
+  .mask {
+    position: fixed;
+    left: 0;
+    top: 100px;
+    z-index: 1002;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .mini {
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1003;
+    padding: 0px 15px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 44px;
+    line-height: 44px;
+    background: #f8f9fa;
+    li {
+      display: inline-block;
+      &.left {
+        // width: 216px;
+        display: block;
+        height: 44px;
+        line-height: 44px;
+        font-size: 15px;
+        font-weight: 700;
+        color: #676869;
+      }
+      &.right {
+        font-size: 15px;
+        font-weight: 700;
+        color: #676869;
+        img {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+  .van-dropdown-menu {
+    height: 44px;
+    line-height: 44px;
+    background: #f8f9fa;
+    color: #676869 !important;
+    font-size: 15px;
+    font-weight: 700;
+  }
+  .van-dropdown-menu__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #676869 !important;
+    .van-ellipsis {
+      color: #676869 !important;
+    }
+  }
+  .van-dropdown-item__option--active,
+  .van-dropdown-item__option--active .van-dropdown-item__icon {
+    .van-cell__title span{
+      color: #449284 !important;
+      font-weight: 400 !important;
+    }
+  }
+  // .van-cell {
+  //   // color: #676869 !important;
+  //   font-size: 15px;
+  //   font-weight: 400;
+  // }
+  .van-cell .van-cell--clickable .van-dropdown-item__option {
+      color: #676869 !important;
+      font-size: 15px;
+      font-weight: 400 !important;
+  }
+  .dropdown-menu {
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1004;
+    padding: 0 15px;
+    background: #fff;
+    li {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      height: 56px;
+      line-height: 56px;
+      font-size: 14px;
+      color: #676869;
+      border-bottom: 1px solid #F0F1F2;
+      img {
+        line-height: 56px;
+        width: 12px;
+        height: 12px;
+      }
+      span.active {
+        // span {
+          color: #449284 !important;
+        // }
+      }
+    }
+  }
+}
+</style>

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

@@ -57,9 +57,10 @@ export default {
 
 <style lang="scss" scoped>
 .common-title-wd-wrapper {
-  position: relative;
+  position: fixed;
+  width: 100%;
   left: 0;
-  top: 0;
+  top: 74px;
   z-index: 1001;
   height: 44px;
   line-height: 44px;

pages/examscore.vue

@@ -3,8 +3,8 @@
     <CommonHeader title="完成项目考试分数情况"></CommonHeader>
     <!-- <CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini> -->
     <CommonTitleWithDropdown :dataList="dropdownList" :title="title" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleWithDropdown>
-    <ExamScoreList :dataList="dataList"></ExamScoreList>
-    <CommonNoMore class="mt-10"></CommonNoMore>
+    <ExamScoreList style="padding-top: 60px;" :dataList="dataList"></ExamScoreList>
+    <CommonNoMore v-if="dataList.length >= 10" class="mt-10"></CommonNoMore>
   </section>
 </template>
 <script>

pages/examtimes.vue

@@ -2,8 +2,8 @@
   <section>
     <CommonHeader title="完成项目考试次数情况"></CommonHeader>
     <CommonTitleMini :title="title" :needRightBtn="needRightBtn"></CommonTitleMini>
-    <ExamTimesList :dataList="dataList"></ExamTimesList>
-    <CommonNoMore class="mt-10"></CommonNoMore>
+    <ExamTimesList style="padding-top: 60px;" :dataList="dataList"></ExamTimesList>
+    <CommonNoMore v-if="dataList.length >= 10" class="mt-10"></CommonNoMore>
   </section>
 </template>
 <script>

pages/index.vue

@@ -57,12 +57,12 @@
     </article>
 
     <!-- 课程分析 -->
-    <article v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;">
+    <article ref="courseAnalysitRef" v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;">
       <CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg" :processDataObj="processDataObj"></CourseTimesStat>
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="课程列表"></CommonTitle>
       <CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList>
-      <CommonBottomInfo></CommonBottomInfo>
+      <CommonBottomInfo :class="{'fixed-bottom-info': needFixedBottomInfo}"></CommonBottomInfo>
     </article>
 
     <!-- 考试分析 -->
@@ -219,7 +219,7 @@ export default {
       costRankList: [],
       projectId: "",
       token:
-        "BACBEEBBAE2247DBBD7CD0E15FE0CE93" ||
+        "A4EC71DD3D50420B86ED454EF25BCEA9" ||
         "A220943B006347799F277CC524EBB662",
       isOrgStat: false,
       // 区域选择通用接口参数
@@ -274,7 +274,35 @@ export default {
       courseInfo: {
         pCourseTotalTime: 0,
         pCourseAvg: 0,
-        pCourseList: []
+        pCourseList: [{
+                "courseId":765,
+                "courseName":"ww学情无比例不同专用四",
+                "courseTime":159,
+                "averageTime":23,
+                "joinCount":27,
+                "finishCount":7
+            },{
+                "courseId":765,
+                "courseName":"ww学情无比例不同专用四",
+                "courseTime":159,
+                "averageTime":23,
+                "joinCount":27,
+                "finishCount":7
+            },{
+                "courseId":765,
+                "courseName":"ww学情无比例不同专用四",
+                "courseTime":159,
+                "averageTime":23,
+                "joinCount":27,
+                "finishCount":7
+            },{
+                "courseId":765,
+                "courseName":"ww学情无比例不同专用四",
+                "courseTime":159,
+                "averageTime":23,
+                "joinCount":27,
+                "finishCount":7
+            }]
       },
       generalExamData: {
         beforeExamCount: 4,
@@ -295,7 +323,8 @@ export default {
       },
       processDataObj: {
 
-      }
+      },
+      needFixedBottomInfo: false,
     };
   },
   filters: {
@@ -328,7 +357,7 @@ export default {
         this.setProjectId(this.projectId);
       } else {
         this.getUserInfo();
-      }
+      }      
     }
     // this.$store.dispatch('searchHospital', { name: '测试' });
   },
@@ -338,6 +367,17 @@ export default {
     }
   },
   methods: {
+    getViewportHeight() {
+      var doc = document;
+      var docE = doc.documentElement;
+      var body = doc.body;
+      return docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0;
+      // return {
+      //   'width': docE && docE.clientWidth || body && body.offsetWidth || window.innerWidth || 0,
+      //   'height': docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0
+      // };
+    },
+
     // 切换机构人员列表中的tabs
     orgDoctorTabChange(index) {
       this.queryGDParams.pageCfg.type = index + 1;
@@ -426,7 +466,7 @@ export default {
         if (res.code === "000000") {
           this.analysisData = res.data;
           this.analysisEduData = res.data.eduList.join;
-          this.analysisTitleData = res.data.titleList.join;
+          this.analysisTitleData = res.data.titleList.join;          
         }
       });
     },
@@ -476,8 +516,14 @@ export default {
           }
           this.processDataObj.maxDuration = res.data.pCourseTotalTime;
           this.processDataObj.avgDuration = res.data.pCourseAvg;
-          // :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime"
           this.courseInfo = res.data;
+          let viewportHeight = this.getViewportHeight();
+          let courseLength = res.data.pCourseList.length;
+          // 上面的高度 468   每一条数据的高度 60
+          if(viewportHeight > (468 + (courseLength - 1) * 60)) {
+            this.needFixedBottomInfo = true;
+          }
+          console.log(viewportHeight, (468 + (courseLength - 1) * 60))
         }
       });
     },
@@ -686,5 +732,10 @@ export default {
   .mt-10 {
     margin-top: 0;
   }
+  .fixed-bottom-info {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
 }
 </style>

pages/klgpoint.vue

@@ -18,7 +18,7 @@ import ChartColumnHorizontalTCLong from "@/components/bussiness/charts/chart-col
 export default {
   data() {
     return {
-      title: "共0知识点",
+      title: "共0个知识点",
       token: '',
       queryGDParams: {
         appSelectType: 2, //考试分析(1考试次数全部2考试分数全部) 学习效果分析(1正确率对比全部2知识点对比全部)
@@ -68,7 +68,7 @@ export default {
       await getStudyEffect(params).then(res => {
         if (res.code === "000000") {
           this.knowledgeEffectList = res.data.knowledgeEffectList || [];
-          this.title = `共${this.knowledgeEffectList.length}知识点`;
+          this.title = `共${this.knowledgeEffectList.length}个知识点`;
         }
       });
     }

pages/rankdays.vue

@@ -3,7 +3,7 @@
     <CommonHeader title="完成天数排名"></CommonHeader>
     <CommonTitleMiniWithDropdown :title="listTitle" @selectSortItem="selectSortItem"></CommonTitleMiniWithDropdown>
     <RankingItemDays :rankList="rankList"></RankingItemDays>
-    <CommonNoMore class="mt-10"></CommonNoMore>
+    <CommonNoMore v-if="rankList.length >= 10" class="mt-10"></CommonNoMore>
   </section>
 </template>
 <script>

pages/rankedu.vue

@@ -3,7 +3,7 @@
     <CommonHeader title="项目情况排名"></CommonHeader>
     <CommonTitleWithDropdown :dataList="dropdownList" :title="title" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleWithDropdown>
     <RankingList :certFlag="certFlag" :rankList="rankList"></RankingList>
-    <CommonNoMore class="mt-10"></CommonNoMore>
+    <CommonNoMore v-if="rankList.length >= 10" class="mt-10"></CommonNoMore>
   </section>
 </template>
 <script>