页面样式优化

src/components/ProTable/index.vue

@@ -15,6 +15,9 @@
     <!-- 表格主体 -->
     <div>
       <slot name="table_top"></slot>
+      <!-- <div class="flex rounded w-full h-11 items-center pl-2 btn-grp">
+        
+      </div> -->
       <vxe-grid ref="xGrid" v-bind="gridOptions" :data="processTableData" :loading="loading">
         <template #toolbar_buttons>
           <slot name="left_buttons"></slot>
@@ -215,4 +218,8 @@
     handleCurrentChange,
   });
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.btn-grp {
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);
+}
+</style>

src/config/index.js

@@ -7,7 +7,7 @@ export const HOME_URL = '/home/index';
 export const LOGIN_URL = '/login';
 
 // 默认主题颜色
-export const DEFAULT_PRIMARY = '#009688';
+export const DEFAULT_PRIMARY = '#1989fa';
 
 // 路由白名单地址（本地存在的路由 staticRouter.ts 中）
 export const ROUTER_WHITE_LIST = ['/500', '/403', '/404'];

src/layouts/LayoutColumns/index.scss

@@ -77,7 +77,8 @@
       .logo-text {
         font-size: 24px;
         font-weight: bold;
-        color: var(--el-aside-logo-text-color);
+        letter-spacing: 5px;
+        color: #ffffff;
         white-space: nowrap;
       }
     }

src/layouts/LayoutVertical/index.scss

@@ -26,10 +26,10 @@
           object-fit: contain;
         }
         .logo-text {
-          margin-left: 6px;
-          font-size: 21.5px;
+          font-size: 24px;
           font-weight: bold;
-          color: var(--el-aside-logo-text-color);
+          letter-spacing: 5px;
+          color: #ffffff;
           white-space: nowrap;
         }
       }

src/layouts/components/Header/components/Avatar.vue

 <template>
   <el-dropdown trigger="click">
     <div class="avatar">
-      <img src="@/assets/images/avatar.gif" alt="avatar" />
+      <img src="@/assets/images/logo.jpg" alt="avatar" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
@@ -64,9 +64,20 @@
   .avatar {
     width: 40px;
     height: 40px;
-    overflow: hidden;
     cursor: pointer;
-    border-radius: 50%;
+    position: relative;
+    &::before {
+      width: 0;
+      height: 0;
+      position: absolute;
+      content: '';
+      display: block;
+      right: -10px;
+      bottom: 10px;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 4px solid #5a5e66;
+    }
     img {
       width: 100%;
       height: 100%;

src/layouts/components/Main/index.scss

@@ -2,5 +2,5 @@
   box-sizing: border-box;
   padding: 10px 12px;
   overflow-x: hidden;
-  background-color: var(--el-bg-color-page);
+  background-color: #f5f7fa;
 }

src/layouts/components/Main/index.vue

@@ -2,34 +2,41 @@
   <Maximize v-show="maximize" />
   <Tabs v-show="tabs" />
   <el-main>
-    <router-view v-slot="{ Component, route }">
-      <transition appear name="fade-transform" mode="out-in">
-        <keep-alive :include="keepAliveName">
-          <component
-            :is="createComponentWrapper(Component, route)"
-            v-if="isRouterShow"
-            :key="route.fullPath"
-          />
-        </keep-alive>
-      </transition>
-    </router-view>
+    <el-watermark id="watermark" :font="font" :content="watermark ? username : ''">
+      <router-view v-slot="{ Component, route }">
+        <transition appear name="fade-transform" mode="out-in">
+          <keep-alive :include="keepAliveName">
+            <component
+              :is="createComponentWrapper(Component, route)"
+              v-if="isRouterShow"
+              :key="route.fullPath"
+            />
+          </keep-alive>
+        </transition>
+      </router-view>
+    </el-watermark>
   </el-main>
 </template>
 
 <script setup>
-  import { ref, onBeforeUnmount, provide, watch, h } from 'vue';
+  import { ref, onBeforeUnmount, provide, watch, h, computed, reactive } from 'vue';
   import { storeToRefs } from 'pinia';
   import { useDebounceFn } from '@vueuse/core';
   import { useGlobalStore } from '@/stores/modules/global';
   import { useKeepAliveStore } from '@/stores/modules/keepAlive';
+  import { useUserStore } from '@/stores/modules/user';
   import Maximize from './components/Maximize.vue';
   import Tabs from '@/layouts/components/Tabs/index.vue';
 
   const globalStore = useGlobalStore();
   const { maximize, isCollapse, layout, tabs } = storeToRefs(globalStore);
+  const userStore = useUserStore();
 
   const keepAliveStore = useKeepAliveStore();
   const { keepAliveName } = storeToRefs(keepAliveStore);
+  const isDark = computed(() => globalStore.isDark);
+  const watermark = computed(() => globalStore.watermark);
+  const username = computed(() => userStore.userInfo?.username);
 
   // 注入刷新页面方法
   const isRouterShow = ref(true);
@@ -48,7 +55,14 @@
     }
     return h(wrapper);
   }
