786 lines
22 KiB
Vue
786 lines
22 KiB
Vue
<script setup lang="ts">
|
||
import { computed, ref, watch } from 'vue';
|
||
import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
|
||
import { fetchGetProject, fetchGetProjectMembers, fetchGetProjectSettings } from '@/service/api';
|
||
import { useDict } from '@/hooks/business/dict';
|
||
import { useCurrentProject } from '../../shared/use-current-project';
|
||
import {
|
||
buildProjectHomepageBanner,
|
||
buildProjectHomepageTimeline,
|
||
buildProjectScheduleOverview,
|
||
buildProjectTeamOverview,
|
||
getProjectHomepageExtensionModules
|
||
} from './homepage';
|
||
import { projectHomepageExtensionMock } from './mock';
|
||
|
||
defineOptions({ name: 'ProjectOverview' });
|
||
|
||
const { currentObjectId, currentProject } = useCurrentProject();
|
||
const { getLabel: getDirectionLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);
|
||
const { getLabel: getProjectTypeLabel } = useDict(RDMS_PROJECT_TYPE_DICT_CODE);
|
||
|
||
const pageLoading = ref(false);
|
||
const projectDetail = ref<Api.Project.Project | null>(null);
|
||
const settings = ref<Api.Project.ProjectSettings | null>(null);
|
||
const members = ref<Api.Project.ProjectMember[]>([]);
|
||
const latestActivityTime = ref('');
|
||
|
||
const timelineItems = computed(() => buildProjectHomepageTimeline(projectDetail.value, settings.value, members.value));
|
||
const scheduleOverview = computed(() => buildProjectScheduleOverview(projectDetail.value));
|
||
const teamOverview = computed(() => buildProjectTeamOverview(members.value));
|
||
const homepageBanner = computed(() =>
|
||
buildProjectHomepageBanner({
|
||
project: projectDetail.value,
|
||
settings: settings.value,
|
||
members: members.value,
|
||
latestActivityTime: latestActivityTime.value
|
||
})
|
||
);
|
||
const extensionModules = computed(() => getProjectHomepageExtensionModules(projectHomepageExtensionMock));
|
||
const directionLabel = computed(() => getDirectionLabel(homepageBanner.value.identity.directionCode, '--'));
|
||
const projectTypeLabel = computed(() => getProjectTypeLabel(homepageBanner.value.identity.projectType, '--'));
|
||
const bannerFacts = computed(() => [
|
||
{
|
||
label: '项目方向',
|
||
value: directionLabel.value,
|
||
fullWidth: false
|
||
},
|
||
{
|
||
label: '项目类型',
|
||
value: projectTypeLabel.value,
|
||
fullWidth: false
|
||
},
|
||
...homepageBanner.value.identity.facts
|
||
]);
|
||
const progressValue = computed(() => projectDetail.value?.progressRate ?? 0);
|
||
const bannerStatusClass = computed(() => {
|
||
const statusCode = homepageBanner.value.identity.statusCode;
|
||
|
||
return statusCode ? `project-homepage-banner--${statusCode}` : 'project-homepage-banner--default';
|
||
});
|
||
const bannerStatusWordClass = computed(() => {
|
||
const statusCode = homepageBanner.value.identity.statusCode;
|
||
|
||
return statusCode
|
||
? `project-homepage-banner__status-word--${statusCode}`
|
||
: 'project-homepage-banner__status-word--default';
|
||
});
|
||
|
||
async function loadOverviewData(objectId: string) {
|
||
pageLoading.value = true;
|
||
|
||
try {
|
||
const [projectResult, settingsResult, membersResult] = await Promise.all([
|
||
fetchGetProject(objectId),
|
||
fetchGetProjectSettings(objectId),
|
||
fetchGetProjectMembers(objectId)
|
||
]);
|
||
|
||
projectDetail.value = projectResult.error ? null : projectResult.data || null;
|
||
settings.value = settingsResult.error ? null : settingsResult.data || null;
|
||
members.value = membersResult.error ? [] : membersResult.data || [];
|
||
latestActivityTime.value = timelineItems.value[0]?.time || '';
|
||
} finally {
|
||
pageLoading.value = false;
|
||
}
|
||
}
|
||
|
||
watch(
|
||
() => currentObjectId.value,
|
||
async objectId => {
|
||
if (!objectId) {
|
||
projectDetail.value = null;
|
||
settings.value = null;
|
||
members.value = [];
|
||
latestActivityTime.value = '';
|
||
return;
|
||
}
|
||
|
||
await loadOverviewData(objectId);
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<div v-loading="pageLoading" class="project-homepage">
|
||
<section class="project-homepage-banner" :class="bannerStatusClass">
|
||
<div class="project-homepage-banner__identity">
|
||
<div class="project-homepage-banner__title-group">
|
||
<div class="project-homepage-banner__title-main min-w-0">
|
||
<div class="project-homepage-banner__title-row">
|
||
<h1 class="project-homepage-banner__title">
|
||
{{ homepageBanner.identity.name || currentProject?.projectName || '--' }}
|
||
</h1>
|
||
<span class="project-homepage-banner__status-word" :class="bannerStatusWordClass">
|
||
{{ homepageBanner.identity.statusLabel }}
|
||
</span>
|
||
</div>
|
||
<div class="project-homepage-banner__subtitle">
|
||
<span class="project-homepage-banner__code">编号 {{ homepageBanner.identity.code }}</span>
|
||
<p v-if="homepageBanner.identity.description" class="project-homepage-banner__description">
|
||
{{ homepageBanner.identity.description }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-homepage-banner__facts">
|
||
<div
|
||
v-for="item in bannerFacts"
|
||
:key="item.label"
|
||
class="project-homepage-banner__fact"
|
||
:class="{ 'project-homepage-banner__fact--full': item.fullWidth }"
|
||
>
|
||
<span class="project-homepage-banner__fact-label">{{ item.label }}</span>
|
||
<strong class="project-homepage-banner__fact-value">{{ item.value }}</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-homepage-banner__metrics">
|
||
<article v-for="item in homepageBanner.metrics" :key="item.label" class="project-homepage-banner__metric">
|
||
<span class="project-homepage-banner__metric-label">{{ item.label }}</span>
|
||
<strong class="project-homepage-banner__metric-value">{{ item.value }}</strong>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="project-homepage-main">
|
||
<ElCard class="project-homepage-panel card-wrapper">
|
||
<template #header>
|
||
<div>
|
||
<h3 class="project-homepage-panel__title">项目动态时间线</h3>
|
||
<p class="project-homepage-panel__desc">
|
||
先展示项目创建、状态动作、实际日期和团队变化，后续可替换为专用动态接口。
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="timelineItems.length" class="project-homepage-timeline">
|
||
<article v-for="item in timelineItems" :key="item.key" class="project-homepage-timeline__item">
|
||
<div class="project-homepage-timeline__rail">
|
||
<span class="project-homepage-timeline__dot" :class="`project-homepage-timeline__dot--${item.tone}`" />
|
||
<span class="project-homepage-timeline__line" />
|
||
</div>
|
||
|
||
<div class="project-homepage-timeline__content">
|
||
<div class="project-homepage-timeline__meta">
|
||
<ElTag effect="plain" size="small">{{ item.tag }}</ElTag>
|
||
<span class="project-homepage-timeline__time">{{ item.time }}</span>
|
||
</div>
|
||
<p class="project-homepage-timeline__sentence">
|
||
<strong class="project-homepage-timeline__headline">{{ item.title }}</strong>
|
||
<span>{{ item.content }}</span>
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<ElEmpty v-else description="当前暂无可展示的项目动态" :image-size="88" />
|
||
</ElCard>
|
||
|
||
<div class="project-homepage-main__aside">
|
||
<ElCard class="project-homepage-panel card-wrapper">
|
||
<template #header>
|
||
<div>
|
||
<h3 class="project-homepage-panel__title">计划进展概览</h3>
|
||
<p class="project-homepage-panel__desc">先看当前进度、计划周期和实际执行日期是否已经闭环。</p>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="project-homepage-schedule">
|
||
<div class="project-homepage-schedule__progress">
|
||
<strong>{{ progressValue }}%</strong>
|
||
<ElProgress
|
||
:percentage="progressValue"
|
||
:stroke-width="8"
|
||
:show-text="false"
|
||
:color="progressValue >= 100 ? '#10b981' : progressValue >= 50 ? '#3b82f6' : '#6366f1'"
|
||
/>
|
||
</div>
|
||
|
||
<div class="project-homepage-summary-metrics">
|
||
<article
|
||
v-for="item in scheduleOverview.metrics"
|
||
:key="item.label"
|
||
class="project-homepage-summary-metrics__item"
|
||
>
|
||
<span class="project-homepage-summary-metrics__label">{{ item.label }}</span>
|
||
<strong class="project-homepage-summary-metrics__value">{{ item.value }}</strong>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="project-homepage-schedule__dates">
|
||
<div v-for="item in scheduleOverview.dates" :key="item.label" class="project-homepage-schedule__date">
|
||
<span>{{ item.label }}</span>
|
||
<strong>{{ item.value }}</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</ElCard>
|
||
|
||
<ElCard class="project-homepage-panel card-wrapper">
|
||
<template #header>
|
||
<div>
|
||
<h3 class="project-homepage-panel__title">项目团队概览</h3>
|
||
<p class="project-homepage-panel__desc">承接当前成员规模、负责人和角色结构，和设置页团队维护分开表达。</p>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="project-homepage-team">
|
||
<div class="project-homepage-summary-metrics">
|
||
<article
|
||
v-for="item in teamOverview.metrics"
|
||
:key="item.label"
|
||
class="project-homepage-summary-metrics__item"
|
||
>
|
||
<span class="project-homepage-summary-metrics__label">{{ item.label }}</span>
|
||
<strong class="project-homepage-summary-metrics__value">{{ item.value }}</strong>
|
||
</article>
|
||
</div>
|
||
|
||
<div v-if="teamOverview.roles.length" class="project-homepage-team__roles">
|
||
<div v-for="item in teamOverview.roles" :key="item.label" class="project-homepage-team__role">
|
||
<span>{{ item.label }}</span>
|
||
<strong>{{ item.value }}</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<ElEmpty v-else description="当前暂无有效团队成员" :image-size="72" />
|
||
</div>
|
||
</ElCard>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="project-homepage-extension">
|
||
<ElCard v-for="module in extensionModules" :key="module.key" class="project-homepage-panel card-wrapper">
|
||
<template #header>
|
||
<div>
|
||
<h3 class="project-homepage-panel__title">{{ module.title }}</h3>
|
||
<p class="project-homepage-panel__desc">{{ module.description }}</p>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="project-homepage-extension__list">
|
||
<div v-for="item in module.items" :key="item" class="project-homepage-extension__item">
|
||
<span class="project-homepage-extension__dot" />
|
||
<span>{{ item }}</span>
|
||
</div>
|
||
</div>
|
||
</ElCard>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.project-homepage {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-homepage-banner {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
|
||
gap: 16px;
|
||
padding: 24px;
|
||
border: 1px solid rgb(226 232 240 / 92%);
|
||
border-radius: 24px;
|
||
background:
|
||
radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
|
||
radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
|
||
linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner--default {
|
||
border-color: rgb(226 232 240 / 92%);
|
||
background:
|
||
radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
|
||
radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
|
||
linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner--pending,
|
||
.project-homepage-banner--archived {
|
||
border-color: rgb(203 213 225 / 92%);
|
||
background:
|
||
radial-gradient(circle at top left, rgb(100 116 139 / 14%), transparent 34%),
|
||
radial-gradient(circle at bottom right, rgb(148 163 184 / 10%), transparent 26%),
|
||
linear-gradient(135deg, rgb(248 250 252 / 99%), rgb(255 255 255 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner--active,
|
||
.project-homepage-banner--completed {
|
||
border-color: rgb(167 243 208 / 88%);
|
||
background:
|
||
radial-gradient(circle at top left, rgb(5 150 105 / 16%), transparent 32%),
|
||
radial-gradient(circle at bottom right, rgb(16 185 129 / 14%), transparent 26%),
|
||
linear-gradient(135deg, rgb(236 253 245 / 99%), rgb(255 255 255 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner--paused {
|
||
border-color: rgb(253 230 138 / 90%);
|
||
background:
|
||
radial-gradient(circle at top left, rgb(245 158 11 / 18%), transparent 32%),
|
||
radial-gradient(circle at bottom right, rgb(251 191 36 / 16%), transparent 24%),
|
||
linear-gradient(135deg, rgb(255 251 235 / 99%), rgb(255 255 255 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner--cancelled {
|
||
border-color: rgb(254 205 211 / 92%);
|
||
background:
|
||
radial-gradient(circle at top left, rgb(244 63 94 / 16%), transparent 32%),
|
||
radial-gradient(circle at bottom right, rgb(251 113 133 / 14%), transparent 24%),
|
||
linear-gradient(135deg, rgb(255 241 242 / 99%), rgb(255 255 255 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner__identity {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-homepage-banner__title-group {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.project-homepage-banner__title-main {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.project-homepage-banner__title-row {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: baseline;
|
||
gap: 14px;
|
||
}
|
||
|
||
.project-homepage-banner__code {
|
||
margin: 0;
|
||
color: rgb(14 116 144 / 92%);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.project-homepage-banner__title {
|
||
margin: 0;
|
||
color: rgb(15 23 42 / 98%);
|
||
font-size: 34px;
|
||
line-height: 1.15;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.project-homepage-banner__subtitle {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 10px 14px;
|
||
}
|
||
|
||
.project-homepage-banner__description {
|
||
margin: 0;
|
||
min-width: 0;
|
||
color: rgb(71 85 105 / 94%);
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.project-homepage-banner__status-word {
|
||
flex-shrink: 0;
|
||
font-size: 26px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
user-select: none;
|
||
}
|
||
|
||
.project-homepage-banner__status-word--default {
|
||
color: rgb(148 163 184 / 48%);
|
||
}
|
||
|
||
.project-homepage-banner__status-word--pending,
|
||
.project-homepage-banner__status-word--archived {
|
||
color: transparent;
|
||
background: linear-gradient(180deg, rgb(71 85 105 / 92%), rgb(148 163 184 / 64%));
|
||
background-clip: text;
|
||
text-shadow: 0 10px 24px rgb(100 116 139 / 14%);
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.project-homepage-banner__status-word--active,
|
||
.project-homepage-banner__status-word--completed {
|
||
color: transparent;
|
||
background: linear-gradient(180deg, rgb(5 150 105 / 94%), rgb(16 185 129 / 70%));
|
||
background-clip: text;
|
||
text-shadow: 0 10px 24px rgb(5 150 105 / 16%);
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.project-homepage-banner__status-word--paused {
|
||
color: transparent;
|
||
background: linear-gradient(180deg, rgb(217 119 6 / 94%), rgb(245 158 11 / 70%));
|
||
background-clip: text;
|
||
text-shadow: 0 10px 24px rgb(245 158 11 / 16%);
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.project-homepage-banner__status-word--cancelled {
|
||
color: transparent;
|
||
background: linear-gradient(180deg, rgb(244 63 94 / 94%), rgb(251 113 133 / 68%));
|
||
background-clip: text;
|
||
text-shadow: 0 10px 24px rgb(244 63 94 / 16%);
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.project-homepage-banner__facts {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.project-homepage-banner__fact {
|
||
display: flex;
|
||
min-height: 58px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
border: 1px solid rgb(226 232 240 / 88%);
|
||
border-radius: 18px;
|
||
background-color: rgb(255 255 255 / 78%);
|
||
}
|
||
|
||
.project-homepage-banner__fact--full {
|
||
grid-column: 1 / -1;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.project-homepage-banner__fact-label {
|
||
color: rgb(100 116 139 / 94%);
|
||
font-size: 13px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.project-homepage-banner__fact-value {
|
||
color: rgb(15 23 42 / 96%);
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
text-align: right;
|
||
}
|
||
|
||
.project-homepage-banner__fact--full .project-homepage-banner__fact-value {
|
||
max-width: 72%;
|
||
text-align: left;
|
||
}
|
||
|
||
.project-homepage-banner__metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.project-homepage-banner__metric {
|
||
display: flex;
|
||
min-height: 112px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
padding: 18px;
|
||
border: 1px solid rgb(226 232 240 / 88%);
|
||
border-radius: 20px;
|
||
background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(241 245 249 / 98%));
|
||
}
|
||
|
||
.project-homepage-banner__metric-label {
|
||
color: rgb(100 116 139 / 92%);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.project-homepage-banner__metric-value {
|
||
color: rgb(15 23 42 / 98%);
|
||
font-size: 28px;
|
||
line-height: 1.1;
|
||
letter-spacing: 0;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.project-homepage-main {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-homepage-main__aside {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-homepage-panel {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.project-homepage-panel__title {
|
||
margin: 0;
|
||
color: rgb(15 23 42 / 98%);
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.project-homepage-panel__desc {
|
||
margin: 4px 0 0;
|
||
color: rgb(100 116 139 / 92%);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.project-homepage-timeline {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.project-homepage-timeline__item {
|
||
display: grid;
|
||
grid-template-columns: 20px minmax(0, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.project-homepage-timeline__rail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.project-homepage-timeline__dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 6px;
|
||
border-radius: 999px;
|
||
box-shadow: 0 0 0 4px rgb(255 255 255 / 96%);
|
||
}
|
||
|
||
.project-homepage-timeline__dot--sky {
|
||
background-color: rgb(14 165 233 / 88%);
|
||
}
|
||
|
||
.project-homepage-timeline__dot--emerald {
|
||
background-color: rgb(5 150 105 / 88%);
|
||
}
|
||
|
||
.project-homepage-timeline__dot--amber {
|
||
background-color: rgb(217 119 6 / 88%);
|
||
}
|
||
|
||
.project-homepage-timeline__dot--rose {
|
||
background-color: rgb(225 29 72 / 88%);
|
||
}
|
||
|
||
.project-homepage-timeline__dot--slate {
|
||
background-color: rgb(100 116 139 / 88%);
|
||
}
|
||
|
||
.project-homepage-timeline__line {
|
||
flex: 1;
|
||
width: 2px;
|
||
min-height: 30px;
|
||
margin-top: 4px;
|
||
background: linear-gradient(180deg, rgb(203 213 225 / 96%), rgb(226 232 240 / 28%));
|
||
}
|
||
|
||
.project-homepage-timeline__item:last-child .project-homepage-timeline__line {
|
||
opacity: 0;
|
||
}
|
||
|
||
.project-homepage-timeline__content {
|
||
padding: 12px 14px;
|
||
border: 1px solid rgb(226 232 240 / 92%);
|
||
border-radius: 16px;
|
||
background-color: rgb(255 255 255 / 98%);
|
||
}
|
||
|
||
.project-homepage-timeline__meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
|
||
.project-homepage-timeline__time {
|
||
color: rgb(100 116 139 / 90%);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.project-homepage-timeline__sentence {
|
||
margin: 6px 0 0;
|
||
color: rgb(71 85 105 / 94%);
|
||
font-size: 13px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.project-homepage-timeline__headline {
|
||
margin-right: 6px;
|
||
color: rgb(15 23 42 / 98%);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.project-homepage-schedule,
|
||
.project-homepage-team {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-homepage-schedule__progress {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
padding: 18px;
|
||
border-radius: 18px;
|
||
background: linear-gradient(180deg, rgb(248 250 252 / 98%), rgb(241 245 249 / 94%));
|
||
}
|
||
|
||
.project-homepage-schedule__progress strong {
|
||
color: rgb(15 23 42 / 98%);
|
||
font-size: 36px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.project-homepage-summary-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.project-homepage-summary-metrics__item {
|
||
display: flex;
|
||
min-height: 100px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
padding: 14px 16px;
|
||
border-radius: 18px;
|
||
background: linear-gradient(180deg, rgb(248 250 252 / 98%), rgb(241 245 249 / 94%));
|
||
}
|
||
|
||
.project-homepage-summary-metrics__label {
|
||
color: rgb(100 116 139 / 92%);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.project-homepage-summary-metrics__value {
|
||
color: rgb(15 23 42 / 98%);
|
||
font-size: 22px;
|
||
line-height: 1.2;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.project-homepage-schedule__dates,
|
||
.project-homepage-team__roles {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.project-homepage-schedule__date,
|
||
.project-homepage-team__role {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 13px 14px;
|
||
border: 1px solid rgb(226 232 240 / 88%);
|
||
border-radius: 14px;
|
||
background-color: rgb(255 255 255 / 96%);
|
||
color: rgb(51 65 85 / 95%);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.project-homepage-schedule__date strong,
|
||
.project-homepage-team__role strong {
|
||
color: rgb(15 23 42 / 98%);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.project-homepage-extension {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.project-homepage-extension__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.project-homepage-extension__item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 13px 14px;
|
||
border-radius: 16px;
|
||
background-color: rgb(248 250 252 / 96%);
|
||
color: rgb(51 65 85 / 95%);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.project-homepage-extension__dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
flex-shrink: 0;
|
||
border-radius: 999px;
|
||
background-color: rgb(14 116 144 / 88%);
|
||
}
|
||
|
||
@media (width <= 1280px) {
|
||
.project-homepage-banner,
|
||
.project-homepage-main,
|
||
.project-homepage-extension {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (width <= 768px) {
|
||
.project-homepage-banner {
|
||
padding: 18px;
|
||
}
|
||
|
||
.project-homepage-banner__title-row {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.project-homepage-banner__title {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.project-homepage-banner__status-word {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.project-homepage-banner__facts,
|
||
.project-homepage-banner__metrics,
|
||
.project-homepage-summary-metrics {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.project-homepage-banner__fact--full .project-homepage-banner__fact-value {
|
||
max-width: none;
|
||
}
|
||
}
|
||
</style>
|