修改河南项目的管理后台ui和删除之前不需要的游戏
This commit is contained in:
@@ -177,7 +177,7 @@ const clear = () => {
|
||||
<ColorRadioPicker
|
||||
v-model="systemTheme"
|
||||
:schema="[
|
||||
'#409eff',
|
||||
'#9a5c35',
|
||||
'#009688',
|
||||
'#536dfe',
|
||||
'#ff5c93',
|
||||
@@ -212,7 +212,7 @@ const clear = () => {
|
||||
v-model="menuTheme"
|
||||
:schema="[
|
||||
'#fff',
|
||||
'#001529',
|
||||
'#faf6f0',
|
||||
'#212121',
|
||||
'#273352',
|
||||
'#191b24',
|
||||
|
||||
@@ -64,34 +64,38 @@ export const useAppStore = defineStore('app', {
|
||||
isDark: false, // 是否是暗黑模式
|
||||
currentSize: 'default', // 组件尺寸
|
||||
theme: {
|
||||
// 主题色
|
||||
elColorPrimary: '#409eff',
|
||||
/* Cottagecore（田园核风）
|
||||
⚠️ 本 store 是 persist: true，老用户 localStorage 里的 'app' 会覆盖这里的默认值。
|
||||
换肤后如果看到旧配色，清掉 localStorage 的 'app' 键（或在设置抽屉里重新选一次色）即可。
|
||||
色值与 src/styles/var.css 保持一致，两处要一起改。 */
|
||||
// 主题色（陶土棕 · 与 success 草绿拉开色相，避免新增/修改按钮同色）
|
||||
elColorPrimary: '#9a5c35',
|
||||
// 左侧菜单边框颜色
|
||||
leftMenuBorderColor: 'inherit',
|
||||
// 左侧菜单背景颜色
|
||||
leftMenuBgColor: '#001529',
|
||||
// 左侧菜单背景颜色（奶油）
|
||||
leftMenuBgColor: '#faf6f0',
|
||||
// 左侧菜单浅色背景颜色
|
||||
leftMenuBgLightColor: '#0f2438',
|
||||
// 左侧菜单选中背景颜色
|
||||
leftMenuBgActiveColor: 'var(--el-color-primary)',
|
||||
leftMenuBgLightColor: '#f6efe3',
|
||||
// 左侧菜单选中背景颜色（陶土浅色，不用实心，免得整栏太重）
|
||||
leftMenuBgActiveColor: 'rgba(154, 92, 53, 0.16)',
|
||||
// 左侧菜单收起选中背景颜色
|
||||
leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
|
||||
leftMenuCollapseBgActiveColor: 'rgba(154, 92, 53, 0.16)',
|
||||
// 左侧菜单字体颜色
|
||||
leftMenuTextColor: '#bfcbd9',
|
||||
leftMenuTextColor: '#5f4f3d',
|
||||
// 左侧菜单选中字体颜色
|
||||
leftMenuTextActiveColor: '#fff',
|
||||
leftMenuTextActiveColor: '#9a5c35',
|
||||
// logo字体颜色
|
||||
logoTitleTextColor: '#fff',
|
||||
logoTitleTextColor: '#4f4130',
|
||||
// logo边框颜色
|
||||
logoBorderColor: 'inherit',
|
||||
// 头部背景颜色
|
||||
topHeaderBgColor: '#fff',
|
||||
topHeaderBgColor: '#faf6f0',
|
||||
// 头部字体颜色
|
||||
topHeaderTextColor: 'inherit',
|
||||
// 头部悬停颜色
|
||||
topHeaderHoverColor: '#f6f6f6',
|
||||
topHeaderHoverColor: '#f6efe3',
|
||||
// 头部边框颜色
|
||||
topToolBorderColor: '#eee'
|
||||
topToolBorderColor: '#eadfd0'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -279,7 +283,7 @@ export const useAppStore = defineStore('app', {
|
||||
const isDarkColor = colorIsDark(color)
|
||||
const theme: Recordable = {
|
||||
// 左侧菜单边框颜色
|
||||
leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
|
||||
leftMenuBorderColor: isDarkColor ? 'inherit' : '#eadfd0',
|
||||
// 左侧菜单背景颜色
|
||||
leftMenuBgColor: color,
|
||||
// 左侧菜单浅色背景颜色
|
||||
@@ -293,13 +297,13 @@ export const useAppStore = defineStore('app', {
|
||||
? 'var(--el-color-primary)'
|
||||
: hexToRGB(unref(primaryColor) as string, 0.1),
|
||||
// 左侧菜单字体颜色
|
||||
leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
|
||||
leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#5f4f3d',
|
||||
// 左侧菜单选中字体颜色
|
||||
leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
|
||||
// logo字体颜色
|
||||
logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
|
||||
// logo边框颜色
|
||||
logoBorderColor: isDarkColor ? color : '#eee'
|
||||
logoBorderColor: isDarkColor ? color : '#eadfd0'
|
||||
}
|
||||
this.setTheme(theme)
|
||||
this.setCssVarTheme()
|
||||
@@ -308,7 +312,7 @@ export const useAppStore = defineStore('app', {
|
||||
const isDarkColor = colorIsDark(color)
|
||||
const textColor = isDarkColor ? '#fff' : 'inherit'
|
||||
const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
|
||||
const topToolBorderColor = isDarkColor ? color : '#eee'
|
||||
const topToolBorderColor = isDarkColor ? color : '#eadfd0'
|
||||
setCssVar('--top-header-bg-color', color)
|
||||
setCssVar('--top-header-text-color', textColor)
|
||||
setCssVar('--top-header-hover-color', textHoverColor)
|
||||
|
||||
@@ -1,36 +1,39 @@
|
||||
:root {
|
||||
--login-bg-color: #293146;
|
||||
/* Cottagecore（田园核风）· 奶油底 + 暖棕字，去掉深蓝冷调 */
|
||||
--login-bg-color: #f3ece0;
|
||||
|
||||
/* left menu start */
|
||||
--left-menu-max-width: 200px;
|
||||
|
||||
--left-menu-min-width: 64px;
|
||||
|
||||
--left-menu-bg-color: #001529;
|
||||
--left-menu-bg-color: #faf6f0;
|
||||
|
||||
--left-menu-bg-light-color: #0f2438;
|
||||
--left-menu-bg-light-color: #f6efe3;
|
||||
|
||||
--left-menu-bg-active-color: var(--el-color-primary);
|
||||
--left-menu-bg-active-color: rgba(154, 92, 53, 0.16);
|
||||
|
||||
--left-menu-text-color: #bfcbd9;
|
||||
--left-menu-text-color: #5f4f3d;
|
||||
|
||||
--left-menu-text-active-color: #fff;
|
||||
--left-menu-text-active-color: #9a5c35;
|
||||
|
||||
--left-menu-collapse-bg-active-color: var(--el-color-primary);
|
||||
--left-menu-collapse-bg-active-color: rgba(154, 92, 53, 0.16);
|
||||
/* left menu end */
|
||||
|
||||
/* logo start */
|
||||
--logo-height: 50px;
|
||||
|
||||
--logo-title-text-color: #fff;
|
||||
--logo-title-text-color: #4f4130;
|
||||
/* logo end */
|
||||
|
||||
/* header start */
|
||||
--top-header-bg-color: '#fff';
|
||||
/* header start
|
||||
注意：原文件这几个值是带引号的字符串（'#fff' / 'inherit'），引号会被当成值的一部分，
|
||||
已去掉。 */
|
||||
--top-header-bg-color: #faf6f0;
|
||||
|
||||
--top-header-text-color: 'inherit';
|
||||
--top-header-text-color: inherit;
|
||||
|
||||
--top-header-hover-color: #f6f6f6;
|
||||
--top-header-hover-color: #f6efe3;
|
||||
|
||||
--top-tool-height: var(--logo-height);
|
||||
|
||||
@@ -49,13 +52,65 @@
|
||||
|
||||
--app-content-padding: 20px;
|
||||
|
||||
--app-content-bg-color: #f5f7f9;
|
||||
--app-content-bg-color: #f3ece0;
|
||||
|
||||
--app-footer-height: 50px;
|
||||
|
||||
--transition-time-02: 0.2s;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Element Plus 设计令牌 · Cottagecore
|
||||
用 html:root:not(.dark) 把特异性抬到 (0,2,1)：
|
||||
1) 确保压得住后加载的 element-plus 默认 :root；
|
||||
2) 只在浅色模式生效，`.dark` 下交还给 element-plus 的 dark/css-vars，
|
||||
否则暗色模式会出现「奶油底 + 浅色字」不可读。
|
||||
========================================================================== */
|
||||
html:root:not(.dark) {
|
||||
--el-color-primary: #9a5c35; /* 陶土棕 · 白字 5.31:1 */
|
||||
--el-color-success: #457450; /* 草绿 */
|
||||
--el-color-warning: #8f6418; /* 深雏菊金 */
|
||||
--el-color-danger: #a4485a; /* 莓红 */
|
||||
--el-color-info: #6b6152; /* 暖褐灰 */
|
||||
|
||||
--el-text-color-primary: #4f4130;
|
||||
--el-text-color-regular: #5f4f3d;
|
||||
--el-text-color-secondary: #7a664e;
|
||||
--el-text-color-placeholder: #9a886e;
|
||||
--el-text-color-disabled: #9a886e;
|
||||
|
||||
--el-border-color: #d8c3b0;
|
||||
--el-border-color-light: #e2d3c2;
|
||||
--el-border-color-lighter: #eadfd0;
|
||||
--el-border-color-extra-light: #f0e8dc;
|
||||
--el-border-color-hover: #c08a8a;
|
||||
|
||||
--el-fill-color: #f6efe3;
|
||||
--el-fill-color-light: #f6efe3;
|
||||
--el-fill-color-lighter: #fbf5ea;
|
||||
--el-fill-color-blank: #faf6f0;
|
||||
--el-bg-color: #faf6f0;
|
||||
--el-bg-color-page: #f3ece0;
|
||||
--el-bg-color-overlay: #fffdfa;
|
||||
|
||||
--el-border-radius-base: 12px;
|
||||
--el-border-radius-small: 10px;
|
||||
--el-border-radius-round: 999px;
|
||||
|
||||
--el-box-shadow-light: 0 2px 10px rgba(139, 115, 85, 0.12);
|
||||
--el-box-shadow: 0 6px 18px rgba(139, 115, 85, 0.13);
|
||||
--el-box-shadow-dark: 0 12px 32px rgba(139, 115, 85, 0.17);
|
||||
}
|
||||
|
||||
/* 标题类走衬线（只在大号字上），正文/表单/表格保持无衬线，
|
||||
理由同 ruoyi-ui：13px 宋体在密集表格里可读性会掉。 */
|
||||
.el-dialog__title,
|
||||
.el-message-box__title,
|
||||
.el-drawer__title {
|
||||
font-family: 'Songti SC', 'Source Han Serif SC', 'Noto Serif SC', STSong, SimSun, Georgia, 'Times New Roman', serif;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--app-content-bg-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
@@ -392,7 +392,7 @@ const copyText = (text: string) => {
|
||||
.card-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
color: #9a5c35;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="招商收益" width="120">
|
||||
<template #default="{ row }">
|
||||
<span style="color: #409eff; font-weight: 600">{{ formatNum(row.totalCommission) }}</span>
|
||||
<span style="color: #9a5c35; font-weight: 600">{{ formatNum(row.totalCommission) }}</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
@@ -415,7 +415,7 @@ onMounted(() => {
|
||||
}
|
||||
.summary-card {
|
||||
background: #fff;
|
||||
border: 1px solid #409eff;
|
||||
border: 1px solid #9a5c35;
|
||||
border-radius: 4px;
|
||||
padding: 12px 24px;
|
||||
color: #303133;
|
||||
@@ -455,7 +455,7 @@ onMounted(() => {
|
||||
}
|
||||
.daily-card {
|
||||
background: #fff;
|
||||
border: 1px solid #409eff;
|
||||
border: 1px solid #9a5c35;
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
@@ -475,7 +475,7 @@ onMounted(() => {
|
||||
}
|
||||
.weekly-total-card {
|
||||
background: #fff;
|
||||
border: 1px solid #409eff;
|
||||
border: 1px solid #9a5c35;
|
||||
border-radius: 6px;
|
||||
padding: 12px 24px;
|
||||
color: #303133;
|
||||
|
||||
@@ -372,10 +372,10 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.rate-card:hover {
|
||||
background-color: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
background-color: #fbf5ea;
|
||||
border-color: #9a5c35;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
|
||||
box-shadow: 0 2px 12px rgba(154, 92, 53, 0.10);
|
||||
}
|
||||
|
||||
.rate-card-title {
|
||||
|
||||
@@ -53,16 +53,20 @@ const inviteCode = computed(() => {
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
|
||||
background: radial-gradient(circle at 72% 18%, rgba(92, 86, 176, 0.15), transparent 30%),
|
||||
linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
|
||||
/* 原为 #0f0c29 → #302b63 → #24243e 的紫蓝渐变（规范明令禁止），
|
||||
改成亚麻→奶油暖渐变 + 雏菊黄/草绿柔光斑 */
|
||||
background: radial-gradient(circle at 72% 18%, rgba(245, 215, 95, 0.24), transparent 34%),
|
||||
radial-gradient(circle at 12% 88%, rgba(90, 143, 90, 0.14), transparent 36%),
|
||||
linear-gradient(135deg, #fdfaf5 0%, #f7f0e4 52%, #f3ece0 100%);
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
|
||||
/* 亚麻织纹：暖棕细线，不再是白色科技网格 */
|
||||
background-image: linear-gradient(rgba(139, 115, 85, 0.055) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(139, 115, 85, 0.055) 1px, transparent 1px);
|
||||
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
@@ -89,23 +93,21 @@ const inviteCode = computed(() => {
|
||||
② 受光放在右上角，与背景光斑方向一致
|
||||
③ 投影反方向往左下，棱线只亮右上
|
||||
*/
|
||||
background-color: rgba(126, 132, 240, 0.24);
|
||||
/* 原来是半透明靛蓝玻璃卡 + backdrop-filter；
|
||||
Cottagecore 不把玻璃态当默认风格，改成不透明奶油卡 + 花粉细边 + 暖棕柔影 */
|
||||
background-color: #fffdfa;
|
||||
|
||||
background-image: radial-gradient(
|
||||
130% 110% at 100% 0%,
|
||||
rgba(152, 158, 255, 0.22),
|
||||
rgba(245, 215, 95, 0.20),
|
||||
transparent 62%
|
||||
);
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(212, 160, 160, 0.45);
|
||||
|
||||
box-shadow:
|
||||
-20px 24px 56px -20px rgba(5, 4, 24, 0.68),
|
||||
inset -1px 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 1px -1px 0 rgba(255, 255, 255, 0.02);
|
||||
|
||||
backdrop-filter: blur(24px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(150%);
|
||||
0 18px 48px -18px rgba(139, 115, 85, 0.34),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
|
||||
/* =========================
|
||||
标题
|
||||
@@ -124,10 +126,11 @@ const inviteCode = computed(() => {
|
||||
h2 {
|
||||
margin: 0 16px;
|
||||
|
||||
font-family: 'Songti SC', 'Source Han Serif SC', 'Noto Serif SC', STSong, SimSun, Georgia, serif;
|
||||
font-size: 24px;
|
||||
font-weight: 650;
|
||||
|
||||
color: #f7f8ff;
|
||||
color: #4f4130;
|
||||
}
|
||||
|
||||
.title-decoration {
|
||||
@@ -136,10 +139,10 @@ const inviteCode = computed(() => {
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
background: linear-gradient(90deg, transparent, rgba(184, 194, 232, 0.55));
|
||||
background: linear-gradient(90deg, transparent, rgba(192, 138, 138, 0.8));
|
||||
|
||||
&:last-child {
|
||||
background: linear-gradient(90deg, rgba(184, 194, 232, 0.55), transparent);
|
||||
background: linear-gradient(90deg, rgba(192, 138, 138, 0.8), transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -152,13 +155,13 @@ const inviteCode = computed(() => {
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
color: #5f4f3d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
输入框
|
||||
玻璃上的凹槽：比卡片暗，形成内嵌感
|
||||
奶油底上的凹槽：比卡片略深，形成内嵌感
|
||||
不再改内部 Row / Col 结构
|
||||
========================= */
|
||||
:deep(.el-input__wrapper) {
|
||||
@@ -168,11 +171,11 @@ const inviteCode = computed(() => {
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
background: rgba(10, 8, 34, 0.34);
|
||||
background: #faf6f0;
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(212, 160, 160, 0.45);
|
||||
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
|
||||
box-shadow: inset 0 1px 2px rgba(139, 115, 85, 0.08);
|
||||
|
||||
transition:
|
||||
border-color 0.22s ease,
|
||||
@@ -180,34 +183,34 @@ const inviteCode = computed(() => {
|
||||
box-shadow 0.22s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 8, 34, 0.26);
|
||||
border-color: #c08a8a;
|
||||
background: #fdfaf5;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
border-color: rgba(150, 158, 255, 0.62);
|
||||
background: rgba(10, 8, 34, 0.22);
|
||||
border-color: rgba(154, 92, 53, 0.55);
|
||||
background: #fffdfa;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.22),
|
||||
0 0 0 3px rgba(120, 128, 255, 0.16);
|
||||
inset 0 1px 2px rgba(139, 115, 85, 0.08),
|
||||
0 0 0 3px rgba(154, 92, 53, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 46px;
|
||||
|
||||
color: #fff;
|
||||
color: #4f4130;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
color: #9a886e;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix),
|
||||
:deep(.el-input__suffix) {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
color: #7a664e;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
@@ -232,16 +235,16 @@ const inviteCode = computed(() => {
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
border: 1px solid rgba(133, 150, 255, 0.38);
|
||||
border: 1px solid rgba(212, 160, 160, 0.6);
|
||||
|
||||
background: linear-gradient(135deg, rgba(112, 131, 255, 0.28), rgba(121, 91, 200, 0.24));
|
||||
background: rgba(245, 215, 95, 0.22);
|
||||
|
||||
color: #e3e7ff;
|
||||
color: #9a5c35;
|
||||
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
box-shadow: none;
|
||||
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
@@ -250,24 +253,24 @@ const inviteCode = computed(() => {
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: #7d4a2a;
|
||||
|
||||
border-color: rgba(151, 164, 255, 0.62);
|
||||
border-color: #c08a8a;
|
||||
|
||||
background: linear-gradient(135deg, rgba(112, 131, 255, 0.4), rgba(121, 91, 200, 0.34));
|
||||
background: rgba(245, 215, 95, 0.34);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
&:disabled {
|
||||
color: rgba(255, 255, 255, 0.34);
|
||||
color: #9a886e;
|
||||
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: #eadfd0;
|
||||
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: #f6efe3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -282,11 +285,11 @@ const inviteCode = computed(() => {
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
border: 1px solid rgba(133, 150, 255, 0.38);
|
||||
border: 1px solid rgba(212, 160, 160, 0.6);
|
||||
|
||||
background: linear-gradient(135deg, rgba(112, 131, 255, 0.28), rgba(121, 91, 200, 0.24));
|
||||
background: rgba(245, 215, 95, 0.22);
|
||||
|
||||
color: #e3e7ff;
|
||||
color: #9a5c35;
|
||||
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
@@ -321,19 +324,21 @@ const inviteCode = computed(() => {
|
||||
|
||||
color: #fff;
|
||||
|
||||
background: linear-gradient(100deg, #667eea 0%, #7075dc 48%, #875bbb 100%);
|
||||
/* 原为 #667eea → #7075dc → #875bbb 的紫蓝渐变（规范明令禁止），改陶土；
|
||||
渐变两端白字对比度 5.31:1 / 7.28:1，均过 AA */
|
||||
background: linear-gradient(100deg, #9a5c35 0%, #8a5230 48%, #7d4a2a 100%);
|
||||
|
||||
box-shadow: 0 7px 20px rgba(91, 98, 220, 0.27);
|
||||
box-shadow: 0 7px 20px rgba(154, 92, 53, 0.24);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.06);
|
||||
/* 去掉原来的 filter: brightness（硬闪），改规范要求的微风感：轻微旋转 + 小幅放大 */
|
||||
transform: rotate(-0.6deg) scale(1.02);
|
||||
|
||||
box-shadow: 0 10px 24px rgba(91, 98, 220, 0.36);
|
||||
box-shadow: 0 10px 24px rgba(154, 92, 53, 0.32);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -344,44 +349,45 @@ const inviteCode = computed(() => {
|
||||
:deep(.el-select__wrapper) {
|
||||
min-height: 48px;
|
||||
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: #faf6f0;
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(212, 160, 160, 0.45);
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
color: #fff;
|
||||
color: #4f4130;
|
||||
}
|
||||
|
||||
:deep(.el-select__placeholder) {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: #9a886e;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
color: #5f4f3d;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: #faf6f0;
|
||||
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-color: #d8c3b0;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
background: #9a5c35;
|
||||
border-color: #9a5c35;
|
||||
}
|
||||
|
||||
/* 密码强度条 */
|
||||
/* 密码强度条：弱→强 用 莓红 → 雏菊金 → 草绿 → 深草绿，色相递进而不是明度递进，
|
||||
保证色盲用户也能分辨（不靠单一颜色维度传递状态） */
|
||||
:deep(.@{adminNamespace}-input-password__bar) {
|
||||
height: 4px;
|
||||
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
background-color: #eadfd0;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
@@ -398,19 +404,19 @@ const inviteCode = computed(() => {
|
||||
|
||||
&[data-score='0'],
|
||||
&[data-score='1'] {
|
||||
background-color: #ff6b81;
|
||||
background-color: #a4485a;
|
||||
}
|
||||
|
||||
&[data-score='2'] {
|
||||
background-color: #ffc069;
|
||||
background-color: #8f6418;
|
||||
}
|
||||
|
||||
&[data-score='3'] {
|
||||
background-color: #7c8cff;
|
||||
background-color: #457450;
|
||||
}
|
||||
|
||||
&[data-score='4'] {
|
||||
background: linear-gradient(90deg, #667eea, #4facfe);
|
||||
background: linear-gradient(90deg, #457450, #3f6b45);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -419,14 +425,14 @@ const inviteCode = computed(() => {
|
||||
|
||||
background: transparent;
|
||||
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
border: 1px solid #d8c3b0;
|
||||
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
color: #5f4f3d;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.42);
|
||||
color: #fff;
|
||||
background: #f6efe3;
|
||||
border-color: #c08a8a;
|
||||
color: #9a5c35;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -275,14 +275,14 @@ const handleClearAll = () => {
|
||||
}
|
||||
|
||||
.role-card:hover {
|
||||
border-color: #b3d8ff;
|
||||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
|
||||
border-color: #c08a8a;
|
||||
box-shadow: 0 2px 8px rgba(154, 92, 53, 0.10);
|
||||
}
|
||||
|
||||
.role-card.active {
|
||||
border-color: #409eff;
|
||||
background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
|
||||
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
|
||||
border-color: #9a5c35;
|
||||
background: linear-gradient(135deg, #fbf5ea 0%, #f6efe3 100%);
|
||||
box-shadow: 0 2px 12px rgba(154, 92, 53, 0.14);
|
||||
}
|
||||
|
||||
.role-icon {
|
||||
@@ -344,8 +344,8 @@ const handleClearAll = () => {
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
border-color: #c6e2ff;
|
||||
box-shadow: 0 1px 4px rgba(64, 158, 255, 0.08);
|
||||
border-color: #d8c3b0;
|
||||
box-shadow: 0 1px 4px rgba(154, 92, 53, 0.08);
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
|
||||
@@ -890,7 +890,7 @@ const handleSaveTemplate = async () => {
|
||||
.ornament-grid { display: flex; flex-wrap: wrap; gap: 10px; max-height: 240px; overflow-y: auto; padding: 4px; }
|
||||
.ornament-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #e4e7ed;
|
||||
border-radius: 6px; cursor: pointer; transition: all 0.2s; width: 250px; }
|
||||
.ornament-card:hover { border-color: #409eff; background: #f0f9ff; }
|
||||
.ornament-card:hover { border-color: #9a5c35; background: #fbf5ea; }
|
||||
.ornament-img { width: 50px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #f5f5f5; }
|
||||
.ornament-info { flex: 1; min-width: 0; }
|
||||
.ornament-name { font-size: 12px; line-height: 1.3; word-break: break-all; }
|
||||
|
||||
Reference in New Issue
Block a user