feat: UI rewrite R1-R3 (30 pages redesigned)
- R1: inspection + problem pages (9) - R2: maintenance + check + yxkjzy (7) - R3: report forms + supervisor + menuEdit (13) All pages: #1E74FF NavBar, warm white bg, cards 10px radius
This commit is contained in:
Ubuntu
@@ -2,7 +2,8 @@
|
||||
/**
|
||||
* 监督人员详情页
|
||||
*
|
||||
* 展示第三方监督人员详细信息，包含基本信息、在岗状态和履职记录。
|
||||
* 展示第三方监督人员详细信息，包含基本信息、资质信息和履职统计。
|
||||
* Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
|
||||
*/
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
@@ -45,64 +46,242 @@ const statusColorMap: Record<string, 'success' | 'danger'> = {
|
||||
|
||||
<template>
|
||||
<div class="supervisor-detail-page">
|
||||
<van-nav-bar title="人员详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
|
||||
<!-- NavBar — brand blue -->
|
||||
<van-nav-bar
|
||||
title="人员详情"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="router.back()"
|
||||
/>
|
||||
|
||||
<!-- 状态标签 -->
|
||||
<!-- Status Bar -->
|
||||
<div class="status-bar">
|
||||
<van-tag :type="statusColorMap[supervisor.status]" size="large">
|
||||
<van-tag :type="statusColorMap[supervisor.status]" size="large" round>
|
||||
{{ statusMap[supervisor.status] }}
|
||||
</van-tag>
|
||||
<div class="status-bar__name">{{ supervisor.name }}</div>
|
||||
<div class="status-bar__sub">{{ supervisor.company }} · {{ supervisor.rating }} 分</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<van-cell-group title="基本信息" class="info-group">
|
||||
<van-cell title="姓名" :value="supervisor.name" />
|
||||
<van-cell title="所属公司" :value="supervisor.company" />
|
||||
<van-cell title="联系电话" :value="supervisor.phone" />
|
||||
<van-cell title="所属项目" :value="supervisor.project" />
|
||||
<van-cell title="评分" :value="`${supervisor.rating} 分`" />
|
||||
</van-cell-group>
|
||||
<!-- 基本信息 Card -->
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<span class="card-header__accent"></span>
|
||||
<h5 class="card-header__title">基本信息</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">姓名</span>
|
||||
<span class="info-row__value">{{ supervisor.name }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">所属公司</span>
|
||||
<span class="info-row__value">{{ supervisor.company }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">联系电话</span>
|
||||
<span class="info-row__value">{{ supervisor.phone }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">所属项目</span>
|
||||
<span class="info-row__value">{{ supervisor.project }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">评 分</span>
|
||||
<span class="info-row__value info-row__value--rating">
|
||||
<van-icon name="star" size="14" color="#FF976A" />
|
||||
{{ supervisor.rating }} 分
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资质信息 -->
|
||||
<van-cell-group title="资质信息" class="info-group">
|
||||
<van-cell title="证书编号" :value="supervisor.certNo" />
|
||||
<van-cell title="证书类型" :value="supervisor.certType" />
|
||||
<van-cell title="学历" :value="supervisor.education" />
|
||||
<van-cell title="专业" :value="supervisor.major" />
|
||||
</van-cell-group>
|
||||
<!-- 资质信息 Card -->
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<span class="card-header__accent"></span>
|
||||
<h5 class="card-header__title">资质信息</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">证书编号</span>
|
||||
<span class="info-row__value">{{ supervisor.certNo }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">证书类型</span>
|
||||
<span class="info-row__value">{{ supervisor.certType }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">学 历</span>
|
||||
<span class="info-row__value">{{ supervisor.education }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">专 业</span>
|
||||
<span class="info-row__value">{{ supervisor.major }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 履职统计 -->
|
||||
<van-cell-group title="履职统计" class="info-group">
|
||||
<van-cell title="从业年限" :value="`${supervisor.superviseYears} 年`" />
|
||||
<van-cell title="监督次数" :value="`${supervisor.superviseCount} 次`" />
|
||||
<van-cell title="发现问题" :value="`${supervisor.problemCount} 个`" />
|
||||
<van-cell title="最近到岗" :value="supervisor.lastOnDuty" />
|
||||
<van-cell title="入职日期" :value="supervisor.entryDate" />
|
||||
</van-cell-group>
|
||||
<!-- 履职统计 Card -->
|
||||
<div class="info-card">
|
||||
<div class="card-header">
|
||||
<span class="card-header__accent"></span>
|
||||
<h5 class="card-header__title">履职统计</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="stat-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__value">{{ supervisor.superviseYears }}</div>
|
||||
<div class="stat-item__label">从业年限</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__value">{{ supervisor.superviseCount }}</div>
|
||||
<div class="stat-item__label">监督次数</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-item__value">{{ supervisor.problemCount }}</div>
|
||||
<div class="stat-item__label">发现问题</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">最近到岗</span>
|
||||
<span class="info-row__value">{{ supervisor.lastOnDuty }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">入职日期</span>
|
||||
<span class="info-row__value">{{ supervisor.entryDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.supervisor-detail-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
background: #F4F7F8;
|
||||
padding-bottom: 24px;
|
||||
|
||||
:deep(.van-nav-bar) {
|
||||
background: var(--color-primary);
|
||||
--van-nav-bar-title-text-color: #fff;
|
||||
--van-nav-bar-text-color: #fff;
|
||||
--van-nav-bar-icon-color: #fff;
|
||||
:deep(.van-nav-bar) { background: #1E74FF; }
|
||||
:deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
|
||||
:deep(.van-nav-bar__text),
|
||||
:deep(.van-nav-bar__arrow) { color: #fff; }
|
||||
:deep(.van-nav-bar .van-icon) { color: #fff; }
|
||||
}
|
||||
|
||||
// Status Bar
|
||||
.status-bar {
|
||||
padding: 20px 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__name {
|
||||
margin-top: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
&__sub {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
padding: 12px 16px;
|
||||
background: var(--color-bg-card);
|
||||
text-align: center;
|
||||
// Info Card
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
margin: 10px 12px 0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
margin-top: 8px;
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 16px 10px;
|
||||
|
||||
&__accent {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: #1E74FF;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0 16px 14px;
|
||||
}
|
||||
|
||||
// Info Rows
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 8px 0;
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
&__label {
|
||||
width: 72px;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
&__value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-primary);
|
||||
word-break: break-all;
|
||||
|
||||
&--rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #FF976A;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stat Grid
|
||||
.stat-grid {
|
||||
display: flex;
|
||||
padding: 8px 0 16px;
|
||||
gap: 0;
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&__value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #1E74FF;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
*
|
||||
* 展示监督人员列表，支持搜索和状态筛选（全部/在岗/离岗），
|
||||
* 点击卡片跳转人员详情。
|
||||
* Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
|
||||
*/
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
@@ -60,40 +61,82 @@ function goDetail(id: number) {
|
||||
|
||||
<template>
|
||||
<div class="supervisor-page">
|
||||
<van-nav-bar title="第三方监督人员" left-arrow fixed placeholder @click-left="router.back()" />
|
||||
<!-- NavBar — brand blue -->
|
||||
<van-nav-bar
|
||||
title="第三方监督人员"
|
||||
left-arrow
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="router.back()"
|
||||
/>
|
||||
|
||||
<van-search v-model="searchText" placeholder="搜索姓名、公司、项目" shape="round" />
|
||||
<!-- Search -->
|
||||
<div class="search-wrapper">
|
||||
<van-search
|
||||
v-model="searchText"
|
||||
placeholder="搜索姓名、公司、项目"
|
||||
shape="round"
|
||||
background="transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<van-tabs v-model:active="activeTab" sticky>
|
||||
<!-- Tabs -->
|
||||
<van-tabs
|
||||
v-model:active="activeTab"
|
||||
sticky
|
||||
:duration="0.3"
|
||||
swipeable
|
||||
color="#1E74FF"
|
||||
title-active-color="#1E74FF"
|
||||
title-inactive-color="#646566"
|
||||
line-width="20"
|
||||
line-height="3"
|
||||
>
|
||||
<van-tab title="全部" />
|
||||
<van-tab title="在岗" />
|
||||
<van-tab title="离岗" />
|
||||
</van-tabs>
|
||||
|
||||
<!-- Supervisor List -->
|
||||
<div class="supervisor-list">
|
||||
<van-empty v-if="filteredSupervisors.length === 0" description="暂无监督人员" />
|
||||
<van-card
|
||||
v-for="supervisor in filteredSupervisors"
|
||||
:key="supervisor.id"
|
||||
:title="supervisor.name"
|
||||
:desc="supervisor.company"
|
||||
@click="goDetail(supervisor.id)"
|
||||
<van-empty
|
||||
v-if="filteredSupervisors.length === 0"
|
||||
image="search"
|
||||
description="暂无监督人员"
|
||||
/>
|
||||
<div
|
||||
v-for="item in filteredSupervisors"
|
||||
:key="item.id"
|
||||
class="supervisor-card"
|
||||
@click="goDetail(item.id)"
|
||||
>
|
||||
<template #tags>
|
||||
<van-tag :type="statusColorMap[supervisor.status]" size="medium">
|
||||
{{ statusMap[supervisor.status] }}
|
||||
</van-tag>
|
||||
<van-tag type="primary" size="medium" plain>
|
||||
{{ supervisor.rating }} 分
|
||||
</van-tag>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="supervisor-meta">
|
||||
<span>{{ supervisor.phone }}</span>
|
||||
<span>{{ supervisor.project }}</span>
|
||||
<div class="supervisor-card__header">
|
||||
<div class="supervisor-card__name-row">
|
||||
<h4 class="supervisor-card__name">{{ item.name }}</h4>
|
||||
<div class="supervisor-card__rating">
|
||||
<van-icon name="star" size="14" color="#FF976A" />
|
||||
<span>{{ item.rating }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-card>
|
||||
<van-tag :type="statusColorMap[item.status]" size="medium" round>
|
||||
{{ statusMap[item.status] }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="supervisor-card__body">
|
||||
<span class="info-item">
|
||||
<van-icon name="user-o" size="14" />
|
||||
{{ item.company }}
|
||||
</span>
|
||||
<span class="info-item">
|
||||
<van-icon name="phone-o" size="14" />
|
||||
{{ item.phone }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="supervisor-card__footer">
|
||||
<van-icon name="location-o" size="12" color="#969799" />
|
||||
<span class="project-text">{{ item.project }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -101,35 +144,109 @@ function goDetail(id: number) {
|
||||
<style lang="scss" scoped>
|
||||
.supervisor-page {
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-page);
|
||||
background: #F4F7F8;
|
||||
|
||||
:deep(.van-nav-bar) {
|
||||
background: var(--color-primary);
|
||||
--van-nav-bar-title-text-color: #fff;
|
||||
--van-nav-bar-text-color: #fff;
|
||||
--van-nav-bar-icon-color: #fff;
|
||||
:deep(.van-nav-bar) { background: #1E74FF; }
|
||||
:deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
|
||||
:deep(.van-nav-bar__text),
|
||||
:deep(.van-nav-bar__arrow) { color: #fff; }
|
||||
:deep(.van-nav-bar .van-icon) { color: #fff; }
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
padding: 8px 12px 0;
|
||||
background: #F4F7F8;
|
||||
|
||||
:deep(.van-search__content) {
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.van-tabs) { background: #fff; }
|
||||
:deep(.van-tabs__wrap) { padding: 0 8px; }
|
||||
:deep(.van-tab) { font-size: 14px; }
|
||||
|
||||
.supervisor-list {
|
||||
padding: 0 8px;
|
||||
padding: 8px 12px 16px;
|
||||
}
|
||||
|
||||
:deep(.van-card) {
|
||||
margin: 8px;
|
||||
border-radius: 10px;
|
||||
background: var(--color-bg-card);
|
||||
}
|
||||
.supervisor-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.15s ease;
|
||||
|
||||
:deep(.van-tag) {
|
||||
margin-right: 4px;
|
||||
&:active {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.supervisor-meta {
|
||||
.supervisor-card__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.supervisor-card__name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.supervisor-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.supervisor-card__rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #FF976A;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.supervisor-card__body {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-regular);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.supervisor-card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.project-text {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--color-text-placeholder);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user