优化初步

src/assets/scss/main-shuju.scss

@@ -1,5 +1,8 @@
 @import "~@/element-ui/theme-variables.scss";
-@import "./variables.scss";
+@import "./shuju-variables.scss";
+@import "./c/config";
+@import "./c/function";
+@import "./modules/visual/c/common.scss";
 
 // $navbar--height: 60px;
 body {
@@ -19,6 +22,8 @@ body {
   background-image: url(../img/shuju/bg.jpg);
   background-size: cover;
   background-position: center 0;
+  height: 100%;
+  @include scrollBar;
 
   .el-card + .el-card {
     margin-top: 15px;
@@ -171,6 +176,10 @@ body {
   // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
   background: linear-gradient(180deg, #00023f, #176dec);
   box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35);
+  font-size: 18px;
+  .el-menu-item {
+    font-size: 18px;
+  }
 
   .navbar--colorful {
     .navbar__body {
@@ -229,17 +238,17 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 5px;
+    padding: 10px 20px;
     margin: 0;
     width: 100%;
     height: 100%;
-    font-size: 24px;
+    font-size: 28px;
+    font-weight: bold;
     text-transform: uppercase;
     white-space: nowrap;
     // overflow: hidden;
     transition: width 0.3s;
     font-family: FZZCHJW;
-    font-weight: normal;
     color: #ffffff;
     background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%);
     -webkit-background-clip: text;
@@ -288,6 +297,7 @@ body {
   .navbar__menu {
     background-color: transparent;
     border-bottom: 0 !important;
+
     a:focus,
     a:hover {
       text-decoration: none;
@@ -349,7 +359,7 @@ body {
         position: absolute;
         display: none;
         padding: 0 10px;
-        width: 120px;
+        width: 160px;
         left: -100px;
         right: -100px;
         margin: 0 auto;
@@ -360,6 +370,9 @@ body {
           border-top: 1px dashed rgba(#fff, 0.4);
           color: rgba(#fff, 0.7);
           transition: all ease 0.5s;
+          padding: 10px 0;
+          line-height: $navbar--height * 0.5;
+
           &.z-on {
             font-weight: bold;
           }
@@ -409,7 +422,7 @@ body {
       }
       .navbar__icon-menu {
         vertical-align: middle;
-        font-size: 16px;
+        font-size: 20px;
       }
       .el-dropdown {
         color: #fff;

src/assets/scss/shuju-variables.scss

@@ -0,0 +1,24 @@
+// Base
+$base--line-height: 1.15;
+
+// Navbar
+$navbar--height: 75px;
+
+// Sidebar
+$sidebar--width: 230px;
+$sidebar--width-fold: 100px;
+$sidebar--background-color-dark: #263238;
+$sidebar--text-color-dark: #8a979e;
+$sidebar--menu-item-height: 48px;
+
+// Content
+$content--padding: 10px;
+$content--background-color: #f1f4f5;
+$content--card-header-height: 60px;
+$content--tabs-header-height: 38px;
+// Content, 填充整屏高度(非tabs状态) = 整屏高度 - 导航条高度 - aui-content上下内边距高度
+$content--fill-height: calc(100vh - #{$navbar--height} - #{$content--padding * 2});
+// Content, 填充整屏高度(是tabs状态) = 整屏高度 - 导航条高度 - tabs组件header高度 - tabs组件content上下内边距高度
+$content--fill-height-tabs: calc(
+    100vh - #{$navbar--height} - #{$content--tabs-header-height} - #{$content--padding * 2}
+);

src/js/store/index.js

@@ -8,7 +8,7 @@ import { requestPost } from "@/js/dai/request";
 import { dateFormats } from "@/utils/index";
 
 Vue.use(Vuex);
-let interTimer = null
+let interTimer = null;
 export default new Vuex.Store({
   namespaced: true,
   state: {
@@ -42,6 +42,9 @@ export default new Vuex.Store({
     tipsList: [],
     tipsTime: [],
     inIframe: window.self !== window.top,
+    fixed1920: {
+      height: document.documentElement.clientHeight,
+    },
   },
   modules: {
     user,
@@ -56,69 +59,71 @@ export default new Vuex.Store({
       });
     },
     SET_TIPS_LIST(state, tipsList) {
-      let _list = state.tipsList
+      let _list = state.tipsList;
       // state.tipsList = _list.concat(tipsList)
-      state.tipsList = tipsList
+      state.tipsList = tipsList;
     },
     SET_TIPS_TIME(state, time) {
-      state.tipsTime = time
-    }
+      state.tipsTime = time;
+    },
   },
   actions: {
     clearInter() {
-      clearInterval(interTimer)
+      clearInterval(interTimer);
     },
     setInterval({ commit, dispatch, state }) {
       interTimer = setInterval(() => {
-        const _t = dateFormats('YYYY-mm-dd HH:MM', (new Date(new Date().toLocaleDateString()).getTime()))
-        const _tt = new Date(_t).getTime()
-        console.log('230000---', _t)
-        const t =  dateFormats('YYYY-mm-dd HH:MM', (new Date().getTime()))
-        const nt = new Date(t).getTime()
+        const _t = dateFormats(
+          "YYYY-mm-dd HH:MM",
+          new Date(new Date().toLocaleDateString()).getTime()
+        );
+        const _tt = new Date(_t).getTime();
+        console.log("230000---", _t);
+        const t = dateFormats("YYYY-mm-dd HH:MM", new Date().getTime());
+        const nt = new Date(t).getTime();
         // 判断当前时间是否为 00：00
         if (nt == _tt) {
-          dispatch('setTipsTime')
-          return
+          dispatch("setTipsTime");
+          return;
         }
-        let times = state.tipsTime
-        console.log('nt---000', nt)
+        let times = state.tipsTime;
+        console.log("nt---000", nt);
         state.tipsTime.forEach((item, index) => {
-          const _t = new Date(item).getTime()
+          const _t = new Date(item).getTime();
           if (_t == nt) {
-            clearInterval(interTimer)
-            dispatch('setTipsList', item)
-            times.splice(index, 1)
-            commit('SET_TIPS_TIME', times)
+            clearInterval(interTimer);
+            dispatch("setTipsList", item);
+            times.splice(index, 1);
+            commit("SET_TIPS_TIME", times);
           }
-        })
-      }, 60000) 
+        });
+      }, 60000);
     },
     setTipsList({ commit }, time) {
       return new Promise(async (resolve, reject) => {
-        const url = '/gov/project/memoAttr/memosToRemind'
+        const url = "/gov/project/memoAttr/memosToRemind";
         const params = {
-          remindTime: time || ''
-        }
-        const { data, code, msg } = await requestPost(url, params)
+          remindTime: time || "",
+        };
+        const { data, code, msg } = await requestPost(url, params);
         if (code === 0) {
-          commit('SET_TIPS_LIST', data)
-          resolve()
-        } else reject(msg)
-      })
+          commit("SET_TIPS_LIST", data);
+          resolve();
+        } else reject(msg);
+      });
     },
     setTipsTime({ commit, dispatch }) {
       return new Promise(async (resolve, reject) => {
-        if (interTimer) clearInterval(interTimer)
-        const url = '/gov/project/memoAttr/memoTime'
+        if (interTimer) clearInterval(interTimer);
+        const url = "/gov/project/memoAttr/memoTime";
 
-        const { data, code, msg } = await requestPost(url)
+        const { data, code, msg } = await requestPost(url);
         if (code === 0) {
-          
-          commit('SET_TIPS_TIME', data)
-          if (data.length > 0) dispatch('setInterval')
-          resolve()
-        } else reject(msg)
-      })
-    }
-  }
+          commit("SET_TIPS_TIME", data);
+          if (data.length > 0) dispatch("setInterval");
+          resolve();
+        } else reject(msg);
+      });
+    },
+  },
 });

src/views/components/fixed1920.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="g-app">
+    <div class="g-bd" :style="bdStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      clientHeight: document.documentElement.clientHeight,
+      clientWidth: document.documentElement.clientWidth,
+    };
+  },
+
+  components: {},
+  computed: {
+    bdStyle() {
+      const { clientHeight, clientWidth } = this;
+      console.log("clientHeight", clientHeight);
+      const scale = clientWidth / 1920;
+      const height = clientHeight / scale;
+      const top = (clientHeight - height) / 2;
+      const left = (clientWidth - 1920) / 2;
+      this.$store.state.fixed1920.height = height;
+      return {
+        transform: `scale(${scale})`,
+        height: `${height}px`,
+        left: `${left}px`,
+        top: `${top}px`,
+      };
+    },
+  },
+  created() {},
+  mounted() {
+    window.addEventListener("resize", () => {
+      this.clientHeight = document.documentElement.clientHeight;
+      this.clientWidth = document.documentElement.clientWidth;
+    });
+  },
+
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.g-app {
+  position: absolute;
+  // width: 1920px;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.g-bd {
+  position: absolute;
+  width: 1920px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+</style>

src/views/main-shuju/main.vue

@@ -1,25 +1,28 @@
 <template>
-  <div
-    v-loading.fullscreen.lock="loading"
-    :element-loading-text="$t('loading')"
-    :class="[
-      'g-bd',
-      { 'z-sidebar--fold': $store.state.sidebarFold },
-      {
-        'z-sidebar--noside': true,
-      },
-    ]"
-  >
-    <template v-if="!loading">
-      <main-navbar ref="ref_navbar" />
-      <div class="g-cnt">
-        <main-content
-          v-if="!$store.state.contentIsNeedRefresh"
-          @changeCustomerName="changeCustomerName"
-        />
-      </div>
-    </template>
-  </div>
+  <fixed1920>
+    <div
+      v-loading.fullscreen.lock="loading"
+      :element-loading-text="$t('loading')"
+      :class="[
+        'g-bd',
+        { 'z-sidebar--fold': $store.state.sidebarFold },
+        {
+          'z-sidebar--noside': true,
+        },
+      ]"
+    >
+      <template v-if="!loading">
+        <main-navbar ref="ref_navbar" />
+
+        <div class="g-cnt">
+          <main-content
+            v-if="!$store.state.contentIsNeedRefresh"
+            @changeCustomerName="changeCustomerName"
+          />
+        </div>
+      </template>
+    </div>
+  </fixed1920>
 </template>
 
 <script>
