fix(mobile): align supervisor dashboard with figma
This commit is contained in:
@@ -2,8 +2,8 @@
|
||||
<view class="page supervisor-page">
|
||||
<view class="page-head">
|
||||
<view>
|
||||
<text class="page-title">主管</text>
|
||||
<text class="page-subtitle">团队训练工作台</text>
|
||||
<text class="page-title">主管工作台</text>
|
||||
<text class="page-subtitle">住宅项目 · 今日训练与带教</text>
|
||||
</view>
|
||||
<button v-if="loggedIn && !accessDenied" class="ghost-button refresh-button" :disabled="loading" @click="loadPage">
|
||||
{{ loading ? '刷新中' : '刷新' }}
|
||||
@@ -32,7 +32,7 @@
|
||||
<template v-else>
|
||||
<view class="panel overview-panel">
|
||||
<view class="section-head">
|
||||
<text class="panel-title">团队概览</text>
|
||||
<text class="panel-title">今日概览</text>
|
||||
<text class="muted">实时数据</text>
|
||||
</view>
|
||||
<view class="metric-grid">
|
||||
@@ -40,7 +40,7 @@
|
||||
v-for="item in supervisorMetrics"
|
||||
:key="item.key"
|
||||
class="metric-item"
|
||||
:class="{ primary: item.primary }"
|
||||
:class="{ primary: item.primary, danger: item.key === 'lowScores' || item.key === 'alerts' }"
|
||||
>
|
||||
<text class="metric-value">{{ item.value }}</text>
|
||||
<text class="metric-label">{{ item.title }}</text>
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<view class="panel task-panel">
|
||||
<view class="section-head">
|
||||
<text class="panel-title">任务入口</text>
|
||||
<text class="panel-title">快捷入口</text>
|
||||
<text class="muted">{{ teamCount }} 人</text>
|
||||
</view>
|
||||
<view class="task-list">
|
||||
@@ -81,7 +81,7 @@
|
||||
|
||||
<view class="panel alert-panel">
|
||||
<view class="section-head">
|
||||
<text class="panel-title">团队预警</text>
|
||||
<text class="panel-title">连续低分预警</text>
|
||||
<text class="muted">{{ actionableAlerts.length }} 条</text>
|
||||
</view>
|
||||
<view v-if="alerts.length" class="alert-list">
|
||||
@@ -104,8 +104,8 @@
|
||||
|
||||
<view v-if="pendingPreview.length" class="panel preview-panel">
|
||||
<view class="section-head">
|
||||
<text class="panel-title">待复盘预览</text>
|
||||
<button class="text-button" @click="openPage('/pages/supervisor/reviews/index')">查看全部</button>
|
||||
<text class="panel-title">待复盘对练</text>
|
||||
<button class="text-button" @click="openPage('/pages/supervisor/reviews/index')">全部 {{ pendingReviewCount }} 条 →</button>
|
||||
</view>
|
||||
<view class="preview-list">
|
||||
<button
|
||||
@@ -444,4 +444,161 @@ onShow(() => {
|
||||
.compact-empty {
|
||||
padding: 16px 8px 4px;
|
||||
}
|
||||
|
||||
.supervisor-page {
|
||||
padding: 22px 20px 112px;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.page-head .page-title {
|
||||
color: #17181c;
|
||||
font-size: 30px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.page-head .page-subtitle {
|
||||
color: #8a8d93;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
min-height: 42px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #666a72;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.supervisor-page .panel {
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.overview-panel {
|
||||
padding: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.overview-panel .section-head {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
gap: 8px;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
min-height: 86px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 14px rgba(24, 28, 36, 0.03);
|
||||
}
|
||||
|
||||
.metric-item.primary,
|
||||
.metric-item.danger {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.metric-item.primary .metric-value,
|
||||
.metric-item.primary .metric-label,
|
||||
.metric-item.danger .metric-value,
|
||||
.metric-item.danger .metric-label {
|
||||
color: #e60012;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
margin-top: 8px;
|
||||
color: #25282d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.metric-desc {
|
||||
color: #8a8d93;
|
||||
}
|
||||
|
||||
.task-panel,
|
||||
.alert-panel,
|
||||
.preview-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.task-row,
|
||||
.alert-row,
|
||||
.preview-row {
|
||||
border-color: #f0f1f3;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.task-row {
|
||||
min-height: 58px;
|
||||
padding: 10px 0;
|
||||
border-width: 0 0 1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.task-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.task-title,
|
||||
.alert-title,
|
||||
.preview-title {
|
||||
color: #25282d;
|
||||
}
|
||||
|
||||
.task-meta,
|
||||
.alert-desc,
|
||||
.preview-desc {
|
||||
color: #8a8d93;
|
||||
}
|
||||
|
||||
.alert-row {
|
||||
padding: 14px 12px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: #fff1f2;
|
||||
}
|
||||
|
||||
.alert-row + .alert-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.alert-row.high .alert-title,
|
||||
.alert-row.medium .alert-title,
|
||||
.alert-arrow {
|
||||
color: #e60012;
|
||||
}
|
||||
|
||||
.preview-row {
|
||||
padding: 14px 0;
|
||||
border-width: 0 0 1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.preview-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-score {
|
||||
color: #e60012;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
color: #e60012;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user