【update】-大屏样式的修改

src/views/dashboard/Analysis.vue

@@ -10,7 +10,10 @@
     </template>
     <!--    所领导 部门领导展示统计图 -->
     <template v-else>
-      <div class="screen-btn" @click="goScreen">大屏</div>
+      <div class="screen-btn" >
+<!--         v-has="'wholePaymentsStatistics:search'"-->
+        <a-button type="primary" @click="goScreen">大屏</a-button>
+      </div>
 
       <!-- 全所收入统计 累计-->
       <single-month-total-echarts class="single-month-total "></single-month-total-echarts>
@@ -171,9 +174,8 @@ export default {
   position: relative;
 }
 .screen-btn{
-  position: absolute;
+  padding-bottom: 10px;
-  left: 0;
+  display: flex;
-  top: 0;
+  justify-content: flex-end;
-  cursor: pointer;
 }
 </style>

src/views/screen/incomePayments/IncomeSortEcharts.vue

@@ -23,7 +23,7 @@
         tree-node-filter-prop="title"
         @change="changeDepart"
         style="width:50%"
-        dropdownClassName="screen-select"
+        dropdown-class-name="screen-department-select screen-select"
         :dropdownStyle="{'overflow-x':'hidden',' overflo-y': 'auto' }"
         :treeData="treeDepartData"
         v-model="queryParam.departCode"
@@ -89,7 +89,7 @@ echarts.use([
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
 import {queryDepartTreeList} from '@api/api'
-import { createPieChart } from "../util/PieOptions";
+import { createPieChart } from '../util/PieOptions'
 
 const columns = [
   {

src/views/screen/incomePayments/NotReceivedEcharts.vue

@@ -13,6 +13,7 @@
         tree-node-filter-prop="title"
         @change="changeDepart"
         style="width:50%"
+        dropdown-class-name="screen-department-select screen-select"
         :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
         :treeData="treeDepartData"
         v-model="queryParam.departCode"

src/views/screen/incomePayments/ThreeYearEcharts.vue

@@ -2,7 +2,6 @@
 <template>
   <div class="income-full-box income-full-no-table-box">
     <img class="box-bg-img" src="../../../assets/screen/full_no_table_bg.png" alt="">
-
     <div class="box-title">年度待确收金额统计</div>
     <div class="box-content">
       <div class="echarts-box" id="threeYearScreen"></div>

src/views/screen/incomePayments/index.vue

@@ -82,8 +82,8 @@ export default {
   /deep/ .box-content {
     position: absolute;
     width: calc(100% - 100px);
-    height: calc(100% - 60px);
+    height: calc(100% - 5% * 2);
-    top: 30px;
+    top: 5%;
     left: 50px;
     display: flex;
     flex-direction: column;
@@ -111,12 +111,17 @@ export default {
   }
 }
 //全屏的box 里面没有表格 1875 * 587
-.income-full-no-table-box{
+/deep/ .income-full-no-table-box{
   padding-top: 31.31%;
-  /deep/ .box-title {
+
+  .box-title {
     // 34.5 / 高度 587
     top: 5.88%;
   }
+  .box-content{
+    height: calc(100% - 8% * 2);
+    top: 8%;
+  }
 }
 // 最后一个标题比较长的信息
 .income-more-title-full-box{
@@ -130,7 +135,7 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: end;
-  margin-right: 30px;
+  margin-right: 6%;
   padding-top: 6%;
   position: relative;
   z-index: 100;
@@ -191,19 +196,15 @@ export default {
   color: #fff !important;
 }
 
-
+/deep/.table-text {
-
+  white-space: nowrap;
-
+  overflow: hidden;
-
+  text-overflow: ellipsis;
-///deep/::-webkit-scrollbar{
+}
-//  background-color: red;
+/*表格滚动条*/
-//}
+/deep/.ant-table-body {
-//::-webkit-scrollbar-thumb{
+  overflow-x: auto!important;
-//  background-color: red;
+}
-//}
-//::-webkit-scrollbar-track{
-//  background-color: red;
-//}
 
 
 </style>
@@ -211,19 +212,45 @@ export default {
 @fontColor: #fff;
 @selectColor: #FFF500;
 @backgroundSelected: rgba(255, 255, 255, 0.10);
+@white: #fff;
+@normal-color: rgba(256, 256, 256, 0.2);
 .screen-select{
   max-height: 200px!important;
   max-width: 100px;
-  //&.ant-select-tree-dropdown {
-  //  background-color: #303c62;
-  //  color: @fontColor;
-  //}
-  ///deep/li .ant-select-tree-node-content-wrapper {
-  //  color: @fontColor;
-  //}
 }
 /deep/.screen-select.ant-select-tree li .ant-select-tree-node-content-wrapper {
   color: @fontColor!important;
 }
 
+.screen-department-select{
+  background-color: #181F55;
+  .ant-select-dropdown-content{
+    background-color: #181F55;
+  }
+  .ant-select-tree-title, svg{
+    color: #bdbec6;
+  }
+  .ant-select-tree li .ant-select-tree-node-content-wrapper:hover{
+    background-color: #7599E8;
+    .ant-select-tree-title{
+      color: #fff;
+    }
+  }
+  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected{
+    background-color: #4364C2;
+    .ant-select-tree-title{
+      color: #fff;
+    }
+  }
+
+  .ant-select-dropdown-search{
+    background-color: #181F55;
+    input{
+      border-color: #7599E8!important;
+      background: #233062 !important;
+      color: white;
+    }
+  }
+}
+
 </style>

src/views/screen/preparationRevision/index.vue

@@ -200,6 +200,11 @@ export default {
     color: #fff;
     background-color: #4364C2;
   }
+  .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
+    color: #fff;
+    background-color: #7599E8;
+  }
 }
 
+
 </style>