样式修改

zhangwencui

6 小时以前 9f5e18cc415cd3fef13f105ffeabae3c01ba9665

样式修改

 src/assets/image copy.png

 src/assets/styles/element-ui.scss

@@ -149,11 +149,7 @@
  box-sizing: content-box;
}

.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

@@ -201,25 +197,32 @@
}

.el-table {
  --el-table-border-color: var(--surface-border);
  --el-table-header-bg-color: #f2f7ff;
  --el-table-row-hover-bg-color: #f8fbff;
  --el-table-current-row-bg-color: #edf4ff;
  border-radius: var(--radius-md);
  --el-table-border-color: var(--surface-border-strong);
  --el-table-header-bg-color: var(--table-header-bg-custom, #ede9fe);
  --el-table-row-hover-bg-color: rgba(var(--el-color-primary-rgb), 0.04);
  --el-table-current-row-bg-color: rgba(var(--el-color-primary-rgb), 0.08);
  border-radius: 0;
  border: 1px solid var(--surface-border-strong);
  background: rgba(255, 255, 255, 0.94) !important;
}

.el-table th.el-table__cell {
  background: #f2f7ff !important;
  color: #3b4f6c;
  font-weight: 600;
  background: var(--el-table-header-bg-color) !important;
  color: var(--table-header-text-custom, #1e293b) !important;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--surface-border-strong) !important;
}

.el-table tr,
.el-table tr {
  background: rgba(255, 255, 255, 0.92) !important;
}

.el-table td.el-table__cell,
.el-table__body tr > td.el-table__cell {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border-strong) !important;
}

.el-table .el-table__body tr:hover > td.el-table__cell {
@@ -231,13 +234,13 @@
}

.el-table .el-table__footer-wrapper {
  border-top: 1px solid var(--surface-border);
  border-top: 1px solid var(--surface-border-strong);
}

.el-table .el-table__footer-wrapper tbody td.el-table__cell,
.el-table .el-table__footer-wrapper tfoot td.el-table__cell {
  background: var(--surface-base) !important;
  border-top: 1px solid var(--surface-border);
  border-top: 1px solid var(--surface-border-strong);
  font-weight: 600;
}


 src/assets/styles/index.scss

@@ -13,8 +13,8 @@
  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

  background: radial-gradient(circle at 9% -6%, rgba(59, 130, 246, 0.14), transparent 36%), radial-gradient(circle at 88% -8%, rgba(56, 189, 248, 0.12), transparent 30%),

    linear-gradient(165deg, #f3f7fc 0%, #eef5ff 54%, #f8fbff 100%);

  background: radial-gradient(circle at 9% -6%, rgba(139, 92, 246, 0.14), transparent 36%), radial-gradient(circle at 88% -8%, rgba(168, 85, 247, 0.12), transparent 30%),

    linear-gradient(165deg, #faf5ff 0%, #f3e8ff 54%, #fbf8ff 100%);

  color: var(--text-primary);

}



@@ -195,7 +195,7 @@
  text-align: right;

  padding-right: 20px;

  transition: 600ms ease position;

  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);

  background: linear-gradient(90deg, rgba(168, 85, 247, 1) 0%, rgba(139, 92, 246, 1) 100%);



  .subtitle {

    font-size: 20px;

@@ -217,7 +217,7 @@
  cursor: pointer;



  &:hover {

    color: #2563eb;

    color: #7c3aed;

  }

}



@@ -237,10 +237,13 @@
  .el-card,

  .el-dialog,

  .el-drawer,

  .el-table,

  .el-descriptions,

  .el-collapse-item__wrap,

  .el-tabs__content {

    border-radius: var(--radius-md);

  }

}



.el-table {

  border-radius: 0 !important;

}


 src/assets/styles/ruoyi.scss

