样式修改

gaoluyang

2025-05-07 80fc36a101ea26ff0eb0b41ee389f44084781469

样式修改

 src/assets/images/login-background.jpg

 src/assets/styles/ruoyi.scss

@@ -151,7 +151,7 @@
/** 表格更多操作下拉样式 */

.el-table .el-dropdown-link {

  cursor: pointer;

  color: #409EFF;

  color: #3472D7;

  margin-left: 10px;

}




 src/assets/styles/sidebar.scss

@@ -5,6 +5,7 @@
    transition: margin-left .28s;

    margin-left: $base-sidebar-width;

    position: relative;

    background: #F5F7FB;

  }



  .sidebarHide {

@@ -82,12 +83,11 @@
    .sub-menu-title-noDropdown,

    .el-sub-menu__title {

      &:hover {

        background-color: rgba(0, 0, 0, 0.06) !important;

        background-color: rgba(212,221,255,0.56) !important;

      }

    }



    & .theme-dark .is-active > .el-sub-menu__title {

      color: $base-menu-color-active !important;

    & .theme-light .is-active > .el-sub-menu__title {

      color: #000000 !important;

    }



    & .nest-menu .el-sub-menu>.el-sub-menu__title,

@@ -95,16 +95,19 @@
      min-width: $base-sidebar-width !important;



      &:hover {

        background-color: rgba(0, 0, 0, 0.06) !important;

        background-color: rgba(212,221,255,0.56) !important;

      }

      &.is-active {

        background-color: rgba(212,221,255,0.56) !important;

      }

    }



    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,

    & .theme-dark .el-sub-menu .el-menu-item {

      background-color: $base-sub-menu-background;

    & .theme-light .nest-menu .el-sub-menu>.el-sub-menu__title,

    & .theme-light .el-sub-menu .el-menu-item {

      //background-color: transparent;



      &:hover {

        background-color: $base-sub-menu-hover !important;

        background-color: rgba(212,221,255,0.56) !important;

      }

    }

  }

@@ -130,7 +133,6 @@
        }

      }

    }



    .el-sub-menu {

      overflow: hidden;



@@ -211,7 +213,10 @@
  .el-menu-item {

    &:hover {

      // you can use $sub-menuHover

      background-color: rgba(0, 0, 0, 0.06) !important;

      background-color: rgba(212,221,255,0.56) !important;

    }

    &.is-active {

      background-color: rgba(212,221,255,0.56) !important;

    }

  }




 src/layout/components/AppMain.vue

@@ -40,6 +40,7 @@
  width: 100%;

  position: relative;

  overflow: hidden;

  background: #F5F7FB;

}



.fixed-header + .app-main {


 src/layout/components/Navbar.vue

@@ -1,34 +1,14 @@
<template>

  <div class="navbar">

    <div>

    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />

    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />



    <div class="right-menu">

      <template v-if="appStore.device !== 'mobile'">

        <header-search id="header-search" class="right-menu-item" />



        <el-tooltip content="源码地址" effect="dark" placement="bottom">

          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />

        </el-tooltip>



        <el-tooltip content="文档地址" effect="dark" placement="bottom">

          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />

        </el-tooltip>



        <screenfull id="screenfull" class="right-menu-item hover-effect" />



        <el-tooltip content="主题模式" effect="dark" placement="bottom">

          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">

            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />

            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />

          </div>

        </el-tooltip>



        <el-tooltip content="布局大小" effect="dark" placement="bottom">

          <size-select id="size-select" class="right-menu-item hover-effect" />

        </el-tooltip>

      </template>

<!--    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->

    <div class="center-menu">

      <span class="label">系统名称系统名称</span>

    </div>

    <div class="right-menu">

      <div class="avatar-container">

        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

          <div class="avatar-wrapper">

@@ -118,6 +98,17 @@
  position: relative;

  background: var(--navbar-bg);

  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .center-menu {

    line-height: 50px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    .label {

      font-weight: bold;

      font-size: 18px;

      color: #333333;

    }

  }



  .hamburger-container {

    line-height: 46px;

@@ -198,14 +189,14 @@
          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 10px;

          border-radius: 50px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 25px;

          top: 14px;

          font-size: 12px;

        }

      }


 src/layout/components/TagsView/index.vue

