kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css

Browse Source
This commit is contained in:
花有清香月有阴
2022-01-11 09:28:37 +08:00
parent 43592e3d48
commit 7a19fe8562
1 changed files with 39 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/apps/AppEpidemicSituation/Health.vue
View File

@@ -1,38 +1,21 @@
<template>
<div class="Health">
<div class="top">
<div class="topCard">
<div class="left">
<span class="num1">274</span>
<span class="hint">上报人员</span>
<div class="header">
<div class="tab-item">
<h2 style="color: #2c51ce">274</h2>
<p>返乡人员</p>
</div>
<div class="line"></div>
<div class="tab-item">
<h2 style="color: #5aad6a">274</h2>
<p>今日返乡</p>
</div>
<div class="topCard">
<div class="left">
<span class="num2">274</span>
<span class="hint">上报人员</span>
</div>
<div class="line"></div>
</div>
<div class="topCard">
<div class="left">
<span class="num3">274</span>
<span class="hint">上报人员</span>
</div>
<div class="line"></div>
</div>
<div class="topCard">
<div class="left">
<span class="num4">274</span>
<span class="hint">上报人员</span>
<div class="tab-item">
<h2 style="color: #f5a319">274</h2>
<p>今日异常</p>
</div>
<div class="tab-item">
<h2 style="color: #cd413a; border-right: 0">274</h2>
<p>异常处理</p>
</div>
</div>
@@ -54,7 +37,7 @@
<div class="line2"></div>
<div class="bottom">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#333 " active-color="#135AB8 " @change="change"></u-tabs>
<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>
@@ -167,41 +150,36 @@ export default {
.Health {
height: 100%;
background: #fff;
.top {
.header {
padding: 54px 32px 48px 32px;
display: flex;
padding: 48px 32px;
.topCard {
display: flex;
.left {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 28px;
background-color: #fff;
margin-bottom: 4px;
.tab-item {
flex: 1;
text-align: center;
h2 {
font-size: 52px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
.num1 {
color: #2c51ce;
height: 80px;
margin-bottom: 8px;
letter-spacing: -4px;
border-right: 1px solid #ddd;
line-height: 44px;
}
.num2 {
color: #5aad6a;
}
.num3 {
color: #f5a319;
}
.num4 {
color: #cd413a;
}
.hint {
p {
font-size: 28px;
color: #999999;
margin-top: 8px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 40px;
margin-top: -22px;
}
}
.line {
width: 1px;
background: #dddddd;
margin: 14px 0px;
}
.tab-item:nth-last-of-type(1) {
border-right: 0;
}
}