|
|
|
<!doctype html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport"
|
|
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
|
|
|
|
<script src="../../assets/js/fontsize.js"></script>
|
|
|
|
<link rel="stylesheet" href="../../assets/css/api.css"/>
|
|
|
|
<link rel="stylesheet" href="../../assets/css/index.css">
|
|
|
|
<link rel="stylesheet" href="../../assets/css/doc.css">
|
|
|
|
<link rel="stylesheet" href="../../assets/icon/iconfont.css">
|
|
|
|
<style>
|
|
|
|
.health_head {
|
|
|
|
background-color: #dbb25f;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding-top: 20px;
|
|
|
|
position: relative;
|
|
|
|
/*overflow: hidden;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
.health_top {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0.29rem 0.42rem;
|
|
|
|
font-size: 15px;
|
|
|
|
color: #fff;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
/*top: 20px;*/
|
|
|
|
width: 100%;
|
|
|
|
z-index: 9999;
|
|
|
|
background-color: #dbb25f;
|
|
|
|
/*overflow: hidden;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
.health_top div {
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.head_bgc {
|
|
|
|
width: 145px;
|
|
|
|
height: 145px;
|
|
|
|
border-radius: 50%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.head_info {
|
|
|
|
background-image: url("../../assets/image/head_bgc.png");
|
|
|
|
background-size: cover;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
z-index: 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
.info_name {
|
|
|
|
font-size: 18px;
|
|
|
|
color: #A6894B;
|
|
|
|
width: 1.2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.info_sex {
|
|
|
|
font-size: 12px;
|
|
|
|
color: #A58541;
|
|
|
|
}
|
|
|
|
|
|
|
|
.info_pre {
|
|
|
|
font-size: 10px;
|
|
|
|
color: #C2A25E;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-yiliao {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header_info_item {
|
|
|
|
font-size: 14px;
|
|
|
|
color: #525254;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0.15rem 0.5rem;
|
|
|
|
border-bottom: 0.01rem solid #efefef;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header_info_item:active {
|
|
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
|
|
}
|
|
|
|
|
|
|
|
.header_info_item img {
|
|
|
|
width: 0.35rem;
|
|
|
|
margin-right: 0.16rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header_info_img {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-xiangyou {
|
|
|
|
margin-left: 0.14rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life {
|
|
|
|
background-color: #f1f1f1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_list {
|
|
|
|
padding: 0.46rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_item {
|
|
|
|
display: flex;
|
|
|
|
font-size: 11px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_left {
|
|
|
|
width: 2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_right {
|
|
|
|
padding: 0 0.28rem;
|
|
|
|
border-left: 2px solid #dbb25f;
|
|
|
|
padding-bottom: 0.5rem;
|
|
|
|
position: relative;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_right_item {
|
|
|
|
padding: 0.1rem 0 0.1rem 0.44rem;
|
|
|
|
background-color: #dbb25f;
|
|
|
|
color: #fff;
|
|
|
|
border: 1px solid #dbb25f;
|
|
|
|
margin: 0 0 0 0.5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_right_bottom {
|
|
|
|
border: 1px solid #dbb25f;
|
|
|
|
padding: 0.17rem 0.3rem;
|
|
|
|
margin: 0 0 0 0.5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_circle {
|
|
|
|
width: 0.4rem;
|
|
|
|
height: 0.4rem;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-color: #e5cb94;
|
|
|
|
position: absolute;
|
|
|
|
left: -0.2rem;
|
|
|
|
z-index: 2;
|
|
|
|
top: 0.1rem;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_circle_item {
|
|
|
|
width: 0.25rem;
|
|
|
|
height: 0.25rem;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-color: #ddbb37;
|
|
|
|
}
|
|
|
|
|
|
|
|
.life_tri {
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
border-top: 0.15rem solid transparent;
|
|
|
|
border-right: 0.3rem solid #ddbb73;
|
|
|
|
border-bottom: 0.15rem solid transparent;
|
|
|
|
position: relative;
|
|
|
|
left: -0.75rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tans {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
transition: 0.2s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tanss {
|
|
|
|
transition: 0.2s;
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-xiangyou {
|
|
|
|
color: #7E725D;
|
|
|
|
margin-left: 0.14rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.index_right {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: flex-end;
|
|
|
|
/*text-align: center;*/
|
|
|
|
position: relative;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
.index_right:before {
|
|
|
|
position: absolute;
|
|
|
|
left: -0.1rem;
|
|
|
|
right: -0.1rem;
|
|
|
|
top: -0.1rem;
|
|
|
|
bottom: -0.1rem;
|
|
|
|
content: '';
|
|
|
|
}
|
|
|
|
|
|
|
|
.img_transform {
|
|
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
.index_right .icon-yiliao {
|
|
|
|
/*font-size: 25px;*/
|
|
|
|
}
|
|
|
|
|
|
|
|
.health_mid {
|
|
|
|
/*padding-left: 0.5rem;*/
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.index_right img {
|
|
|
|
height: 0.44rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.health_menu {
|
|
|
|
position: absolute;
|
|
|
|
right: 0.42rem;
|
|
|
|
top: 0.8rem;
|
|
|
|
background-color: #fff;
|
|
|
|
padding: 0.06rem 0;
|
|
|
|
border-radius: 0.05rem;
|
|
|
|
z-index: 30;
|
|
|
|
}
|
|
|
|
|
|
|
|
.health_item {
|
|
|
|
border-bottom: 1px solid #eeeeee;
|
|
|
|
padding: 0.06rem 0.12rem;
|
|
|
|
font-size: 13px;
|
|
|
|
color: #434A54;
|
|
|
|
}
|
|
|
|
|
|
|
|
.circle {
|
|
|
|
position: relative;
|
|
|
|
width: 130px;
|
|
|
|
height: 130px;
|
|
|
|
text-align: center;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.circle .track, .circle .left, .circle .right, .circle .mask {
|
|
|
|
width: 108px;
|
|
|
|
height: 108px;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
margin: auto;
|
|
|
|
border-radius: 50%;
|
|
|
|
border: 0.15rem #dbb25f solid;
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
z-index: 20;
|
|
|
|
}
|
|
|
|
|
|
|
|
.circle .mask, .circle .left, .circle .right {
|
|
|
|
clip: rect(0 54px 108px 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.circle .left, .circle .right {
|
|
|
|
border-color: #C2A25E;
|
|
|
|
}
|
|
|
|
|
|
|
|
/*.circle .left {*/
|
|
|
|
/*border-color: #0bb20c;*/
|
|
|
|
/*background-color: #222222;*/
|
|
|
|
/*}*/
|
|
|
|
|
|
|
|
/*.circle .right {*/
|
|
|
|
/*border-color: #ce3c39;*/
|
|
|
|
/*background-color: #f2f2f2;*/
|
|
|
|
/*}*/
|
|
|
|
|
|
|
|
.circle .right {
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: rotate(180deg);
|
|
|
|
-moz-transform: rotate(180deg);
|
|
|
|
-ms-transform: rotate(180deg);
|
|
|
|
-o-transform: rotate(180deg);
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 进度显示文字样式 */
|
|
|
|
|
|
|
|
.transition-rotate {
|
|
|
|
-webkit-transition: transform 3s ease-in-out;
|
|
|
|
-moz-transition: transform 3s ease-in-out;
|
|
|
|
-ms-transition: transform 3s ease-in-out;
|
|
|
|
-o-transition: transform 3s ease-in-out;
|
|
|
|
transition: transform 3s ease-in-out;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
<header id="header">
|
|
|
|
<div class="health_top">
|
|
|
|
<div @click="closeWindow()" class="close_left"><span class="iconfont icon-fanhui"></span></div>
|
|
|
|
<div class="health_mid" v-if="rid==0">健康档案</div>
|
|
|
|
<div class="health_mid" v-else>亲友档案</div>
|
|
|
|
<div class="index_right" @click="show_list" v-if="rid==0">
|
|
|
|
<img src="../../assets/image/plus.png" alt="" :class="{img_transform:img_active}">
|
|
|
|
</div>
|
|
|
|
<div class="index_right" v-else></div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script type="text/javascript" src="../../assets/js/api.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/public.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
|
|
|
|
<script>
|
|
|
|
new FastClick(document.body);
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
|
|
|
|
<script>
|
|
|
|
var app = new Vue({
|
|
|
|
el: '#app',
|
|
|
|
data: {
|
|
|
|
img_active: false,
|
|
|
|
headerH: '',
|
|
|
|
rid: '',
|
|
|
|
type: ''
|
|
|
|
},
|
|
|
|
created: function () {
|
|
|
|
apiready = function () {
|
|
|
|
app.rid = api.pageParam.rid;
|
|
|
|
app.type = api.pageParam.type ? api.pageParam.type : 0;
|
|
|
|
app.headerH = $api.offset($api.dom('header')).h;
|
|
|
|
api.openFrame({
|
|
|
|
name: 'my_health',
|
|
|
|
url: './my_health.html',
|
|
|
|
// bounces: true,
|
|
|
|
rect: {
|
|
|
|
x: 0,
|
|
|
|
y: app.headerH,
|
|
|
|
w: api.frameWidth,
|
|
|
|
h: api.winHeight - app.headerH
|
|
|
|
},
|
|
|
|
pageParam: {
|
|
|
|
rid: app.rid,
|
|
|
|
type: app.type
|
|
|
|
}
|
|
|
|
});
|
|
|
|
api.addEventListener({
|
|
|
|
name: 'hidelist'
|
|
|
|
}, function (ret, err) {
|
|
|
|
app.img_active = ret.value.img_active
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
show_list: function () {
|
|
|
|
app.img_active = !app.img_active;
|
|
|
|
api.sendEvent({
|
|
|
|
name: 'showlist',
|
|
|
|
extra: {
|
|
|
|
img_active: app.img_active
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|
