|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="portal-home min-h-screen bg-[#eef3f9] text-[#17345f]">
|
|
|
|
|
|
|
+ <div class="portal-home min-h-screen">
|
|
|
<Header />
|
|
<Header />
|
|
|
|
|
|
|
|
<main class="px-5 md:px-20 pb-8 pt-20">
|
|
<main class="px-5 md:px-20 pb-8 pt-20">
|
|
@@ -21,7 +21,7 @@
|
|
|
}"
|
|
}"
|
|
|
>
|
|
>
|
|
|
<div class="hero-copy carousel-caption">
|
|
<div class="hero-copy carousel-caption">
|
|
|
- <p class="hero-text mt-6 text-[30px]! text-[#5f6f83]">
|
|
|
|
|
|
|
+ <p class="hero-text mt-6 text-[30px]!">
|
|
|
{{ slide.text }}
|
|
{{ slide.text }}
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
@@ -110,8 +110,10 @@
|
|
|
>
|
|
>
|
|
|
<button type="button" class="quick-btn quick-btn--dropdown">
|
|
<button type="button" class="quick-btn quick-btn--dropdown">
|
|
|
<img src="../assets//images//td.png" class="w-5 h-5" alt="" />
|
|
<img src="../assets//images//td.png" class="w-5 h-5" alt="" />
|
|
|
- <span class="btn-label text-[#a1a1aa]!">我的待办</span>
|
|
|
|
|
- <span class="text-[#6b2973]! font-bold">{{ todo }}</span>
|
|
|
|
|
|
|
+ <span class="btn-label quick-btn__meta">我的待办</span>
|
|
|
|
|
+ <span class="quick-btn__count quick-btn__count--todo">{{
|
|
|
|
|
+ todo
|
|
|
|
|
+ }}</span>
|
|
|
<!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
|
|
<!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
|
|
|
</button>
|
|
</button>
|
|
|
<template #dropdown>
|
|
<template #dropdown>
|
|
@@ -144,8 +146,8 @@
|
|
|
>
|
|
>
|
|
|
<button type="button" class="quick-btn quick-btn--dropdown">
|
|
<button type="button" class="quick-btn quick-btn--dropdown">
|
|
|
<Icon icon="mdi:check" class="btn-icon" />
|
|
<Icon icon="mdi:check" class="btn-icon" />
|
|
|
- <span class="btn-label text-[#a1a1aa]!">我的已办</span>
|
|
|
|
|
- <span class="p-2 inline-block text-[#2da04d]!">{{
|
|
|
|
|
|
|
+ <span class="btn-label quick-btn__meta">我的已办</span>
|
|
|
|
|
+ <span class="p-2 inline-block quick-btn__count quick-btn__count--done">{{
|
|
|
done
|
|
done
|
|
|
}}</span>
|
|
}}</span>
|
|
|
<!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
|
|
<!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
|
|
@@ -260,7 +262,7 @@
|
|
|
/>
|
|
/>
|
|
|
</span>
|
|
</span>
|
|
|
<span
|
|
<span
|
|
|
- class="platform-app__label text-[#004098] md:text-sm text-[12px] text-left"
|
|
|
|
|
|
|
+ class="platform-app__label md:text-sm text-[12px] text-left"
|
|
|
>{{ app.label }}</span
|
|
>{{ app.label }}</span
|
|
|
>
|
|
>
|
|
|
</button>
|
|
</button>
|
|
@@ -1319,14 +1321,81 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
.portal-home {
|
|
.portal-home {
|
|
|
- --portal-bg: #050b1a;
|
|
|
|
|
- --portal-bg-2: #081326;
|
|
|
|
|
|
|
+ --portal-text: #17345f;
|
|
|
|
|
+ --portal-text-muted: #5f6f83;
|
|
|
|
|
+ --portal-text-soft: #7f8fa6;
|
|
|
|
|
+ --portal-title: #163867;
|
|
|
|
|
+ --portal-subtitle: rgba(61, 92, 135, 0.86);
|
|
|
|
|
+ --portal-line: rgba(126, 156, 201, 0.24);
|
|
|
|
|
+ --portal-card: rgba(255, 255, 255, 0.82);
|
|
|
|
|
+ --portal-card-2: rgba(248, 251, 255, 0.94);
|
|
|
|
|
+ --portal-card-3: rgba(240, 246, 255, 0.88);
|
|
|
|
|
+ --portal-card-4: rgba(231, 239, 251, 0.92);
|
|
|
|
|
+ --portal-nav-bg: rgba(255, 255, 255, 0.72);
|
|
|
|
|
+ --portal-nav-hover: rgba(219, 232, 252, 0.8);
|
|
|
|
|
+ --portal-input-bg: rgba(255, 255, 255, 0.7);
|
|
|
|
|
+ --portal-input-hover: rgba(255, 255, 255, 0.92);
|
|
|
|
|
+ --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
|
|
|
|
|
+ --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
|
|
|
|
|
+ --portal-accent: #245edb;
|
|
|
|
|
+ --portal-accent-2: #4e8cff;
|
|
|
|
|
+ --portal-accent-soft: rgba(36, 94, 219, 0.14);
|
|
|
|
|
+ --portal-todo-bg: rgba(242, 247, 255, 0.94);
|
|
|
|
|
+ --portal-todo-hover: rgba(228, 238, 252, 0.95);
|
|
|
|
|
+ --portal-number-todo: #e15a5a;
|
|
|
|
|
+ --portal-number-done: #2da04d;
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
|
|
+ background:
|
|
|
|
|
+ radial-gradient(
|
|
|
|
|
+ circle at 18% 12%,
|
|
|
|
|
+ rgba(83, 126, 255, 0.14),
|
|
|
|
|
+ transparent 22%
|
|
|
|
|
+ ),
|
|
|
|
|
+ radial-gradient(circle at 82% 20%, rgba(71, 148, 255, 0.14), transparent 20%),
|
|
|
|
|
+ radial-gradient(
|
|
|
|
|
+ circle at 50% 100%,
|
|
|
|
|
+ rgba(97, 142, 247, 0.12),
|
|
|
|
|
+ transparent 28%
|
|
|
|
|
+ ),
|
|
|
|
|
+ linear-gradient(180deg, #eef3f9 0%, #f7faff 46%, #eef3f9 100%);
|
|
|
|
|
+ background-image:
|
|
|
|
|
+ linear-gradient(rgba(245, 249, 255, 0.82), rgba(237, 244, 253, 0.92)),
|
|
|
|
|
+ url("../assets//images/bg666.png");
|
|
|
|
|
+ background-position:
|
|
|
|
|
+ center center,
|
|
|
|
|
+ center bottom;
|
|
|
|
|
+ background-repeat: no-repeat, no-repeat;
|
|
|
|
|
+ background-size:
|
|
|
|
|
+ cover,
|
|
|
|
|
+ 100% auto;
|
|
|
|
|
+ background-attachment: fixed, fixed;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+:global([data-theme="dark"] .portal-home) {
|
|
|
|
|
+ --portal-text: #eaf1ff;
|
|
|
|
|
+ --portal-text-muted: rgba(234, 241, 255, 0.95);
|
|
|
|
|
+ --portal-text-soft: #8a9ab0;
|
|
|
|
|
+ --portal-title: #f4f7ff;
|
|
|
|
|
+ --portal-subtitle: rgba(188, 205, 255, 0.82);
|
|
|
--portal-line: rgba(97, 129, 206, 0.28);
|
|
--portal-line: rgba(97, 129, 206, 0.28);
|
|
|
--portal-card: rgba(10, 19, 43, 0.8);
|
|
--portal-card: rgba(10, 19, 43, 0.8);
|
|
|
--portal-card-2: rgba(12, 24, 52, 0.92);
|
|
--portal-card-2: rgba(12, 24, 52, 0.92);
|
|
|
|
|
+ --portal-card-3: rgba(17, 25, 48, 0.8);
|
|
|
|
|
+ --portal-card-4: rgba(15, 24, 45, 0.82);
|
|
|
|
|
+ --portal-nav-bg: rgba(10, 19, 43, 0.8);
|
|
|
|
|
+ --portal-nav-hover: rgba(28, 40, 72, 0.8);
|
|
|
|
|
+ --portal-input-bg: rgba(255, 255, 255, 0.08);
|
|
|
|
|
+ --portal-input-hover: rgba(255, 255, 255, 0.12);
|
|
|
|
|
+ --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
|
|
|
|
|
+ --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
|
|
|
--portal-accent: #6e7dff;
|
|
--portal-accent: #6e7dff;
|
|
|
--portal-accent-2: #8d4dff;
|
|
--portal-accent-2: #8d4dff;
|
|
|
- color: #eaf1ff;
|
|
|
|
|
|
|
+ --portal-accent-soft: rgba(110, 125, 255, 0.16);
|
|
|
|
|
+ --portal-todo-bg: #070e20;
|
|
|
|
|
+ --portal-todo-hover: rgba(28, 40, 72, 0.8);
|
|
|
|
|
+ --portal-number-todo: #f56c6c;
|
|
|
|
|
+ --portal-number-done: #ffffff;
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
background:
|
|
background:
|
|
|
radial-gradient(
|
|
radial-gradient(
|
|
|
circle at 18% 12%,
|
|
circle at 18% 12%,
|
|
@@ -1343,27 +1412,17 @@ onUnmounted(() => {
|
|
|
background-image:
|
|
background-image:
|
|
|
linear-gradient(rgba(5, 11, 26, 0.62), rgba(5, 11, 26, 0.82)),
|
|
linear-gradient(rgba(5, 11, 26, 0.62), rgba(5, 11, 26, 0.82)),
|
|
|
url("../assets//images/bg666.png");
|
|
url("../assets//images/bg666.png");
|
|
|
- background-position:
|
|
|
|
|
- center center,
|
|
|
|
|
- center bottom;
|
|
|
|
|
- background-repeat: no-repeat, no-repeat;
|
|
|
|
|
- background-size:
|
|
|
|
|
- cover,
|
|
|
|
|
- 100% auto;
|
|
|
|
|
- background-attachment: fixed, fixed;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.hero-banner {
|
|
.hero-banner {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
min-height: 310px;
|
|
min-height: 310px;
|
|
|
- border: 1px solid rgba(113, 140, 214, 0.16);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
background:
|
|
background:
|
|
|
- linear-gradient(135deg, rgba(63, 91, 211, 0.32), transparent 32%),
|
|
|
|
|
- linear-gradient(180deg, rgba(9, 16, 36, 0.82), rgba(4, 9, 20, 0.9));
|
|
|
|
|
- box-shadow:
|
|
|
|
|
- 0 24px 60px rgba(0, 0, 0, 0.38),
|
|
|
|
|
- inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
|
|
|
|
|
+ linear-gradient(135deg, var(--portal-accent-soft), transparent 32%),
|
|
|
|
|
+ linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
|
|
|
|
|
+ box-shadow: var(--portal-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1403,7 +1462,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.hero-text {
|
|
.hero-text {
|
|
|
margin-top: 0;
|
|
margin-top: 0;
|
|
|
- color: rgba(234, 241, 255, 0.95);
|
|
|
|
|
|
|
+ color: var(--portal-text-muted);
|
|
|
font-size: 46px;
|
|
font-size: 46px;
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
|
line-height: 1.2;
|
|
line-height: 1.2;
|
|
@@ -1423,12 +1482,12 @@ onUnmounted(() => {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
inset: 0;
|
|
inset: 0;
|
|
|
background:
|
|
background:
|
|
|
- linear-gradient(90deg, rgba(5, 11, 26, 0.28) 0%, transparent 28%),
|
|
|
|
|
|
|
+ linear-gradient(90deg, rgba(5, 11, 26, 0.18) 0%, transparent 28%),
|
|
|
linear-gradient(
|
|
linear-gradient(
|
|
|
180deg,
|
|
180deg,
|
|
|
transparent 0%,
|
|
transparent 0%,
|
|
|
- rgba(5, 11, 26, 0.08) 56%,
|
|
|
|
|
- rgba(5, 11, 26, 0.28) 100%
|
|
|
|
|
|
|
+ rgba(5, 11, 26, 0.04) 56%,
|
|
|
|
|
+ rgba(5, 11, 26, 0.18) 100%
|
|
|
);
|
|
);
|
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
|
}
|
|
}
|
|
@@ -1442,16 +1501,10 @@ onUnmounted(() => {
|
|
|
.platform-block {
|
|
.platform-block {
|
|
|
/* display: flex; */
|
|
/* display: flex; */
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- border: 1px solid rgba(109, 137, 213, 0.18);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 180deg,
|
|
|
|
|
- rgba(10, 18, 38, 0.92),
|
|
|
|
|
- rgba(8, 15, 33, 0.92)
|
|
|
|
|
- );
|
|
|
|
|
- box-shadow:
|
|
|
|
|
- 0 16px 34px rgba(0, 0, 0, 0.22),
|
|
|
|
|
- inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
|
|
|
|
|
+ background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
|
|
|
|
|
+ box-shadow: var(--portal-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-block__header {
|
|
.platform-block__header {
|
|
@@ -1464,11 +1517,7 @@ onUnmounted(() => {
|
|
|
min-height: 48px;
|
|
min-height: 48px;
|
|
|
padding: 0 20px 0 0px;
|
|
padding: 0 20px 0 0px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 90deg,
|
|
|
|
|
- rgba(44, 70, 154, 0.5),
|
|
|
|
|
- rgba(18, 28, 62, 0.1)
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ background: linear-gradient(90deg, var(--portal-accent-soft), transparent);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-block__title-wrap {
|
|
.platform-block__title-wrap {
|
|
@@ -1481,7 +1530,7 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-block__title {
|
|
.platform-block__title {
|
|
|
- color: #f4f7ff;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
@@ -1493,7 +1542,7 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-block__subtitle {
|
|
.platform-block__subtitle {
|
|
|
- color: rgba(188, 205, 255, 0.82);
|
|
|
|
|
|
|
+ color: var(--portal-subtitle);
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
@@ -1516,10 +1565,10 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
|
gap: 6px;
|
|
gap: 6px;
|
|
|
- border: 1px solid rgba(109, 137, 213, 0.16);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
padding: 0 8px;
|
|
padding: 0 8px;
|
|
|
- background: rgba(17, 25, 48, 0.8);
|
|
|
|
|
|
|
+ background: var(--portal-card-3);
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
@@ -1533,23 +1582,19 @@ onUnmounted(() => {
|
|
|
.platform-app:hover {
|
|
.platform-app:hover {
|
|
|
transform: translateY(-2px);
|
|
transform: translateY(-2px);
|
|
|
border-color: rgba(133, 163, 255, 0.45);
|
|
border-color: rgba(133, 163, 255, 0.45);
|
|
|
- box-shadow: 0 10px 26px rgba(34, 54, 110, 0.3);
|
|
|
|
|
|
|
+ box-shadow: 0 10px 26px rgba(34, 54, 110, 0.18);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-app--active {
|
|
.platform-app--active {
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 90deg,
|
|
|
|
|
- rgba(76, 103, 224, 0.5),
|
|
|
|
|
- rgba(23, 30, 58, 0.88)
|
|
|
|
|
- );
|
|
|
|
|
- color: #f4f7ff;
|
|
|
|
|
|
|
+ background: linear-gradient(90deg, rgba(76, 103, 224, 0.32), var(--portal-card));
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
border-color: rgba(129, 145, 255, 0.44);
|
|
border-color: rgba(129, 145, 255, 0.44);
|
|
|
box-shadow: inset 0 0 0 1px rgba(159, 173, 255, 0.08);
|
|
box-shadow: inset 0 0 0 1px rgba(159, 173, 255, 0.08);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-app--ghost {
|
|
.platform-app--ghost {
|
|
|
- background: rgba(15, 24, 45, 0.82);
|
|
|
|
|
- color: rgba(201, 212, 243, 0.9);
|
|
|
|
|
|
|
+ background: var(--portal-card-4);
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-app__icon {
|
|
.platform-app__icon {
|
|
@@ -1557,7 +1602,7 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
flex: 0 0 28px;
|
|
flex: 0 0 28px;
|
|
|
- color: #79b0ff;
|
|
|
|
|
|
|
+ color: var(--portal-accent-2);
|
|
|
filter: drop-shadow(0 0 8px rgba(90, 122, 255, 0.24));
|
|
filter: drop-shadow(0 0 8px rgba(90, 122, 255, 0.24));
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1569,7 +1614,7 @@ onUnmounted(() => {
|
|
|
text-overflow: clip;
|
|
text-overflow: clip;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
line-height: 1;
|
|
line-height: 1;
|
|
|
- color: #b8b9be;
|
|
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
@@ -1588,32 +1633,22 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.portal-mobile-shortcut {
|
|
.portal-mobile-shortcut {
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
|
- border: 1px solid rgba(116, 145, 223, 0.18);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
padding: 10px 8px;
|
|
padding: 10px 8px;
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 180deg,
|
|
|
|
|
- rgba(17, 26, 52, 0.86),
|
|
|
|
|
- rgba(10, 16, 32, 0.92)
|
|
|
|
|
- );
|
|
|
|
|
- color: #dfe8ff;
|
|
|
|
|
|
|
+ background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
- box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
|
|
|
|
|
|
|
+ box-shadow: var(--portal-shadow);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.side-card {
|
|
.side-card {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- border: 1px solid rgba(109, 137, 213, 0.16);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
border-radius: 14px;
|
|
border-radius: 14px;
|
|
|
- background: linear-gradient(
|
|
|
|
|
- 180deg,
|
|
|
|
|
- rgba(10, 18, 38, 0.92),
|
|
|
|
|
- rgba(7, 14, 31, 0.94)
|
|
|
|
|
- );
|
|
|
|
|
- box-shadow:
|
|
|
|
|
- 0 16px 34px rgba(0, 0, 0, 0.22),
|
|
|
|
|
- inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
|
|
|
|
|
+ background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
|
|
|
|
|
+ box-shadow: var(--portal-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.side-card--content {
|
|
.side-card--content {
|
|
@@ -1628,7 +1663,7 @@ onUnmounted(() => {
|
|
|
padding-right: 10px;
|
|
padding-right: 10px;
|
|
|
/* border-radius: 999px; */
|
|
/* border-radius: 999px; */
|
|
|
/* background: rgba(28, 39, 72, 0.86); */
|
|
/* background: rgba(28, 39, 72, 0.86); */
|
|
|
- border-bottom: 1px solid rgba(109, 137, 213, 0.16);
|
|
|
|
|
|
|
+ border-bottom: 1px solid var(--portal-line);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.notice-badge {
|
|
.notice-badge {
|
|
@@ -1639,7 +1674,7 @@ onUnmounted(() => {
|
|
|
height: 25px;
|
|
height: 25px;
|
|
|
min-width: 70px;
|
|
min-width: 70px;
|
|
|
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1651,9 +1686,9 @@ onUnmounted(() => {
|
|
|
height: 25px;
|
|
height: 25px;
|
|
|
min-width: 70px;
|
|
min-width: 70px;
|
|
|
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- border-bottom: 2px solid #5e45bb;
|
|
|
|
|
|
|
+ border-bottom: 2px solid var(--portal-accent);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.notice-tabs {
|
|
.notice-tabs {
|
|
@@ -1669,7 +1704,7 @@ onUnmounted(() => {
|
|
|
border: 0;
|
|
border: 0;
|
|
|
border-radius: 999px;
|
|
border-radius: 999px;
|
|
|
background: transparent;
|
|
background: transparent;
|
|
|
- color: rgba(183, 201, 244, 0.88);
|
|
|
|
|
|
|
+ color: var(--portal-subtitle);
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
@@ -1680,7 +1715,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.notice-tab--active {
|
|
.notice-tab--active {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- color: #cdc7e8;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.notice-tab--active::before {
|
|
.notice-tab--active::before {
|
|
@@ -1718,7 +1753,7 @@ onUnmounted(() => {
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
border: 0;
|
|
border: 0;
|
|
|
background: transparent;
|
|
background: transparent;
|
|
|
- color: rgba(187, 203, 245, 0.82);
|
|
|
|
|
|
|
+ color: var(--portal-subtitle);
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
}
|
|
}
|
|
@@ -1726,7 +1761,7 @@ onUnmounted(() => {
|
|
|
.notice-item {
|
|
.notice-item {
|
|
|
/* background: rgba(14, 22, 42, 0.88); */
|
|
/* background: rgba(14, 22, 42, 0.88); */
|
|
|
padding: 8px 14px;
|
|
padding: 8px 14px;
|
|
|
- box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
|
|
|
|
|
|
|
+ box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1738,7 +1773,7 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.notice-item__title,
|
|
.notice-item__title,
|
|
|
.notice-item__desc {
|
|
.notice-item__desc {
|
|
|
- color: rgba(224, 232, 255, 0.9);
|
|
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
line-height: 1.5;
|
|
line-height: 1.5;
|
|
|
display: -webkit-box;
|
|
display: -webkit-box;
|
|
@@ -1749,16 +1784,16 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.panel-title {
|
|
.panel-title {
|
|
|
padding: 0 16px;
|
|
padding: 0 16px;
|
|
|
- color: #eff4ff;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.todo-item {
|
|
.todo-item {
|
|
|
- border: 1px solid rgba(109, 137, 213, 0.12);
|
|
|
|
|
- background: rgba(14, 22, 42, 0.88);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
|
|
+ background: var(--portal-card-4);
|
|
|
padding: 8px 14px;
|
|
padding: 8px 14px;
|
|
|
- box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
|
|
|
|
|
|
|
+ box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.todo-item__tag {
|
|
.todo-item__tag {
|
|
@@ -1776,10 +1811,10 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
gap: 12px;
|
|
|
- border: 1px solid rgba(109, 137, 213, 0.12);
|
|
|
|
|
- background: rgba(14, 22, 42, 0.88);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
|
|
+ background: var(--portal-card-4);
|
|
|
padding: 5px 12px;
|
|
padding: 5px 12px;
|
|
|
- box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
|
|
|
|
|
|
|
+ box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1794,7 +1829,7 @@ onUnmounted(() => {
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
padding: 16px;
|
|
padding: 16px;
|
|
|
justify-content: start;
|
|
justify-content: start;
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
letter-spacing: 0.08em;
|
|
letter-spacing: 0.08em;
|
|
@@ -1905,7 +1940,7 @@ onUnmounted(() => {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
inset: auto 0 0;
|
|
inset: auto 0 0;
|
|
|
height: 120px;
|
|
height: 120px;
|
|
|
- background: linear-gradient(180deg, transparent, rgba(5, 11, 26, 0.6));
|
|
|
|
|
|
|
+ background: linear-gradient(180deg, transparent, rgba(5, 11, 26, 0.2));
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
|
}
|
|
}
|
|
@@ -1919,16 +1954,17 @@ onUnmounted(() => {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
padding: 5px 24px;
|
|
padding: 5px 24px;
|
|
|
- background: rgba(10, 19, 43, 0.8);
|
|
|
|
|
|
|
+ background: var(--portal-nav-bg);
|
|
|
backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
|
-webkit-backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
|
- border-bottom: 1px solid rgba(109, 137, 213, 0.16);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
|
+ box-shadow: var(--portal-shadow);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.nav-title {
|
|
.nav-title {
|
|
|
- color: #eaf1ff;
|
|
|
|
|
|
|
+ color: var(--portal-title);
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
letter-spacing: 0.08em;
|
|
letter-spacing: 0.08em;
|
|
@@ -1942,21 +1978,21 @@ onUnmounted(() => {
|
|
|
width: 320px;
|
|
width: 320px;
|
|
|
height: 36px;
|
|
height: 36px;
|
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
|
- background: rgba(255, 255, 255, 0.08);
|
|
|
|
|
- border: 1px solid rgba(109, 137, 213, 0.2);
|
|
|
|
|
|
|
+ background: var(--portal-input-bg);
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.search-container:hover {
|
|
.search-container:hover {
|
|
|
- background: rgba(255, 255, 255, 0.12);
|
|
|
|
|
|
|
+ background: var(--portal-input-hover);
|
|
|
border-color: rgba(109, 137, 213, 0.4);
|
|
border-color: rgba(109, 137, 213, 0.4);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.search-icon {
|
|
.search-icon {
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
- color: #b8b9be;
|
|
|
|
|
|
|
+ color: var(--portal-text-soft);
|
|
|
margin-left: 12px;
|
|
margin-left: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1966,7 +2002,7 @@ onUnmounted(() => {
|
|
|
background: transparent;
|
|
background: transparent;
|
|
|
outline: none;
|
|
outline: none;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- color: #eaf1ff;
|
|
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
padding: 0;
|
|
padding: 0;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
}
|
|
}
|
|
@@ -1977,7 +2013,7 @@ onUnmounted(() => {
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
|
|
|
|
|
+ color: var(--portal-text-soft);
|
|
|
font-family: "Courier New", monospace;
|
|
font-family: "Courier New", monospace;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1994,7 +2030,7 @@ onUnmounted(() => {
|
|
|
/* border: 1px solid rgba(109, 137, 213, 0.16); */
|
|
/* border: 1px solid rgba(109, 137, 213, 0.16); */
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
/* background: rgba(17, 25, 48, 0.8); */
|
|
/* background: rgba(17, 25, 48, 0.8); */
|
|
|
- color: #dfe8ff;
|
|
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition:
|
|
transition:
|
|
@@ -2014,14 +2050,14 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.quick-btn:hover {
|
|
.quick-btn:hover {
|
|
|
- background: rgba(28, 40, 72, 0.8);
|
|
|
|
|
|
|
+ background: var(--portal-nav-hover);
|
|
|
border-color: rgba(109, 137, 213, 0.4);
|
|
border-color: rgba(109, 137, 213, 0.4);
|
|
|
transform: translateY(-1px);
|
|
transform: translateY(-1px);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-icon {
|
|
.btn-icon {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
- color: #79b0ff;
|
|
|
|
|
|
|
+ color: var(--portal-accent-2);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-label {
|
|
.btn-label {
|
|
@@ -2030,7 +2066,23 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.quick-btn__arrow {
|
|
.quick-btn__arrow {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
- color: #8a9ab0;
|
|
|
|
|
|
|
+ color: var(--portal-text-soft);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.quick-btn__meta {
|
|
|
|
|
+ color: var(--portal-text-soft);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.quick-btn__count {
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.quick-btn__count--todo {
|
|
|
|
|
+ color: var(--portal-number-todo);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.quick-btn__count--done {
|
|
|
|
|
+ color: var(--portal-number-done);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.badge {
|
|
.badge {
|
|
@@ -2050,12 +2102,12 @@ onUnmounted(() => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
gap: 16px;
|
|
gap: 16px;
|
|
|
padding: 8px 16px;
|
|
padding: 8px 16px;
|
|
|
- background: #070e20;
|
|
|
|
|
|
|
+ background: var(--portal-todo-bg);
|
|
|
backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
|
|
|
|
+ border: 1px solid var(--portal-line);
|
|
|
-webkit-backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
- box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
|
|
|
|
|
|
|
+ box-shadow: var(--portal-shadow);
|
|
|
/* margin-bottom: 16px; */
|
|
/* margin-bottom: 16px; */
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -2094,7 +2146,7 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.todo-item:hover {
|
|
.todo-item:hover {
|
|
|
- background: rgba(28, 40, 72, 0.8);
|
|
|
|
|
|
|
+ background: var(--portal-todo-hover);
|
|
|
transform: translateY(-1px);
|
|
transform: translateY(-1px);
|
|
|
border-color: rgba(109, 137, 213, 0.2);
|
|
border-color: rgba(109, 137, 213, 0.2);
|
|
|
}
|
|
}
|
|
@@ -2102,20 +2154,20 @@ onUnmounted(() => {
|
|
|
.number {
|
|
.number {
|
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
- color: #f56c6c; /* 红色 */
|
|
|
|
|
|
|
+ color: var(--portal-number-todo);
|
|
|
min-width: 24px;
|
|
min-width: 24px;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.label {
|
|
.label {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
- color: #dfe8ff;
|
|
|
|
|
|
|
+ color: var(--portal-text);
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
.icon {
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- color: #79b0ff; /* 蓝色 */
|
|
|
|
|
|
|
+ color: var(--portal-accent-2);
|
|
|
}
|
|
}
|
|
|
/* 下拉菜单主体 */
|
|
/* 下拉菜单主体 */
|
|
|
:deep(.el-dropdown-menu) {
|
|
:deep(.el-dropdown-menu) {
|