From 80fc36a101ea26ff0eb0b41ee389f44084781469 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 07 五月 2025 13:33:31 +0800
Subject: [PATCH] 样式修改
---
src/assets/styles/ruoyi.scss | 2
src/views/tool/build/index.vue | 2
src/views/login.vue | 70 ++++++++++-------
src/assets/styles/sidebar.scss | 27 ++++--
src/layout/components/Navbar.vue | 51 +++++-------
src/settings.js | 4
src/layout/components/AppMain.vue | 1
src/layout/components/TagsView/index.vue | 54 +++++--------
src/assets/images/login-background.jpg | 0
src/store/modules/settings.js | 2
10 files changed, 106 insertions(+), 107 deletions(-)
diff --git a/src/assets/images/login-background.jpg b/src/assets/images/login-background.jpg
index 8a89eb8..812ed07 100644
--- a/src/assets/images/login-background.jpg
+++ b/src/assets/images/login-background.jpg
Binary files differ
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index 40e1398..4ef1c78 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -151,7 +151,7 @@
/** 琛ㄦ牸鏇村鎿嶄綔涓嬫媺鏍峰紡 */
.el-table .el-dropdown-link {
cursor: pointer;
- color: #409EFF;
+ color: #3472D7;
margin-left: 10px;
}
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index d35e656..7b035a2 100644
--- a/src/assets/styles/sidebar.scss
+++ b/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;
}
}
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 442c185..a87ef7d 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -40,6 +40,7 @@
width: 100%;
position: relative;
overflow: hidden;
+ background: #F5F7FB;
}
.fixed-header + .app-main {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index a7b467a..41bc17c 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,34 +1,14 @@
<template>
<div class="navbar">
- <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>
+ <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" />
+ </div>
+<!-- <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">
- <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>
<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;
}
}
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 8aac500..d3aa736 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/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 {
diff --git a/src/settings.js b/src/settings.js
index 3b46e85..f944e2d 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -6,7 +6,7 @@
/**
* 渚ц竟鏍忎富棰� 娣辫壊涓婚theme-dark锛屾祬鑹蹭富棰榯heme-light
*/
- sideTheme: 'theme-dark',
+ sideTheme: 'theme-light',
/**
* 鏄惁绯荤粺甯冨眬閰嶇疆
*/
@@ -25,7 +25,7 @@
/**
* 鏄惁鍥哄畾澶撮儴
*/
- fixedHeader: false,
+ fixedHeader: true,
/**
* 鏄惁鏄剧ずlogo
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 64b413a..2e9c1d1 100644
--- a/src/store/modules/settings.js
+++ b/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,
diff --git a/src/views/login.vue b/src/views/login.vue
index 4ac6e3e..88fb248 100644
--- a/src/views/login.vue
+++ b/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>
diff --git a/src/views/tool/build/index.vue b/src/views/tool/build/index.vue
index 60159b0..e4c319a 100644
--- a/src/views/tool/build/index.vue
+++ b/src/views/tool/build/index.vue
@@ -307,7 +307,7 @@
</script>
<style lang='scss'>
-$lighterBlue: #409EFF;
+$lighterBlue: #3472D7;
.container {
position: relative;
--
Gitblit v1.9.3