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

UserDetail

Browse Source
This commit is contained in:
花有清香月有阴
2022-01-10 15:05:53 +08:00
parent f7bb0e9c3a
commit 1f50fa659a
4 changed files with 254 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/apps/AppEpidemicSituation/HealthDetail.vue
View File

@@ -1,5 +1,59 @@
<template>
<div class="HealthDetail">HealthDetail</div>
<div class="HealthDetail">
<div class="top" @click="toUserDetail">
<div class="templates">
<!-- <img :src="" alt="" v-if='item.avatar'/> -->
<img src="./components/img/user-img.png" alt="" />
<div class="rightCont">
<div class="rightContLeft">
<div class="nameLeft">
<div class="nameTop">
<div class="names">李轶</div>
<div class="types">异常</div>
<div class="nucleate">核酸到期</div>
</div>
<div class="nameBottom">
<span>上报第</span>
<span class="num">3</span>
<span>天</span>
</div>
</div>
</div>
<div class="rightContRight">
<img src="./components/img/phone2@.png" alt="" />
<span class="call">拨打电话</span>
</div>
</div>
</div>
</div>
<div class="middle">
<div class="record">异常情况记录</div>
<template>
<!-- v-if="data.length" -->
<div class="templatess" v-for="(item, i) in 12" :key="i" @click="goHealthDetail()">
<div class="left">
<div class="recordType recordType1">正常</div>
<!-- <div class="recordType recordType2">异常</div> -->
<div class="tag">核酸到期</div>
</div>
<div class="right">
<div class="times">2022-01-10</div>
<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
</div>
</div>
</template>
<!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty> -->
</div>
<div class="fixedBtn" @click="toErr">异常情况处理</div>
</div>
</template>
<script>
@@ -8,18 +62,164 @@ export default {
components: {},
props: {},
data() {
return {}
return {
data: [],
}
},
computed: {},
watch: {},
onLoad() {},
onShow() {},
methods: {},
methods: {
toUserDetail() {
uni.navigateTo({
url: `./ErrorDetail`,
})
},
toErr() {
uni.navigateTo({
url: `./ErrorDetail`,
})
},
},
}
</script>
<style scoped lang="scss">
.HealthDetail {
height: 100%;
padding-bottom: 120px;
background: #f5f5f5;
.top {
.templates {
display: flex;
align-items: center;
padding: 32px;
box-shadow: inset 0px -1px 0px 0px #dddddd;
background: #fff;
img {
width: 128px;
height: 128px;
// border-radius: 50%;
// border: 1px solid #cccccc;
}
.rightCont {
display: flex;
justify-content: space-between;
margin-left: 32px;
width: 100%;
.rightContLeft {
// display: flex;
// justify-content: space-between;
// align-items: center;
// width: 100%;
.nameLeft {
.nameTop {
display: flex;
.names {
font-size: 32px;
font-weight: 500;
color: #333333;
}
.types {
margin-left: 16px;
padding: 4px 16px 8px 16px;
background: #faeceb;
border-radius: 20px;
font-size: 24px;
color: #cd413a;
}
.nucleate {
margin-left: 8px;
padding: 4px 16px 8px 16px;
background: #fef5e8;
border-radius: 20px;
font-size: 24px;
color: #f5a319;
}
}
.nameBottom {
margin-top: 12px;
font-size: 28px;
color: #999999;
.num {
color: #135ab8;
}
}
}
}
.rightContRight {
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
img {
width: 64px;
height: 64px;
}
.call {
font-size: 24px;
color: #3d94fb;
}
}
}
}
}
.middle {
margin-top: 16px;
background: #fff;
.record {
padding: 26px 0 26px 32px;
box-shadow: inset 0px -1px 0px 0px #dddddd;
}
.templatess {
display: flex;
justify-content: space-between;
padding: 28px 32px;
box-shadow: inset 0px -1px 0px 0px #dddddd;
.left,
.right {
display: flex;
.recordType {
font-size: 28px;
font-weight: 500;
}
.recordType1 {
color: #5aad6a;
}
.recordType2 {
color: #cd413a;
}
.tag {
margin-left: 16px;
background: #fef5e8;
border-radius: 20px;
font-size: 24px;
color: #f5a319;
padding: 4px 16px 2px 16px;
}
}
}
.emptyWrap {
background: #f5f5f5;
margin-top: 0 !important;
}
}
.fixedBtn {
position: fixed;
bottom: 0;
width: 100%;
padding: 34px 0;
text-align: center;
background: #1365dd;
box-sizing: border-box;
font-size: 32px;
font-weight: 500;
color: #ffffff;
}
}
</style>