|
|
<template>
|
|
|
<view>
|
|
|
<cpn-navbar title="护理详情" :isBack="true"></cpn-navbar>
|
|
|
|
|
|
<view>
|
|
|
<!-- 用户信息 -->
|
|
|
<view class="user-info">
|
|
|
<view class="top">
|
|
|
<view class="left">
|
|
|
<u-image src="/static/logo.png" width="104" height="104" shape="circle"></u-image>
|
|
|
</view>
|
|
|
<view class="center">
|
|
|
<view class="name">余美君</view>
|
|
|
<view class="infos">
|
|
|
<view class="age">74岁</view>
|
|
|
<view class="sex">女</view>
|
|
|
<view class="organ">机构护理</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<view class="icon3"></view>
|
|
|
<view>进行中</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
|
<view class="bottom">
|
|
|
<view class="client">
|
|
|
<u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>
|
|
|
<view>委托人：余夏秀</view>
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
|
|
|
<view>通园路666号（地图：通园路66号）</view>
|
|
|
</view>
|
|
|
<view class="phone">
|
|
|
<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
|
|
|
<view>158****5455</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="re-location">
|
|
|
<view class="text">更新定位</view>
|
|
|
<u-image src="/static/detail/distance.png" height="34" width="34"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 今日护理 -->
|
|
|
<view class="today-nursing">
|
|
|
<view class="title">
|
|
|
今日护理
|
|
|
</view>
|
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
|
<view class="content">
|
|
|
<view class="content-item">
|
|
|
<view class="checkbox">
|
|
|
<u-checkbox v-model="form.handClean.isSelect" shape="circle"></u-checkbox>
|
|
|
<view>手、足部清洁</view>
|
|
|
</view>
|
|
|
<view class="input">
|
|
|
<u-input v-model="form.handClean.time" :custom-style="inputStyle" placeholder="请输入"
|
|
|
placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
|
|
|
height="40">
|
|
|
</u-input>
|
|
|
<view>分钟</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content-item">
|
|
|
<view class="checkbox">
|
|
|
<u-checkbox v-model="form.mouthClean.isSelect" shape="circle"></u-checkbox>
|
|
|
<view>口腔清洁</view>
|
|
|
</view>
|
|
|
<view class="input">
|
|
|
<u-input v-model="form.mouthClean.time" :custom-style="inputStyle" placeholder="请输入"
|
|
|
placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
|
|
|
height="40">
|
|
|
</u-input>
|
|
|
<view>分钟</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content-item">
|
|
|
<view class="checkbox">
|
|
|
<u-checkbox v-model="form.bedClean.isSelect" shape="circle"></u-checkbox>
|
|
|
<view>整理床单元</view>
|
|
|
</view>
|
|
|
<view class="input">
|
|
|
<u-input v-model="form.bedClean.time" :custom-style="inputStyle" placeholder="请输入"
|
|
|
placeholder-style="color:#A7AFBC;" input-align="center" :clearable="false" type="number"
|
|
|
height="40">
|
|
|
</u-input>
|
|
|
<view>分钟</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 打卡 -->
|
|
|
<view class="clock">
|
|
|
<view class="btn">
|
|
|
<view class="text1">过程打卡</view>
|
|
|
<view class="text2">（1）</view>
|
|
|
</view>
|
|
|
<view class="btn">
|
|
|
<view class="text1">更新定位</view>
|
|
|
<view class="text2">05:19:34</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 打卡信息 -->
|
|
|
<view class="clock-info">
|
|
|
定位时间：05:19:49 江苏省常州市天宁雕庄街道清扬中路辅路彩铃公寓
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
inputStyle: {
|
|
|
fontSize: "24rpx",
|
|
|
color: "#36596A",
|
|
|
width: "140rpx",
|
|
|
background: "#F9F9F9"
|
|
|
},
|
|
|
form: {
|
|
|
handClean: {
|
|
|
isSelect: false,
|
|
|
time: null
|
|
|
},
|
|
|
mouthClean: {
|
|
|
isSelect: false,
|
|
|
time: null
|
|
|
},
|
|
|
bedClean: {
|
|
|
isSelect: false,
|
|
|
time: null
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
/deep/.u-checkbox {
|
|
|
display: inline !important;
|
|
|
}
|
|
|
|
|
|
// 待护理
|
|
|
.icon1 {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
background: #FDB030;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
}
|
|
|
|
|
|
//已完成
|
|
|
.icon2 {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
background: #1173FF;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
}
|
|
|
|
|
|
//进行中
|
|
|
.icon3 {
|
|
|
width: 12rpx;
|
|
|
height: 12rpx;
|
|
|
background: #2EC28B;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
border: 2rpx solid #2EC28B;
|
|
|
border-radius: 100%;
|
|
|
animation: icon-scale 3s linear infinite;
|
|
|
|
|
|
position: absolute;
|
|
|
top: -8rpx;
|
|
|
left: -8rpx;
|
|
|
}
|
|
|
|
|
|
@keyframes icon-scale {
|
|
|
|
|
|
0%,
|
|
|
30%,
|
|
|
100%,
|
|
|
40% {
|
|
|
transform: scale(0.7, 0.7);
|
|
|
}
|
|
|
|
|
|
70% {
|
|
|
transform: scale(1, 1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.user-info {
|
|
|
width: 710rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
|
|
|
|
|
margin: 40rpx auto 0 auto;
|
|
|
position: relative;
|
|
|
|
|
|
.top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: flex-start;
|
|
|
|
|
|
padding-top: 34rpx;
|
|
|
padding-bottom: 30rpx;
|
|
|
|
|
|
.left {
|
|
|
padding-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.center {
|
|
|
flex: 1;
|
|
|
|
|
|
padding-left: 24rpx;
|
|
|
|
|
|
.name {
|
|
|
height: 48rpx;
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
line-height: 24rpx;
|
|
|
}
|
|
|
|
|
|
.infos {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-top: 20rpx;
|
|
|
|
|
|
.age {
|
|
|
height: 34rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #A7AFBC;
|
|
|
line-height: 34rpx;
|
|
|
}
|
|
|
|
|
|
.sex {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
background: #FDECEC;
|
|
|
opacity: 0.5;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
text-align: center;
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.organ {
|
|
|
width: 140rpx;
|
|
|
height: 40rpx;
|
|
|
background: #F9F9F9;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
text-align: center;
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
width: 670rpx;
|
|
|
height: 2rpx;
|
|
|
border: 2rpx solid #EEEFF5;
|
|
|
|
|
|
margin: 30rpx auto 0 auto;
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
|
|
|
padding: 26rpx 0 34rpx 24rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.bottom-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
|
|
|
&>view {
|
|
|
padding-left: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.client {
|
|
|
@extend .bottom-item;
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
@extend .bottom-item;
|
|
|
|
|
|
padding-top: 18rpx;
|
|
|
}
|
|
|
|
|
|
.phone {
|
|
|
@extend .bottom-item;
|
|
|
|
|
|
padding-top: 18rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.re-location {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
position: absolute;
|
|
|
bottom: 36rpx;
|
|
|
right: 20rpx;
|
|
|
|
|
|
.text {
|
|
|
height: 34rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #A7AFBC;
|
|
|
line-height: 34rpx;
|
|
|
|
|
|
padding-right: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.today-nursing {
|
|
|
width: 710rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
|
|
|
|
|
|
margin: 20rpx auto 0 auto;
|
|
|
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
|
padding: 24rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
width: 670rpx;
|
|
|
height: 2rpx;
|
|
|
border: 2rpx solid #EEEFF5;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
|
|
|
padding: 14rpx 20rpx 24rpx 20rpx;
|
|
|
|
|
|
.content-item {
|
|
|
height: 70rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
.checkbox {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&>view {
|
|
|
height: 40rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
padding-left: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.input {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&>view {
|
|
|
height: 40rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
padding-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.clock {
|
|
|
display: flex;
|
|
|
justify-content: space-evenly;
|
|
|
|
|
|
margin-top: 48rpx;
|
|
|
|
|
|
.btn {
|
|
|
width: 190rpx;
|
|
|
height: 190rpx;
|
|
|
background: #1479FF;
|
|
|
border-radius: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
&::before {
|
|
|
content: '';
|
|
|
height: 220rpx;
|
|
|
width: 220rpx;
|
|
|
border-radius: 100%;
|
|
|
background-color: rgba(20, 121, 255, 0.15);
|
|
|
|
|
|
position: absolute;
|
|
|
top: calc(50% - 110rpx);
|
|
|
left: calc(50% - 110rpx);
|
|
|
}
|
|
|
|
|
|
.text-class {
|
|
|
height: 46rpx;
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 46rpx;
|
|
|
}
|
|
|
|
|
|
.text1 {
|
|
|
@extend .text-class;
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
@extend .text-class;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.clock-info {
|
|
|
width: 650rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
|
font-weight: 500;
|
|
|
color: #36596A;
|
|
|
line-height: 40rpx;
|
|
|
|
|
|
margin: 46rpx auto;
|
|
|
}
|
|
|
</style>
|
