新图标、下拉样式等

components/common/common-area-select.vue

@@ -4,8 +4,8 @@
     <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" @click="orgClick">
-      {{orgName}}<img v-show="!showOrg" src="../../assets/images/arr-down.png"/><img v-show="showOrg" src="../../assets/images/arr-up.png"/>
+    <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>    
     <!-- <li class="center" @click="orgClick">
       {{orgName}}<img src="../../assets/images/left-array-black.png"/>
@@ -13,6 +13,7 @@
   </ul>
 </template>
 <script>
+import { mapGetters } from "vuex";
 export default {
   props: {
     areaName: {
@@ -32,6 +33,14 @@ export default {
       default: false
     }
   },
+  computed: {
+    ...mapGetters({
+      orgList: 'orgList'
+    }),
+    isNotVisible() {
+      return this.orgList.length == 0
+    }
+  },
   // watch: {
     
   // },
@@ -64,6 +73,9 @@ export default {
     font-size: 15px;
     font-weight: 400;
     color: #676869;
+    &.gray {
+      color: #C7C8C9;
+    }
   }
   img {
     // padding-top: 10px;

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

+<!-- 标题组件 -->
+<template>
+  <div class="common-title-wrapper">
+    <div class="mask"></div>
+    <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>
+    </ul>
+    <ul class="dropdown-menu">
+      <li v-for="(item, index) in dataList" :key="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: "共34个省"
+    },
+    needRightBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dataList: [{
+        desc: '按获证比例排名',
+        type: 1
+      },{
+        desc: '按获证人数排名',
+        type: 2
+      },{
+        desc: '按参与人数排名',
+        type: 3
+      }],
+      cIndex: 0,
+      cDesc: '按获证比例排名',
+      cType: 1
+    };
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss">
+.common-title-wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+  height: 44px;
+  line-height: 44px;
+  background: #f8f9fa;
+  .mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    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>

pages/index.vue

@@ -217,7 +217,7 @@ export default {
       allData: {},
       projectId: "",
       token:
-        "299F66567E7C48C78ADE418B364C5A35" ||
+        "8F88F86408314155B6840723FAB7DAEC" ||
         "A62E9F92365547A29724F21F29BED4F6" ||
         "4556EDEAAE134FE1B6E1356BF9C1B8F9",
       isOrgStat: false,

pages/rank-edu.vue

 <template>
   <section>
     <CommonHeader title="项目情况排名"></CommonHeader>
-    <CommonTitleMini :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini>
+    <CommonTitleMini2 :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini2>
     <RankingList :rankList="rankList"></RankingList>
     <CommonNoMore class="mt-10"></CommonNoMore>
   </section>
@@ -11,7 +11,7 @@ const cookies = require("cookie-universal")();
 import { getStudyRankData } from "@/service";
 
 import CommonHeader from "@/components/common/common-header";
-import CommonTitleMini from "@/components/common/common-title-mini";
+import CommonTitleMini2 from "@/components/common/common-title-mini-2";
 import CommonNoMore from "@/components/common/common-no-more";
 import RankingList from "@/components/bussiness/ranking-item";
 
@@ -20,7 +20,7 @@ export default {
     return {
       listTitle: '共34个省',
       rankList: [],
-      needRightBtn: false,
+      needRightBtn: true,
       queryGDParams: {
         // appSelectType: 1,
         beginDate: "",
@@ -41,7 +41,7 @@ export default {
   },
   components: {
     CommonHeader,
-    CommonTitleMini,
+    CommonTitleMini2,
     CommonNoMore,
     RankingList
   },

service/api.js

@@ -20,7 +20,7 @@ Axios.interceptors.request.use(
     if (method === 'post' || method === 'put' || method === 'delete') {}
     if (config.withCredentials) {
       // config.headers.token = '3EB9111164E84A45B5B00428D52BC966';
-      config.headers.token = cookies.get('token') || '299F66567E7C48C78ADE418B364C5A35' || 'F24CD42F1CFA46829639228E9CFE1E3D' || 'C284B868425D494386EAEF6C9AE99937';
+      config.headers.token = cookies.get('token') || '8F88F86408314155B6840723FAB7DAEC' || '299F66567E7C48C78ADE418B364C5A35' || 'F24CD42F1CFA46829639228E9CFE1E3D' || 'C284B868425D494386EAEF6C9AE99937';
     }
     return config;
   },