151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<template>
|
||
<section class="AppChildrenDetailView">
|
||
<div class="info-list">
|
||
<div class="item" v-for="(item, index) in list" :key="index">
|
||
<div class="title-flex">
|
||
<div class="item-title">{{item.title}}</div>
|
||
<img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="item.isView ? 'right-icon' : 'right-icon right-icon-active'" @click="view(index)">
|
||
</div>
|
||
<div class="item-content" v-if="item.isView">
|
||
<!-- <div class="item-form" v-for="(items, indexs) in item.infoList" :key="indexs">
|
||
<div class="label">{{items.label}}</div>
|
||
<div class="value">{{items.value}}</div>
|
||
</div> -->
|
||
<p>详细基本信息，包括儿童的健康状态、患病情况、工学情况等</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-btn">
|
||
<div class="btn">返回</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "AppChildrenDetailView",
|
||
appName: "儿童详细信息",
|
||
data() {
|
||
return {
|
||
list: [
|
||
{
|
||
title: '详细基本信息',
|
||
isView: false,
|
||
},
|
||
{
|
||
title: '父母信息',
|
||
isView: false,
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onShow() {
|
||
document.title = '儿童详细信息'
|
||
},
|
||
methods: {
|
||
view(index) {
|
||
this.list[index].isView = !this.list[index].isView
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
uni-page-body {
|
||
background-color: #F5F6F7;
|
||
}
|
||
.AppChildrenDetailView {
|
||
.info-list {
|
||
.item {
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
.title-flex {
|
||
width: calc(100% - 32px);
|
||
display: flex;
|
||
line-height: 42px;
|
||
margin-left: 32px;
|
||
border-bottom: 1px solid #E4E5E6;
|
||
.item-title {
|
||
width: calc(100% - 80px);
|
||
padding: 40px 0 34px 0;
|
||
line-height: 42px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 30px;
|
||
color: #333;
|
||
}
|
||
.right-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
padding: 20px;
|
||
transform: rotate(-90deg);
|
||
transition: all 0.3s ease-in-out;
|
||
margin-top: 10px;
|
||
}
|
||
.right-icon-active {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
.item-content {
|
||
padding: 20px 32px;
|
||
box-sizing: border-box;
|
||
background-color: #F5F6F7;
|
||
p {
|
||
width: 100%;
|
||
line-height: 40px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 28px;
|
||
color: #999;
|
||
word-break: break-all;
|
||
}
|
||
|
||
// .item-form {
|
||
// width: 100%;
|
||
// padding: 16px 20px 16px 0;
|
||
// border-bottom: 1px solid #E4E5E6;
|
||
// box-sizing: border-box;
|
||
// word-break: break-all;
|
||
// font-family: PingFangSC-Regular;
|
||
// .label {
|
||
// height: 44px;
|
||
// font-size: 32px;
|
||
// color: #999;
|
||
// margin-bottom: 20px;
|
||
// }
|
||
// .value {
|
||
// line-height: 40px;
|
||
// font-size: 28px;
|
||
// color: #222;
|
||
// letter-spacing: 0;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
.footer-btn {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 16px 32px 52px 16px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
z-index: 9;
|
||
.btn {
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 96px;
|
||
line-height: 94px;
|
||
border: 1px solid #2183FF;
|
||
border-radius: 8px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
font-size: 32px;
|
||
color: #2183FF;
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|