@@ -77,10 +77,11 @@
  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background-color: #F0F1F5 !important;
      color: #515a6e;
      background-color: var(--el-table-header-bg-color) !important;
      color: var(--table-header-text-custom, #1e293b) !important;
      height: 40px !important;
      font-size: 13px;
      font-weight: 700;
      font-size: 14px;
    }
  }
  .el-table__body-wrapper {

 src/assets/styles/variables.module.scss

@@ -12,11 +12,11 @@
$menuText: #5a6478;
$menuActiveText: #ffffff;
$menuBg: #f8fafb;
$menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
$menuHover: rgba(var(--el-color-primary-rgb, 139, 92, 246), 0.08);

// light theme - 使用主题色
$menuLightBg: #f8fafb;
$menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
$menuLightHover: rgba(var(--el-color-primary-rgb, 139, 92, 246), 0.08);
$menuLightText: #3d4858;
$menuLightActiveText: #ffffff;

@@ -27,13 +27,13 @@

// sidebar - 优化后的侧边栏配色
$base-menu-color: #5a6478;
$base-menu-color-active: #0d9488;
$base-menu-color-active: #8b5cf6;
$base-menu-background: #f8fafb;
$base-sub-menu-background: #f0f5f4;
$base-sub-menu-hover: #ffffff;

// component - 优化后的主题色
$--color-primary: #0d9488;
$--color-primary: #8b5cf6;
$--color-success: #67c23a;
$--color-warning: #d89b41;
$--color-danger: #d25b52;
@@ -73,19 +73,19 @@
  --content-radius: 10px;
  --layout-header-z: 20;

  --el-color-primary: #008c8c;
  --el-color-primary-rgb: 0, 140, 140;
  --el-color-primary: #8b5cf6;
  --el-color-primary-rgb: 139, 92, 246;
  --el-color-success: #14b8a6;
  --el-color-warning: #f59e0b;
  --el-color-danger: #ef4444;

  --sidebar-bg: #304156;
  --sidebar-text: #bfcbd9;
  --sidebar-bg: #f8fafb;
  --sidebar-text: #5a6478;
  --sidebar-muted: #8b9bb4;
  --menu-hover: #263445;
  --menu-active-bg: transparent;
  --menu-active-text: #409eff;
  --menu-surface: #304156;
  --menu-hover: rgba(139, 92, 246, 0.08);
  --menu-active-bg: rgba(139, 92, 246, 0.1);
  --menu-active-text: #8b5cf6;
  --menu-surface: #ffffff;
  --menu-active-glow: none;

  --app-bg: #f8fafc;
@@ -94,7 +94,7 @@
  --surface-soft: rgba(255, 255, 255, 0.9);
  --surface-muted: #f1f5f9;
  --surface-border: #e2e8f0;
  --surface-border-strong: #cbd5e1;
  --surface-border-strong: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
@@ -111,7 +111,7 @@
  --el-border-radius-round: 999px;
  --el-border-radius-circle: 50%;

  --navbar-bg: rgba(30, 41, 59, 0.85);
  --navbar-bg: #4b23a0;
  --navbar-text: #f8fafc;
  --navbar-hover: rgba(255, 255, 255, 0.08);

@@ -122,7 +122,7 @@
  --tags-item-hover: #f1f5f9;
  --tags-close-hover: rgba(239, 68, 68, 0.1);

  --accent-primary: #008c8c;
  --accent-primary: #8b5cf6;
  --accent-light: #3b82f6;
  --accent-lighter: #60a5fa;

@@ -231,16 +231,17 @@
  }

  .el-table {
    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
    --el-table-header-text-color: var(--el-text-color-regular) !important;
    --el-table-border-color: var(--el-border-color-light) !important;
    --el-table-header-bg-color: var(--table-header-bg-custom, #e9d5ff) !important;
    --el-table-header-text-color: var(--table-header-text-custom, #1e293b) !important;
    --el-table-border-color: rgba(148, 163, 184, 0.4) !important;
    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;
    border-radius: 0;

    .el-table__header-wrapper,
    .el-table__fixed-header-wrapper {
      th {
        background-color: var(--el-bg-color-overlay, #f0f1f5) !important;
        color: var(--el-text-color-regular, #515a6e);
        background-color: var(--el-table-header-bg-color) !important;
        color: var(--el-table-header-text-color) !important;
      }
    }
  }

 src/components/TopNav/index.vue

@@ -174,10 +174,12 @@

  :deep(.top-nav-menu.el-menu--horizontal > .el-menu-item),
  :deep(.top-nav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title) {
    height: var(--topbar-height);
    height: 100%;
    line-height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--text-secondary);
    color: var(--navbar-text);
    border-bottom: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
@@ -188,8 +190,8 @@
  :deep(
      .top-nav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title:hover
    ) {
    background: rgba(var(--el-color-primary-rgb), 0.06);
    color: var(--el-color-primary);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  :deep(.top-nav-menu.el-menu--horizontal > .el-menu-item.is-active),
@@ -198,10 +200,10 @@
        > .el-sub-menu.is-active
        > .el-sub-menu__title
    ) {
    background: rgba(var(--el-color-primary-rgb), 0.06);
    color: var(--el-color-primary);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
    border-bottom-color: var(--el-color-primary);
    border-bottom-color: #ffffff;
  }

  :deep(.top-nav-menu.el-menu--horizontal > .el-menu-item .svg-icon),
@@ -212,5 +214,6 @@
        .svg-icon
    ) {
    margin-right: 8px;
    vertical-align: middle;
  }
</style>

 src/layout/components/Navbar.vue

@@ -231,10 +231,10 @@
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 0;
    background: #fff;
    border-bottom: 1px solid #d8dce5;
    background: var(--navbar-bg);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    z-index: var(--layout-header-z);
    color: var(--navbar-text);
  }

  .navbar-left {
@@ -252,13 +252,12 @@
    transition: width 0.25s ease;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #fff; // 强制设为白色背景
    // border-right: 1px solid #d8dce5; // 增加右侧边框以区分导航栏主体
    background-color: transparent;
  }

  .top-nav-wrapper {
    display: flex;
    align-items: center;
    align-items: stretch; /* 占满高度 */
    height: 100%;
    min-width: 0;
    flex: 1;
@@ -290,15 +289,15 @@
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        color: var(--navbar-text);
        border-radius: 50%; // 圆形背景
        background: rgba(0, 0, 0, 0.04); // 浅浅的圆形框底色
        background: rgba(255, 255, 255, 0.1); // 浅浅的圆形框底色
        transition: all 0.2s ease;
        cursor: pointer;

        &:hover {
          background: rgba(0, 0, 0, 0.08); // 悬停加深
          color: var(--el-color-primary);
          background: rgba(255, 255, 255, 0.2); // 悬停加深
          color: #fff;
        }

        :deep(.svg-icon) {
@@ -335,7 +334,7 @@
        transition: 0.2s ease;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
          background: rgba(255, 255, 255, 0.1);
        }
      }

@@ -349,7 +348,7 @@
      .user-name {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        color: var(--navbar-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
@@ -387,7 +386,7 @@
      }

      .caret-icon {
        color: var(--text-secondary);
        color: var(--navbar-text);
        opacity: 0.76;
        font-size: 12px;
        transition: 0.2s ease;

 src/layout/components/Settings/index.vue

@@ -153,10 +153,10 @@
  const sideTheme = ref(settingsStore.sideTheme);

  const storeSettings = computed(() => settingsStore);

  const predefineColors = ref([

    "#008C8C",

    "#5BA0D2",

    "#81D8D0",

    "#E85827",

    "#008C8C",

    "#5BA0D2",

    "#F9DC24",

    "#B05923",

    "#003153",


 src/layout/components/Sidebar/Logo.vue

@@ -138,7 +138,7 @@
    .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #333; // 白色背景下需要深色字体
      color: #fff;
      font-weight: 600;
      line-height: var(--topbar-height, 64px);
      font-size: 16px;

 src/settings.js

@@ -6,7 +6,7 @@
  /**

   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light

   */

  sideTheme: 'theme-dark',
  sideTheme: 'theme-light',
  /**

   * 是否系统布局配置

   */


 src/store/modules/settings.js

@@ -17,7 +17,7 @@

const useSettingsStore = defineStore("settings", () => {
  const title = ref("");
  const theme = ref(storageSetting.theme || "#008C8C");
  const theme = ref(storageSetting.theme || "#5BA0D2");
  const sideThemeValue = ref(storageSetting.sideTheme || sideTheme);
  const showSettingsValue = ref(showSettings);
  const topNavValue = ref(storageSetting.topNav === undefined ? topNav : storageSetting.topNav);

 src/utils/theme.js

@@ -53,6 +53,12 @@
  document.documentElement.style.setProperty("--menu-hover", `rgba(${r}, ${g}, ${b}, ${isDarkTheme ? 0.12 : 0.08})`);
  document.documentElement.style.setProperty("--navbar-hover", `rgba(${r}, ${g}, ${b}, 0.1)`);

  // 表格表头颜色联动 (跟随主题，但颜色较浅)
  const tableHeaderBg = getLightColor(primary, 0.92);
  const tableHeaderText = getDarkColor(primary, 0.6); // 始终固定为深色，以覆盖浅色版本的需求
  document.documentElement.style.setProperty("--table-header-bg-custom", tableHeaderBg);
  document.documentElement.style.setProperty("--table-header-text-custom", tableHeaderText);

  // 边框颜色联动
  document.documentElement.style.setProperty("--surface-border", `rgba(${r}, ${g}, ${b}, 0.12)`);
}

 src/views/customerService/components/viewDia.vue

@@ -154,7 +154,7 @@
    transform: translateY(-50%);
    width: 4px;
    height: 1rem;
    background-color: #008c8c;
    background-color: #8b5cf6;
    border-radius: 2px;
  }
</style>

 src/views/customerService/feedbackRegistration/components/formDia.vue

@@ -522,7 +522,7 @@
    transform: translateY(-50%);
    width: 4px;
    height: 1rem;
    background-color: #008c8c; /* Element 默认红色 */
    background-color: #8b5cf6; /* Element 默认红色 */
    border-radius: 2px;
  }
</style>

 src/views/login.vue

@@ -3,10 +3,10 @@
       :style="{ backgroundImage: `url(${backgroundImage})` }">
    <main class="page">
      <section class="login-wrap">
        <div class="time">
        <!-- <div class="time">
          <span>{{ todayLabel }}</span>
          {{ clockLabel }}
        </div>
        </div> -->
        <form class="login-card"
              @submit.prevent="handleLogin">
          <div class="brand card-brand">
@@ -266,8 +266,8 @@

<style scoped lang="scss">
  .login-page {
    --accent: var(--accent-primary, var(--el-color-primary, #008c8c));
    --accent-rgb: var(--el-color-primary-rgb, 22, 116, 88);
    --accent: var(--accent-primary, var(--el-color-primary, #8b5cf6));
    --accent-rgb: var(--el-color-primary-rgb, 139, 92, 246);
    --text: #0f172a;
    --muted: #64748b;
    --border: rgba(15, 23, 42, 0.1);