@@ -29,6 +32,7 @@ import debounce from "lodash/debounce";
 import { mapGetters } from "vuex";
 import nextTick from "dai-js/tools/nextTick";
 import { requestPost } from "@/js/dai/request";
+import fixed1920 from "@/views/components/fixed1920.vue";
 
 export default {
   provide() {
@@ -51,6 +55,7 @@ export default {
   components: {
     MainNavbar,
     MainContent,
+    fixed1920,
   },
 
   watch: {
@@ -145,7 +150,8 @@ export default {
   &::-webkit-scrollbar-corner,
     /* 滚动条角落 */
   &::-webkit-scrollbar-thumb,
-  &::-webkit-scrollbar-track {      /*滚动条的轨道*/
+  &::-webkit-scrollbar-track {
+    /*滚动条的轨道*/
     border-radius: 4px;
   }
 
@@ -153,13 +159,13 @@ export default {
   &::-webkit-scrollbar-track {
     /* 滚动条轨道 */
 
-    background: rgba(12, 129, 254, .24);
+    background: rgba(12, 129, 254, 0.24);
     // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
   }
 
   &::-webkit-scrollbar-thumb {
     /* 滚动条手柄 */
-    background: linear-gradient(270deg, #1257c9, #0095FF);
+    background: linear-gradient(270deg, #1257c9, #0095ff);
   }
 }
 </style>

src/views/modules/visual/heart/index.vue

@@ -2,12 +2,14 @@
   <div>
     <div class="m-sizer">
       <span>时间：</span>
-      <el-date-picker v-model="monthId"
-                      type="month"
-                      :clearable="false"
-                      prefix-icon="el-icon-caret-bottom"
-                      placeholder="选择日期"
-                      value-format="yyyyMM">
+      <el-date-picker
+        v-model="monthId"
+        type="month"
+        :clearable="false"
+        prefix-icon="el-icon-caret-bottom"
+        placeholder="选择日期"
+        value-format="yyyyMM"
+      >
       </el-date-picker>
     </div>
 
@@ -19,12 +21,14 @@
             <span>公益达人</span>
           </div>
 
-          <div class="tb">
-            <cpt-tb :highlight-top3="true"
-                    :col-list="tb3.colList"
-                    :loading="tb3.loading"
-                    :header="tb3.header"
-                    :list="tb3.list"></cpt-tb>
+          <div class="tb" :style="tbStyle">
+            <cpt-tb
+              :highlight-top3="true"
+              :col-list="tb3.colList"
+              :loading="tb3.loading"
+              :header="tb3.header"
+              :list="tb3.list"
+            ></cpt-tb>
           </div>
         </cpt-card>
       </div>
@@ -36,12 +40,14 @@
             <span>党员先锋</span>
           </div>
 
-          <div class="tb">
-            <cpt-tb :highlight-top3="true"
-                    :col-list="tb2.colList"
-                    :loading="tb2.loading"
-                    :header="tb2.header"
-                    :list="tb2.list"></cpt-tb>
+          <div class="tb" :style="tbStyle">
+            <cpt-tb
+              :highlight-top3="true"
+              :col-list="tb2.colList"
+              :loading="tb2.loading"
+              :header="tb2.header"
+              :list="tb2.list"
+            ></cpt-tb>
           </div>
         </cpt-card>
       </div>
@@ -53,12 +59,14 @@
             <span>动力网格</span>
           </div>
 
-          <div class="tb">
-            <cpt-tb :highlight-top3="true"
-                    :col-list="tb1.colList"
-                    :loading="tb1.loading"
-                    :header="tb1.header"
-                    :list="tb1.list"></cpt-tb>
+          <div class="tb" :style="tbStyle">
+            <cpt-tb
+              :highlight-top3="true"
+              :col-list="tb1.colList"
+              :loading="tb1.loading"
+              :header="tb1.header"
+              :list="tb1.list"
+            ></cpt-tb>
           </div>
         </cpt-card>
       </div>
@@ -76,7 +84,7 @@ import dateFormat from "dai-js/tools/dateFormat";
 
 export default {
   name: "heart",
-  data () {
+  data() {
     return {
       agencyId: this.$store.state.user.agencyId,
       areaCode: "",
@@ -171,7 +179,13 @@ export default {
 
   props: {},
 
-  computed: {},
+  computed: {
+    tbStyle() {
+      return {
+        height: this.$store.state.fixed1920.height - 260 + "px",
+      };
+    },
+  },
 
   components: {
     cptCard,
@@ -179,33 +193,33 @@ export default {
   },
 
   watch: {
-    monthId () {
+    monthId() {
       this.getApiData();
     },
   },
 
-  async mounted () {
+  async mounted() {
     this.userId = this.uid;
     await nextTick(100);
     this.getApiData();
   },
 
   methods: {
-    handleSearch () { },
+    handleSearch() {},
 
-    async getApiData () {
+    async getApiData() {
       //await this.getAgencyInfo();
       this.getTb1();
       this.getTb2();
       this.getTb3();
     },
 
-    toUserInfo (uid) {
+    toUserInfo(uid) {
       this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
     },
 
     // 获取当前组织信息
-    async getAgencyInfo () {
+    async getAgencyInfo() {
       const { data, code, msg } = await requestPost(
         "/data/report/screen/agency/agencydetail-multic",
         {
@@ -219,7 +233,7 @@ export default {
     },
 
     //加载组织数据
-    async getTb1 () {
+    async getTb1() {
       const { agencyId, areaCode } = this;
 
       const url =
@@ -248,7 +262,7 @@ export default {
     },
 
     //加载组织数据
-    async getTb2 () {
+    async getTb2() {
       const { agencyId, areaCode } = this;
       const url = "/data/report/screen/user/partypointrank";
       let params = {
@@ -279,7 +293,7 @@ export default {
     },
 
     //加载组织数据
-    async getTb3 () {
+    async getTb3() {
       const { agencyId, areaCode } = this;
       const url = "/data/report/screen/user/userpointrank/withoutpartymember";
       let params = {