@@ -261,50 +261,40 @@
.tags-view-container {

  height: 34px;

  width: 100%;

  background: var(--tags-bg, #fff);

  border-bottom: 1px solid var(--tags-item-border, #d8dce5);

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);

  background: transparent;



  .tags-view-wrapper {

    .tags-view-item {

      display: inline-block;

      position: relative;

      cursor: pointer;

      height: 26px;

      line-height: 26px;

      border: 1px solid var(--tags-item-border, #d8dce5);

      color: var(--tags-item-text, #495060);

      background: var(--tags-item-bg, #fff);

      padding: 0 8px;

      height: 32px;

      line-height: 32px;

      //border: 1px solid var(--tags-item-border, #d8dce5);

      color: #4E5463;

      background: #E5E7EA;

      padding: 0 16px;

      font-size: 12px;

      margin-left: 5px;

      margin-top: 4px;

      //margin-left: 5px;

      //margin-top: 4px;



      &:first-of-type {

        margin-left: 15px;

      }



      &:last-of-type {

        margin-right: 15px;

      }

      //&:first-of-type {

      //  margin-left: 8px;

      //}

      //

      //&:last-of-type {

      //  margin-right: 15px;

      //}



      &.active {

        background-color: #42b983;

        color: #fff;

        border-color: #42b983;



        &::before {

          content: '';

          background: #fff;

          display: inline-block;

          width: 8px;

          height: 8px;

          border-radius: 50%;

          position: relative;

          margin-right: 5px;

        background-color: #FFFFFF !important;

        color: #2C51D9;

        }

      }

    }

    //.tags-view-item div {

    //  transform: skew(12deg);

    //  display: inline-block;

    //}

  }



  .contextmenu {


 src/settings.js

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

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

   */

  sideTheme: 'theme-dark',

  sideTheme: 'theme-light',

  /**

   * 是否系统布局配置

   */

@@ -25,7 +25,7 @@
  /**

   * 是否固定头部

   */

  fixedHeader: false,

  fixedHeader: true,



  /**

   * 是否显示logo


 src/store/modules/settings.js

@@ -14,7 +14,7 @@
  {

    state: () => ({

      title: '',

      theme: storageSetting.theme || '#409EFF',

      theme: storageSetting.theme || '#3472D7',

      sideTheme: storageSetting.sideTheme || sideTheme,

      showSettings: showSettings,

      topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,


 src/views/login.vue

@@ -2,6 +2,7 @@
  <div class="login">

    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">

      <h3 class="title">{{ title }}</h3>

      <el-divider />

      <el-form-item prop="username">

        <el-input

          v-model="loginForm.username"

@@ -10,7 +11,7 @@
          auto-complete="off"

          placeholder="账号"

        >

          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>

          <template #prefix><el-icon><User /></el-icon></template>

        </el-input>

      </el-form-item>

      <el-form-item prop="password">

@@ -20,27 +21,27 @@
          size="large"

          auto-complete="off"

          placeholder="密码"

          show-password

          @keyup.enter="handleLogin"

        >

          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>

        </el-input>

      </el-form-item>

      <el-form-item prop="code" v-if="captchaEnabled">

        <el-input

          v-model="loginForm.code"

          size="large"

          auto-complete="off"

          placeholder="验证码"

          style="width: 63%"

          @keyup.enter="handleLogin"

        >

          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>

        </el-input>

        <div class="login-code">

          <img :src="codeUrl" @click="getCode" class="login-code-img"/>

        </div>

      </el-form-item>

      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>

<!--      <el-form-item prop="code" v-if="captchaEnabled">-->

<!--        <el-input-->

<!--          v-model="loginForm.code"-->

<!--          size="large"-->

<!--          auto-complete="off"-->

<!--          placeholder="验证码"-->

<!--          style="width: 63%"-->

<!--          @keyup.enter="handleLogin"-->

<!--        >-->

<!--          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>-->

<!--        </el-input>-->

<!--        <div class="login-code">-->

<!--          <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->

<!--        </div>-->

<!--      </el-form-item>-->

      <el-form-item style="width:100%;">

        <el-button

          :loading="loading"

@@ -56,11 +57,12 @@
          <router-link class="link-type" :to="'/register'">立即注册</router-link>

        </div>

      </el-form-item>

      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>

    </el-form>

    <!--  底部  -->

    <div class="el-login-footer">

      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>

    </div>

<!--    <div class="el-login-footer">-->

<!--      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>-->

<!--    </div>-->

  </div>

</template>



@@ -80,14 +82,14 @@
  username: "admin",

  password: "admin123",

  rememberMe: false,

  code: "",

  // code: "",

  uuid: ""

})



const loginRules = {

  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],

  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],

  code: [{ required: true, trigger: "change", message: "请输入验证码" }]

  // code: [{ required: true, trigger: "change", message: "请输入验证码" }]

}



const codeUrl = ref("")

@@ -165,24 +167,29 @@


<style lang='scss' scoped>

.login {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  background-image: url("../assets/images/login-background.jpg");

  background-size: cover;

  position: relative;

}

.title {

  margin: 0px auto 30px auto;

  margin: 20px auto 14px auto;

  text-align: center;

  color: #707070;

  color: #3472D7;

  font-size: 28px;

  font-weight: 700;

}



.login-form {

  position: absolute;

  top: 50%;

  right: 19%;

  transform: translate(0, -50%);

  border-radius: 6px;

  background: #ffffff;

  width: 400px;

  padding: 25px 25px 5px 25px;

  width: 420px;

  height: 500px;

  padding: 40px;

  z-index: 1;

  .el-input {

    height: 40px;

@@ -226,4 +233,9 @@
  height: 40px;

  padding-left: 12px;

}

:deep() {

  .el-form-item--default {

    margin-bottom: 36px;

  }

}

</style>


 src/views/tool/build/index.vue

@@ -307,7 +307,7 @@
</script>



<style lang='scss'>

$lighterBlue: #409EFF;

$lighterBlue: #3472D7;



.container {

  position: relative;