wangziqi/community
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
王子琦
2026-01-21 11:45:59 +08:00
parent 996c6ce750
commit e50715e789
7 changed files with 213 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/App.vue
View File

@@ -65,18 +65,22 @@ const handleLogout = async () => {
<style scoped>
.app-layout {
min-height: 100vh;
padding: 0 24px;
}
.app-header {
display: flex;
align-items: center;
gap: 24px;
padding: 16px 32px;
padding: 16px 28px;
margin: 16px 0 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(15, 76, 92, 0.12);
backdrop-filter: blur(14px);
border: 1px solid rgba(124, 58, 237, 0.18);
border-radius: 18px;
box-shadow: 0 18px 36px rgba(44, 16, 91, 0.12);
position: sticky;
top: 0;
top: 12px;
z-index: 20;
}
@@ -90,11 +94,12 @@ const handleLogout = async () => {
font-size: 22px;
font-weight: 700;
letter-spacing: 2px;
font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
}
.brand-sub {
font-size: 12px;
color: rgba(26, 27, 36, 0.7);
color: rgba(76, 29, 149, 0.75);
}
.user-block {
@@ -107,4 +112,46 @@ const handleLogout = async () => {
.user-name {
font-weight: 600;
}
.app-header :deep(.arco-menu) {
background: transparent;
border-bottom: none;
}
.app-header :deep(.arco-menu-horizontal .arco-menu-item) {
padding: 8px 16px;
border-radius: 12px;
font-weight: 600;
color: rgba(42, 15, 69, 0.8);
}
.app-header :deep(.arco-menu-horizontal .arco-menu-item:hover) {
background: rgba(124, 58, 237, 0.12);
color: var(--brand-ink);
}
.app-header :deep(.arco-menu-horizontal .arco-menu-selected) {
background: rgba(124, 58, 237, 0.18);
color: var(--brand-ink);
}
.app-header :deep(.arco-menu-horizontal .arco-menu-selected::after) {
display: none;
}
.app-header :deep(.arco-btn-primary) {
box-shadow: 0 10px 18px rgba(124, 58, 237, 0.2);
}
@media (max-width: 768px) {
.app-layout {
padding: 0 16px;
}
.app-header {
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
}
}
</style>

100
frontend/src/styles/base.css
View File

@@ -1,12 +1,23 @@
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;700&display=swap');
:root {
color-scheme: light;
--brand-ink: #1a1b24;
--brand-ember: #e24a2d;
--brand-ocean: #0f4c5c;
--brand-sand: #f6efe6;
--brand-mist: #e5eff1;
--brand-ink: #2a0f45;
--brand-ink-soft: #4c1d95;
--brand-ember: #f97316;
--brand-ocean: #7c3aed;
--brand-sand: #faf5ff;
--brand-mist: #efe9ff;
--brand-surface: #ffffff;
--brand-line: rgba(124, 58, 237, 0.16);
--radius-lg: 20px;
--radius-md: 14px;
--shadow-soft: 0 24px 44px rgba(44, 16, 91, 0.16);
--shadow-card: 0 14px 32px rgba(44, 16, 91, 0.12);
--color-primary-4: #a78bfa;
--color-primary-5: #8b5cf6;
--color-primary-6: #7c3aed;
--color-primary-7: #6d28d9;
}
* {
@@ -15,12 +26,14 @@
body {
margin: 0;
font-family: 'Noto Serif SC', 'ZCOOL XiaoWei', serif;
font-family: 'Noto Sans TC', 'Noto Serif TC', sans-serif;
color: var(--brand-ink);
line-height: 1.6;
background:
radial-gradient(1200px circle at 10% 10%, rgba(226, 74, 45, 0.15), transparent 50%),
radial-gradient(900px circle at 90% 20%, rgba(15, 76, 92, 0.18), transparent 50%),
linear-gradient(180deg, #fffdfb 0%, #f6efe6 45%, #eef5f6 100%);
radial-gradient(900px circle at 6% 2%, rgba(124, 58, 237, 0.22), transparent 60%),
radial-gradient(900px circle at 92% 6%, rgba(249, 115, 22, 0.2), transparent 55%),
radial-gradient(1200px circle at 50% 110%, rgba(167, 139, 250, 0.25), transparent 60%),
linear-gradient(180deg, #faf5ff 0%, #fff7ed 50%, #fef3c7 100%);
min-height: 100vh;
}
@@ -31,7 +44,7 @@ body {
.page-shell {
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px 64px;
padding: 40px 20px 72px;
}
.section-title {
@@ -39,24 +52,45 @@ body {
font-weight: 700;
margin: 0 0 12px;
letter-spacing: 1px;
font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
}
.section-subtitle {
margin: 0 0 24px;
color: rgba(26, 27, 36, 0.7);
color: rgba(42, 15, 69, 0.68);
}
.hero-panel {
background: linear-gradient(135deg, rgba(15, 76, 92, 0.9), rgba(226, 74, 45, 0.85));
background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(249, 115, 22, 0.85));
color: #fff;
border-radius: 20px;
padding: 28px;
box-shadow: 0 20px 40px rgba(26, 27, 36, 0.18);
border-radius: var(--radius-lg);
padding: 30px;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-panel::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(380px circle at 18% 22%, rgba(255, 255, 255, 0.22), transparent 60%),
radial-gradient(320px circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 60%);
opacity: 0.9;
pointer-events: none;
}
.hero-panel > * {
position: relative;
z-index: 1;
}
.hero-panel h1 {
margin: 0 0 8px;
font-size: 32px;
font-family: 'Noto Serif TC', 'Noto Sans TC', serif;
}
.hero-panel p {
@@ -67,7 +101,7 @@ body {
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
gap: 22px;
}
.fade-in {
@@ -85,6 +119,38 @@ body {
}
}
a:focus-visible,
button:focus-visible,
.arco-btn:focus-visible,
.arco-input:focus-visible,
.arco-select-view:focus-visible {
outline: 2px solid rgba(124, 58, 237, 0.5);
outline-offset: 2px;
}
.arco-card {
border-radius: var(--radius-lg);
}
.arco-table {
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow-card);
}
.arco-table-th {
background: rgba(239, 233, 255, 0.7);
}
@media (prefers-reduced-motion: reduce) {
.fade-in {
animation: none;
}
}
@media (max-width: 600px) {
.page-shell {
padding: 28px 16px 60px;
}
}

18
frontend/src/views/ActivityDetail.vue
View File

@@ -101,8 +101,10 @@ onMounted(fetchDetail);
<style scoped>
.detail-card {
margin-top: 16px;
border-radius: 20px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--brand-line);
box-shadow: var(--shadow-card);
}
.detail-header {
@@ -122,7 +124,7 @@ onMounted(fetchDetail);
}
.block-text {
color: rgba(26, 27, 36, 0.75);
color: rgba(42, 15, 69, 0.74);
line-height: 1.8;
}
@@ -134,6 +136,16 @@ onMounted(fetchDetail);
}
.hint {
color: rgba(26, 27, 36, 0.6);
color: rgba(42, 15, 69, 0.6);
}
.detail-card :deep(.arco-descriptions) {
background: rgba(239, 233, 255, 0.45);
border-radius: var(--radius-md);
}
.detail-card :deep(.arco-descriptions-item-label) {
color: rgba(42, 15, 69, 0.7);
font-weight: 600;
}
</style>

42
frontend/src/views/ActivityList.vue
View File

@@ -19,7 +19,7 @@
<div class="card-title">{{ item.title }}</div>
</template>
<template #extra>
<a-tag color="arcoblue">{{ item.term }}</a-tag>
<a-tag color="purple">{{ item.term }}</a-tag>
</template>
<div class="card-body">
<div class="summary">{{ item.summary || '暂无简介' }}</div>
@@ -85,11 +85,13 @@ onMounted(fetchList);
<style scoped>
.search-card {
margin: 18px 0 24px;
background: rgba(255, 255, 255, 0.92);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
border-radius: var(--radius-lg);
border: 1px solid var(--brand-line);
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow-card);
}
.search-left {
@@ -99,14 +101,22 @@ onMounted(fetchList);
}
.activity-card {
border-radius: 18px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 14px 28px rgba(15, 76, 92, 0.08);
border-radius: var(--radius-lg);
background: var(--brand-surface);
border: 1px solid rgba(124, 58, 237, 0.12);
box-shadow: var(--shadow-card);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.activity-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 36px rgba(44, 16, 91, 0.18);
}
.card-title {
font-size: 18px;
font-weight: 700;
color: var(--brand-ink);
}
.card-body {
@@ -115,12 +125,12 @@ onMounted(fetchList);
.summary {
margin: 8px 0;
color: rgba(26, 27, 36, 0.8);
color: rgba(42, 15, 69, 0.78);
}
.meta {
font-size: 13px;
color: rgba(26, 27, 36, 0.7);
color: rgba(42, 15, 69, 0.68);
margin-top: 4px;
}
@@ -128,4 +138,20 @@ onMounted(fetchList);
font-weight: 600;
color: var(--brand-ember);
}
@media (max-width: 768px) {
.search-card {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.search-left {
width: 100%;
}
.search-left :deep(.arco-input-wrapper) {
flex: 1;
}
}
</style>

41
frontend/src/views/AdminActivities.vue
View File

@@ -369,9 +369,10 @@ onMounted(fetchList);
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 24px rgba(15, 76, 92, 0.08);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--brand-line);
box-shadow: var(--shadow-card);
padding: 18px;
gap: 16px;
flex-wrap: nowrap;
@@ -397,10 +398,10 @@ onMounted(fetchList);
}
.table-shell :deep(.arco-table) {
border-radius: 16px;
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 40px rgba(15, 76, 92, 0.08);
box-shadow: var(--shadow-card);
}
.modal-body {
@@ -410,10 +411,10 @@ onMounted(fetchList);
}
.calendar-panel {
background: linear-gradient(180deg, rgba(246, 239, 230, 0.9), rgba(238, 245, 246, 0.9));
border-radius: 16px;
background: linear-gradient(180deg, rgba(250, 245, 255, 0.95), rgba(255, 247, 237, 0.9));
border-radius: var(--radius-lg);
padding: 16px;
border: 1px solid rgba(226, 74, 45, 0.15);
border: 1px solid rgba(124, 58, 237, 0.18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
@@ -436,7 +437,7 @@ onMounted(fetchList);
.calendar-tip {
font-size: 12px;
color: rgba(26, 27, 36, 0.7);
color: rgba(42, 15, 69, 0.7);
margin-top: 4px;
}
@@ -444,7 +445,7 @@ onMounted(fetchList);
font-size: 18px;
font-weight: 700;
margin: 10px 0 12px;
color: #0f4c5c;
color: var(--brand-ink-soft);
}
.calendar-grid {
@@ -464,7 +465,7 @@ onMounted(fetchList);
padding: 8px;
min-height: 88px;
cursor: pointer;
border: 1px solid rgba(26, 27, 36, 0.08);
border: 1px solid rgba(124, 58, 237, 0.12);
display: flex;
flex-direction: column;
gap: 6px;
@@ -473,7 +474,7 @@ onMounted(fetchList);
.calendar-cell:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(26, 27, 36, 0.12);
box-shadow: 0 10px 20px rgba(44, 16, 91, 0.14);
}
.calendar-cell.is-other {
@@ -481,8 +482,8 @@ onMounted(fetchList);
}
.calendar-cell.is-term {
border-color: rgba(226, 74, 45, 0.4);
background: rgba(255, 249, 245, 0.9);
border-color: rgba(249, 115, 22, 0.5);
background: rgba(255, 247, 237, 0.92);
}
.cell-day {
@@ -494,17 +495,17 @@ onMounted(fetchList);
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
background: rgba(226, 74, 45, 0.18);
color: #c23b22;
background: rgba(249, 115, 22, 0.18);
color: #c2410c;
width: fit-content;
}
.form-panel {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.92);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(15, 76, 92, 0.08);
border: 1px solid rgba(15, 76, 92, 0.08);
background: rgba(255, 255, 255, 0.94);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid rgba(124, 58, 237, 0.12);
}
.form-shell {

6
frontend/src/views/LoginView.vue
View File

@@ -62,7 +62,9 @@ const goRegister = () => {
.login-card {
margin-top: 24px;
max-width: 420px;
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
border-radius: var(--radius-lg);
border: 1px solid var(--brand-line);
box-shadow: var(--shadow-card);
}
</style>

6
frontend/src/views/RegisterView.vue
View File

@@ -70,7 +70,9 @@ const goLogin = () => {
.login-card {
margin-top: 24px;
max-width: 420px;
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
border-radius: var(--radius-lg);
border: 1px solid var(--brand-line);
box-shadow: var(--shadow-card);
}
</style>