This commit is contained in:
花有清香月有阴
2022-01-14 16:20:09 +08:00
parent da8d6a8bfa
commit 4c2d937a85

View File

@@ -1,47 +1,49 @@
<template>
<div class="Health">
<div class="header">
<div class="tab-item">
<h2 style="color: #2c51ce">{{ userList.total }}</h2>
<p>上报人员</p>
</div>
<div class="tab-item">
<h2 style="color: #5aad6a">{{ userList.today }}</h2>
<p>今日上报</p>
</div>
<div class="tab-item">
<h2 style="color: #f5a319">{{ userList.unReport }}</h2>
<p>今日未报</p>
</div>
<div class="tab-item">
<h2 style="color: #cd413a; border-right: 0">{{ userList.unusual }}</h2>
<p>今日异常</p>
</div>
</div>
<div class="line1"></div>
<div class="middle">
<div class="left">
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
<u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
<span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
<span v-else>请选择</span>
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
</AiAreaPicker>
<AiTopFixed>
<div class="header">
<div class="tab-item">
<h2 style="color: #2c51ce">{{ userList.total }}</h2>
<p>上报人员</p>
</div>
<div class="tab-item">
<h2 style="color: #5aad6a">{{ userList.today }}</h2>
<p>今日上报</p>
</div>
<div class="tab-item">
<h2 style="color: #f5a319">{{ userList.unReport }}</h2>
<p>今日未报</p>
</div>
<div class="tab-item">
<h2 style="color: #cd413a; border-right: 0">{{ userList.unusual }}</h2>
<p>今日异常</p>
</div>
</div>
<u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
</div>
<div class="line1"></div>
<div class="line2"></div>
<div class="middle">
<div class="left">
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
<u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
<span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
<span v-else>请选择</span>
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
</AiAreaPicker>
</div>
<u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
</div>
<div class="line2"></div>
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#333" bar-width="192" active-color="#135AB8 " @change="change"></u-tabs>
</AiTopFixed>
<div class="bottoms">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#333" bar-width="192" active-color="#135AB8 " @change="change"></u-tabs>
<div class="line3"></div>
<template v-if="data.length">
<div class="line3"></div>
<div class="templates" v-for="(item, i) in data" :key="i" @click="goDetail(item)">
<img :src="item.avatar" alt="" v-if="item.avatar" />
<img src="./components/img/user-img.png" alt="" v-else />
@@ -196,6 +198,19 @@ export default {
.Health {
height: 100%;
background: #fff;
::v-deep .AiTopFixed {
.placeholder {
.content {
padding: 0 !important;
}
}
.fixed {
margin: 0 !important;
.content {
padding: 0 !important;
}
}
}
.header {
padding: 54px 32px 48px 32px;
@@ -256,12 +271,8 @@ export default {
}
.bottoms {
.u-tabs {
margin-bottom: -8px;
}
.line3 {
height: 4px;
height: 6px;
background: #f3f6f9;
}