-
+  const font = reactive({ color: 'rgba(153, 153, 153, 0.1)', fontSize: 24 });
+  watch(
+    isDark,
+    () => (font.color = isDark.value ? 'rgba(153, 153, 153, 0.1)' : 'rgba(153, 153, 153, 0.1)'),
+    {
+      immediate: true,
+    }
+  );
   // 监听当前页面是否最大化，动态添加 class
   watch(
     () => maximize.value,

src/layouts/components/Menu/SubMenu.vue

@@ -42,6 +42,12 @@
     color: var(--el-menu-hover-text-color) !important;
     background-color: transparent !important;
   }
+  .el-sub-menu .el-menu {
+    background-color: #1f2d3d!important;
+  }
+  .el-sub-menu .el-sub-menu__title:hover {
+    background-color: #263445!important;
+  }
   .el-menu--collapse {
     .is-active {
       .el-sub-menu__title {
@@ -57,14 +63,14 @@
     &.is-active {
       color: var(--el-menu-active-color) !important;
       background-color: var(--el-menu-active-bg-color) !important;
-      &::before {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 4px;
-        content: '';
-        background-color: var(--el-color-primary);
-      }
+      // &::before {
+      //   position: absolute;
+      //   top: 0;
+      //   bottom: 0;
+      //   width: 4px;
+      //   content: '';
+      //   background-color: var(--el-color-primary);
+      // }
     }
   }
   .vertical,

src/layouts/components/Tabs/index.scss

@@ -29,6 +29,8 @@
         box-sizing: border-box;
         height: 40px;
         padding: 0 10px;
+        border-bottom: 1px solid #d8dce5;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
         margin: 0;
         .el-tabs__nav-wrap {
           position: absolute;
@@ -37,11 +39,17 @@
             display: flex;
             border: none;
             .el-tabs__item {
+              height: 26px;
+              line-height: 26px;
               display: flex;
+              font-size: 12px !important;
               align-items: center;
               justify-content: center;
-              color: #afafaf;
-              border: none;
+              color: #495060;
+              border: 1px solid #d8dce5;
+              margin-left: 5px;
+              margin-top: 4px;
+              padding: 0 8px !important;
               .tabs-icon {
                 margin: 1.5px 4px 0 0;
                 font-size: 15px;
@@ -50,14 +58,18 @@
                 margin-top: 1px;
               }
               &.is-active {
-                color: var(--el-color-primary);
+                background-color: #42b983;
+                color: #fff;
+                border-color: #42b983;
                 &::before {
-                  position: absolute;
-                  bottom: 0;
-                  width: 100%;
-                  height: 0;
-                  content: '';
-                  border-bottom: 2px solid var(--el-color-primary) !important;
+                  content: "";
+                  background: #fff;
+                  display: inline-block;
+                  width: 8px;
+                  height: 8px;
+                  border-radius: 50%;
+                  position: relative;
+                  margin-right: 2px;
                 }
               }
             }

src/layouts/components/Tabs/index.vue

@@ -10,9 +10,6 @@
           :closable="item.close"
         >
           <template #label>
-            <el-icon v-if="item.icon && tabsIcon" class="tabs-icon">
-              <component :is="item.icon" />
-            </el-icon>
             {{ item.title }}
           </template>
         </el-tab-pane>

src/layouts/components/ThemeDrawer/index.vue

@@ -5,6 +5,7 @@
       <el-icon><Notification /></el-icon>
       布局样式
     </el-divider>
+    <!-- 
     <div class="layout-box">
       <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
         <div
@@ -48,21 +49,8 @@
           </el-icon>
         </div>
       </el-tooltip>
-      <!-- <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
-        <div
-          :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]"
-          @click="setLayout('columns')"
-        >
-          <div class="layout-dark"></div>
-          <div class="layout-light"></div>
-          <div class="layout-content"></div>
-          <el-icon v-if="layout == 'columns'">
-            <CircleCheckFilled />
-          </el-icon>
-        </div>
-      </el-tooltip> -->
-    </div>
-    <div class="theme-item">
+    </div> -->
+    <!-- <div class="theme-item">
       <span>
         侧边栏反转色
         <el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
@@ -70,7 +58,7 @@
         </el-tooltip>
       </span>
       <el-switch v-model="asideInverted" @change="setAsideTheme" />
-    </div>
+    </div> -->
     <div class="theme-item mb50">
       <span>
         头部反转色

src/layouts/index.vue

 <template>
   <!-- 水印 -->
-  <el-watermark id="watermark" :font="font" :content="watermark ? username : ''">
+  <div class="layoutcom">
     <component :is="LayoutComponents[layout]" />
     <ThemeDrawer />
-  </el-watermark>
+  </div>
 </template>
 
 <script setup>
@@ -14,9 +14,6 @@
   import LayoutClassic from './LayoutClassic/index.vue';
   import LayoutTransverse from './LayoutTransverse/index.vue';
   import LayoutColumns from './LayoutColumns/index.vue';
-  import { useUserStore } from '@/stores/modules/user';
-  const userStore = useUserStore();
-  const username = computed(() => userStore.userInfo?.username);
   const LayoutComponents = {
     vertical: LayoutVertical,
     classic: LayoutClassic,

src/plugins/vxe-table.js

@@ -70,7 +70,6 @@ export function setupVxeTabele(app) {
       minHeight: 400,
       maxHeight: 900,
       border: true,
-      stripe: true,
       round: true,
       size: 'small',
       resizableConfig: {

src/styles/element.scss

@@ -325,4 +325,7 @@ td {
 }
 .vxe-table--tooltip-wrapper {
   z-index: 99999999 !important;
+}
+.vxe-table--header-wrapper {
+  background: #fff !important;
 }
\ No newline at end of file

src/styles/main.css

@@ -6,12 +6,15 @@
 html,
 body,
 #app,
-#watermark {
+.layoutcom {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
 }
+#watermark {
+  height: auto;
+}
 .vxe-modal--container {
   max-height: 100vh;
 }

src/styles/theme/menu.js

 export const menuTheme = {
   light: {
-    '--el-menu-bg-color': '#ffffff',
-    '--el-menu-hover-bg-color': '#cccccc',
-    '--el-menu-active-bg-color': 'var(--el-color-primary-light-9)',
-    '--el-menu-text-color': '#333333',
-    '--el-menu-active-color': 'var(--el-color-primary)',
-    '--el-menu-hover-text-color': '#333333',
+    '--el-menu-bg-color': '#304156',
+    '--el-menu-hover-bg-color': '#001528',
+    '--el-menu-active-bg-color': '',
+    '--el-menu-text-color': 'rgb(191, 203, 217)',
+    '--el-menu-active-color': 'rgb(64, 158, 255)',
+    '--el-menu-hover-text-color': 'rgb(191, 203, 217)',
     '--el-menu-horizontal-sub-item-height': '50px',
   },
   inverted: {

src/views/business-approval/by-stages-apply/index.vue

@@ -6,7 +6,7 @@
         <el-button
           type="primary"
           @click="changeStatus"
-          :disabled="!selectdList || selectdList.length > 1"
+          :disabled="!selectdList || !selectdList.length"
           >审批
         </el-button>
         <!-- <el-button type="primary">下载 </el-button>

src/views/business-approval/reduction-apply/index.vue

@@ -6,7 +6,7 @@
         <el-button
           type="primary"
           @click="changeStatus"
-          :disabled="!selectdList || selectdList.length > 1"
+          :disabled="!selectdList || !selectdList.length"
           >审批
         </el-button>
         <!-- <el-button type="primary">下载 </el-button>

src/views/business-approval/repair-approve/index.vue

@@ -6,7 +6,7 @@
         <el-button
           type="primary"
           @click="changeStatus"
-          :disabled="!selectdList || selectdList.length > 1"
+          :disabled="!selectdList || !selectdList.length"
           >审批
         </el-button>
         <!-- <el-button type="primary">下载 </el-button>

src/views/business-approval/repayment-approve/index.vue

@@ -6,7 +6,7 @@
         <el-button
           type="primary"
           @click="changeStatus"
-          :disabled="!selectdList || selectdList.length > 1"
+          :disabled="!selectdList || !selectdList.length"
           >审批
         </el-button>
         <!-- <el-button type="primary">下载 </el-button>
@@ -34,7 +34,7 @@
   </div>
 </template>
 
-<script setup name="systemLog" lang="jsx">
+<script setup name="repaymentApprove" lang="jsx">
   import { computed } from 'vue';
   import { reactive, ref } from 'vue';
   import { getRepayRecordPage, repayRecordFlowStatusByIds } from '@/api/property';

src/views/property/case-detail/components/returnModal.vue

@@ -280,6 +280,9 @@
             id: currentInfo.value.id,
           };
         }
+        if (currentType.value === '直接还款') {
+          param['loan'] = currentDetail.value;
+        }
         if (currentType.value === '分期还款') {
           param['borrower'] = currentDetail.value.borrower;
           param['loanPlatform'] = currentDetail.value.loans[0].loanPlatform.name;