防疫政策

This commit is contained in:
shijingjing
2022-05-25 11:57:25 +08:00
parent 44f9a8a5e8
commit 731444ae9a
2 changed files with 182 additions and 234 deletions

View File

@@ -4,7 +4,7 @@
<div class="user">
<div class="header">
<h3>张三</h3>
<div style="color: #4181FF;"><u-icon name="phone" color="#4181FF" size="28"></u-icon>拨打电话</div>
<div style="color: #4181FF;" @click="call('110')"><u-icon name="phone" color="#4181FF" size="28"></u-icon>拨打电话</div>
</div>
<div class="idNumber">
<span>身份证号</span>
@@ -26,7 +26,6 @@
</div>
</div>
<div class="card">
<!-- <h2>{{ info.name }}的返乡登记信息</h2> -->
<div class="item-info">
<div class="item-info__item">
<image src="/static/img/from-icon.png"/>
@@ -43,168 +42,85 @@
</div>
</div>
</div>
<div class="detail-info">
<h2>基本信息</h2>
<div class="detail-info__item">
<div class="left">
<label>姓名</label>
<div class="info">
<div class="detail-info">
<h2>行程信息<span>省外高风险地区</span></h2>
<div class="detail-info__item">
<div class="left">
<label>出发地</label>
</div>
<div class="right">
<span :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{ info.startAreaName }}</span>
</div>
</div>
<div class="right">
<span>{{ info.name }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>身份证号</label>
</div>
<div class="right">
<span>{{ info.idNumber }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>手机号码</label>
</div>
<div class="right" @click="call(info.phone)" hover-class="text-hover">
<image src="https://cdn.cunwuyun.cn/dvcp/h5/common/phone.png"/>
<span style="color: #4181FF">{{ info.phone }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>人员类别</label>
</div>
<div class="right">
<span :style="{color: /[03]/.test(info.type) ? '#42D784' : '#FF4466'}">{{
$dict.getLabel('epidemicMemberType', info.type)
}}</span>
</div>
</div>
</div>
<div class="detail-info">
<h2>行程信息</h2>
<div class="detail-info__item">
<div class="left">
<label>出行方式</label>
</div>
<div class="right">
<span>{{ $dict.getLabel('epidemicRecentTravel', info.travelType) }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>出发时间</label>
</div>
<div class="right">
<span>{{ info.startTime && info.startTime.substr(0, info.startTime.length - 3) }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>出发地区</label>
</div>
<div class="right">
<span :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{ info.startAreaName }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>出发地址</label>
</div>
<div class="right">
<span>{{ info.startAddress }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>到达时间</label>
</div>
<div class="right">
<span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>返乡地区</label>
</div>
<div class="right">
<span>{{ info.arriveAreaName }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>返乡地址</label>
</div>
<div class="right">
<span>{{ info.arriveAddress }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>行程描述</label>
</div>
<div class="right">
<span>{{ info.description }}</span>
</div>
</div>
</div>
<div class="detail-info">
<h2>核酸检测信息</h2>
<div class="detail-info__item">
<div class="left">
<label>核酸检测日期</label>
</div>
<div class="right">
<span>{{ info.checkTime.split(' ')[0] }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>核酸检测结果</label>
</div>
<div class="right">
<span :style="{color: info.checkResult === '0' ? '#42D784' : '#FF4466'}">{{
$dict.getLabel('epidemicRecentTestResult', info.checkResult)
}}</span>
</div>
</div>
<div class="detail-info__item detail-info__item--img">
<div class="left" style="max-width: 100%;">
<label>本人健康码截图或核酸检测报告</label>
</div>
<div class="right">
<image :src="item.url" @click="preview(item.url)" v-for="(item, index) in info.checkPhoto" :key="index"/>
</div>
</div>
</div>
<div class="detail-info">
<h2>健康状况</h2>
<div class="detail-info__item">
<div class="left">
<label>当前体温</label>
</div>
<div class="right">
<span :style="{color: info.temperature >= 37.3 ? '#FF4466' : '#42D784'}">{{ info.temperature }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>14天内是否接触新冠确诊或疑似患者</label>
</div>
<div class="right">
<span :style="{color: info.touchInFourteen === '0' ? '#42D784' : '#FF4466'}">{{
$dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)
}}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>当前健康状况</label>
</div>
<div class="right">
<span :style="{color: !info.isHealth ? '#42D784' : '#FF4466'}">{{ info.healthName }}</span>
<div class="detail-info__item">
<div class="left">
<label>交通工具</label>
</div>
<div class="right">
<span>{{ $dict.getLabel('epidemicRecentTravel', info.travelType) }}</span>
</div>
</div>
<div class="detail-info__item_wrap">
<div class="left">
<label>火车车次/航班号/汽车出发地</label>
</div>
<div class="right">
<span>{{ $dict.getLabel('epidemicRecentTravel', info.travelType) }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>目的地</label>
</div>
<div class="right">
<span>{{ info.startAddress }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>居住地点</label>
</div>
<div class="right">
<span>{{ info.startAddress }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>行程安排</label>
</div>
<div class="right">
<span>{{ info.startAddress }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>预计/实际抵达时间</label>
</div>
<div class="right">
<span>{{ info.startTime && info.startTime.substr(0, info.startTime.length - 3) }}</span>
</div>
</div>
<div class="detail-info__item">
<div class="left">
<label>预计离开时间</label>
</div>
<div class="right">
<span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -281,8 +197,9 @@ export default {
.detail-header {
padding: 32px;
height: 860px;
height: 680px;
background: linear-gradient(135deg, #6496FF 0%, #4F75FF 100%);
position: relative;
.user {
width: 100%;
@@ -328,8 +245,7 @@ export default {
width: 100%;
height: 40px;
line-height: 40px;
background: #000000;
opacity: 0.8;
background: rgb(27, 27, 27, 0.85);
color: #fff;
font-size: 22px;
text-align: center;
@@ -349,13 +265,6 @@ export default {
border-radius: 16px;
padding: 32px;
box-sizing: border-box;
// h2 {
// margin-bottom: 32px;
// color: #fff;
// font-size: 40px;
// font-weight: 600;
// }
.item-info {
.item-info__item {
display: flex;
@@ -382,77 +291,86 @@ export default {
}
.detail-info {
margin-top: 24px;
padding: 0 32px;
background: #fff;
.info {
position: absolute;
top: 657px;
left: 50%;
width: 100%;
transform: translate(-50%, 1%);
.detail-info {
margin-top: 24px;
padding: 0 32px;
background: #fff;
border-radius: 16px 16px 0 0;
& > h2 {
height: 116px;
line-height: 116px;
font-size: 38px;
font-weight: 600;
color: #333;
}
.detail-info__item {
display: flex;
justify-content: space-between;
padding: 34px 0;
border-bottom: 1px solid #DDDDDD;
&:last-child {
border: none;
& > h2 {
height: 116px;
line-height: 116px;
font-size: 38px;
font-weight: 600;
color: #333;
span {
float: right;
font-size: 28px;
color: #FF4466;
font-weight: normal;
}
}
.left {
.detail-info__item {
display: flex;
line-height: 1.3;
max-width: 360px;
justify-content: space-between;
padding: 34px 0;
border-bottom: 1px solid #DDDDDD;
label {
position: relative;
&:last-child {
border: none;
}
.left {
display: flex;
line-height: 1.3;
max-width: 360px;
label {
position: relative;
color: #999999;
font-size: 32px;
}
}
.right {
display: flex;
max-width: 450px;
span {
color: #333333;
font-size: 32px;
text-align: right;
}
image {
width: 40px;
height: 40px;
}
}
}
.detail-info__item_wrap {
display: block;
border-bottom: 1px solid #DDDDDD;
padding: 34px 0;
.left {
color: #999999;
font-size: 32px;
}
}
.right {
display: flex;
max-width: 450px;
span {
color: #333333;
font-size: 32px;
text-align: right;
}
image {
width: 40px;
height: 40px;
}
}
}
.detail-info__item--img {
display: block;
.right {
flex-wrap: wrap;
max-width: 100%;
margin-top: 34px;
image {
width: 226px;
height: 226px;
margin: 0 9px 9px 0;
&:nth-of-type(3n) {
margin-right: 0;
}
.right {
margin-top: 20px;
}
}
}
}
}
</style>

View File

@@ -1,13 +1,43 @@
<template>
<div>政策详情</div>
<div class="policyDetail">
<h2>外地抵汉来汉人员疫情防控政策通知</h2>
<div class="tips">
<span>武昌区疫情防控中心</span><span>125人看过</span>
</div>
<u-parse :html="content"></u-parse>
</div>
</template>
<script>
export default {
data() {
return {
content: {}
}
},
methods: {},
}
</script>
<style>
<style lang="scss" scoped>
.policyDetail {
padding: 32px 32px;
box-sizing: border-box;
background: #FFF;
h2 {
font-size: 48px;
font-weight: 600;
}
.tips {
display: flex;
justify-content: space-between;
color: #999999;
margin-top: 16px;
}
u-parse {
margin-top: 64px;
}
}
</style>