tonytech/library-picturebook-activity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整样式

Browse Source
This commit is contained in:
zhonghua 2026-04-02 18:49:01 +08:00
parent 8154628d3d
commit dcaa7e1779
1 changed files with 99 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
frontend/src/views/contests/SuperDetail.vue
View File

@ -6,7 +6,9 @@
<div class="header-bar">
<div class="header-left">
<a-button type="text" @click="$router.back()">
<template #icon><ArrowLeftOutlined /></template>
<template #icon>
<ArrowLeftOutlined />
</template>
返回
</a-button>
<h1 class="title">{{ contest.contestName }}</h1>
@ -77,11 +79,8 @@
<!-- 时间轴 -->
<div class="timeline-bar">
<div
v-for="(phase, idx) in phases"
:key="phase.key"
:class="['phase', { completed: phase.status === 'completed', current: phase.status === 'current', future: phase.status === 'future' }]"
>
<div v-for="(phase, idx) in phases" :key="phase.key"
:class="['phase', { completed: phase.status === 'completed', current: phase.status === 'current', future: phase.status === 'future' }]">
<div class="phase-dot">
<CheckOutlined v-if="phase.status === 'completed'" />
<span v-else>{{ idx + 1 }}</span>
@ -90,7 +89,8 @@
<span class="phase-name">{{ phase.name }}</span>
<span class="phase-time">{{ phase.timeRange }}</span>
</div>
<div v-if="idx < phases.length - 1" class="phase-line" :class="{ done: phase.status === 'completed' }"></div>
<div v-if="idx < phases.length - 1" class="phase-line" :class="{ done: phase.status === 'completed' }">
</div>
</div>
</div>
@ -100,9 +100,11 @@
<a-tab-pane key="config" tab="活动配置">
<a-descriptions bordered :column="2" size="small" class="config-desc">
<a-descriptions-item label="活动名称" :span="2">{{ contest.contestName }}</a-descriptions-item>
<a-descriptions-item label="活动类型">{{ contest.contestType === 'individual' ? '个人参与' : '团队参与' }}</a-descriptions-item>
<a-descriptions-item label="活动类型">{{ contest.contestType === 'individual' ? '个人参与' : '团队参与'
}}</a-descriptions-item>
<a-descriptions-item label="可见范围">{{ visibilityMap[contest.visibility] || '-' }}</a-descriptions-item>
<a-descriptions-item v-if="contest.visibility === 'targeted' && contest.targetCities?.length" label="定向城市" :span="2">
<a-descriptions-item v-if="contest.visibility === 'targeted' && contest.targetCities?.length"
label="定向城市" :span="2">
<a-tag v-for="c in contest.targetCities" :key="c">{{ c }}</a-tag>
</a-descriptions-item>
<a-descriptions-item v-if="contest.visibility === 'targeted'" label="年龄限制">
@ -112,7 +114,8 @@
<a-divider orientation="left">报名配置</a-divider>
<a-descriptions bordered :column="2" size="small">
<a-descriptions-item label="报名时间" :span="2">{{ formatDate(contest.registerStartTime) }} ~ {{ formatDate(contest.registerEndTime) }}</a-descriptions-item>
<a-descriptions-item label="报名时间" :span="2">{{ formatDate(contest.registerStartTime) }} ~ {{
formatDate(contest.registerEndTime) }}</a-descriptions-item>
<a-descriptions-item label="是否需要审核">{{ contest.requireAudit ? '是' : '否' }}</a-descriptions-item>
<a-descriptions-item v-if="contest.contestType === 'team'" label="团队人数">
{{ contest.teamMinMembers || '-' }} ~ {{ contest.teamMaxMembers || '-' }} 人
@ -121,15 +124,19 @@
<a-divider orientation="left">作品配置</a-divider>
<a-descriptions bordered :column="2" size="small">
<a-descriptions-item label="提交时间" :span="2">{{ formatDate(contest.submitStartTime) }} ~ {{ formatDate(contest.submitEndTime) }}</a-descriptions-item>
<a-descriptions-item label="提交规则">{{ contest.submitRule === 'resubmit' ? '允许重新提交' : '单次提交' }}</a-descriptions-item>
<a-descriptions-item label="提交时间" :span="2">{{ formatDate(contest.submitStartTime) }} ~ {{
formatDate(contest.submitEndTime) }}</a-descriptions-item>
<a-descriptions-item label="提交规则">{{ contest.submitRule === 'resubmit' ? '允许重新提交' : '单次提交'
}}</a-descriptions-item>
<a-descriptions-item label="作品类型">{{ workTypeMap[contest.workType] || '-' }}</a-descriptions-item>
<a-descriptions-item v-if="contest.workRequirement" label="作品要求" :span="2">{{ contest.workRequirement }}</a-descriptions-item>
<a-descriptions-item v-if="contest.workRequirement" label="作品要求" :span="2">{{ contest.workRequirement
}}</a-descriptions-item>
</a-descriptions>
<a-divider orientation="left">评审配置</a-divider>
<a-descriptions bordered :column="2" size="small">
<a-descriptions-item label="评审时间" :span="2">{{ formatDate(contest.reviewStartTime) }} ~ {{ formatDate(contest.reviewEndTime) }}</a-descriptions-item>
<a-descriptions-item label="评审时间" :span="2">{{ formatDate(contest.reviewStartTime) }} ~ {{
formatDate(contest.reviewEndTime) }}</a-descriptions-item>
<a-descriptions-item label="评审规则">{{ contest.reviewRule?.ruleName || '-' }}</a-descriptions-item>
<a-descriptions-item label="成果状态">
<a-tag :color="contest.resultState === 'published' ? 'green' : 'default'">
@ -143,7 +150,8 @@
<a-descriptions-item label="主办单位">{{ formatOrgList(contest.organizers) }}</a-descriptions-item>
<a-descriptions-item label="协办单位">{{ formatOrgList(contest.coOrganizers) }}</a-descriptions-item>
<a-descriptions-item label="赞助单位">{{ formatOrgList(contest.sponsors) }}</a-descriptions-item>
<a-descriptions-item label="联系人">{{ contest.contactName || '-' }} {{ contest.contactPhone ? `/ ${contest.contactPhone}` : '' }}</a-descriptions-item>
<a-descriptions-item label="联系人">{{ contest.contactName || '-' }} {{ contest.contactPhone ? `/
${contest.contactPhone}` : '' }}</a-descriptions-item>
</a-descriptions>
</a-tab-pane>
@ -308,6 +316,8 @@ $primary: #6366f1;
.super-detail-page {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
// 顶部信息栏
@ -316,7 +326,7 @@ $primary: #6366f1;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
.header-left {
display: flex;
@ -361,7 +371,7 @@ $primary: #6366f1;
background: #fff;
border-radius: 12px;
padding: 18px 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
cursor: pointer;
transition: all 0.2s;
@ -392,11 +402,24 @@ $primary: #6366f1;
color: #1e1b4b;
line-height: 1.2;
}
.ov-sub { font-size: 14px; color: #9ca3af; font-weight: 400; }
.ov-label { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.ov-sub {
font-size: 14px;
color: #9ca3af;
font-weight: 400;
}
.ov-arrow { color: #d1d5db; font-size: 12px; }
.ov-label {
font-size: 12px;
color: #9ca3af;
margin-top: 2px;
}
}
.ov-arrow {
color: #d1d5db;
font-size: 12px;
}
}
// 时间轴
@ -407,7 +430,7 @@ $primary: #6366f1;
border-radius: 12px;
padding: 24px 32px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.phase {
@ -435,8 +458,18 @@ $primary: #6366f1;
display: flex;
flex-direction: column;
margin-left: 10px;
.phase-name { font-size: 13px; font-weight: 600; color: #374151; }
.phase-time { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.phase-name {
font-size: 13px;
font-weight: 600;
color: #374151;
}
.phase-time {
font-size: 11px;
color: #9ca3af;
margin-top: 2px;
}
}
.phase-line {
@ -446,12 +479,21 @@ $primary: #6366f1;
margin: 0 16px;
min-width: 20px;
&.done { background: $primary; }
&.done {
background: $primary;
}
}
&.completed {
.phase-dot { background: $primary; color: #fff; border-color: $primary; }
.phase-info .phase-name { color: $primary; }
.phase-dot {
background: $primary;
color: #fff;
border-color: $primary;
}
.phase-info .phase-name {
color: $primary;
}
}
&.current {
@ -461,7 +503,11 @@ $primary: #6366f1;
border-color: $primary;
box-shadow: 0 0 0 4px rgba($primary, 0.15);
}
.phase-info .phase-name { color: $primary; font-weight: 700; }
.phase-info .phase-name {
color: $primary;
font-weight: 700;
}
}
}
@ -469,13 +515,18 @@ $primary: #6366f1;
.tab-card {
border: none;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
.config-desc { margin-bottom: 0; }
.config-desc {
margin-bottom: 0;
}
}
.rich-content {
:deep(img) { max-width: 100%; border-radius: 8px; }
:deep(img) {
max-width: 100%;
border-radius: 8px;
}
}
// 通知
@ -492,9 +543,24 @@ $primary: #6366f1;
justify-content: space-between;
margin-bottom: 6px;
}
.notice-title { font-weight: 600; color: #1e1b4b; font-size: 14px; }
.notice-body { font-size: 13px; color: #4b5563; line-height: 1.6; }
.notice-time { font-size: 11px; color: #9ca3af; margin-top: 8px; }
.notice-title {
font-weight: 600;
color: #1e1b4b;
font-size: 14px;
}
.notice-body {
font-size: 13px;
color: #4b5563;
line-height: 1.6;
}
.notice-time {
font-size: 11px;
color: #9ca3af;
margin-top: 8px;
}
}
}
</style>