From 6ce67a8e4a226e4c97dfeb53b843489f8c9c21bc Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 17 六月 2026 14:58:13 +0800
Subject: [PATCH] 样式调整
---
src/assets/styles/index.scss | 2 +-
src/views/login.vue | 24 ++++++++++++------------
src/assets/styles/element-ui.scss | 15 ++++++++-------
src/assets/styles/variables.module.scss | 15 ++++++++++-----
4 files changed, 31 insertions(+), 25 deletions(-)
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 75c83ab..10c7c78 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -52,7 +52,7 @@
left: 0;
position: relative;
margin: 0 auto;
- border-radius: 16px;
+ border-radius: var(--radius-lg);
padding: 0 !important;
border: 1px solid var(--surface-border);
box-shadow: var(--shadow-md);
@@ -62,7 +62,7 @@
background: linear-gradient(180deg, rgba(248, 251, 255, 1), rgba(242, 247, 255, 0.98));
padding: 18px 24px 14px;
border-bottom: 1px solid var(--surface-border);
- border-radius: 14px 14px 0 0;
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.el-dialog__title {
font-weight: 600;
@@ -80,7 +80,7 @@
}
.el-message-box {
padding: 0 !important;
- border-radius: 16px;
+ border-radius: var(--radius-lg);
border: 1px solid var(--surface-border);
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.96);
@@ -89,7 +89,7 @@
background: linear-gradient(180deg, rgba(248, 251, 255, 1), rgba(242, 247, 255, 0.98));
padding: 18px 24px 14px;
border-bottom: 1px solid var(--surface-border);
- border-radius: 14px 14px 0 0;
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.el-message-box__title {
font-weight: 600;
@@ -162,7 +162,7 @@
}
.el-button {
- border-radius: 8px;
+ border-radius: var(--radius-sm);
font-weight: 600;
box-shadow: none !important;
}
@@ -181,7 +181,7 @@
.el-select__wrapper,
.el-date-editor.el-input__wrapper,
.el-date-editor .el-input__wrapper {
- border-radius: 10px;
+ border-radius: var(--radius-sm);
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28) inset !important;
background: rgba(255, 255, 255, 0.92);
color: var(--text-primary);
@@ -197,6 +197,7 @@
border: 1px solid var(--surface-border);
box-shadow: var(--shadow-sm);
background: var(--panel-mask);
+ border-radius: var(--radius-md);
}
.el-table {
@@ -204,7 +205,7 @@
--el-table-header-bg-color: #f2f7ff;
--el-table-row-hover-bg-color: #f8fbff;
--el-table-current-row-bg-color: #edf4ff;
- border-radius: 12px;
+ border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.94) !important;
}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 39d03cf..90c8527 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -114,7 +114,7 @@
background: rgba(255, 255, 255, 0.84);
padding: 8px 24px;
margin-bottom: 20px;
- border-radius: 12px;
+ border-radius: var(--radius-md);
border: 1px solid var(--surface-border);
display: block;
line-height: 32px;
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 7f8d488..70b3af3 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -70,7 +70,7 @@
--topbar-height: 64px;
--tagsbar-height: 40px;
--content-gap: 16px;
- --content-radius: 16px;
+ --content-radius: 10px;
--layout-header-z: 20;
--el-color-primary: #374d77;
@@ -101,10 +101,15 @@
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-menu: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
- --radius-lg: 12px;
- --radius-md: 8px;
- --radius-sm: 6px;
- --radius-xs: 4px;
+ --radius-lg: 8px;
+ --radius-md: 6px;
+ --radius-sm: 4px;
+ --radius-xs: 2px;
+
+ --el-border-radius-base: var(--radius-sm);
+ --el-border-radius-small: var(--radius-xs);
+ --el-border-radius-round: 999px;
+ --el-border-radius-circle: 50%;
--navbar-bg: rgba(30, 41, 59, 0.85);
--navbar-text: #f8fafc;
diff --git a/src/views/login.vue b/src/views/login.vue
index 6bdabe5..d8c9f22 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -98,7 +98,7 @@
y="112"
width="138"
height="128"
- rx="18"
+ rx="10"
fill="url(#g2)"
stroke="rgba(255,255,255,.42)" />
<path d="M145 185h88M145 210h58"
@@ -116,7 +116,7 @@
y="76"
width="190"
height="164"
- rx="22"
+ rx="12"
fill="url(#g2)"
stroke="rgba(255,255,255,.42)" />
<path d="M350 126h120M350 158h90M350 190h112"
@@ -169,7 +169,7 @@
y="82"
width="148"
height="158"
- rx="20"
+ rx="12"
fill="url(#g2)"
stroke="rgba(255,255,255,.42)" />
<path d="M724 206V134M764 206V112M804 206V154"
@@ -573,7 +573,7 @@
grid-template-columns: 3fr 2fr;
gap: 0;
align-items: stretch;
- border-radius: 34px;
+ border-radius: var(--content-radius);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow);
@@ -646,7 +646,7 @@
.logo {
width: 52px;
height: 52px;
- border-radius: 14px;
+ border-radius: var(--radius-md);
display: grid;
place-items: center;
background: rgba(var(--accent-rgb), 0.12);
@@ -691,7 +691,7 @@
display: inline-flex;
align-items: center;
padding: 7px 12px;
- border-radius: 999px;
+ border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
@@ -744,7 +744,7 @@
.time span {
padding: 6px 10px;
- border-radius: 999px;
+ border-radius: var(--radius-md);
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.7);
color: rgba(15, 23, 42, 0.6);
@@ -754,7 +754,7 @@
.login-card {
width: min(420px, 100%);
padding: 38px 34px 34px;
- border-radius: 22px;
+ border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(14px);
@@ -770,7 +770,7 @@
top: -120px;
width: 240px;
height: 240px;
- border-radius: 999px;
+ border-radius: var(--radius-lg);
background: radial-gradient(
circle at 30% 30%,
rgba(var(--accent-rgb), 0.36),
@@ -792,7 +792,7 @@
.card-brand .logo {
width: 46px;
height: 46px;
- border-radius: 14px;
+ border-radius: var(--radius-md);
background: rgba(var(--accent-rgb), 0.12);
border: 1px solid rgba(var(--accent-rgb), 0.22);
}
@@ -867,7 +867,7 @@
height: 50px;
padding: 0 14px 0 44px;
border: 1px solid var(--border);
- border-radius: 14px;
+ border-radius: var(--radius-md);
outline: none;
background: rgba(255, 255, 255, 0.92);
color: var(--text);
@@ -921,7 +921,7 @@
width: 100%;
height: 52px;
border: none;
- border-radius: 14px;
+ border-radius: var(--radius-md);
cursor: pointer;
color: #ffffff;
font-size: 15px;
--
Gitblit v1.9.3