|
|
<template>
|
|
|
<view>
|
|
|
<cpn-navbar title="护理详情" :isBack="true"></cpn-navbar>
|
|
|
|
|
|
<view>
|
|
|
<!-- 用户信息 -->
|
|
|
<view class="user-info" v-if="detail.customer">
|
|
|
<view class="top">
|
|
|
<view class="left">
|
|
|
<u-image :src="detail.customer.sex === '男' ? vuex_male_img : vuex_female_img" width="104"
|
|
|
height="104" shape="circle"></u-image>
|
|
|
</view>
|
|
|
<view class="center">
|
|
|
<view class="name">{{detail.customer.name}}</view>
|
|
|
<view class="infos">
|
|
|
<view class="age">{{ageComputed(detail.customer.birthday)}}岁
|
|
|
</view>
|
|
|
<view class="sex">{{detail.customer.sex}}</view>
|
|
|
<view class="organ">机构护理</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
<template v-if="detail.status === 0">
|
|
|
<view class="icon1"></view>
|
|
|
<view>待护理</view>
|
|
|
</template>
|
|
|
<template v-if="detail.status === 1">
|
|
|
<view class="icon3"></view>
|
|
|
<view>进行中</view>
|
|
|
</template>
|
|
|
<template v-if="detail.status === 2">
|
|
|
<view class="icon2"></view>
|
|
|
<view>已完成</view>
|
|
|
</template>
|
|
|
</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>委托人：{{detail.customer.contact_name}}</view>
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
|
|
|
<view>{{ addressFormat(detail.customer.customer_address) }}</view>
|
|
|
</view>
|
|
|
<view class="phone">
|
|
|
<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
|
|
|
<view>{{detail.customer.phone}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="re-location" @click="$u.throttle(refreshLoaction,1000)">
|
|
|
<view class="text">更新定位</view>
|
|
|
<u-image src="/static/detail/distance.png" height="34" width="34"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 今日护理 -->
|
|
|
<view class="today-nursing" v-show="detail.status !== 0">
|
|
|
<view class="title">
|
|
|
今日护理
|
|
|
</view>
|
|
|
|
|
|
<view class="line"></view>
|
|
|
<view class="table-title">
|
|
|
<view>护理明细</view>
|
|
|
<view>实际时长</view>
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
<view class="content-item" v-for="(item,index) in skuList" :key='item.info.id'>
|
|
|
<u-checkbox class="checkbox" label-size="34" size="36" :disabled="detail.status === 2"
|
|
|
v-model="item.isSelect" shape="square" :name="item.form.name"
|
|
|
@change="selectPick($event,item)">
|
|
|
{{item.info.name}}
|
|
|
</u-checkbox>
|
|
|
<view class="input">
|
|
|
<u-input :disabled="detail.status === 2 || !item.isSelect" v-model="item.form.time"
|
|
|
:custom-style="inputStyle" :placeholder="'需 '+ item.info.time_lenth"
|
|
|
placeholder-style="color:#A7AFBC;font-size:28rpx;" input-align="center"
|
|
|
:clearable="false" type="number" height="46">
|
|
|
</u-input>
|
|
|
<view style="font-size: 34rpx;">分钟</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 打卡 -->
|
|
|
<view class="clock">
|
|
|
<view class="btn" v-if="detail.status === 1 && detail.logs_count < detail.product.process_total"
|
|
|
@click="$u.throttle(clockIn,1000)">
|
|
|
<view class="text1">过程打卡</view>
|
|
|
<view class="text2">（{{detail.logs_count + 1}}）</view>
|
|
|
</view>
|
|
|
<view class="btn" v-if="detail.status === 0 && flag" @click="$u.throttle(sign,1000)">
|
|
|
<view class="text1">签到</view>
|
|
|
<view class="text2">{{dateFormat(time,'HH:mm:ss')}}</view>
|
|
|
</view>
|
|
|
<view class="btn" v-if="detail.status === 1" @click="$u.throttle(signOut,1000)">
|
|
|
<view class="text1">签退</view>
|
|
|
<view class="text2">{{dateFormat(time,'HH:mm:ss')}}</view>
|
|
|
</view>
|
|
|
<view class="btn" v-if="detail.status === 0 && !flag" @click="$u.throttle(refreshLoaction,1000)">
|
|
|
<view class="text1">更新定位</view>
|
|
|
<view class="text2">{{dateFormat(time,'HH:mm:ss')}}</view>
|
|
|
</view>
|
|
|
<view class="btn" v-if="detail.status === 2">
|
|
|
<view class="text1">护理已完成</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 打卡信息 -->
|
|
|
<view class="clock-info" v-if="location.lat && location.lng && location.time">
|
|
|
定位时间：{{dateFormat(location.time,'HH:mm:ss')}} {{location.address}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<imgUpload ref="imgUpload" :isShow.sync="isShowImg" :type="type" @confirm="clock"></imgUpload>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
ROOTPATH
|
|
|
} from '@/common/config.js'
|
|
|
import QQMapWX from '@/libs/qqmap-wx-jssdk.js'
|
|
|
import moment from '@/libs/moment.min.js'
|
|
|
|
|
|
import imgUpload from './components/imgUpload.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
imgUpload
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
type: 0, //打卡类型,1签到 2过程打卡 3签退
|
|
|
isShowImg: false,
|
|
|
id: '',
|
|
|
flag: false, //未开始护理时，是否更新过定位(真为更新过定位)
|
|
|
qqmapsdk: null,
|
|
|
inputStyle: {
|
|
|
fontSize: "34rpx",
|
|
|
color: "#36596A",
|
|
|
width: "140rpx",
|
|
|
background: "#F9F9F9"
|
|
|
},
|
|
|
btnStyle: {
|
|
|
width: '100rpx',
|
|
|
height: '100rpx',
|
|
|
borderRadius: '100%',
|
|
|
background: 'blue'
|
|
|
},
|
|
|
location: {
|
|
|
lng: '',
|
|
|
lat: '',
|
|
|
time: '',
|
|
|
address: ''
|
|
|
},
|
|
|
form: {
|
|
|
schedule_list_id: '',
|
|
|
lat: '',
|
|
|
lng: '',
|
|
|
address: '',
|
|
|
type: '',
|
|
|
upload_list: [],
|
|
|
},
|
|
|
skuList: [],
|
|
|
detail: {},
|
|
|
time: new Date(),
|
|
|
timer: null,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
load() {
|
|
|
this.qqmapsdk = new QQMapWX({
|
|
|
key: 'D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO'
|
|
|
});
|
|
|
},
|
|
|
|
|
|
selectPick(e, item) {
|
|
|
if (e.value) {
|
|
|
if (!item.form.time) {
|
|
|
item.form.time = item.info.time_lenth
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async getDeatil(id) {
|
|
|
let res = await this.$u.api.nurseDetail({
|
|
|
id
|
|
|
})
|
|
|
this.detail = res
|
|
|
this.skuList = res.sku.map(item => {
|
|
|
return {
|
|
|
info: item.sku_info,
|
|
|
isSelect: item.time ? true : false,
|
|
|
form: {
|
|
|
id: item.id,
|
|
|
time: item.time || '',
|
|
|
sku_id: item.sku_id,
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
this.form.schedule_list_id = this.id
|
|
|
console.log(this.skuList);
|
|
|
},
|
|
|
|
|
|
//获取当前定位信息
|
|
|
getLoaction() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
uni.getLocation().then(res => {
|
|
|
if (res[1]) {
|
|
|
this.location.lat = res[1]?.latitude
|
|
|
this.location.lng = res[1]?.longitude
|
|
|
this.location.time = this.time
|
|
|
this.form.lat = this.location.lat
|
|
|
this.form.lng = this.location.lng
|
|
|
|
|
|
this.qqmapsdk.reverseGeocoder({
|
|
|
location: {
|
|
|
latitude: this.location.lat,
|
|
|
longitude: this.location.lng
|
|
|
},
|
|
|
success: (res) => {
|
|
|
this.location.address = res.result.address
|
|
|
this.form.address = this.location.address
|
|
|
resolve(res)
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
reject(err)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '操作频繁,请稍后再试'
|
|
|
})
|
|
|
reject(res)
|
|
|
}
|
|
|
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//更新地址
|
|
|
refreshLoaction() {
|
|
|
this.getLoaction().then(res => {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '更新定位成功'
|
|
|
})
|
|
|
this.flag = true
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//图片批量上传
|
|
|
uploadImgs(files) {
|
|
|
let promiseAll = files.map(item => {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
uni.uploadFile({
|
|
|
url: `${ROOTPATH}/api/nurse/upload-file`,
|
|
|
header: {
|
|
|
Authorization: `Bearer ${this.vuex_token}`
|
|
|
},
|
|
|
filePath: item,
|
|
|
name: 'file',
|
|
|
success: (res1) => {
|
|
|
resolve(res1)
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
reject(err)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
})
|
|
|
|
|
|
return Promise.all(promiseAll)
|
|
|
// let res = await uni.chooseImage({
|
|
|
// sourceType: ['camera']
|
|
|
// })
|
|
|
// if (res[1]) {
|
|
|
// let promiseAll = res[1].tempFilePaths.map(item => {
|
|
|
// console.log(`${ROOTPATH}/api/nurse/upload-file`);
|
|
|
// return new Promise((resolve, reject) => {
|
|
|
// uni.uploadFile({
|
|
|
// url: `${ROOTPATH}/api/nurse/upload-file`,
|
|
|
// header: {
|
|
|
// Authorization: `Bearer ${this.vuex_token}`
|
|
|
// },
|
|
|
// filePath: item,
|
|
|
// name: 'file',
|
|
|
// success: (res1) => {
|
|
|
// resolve(res1)
|
|
|
// },
|
|
|
// fail: (err) => {
|
|
|
// reject(err)
|
|
|
// }
|
|
|
// })
|
|
|
// })
|
|
|
// })
|
|
|
|
|
|
// return Promise.all(promiseAll)
|
|
|
// } else {
|
|
|
|
|
|
// return Promise.reject(res[0].errMsg)
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
|
|
|
//打卡
|
|
|
clock(files, type) {
|
|
|
let title;
|
|
|
switch (type) {
|
|
|
case 1:
|
|
|
title = '签到成功'
|
|
|
break;
|
|
|
case 2:
|
|
|
title = `第${this.detail.logs_count+1}次打卡成功`
|
|
|
break;
|
|
|
case 3:
|
|
|
title = '签退成功'
|
|
|
break;
|
|
|
default:
|
|
|
title = '操作成功'
|
|
|
}
|
|
|
this.uploadImgs(files).then(res => {
|
|
|
this.form.upload_list = res.map(item => {
|
|
|
return {
|
|
|
upload_id: JSON.parse(item.data).id
|
|
|
}
|
|
|
})
|
|
|
this.form.type = type
|
|
|
this.$u.api.processSave(this.form).then(res => {
|
|
|
uni.showToast({
|
|
|
icon: 'success',
|
|
|
title
|
|
|
})
|
|
|
this.$refs['imgUpload'].clearList()
|
|
|
this.isShowImg = false
|
|
|
this.getDeatil(this.id)
|
|
|
}).catch(err => {
|
|
|
uni.showToast({
|
|
|
title: '操作失败，请重试'
|
|
|
})
|
|
|
})
|
|
|
}).catch(err => {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '图片上传失败'
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//保存服务项目
|
|
|
saveSku() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
let temp1 = this.skuList.filter(item => {
|
|
|
return item.isSelect
|
|
|
})
|
|
|
|
|
|
let temp2 = temp1.map(item => {
|
|
|
return item.form
|
|
|
})
|
|
|
|
|
|
this.$u.api.nurseSave({
|
|
|
id: this.id,
|
|
|
sku_time_list: temp2
|
|
|
}).then(res => {
|
|
|
resolve(res)
|
|
|
}).catch(err => {
|
|
|
reject(err)
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//签到
|
|
|
sign() {
|
|
|
this.type = 1
|
|
|
this.isShowImg = true
|
|
|
//this.clock(1)
|
|
|
},
|
|
|
|
|
|
//过程打卡
|
|
|
clockIn() {
|
|
|
//验证是否有选择服务项目并填写
|
|
|
let flag = false
|
|
|
for (let i of this.skuList) {
|
|
|
if (i.isSelect && i.form.time) {
|
|
|
flag = true
|
|
|
}
|
|
|
}
|
|
|
if (!flag) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: `请选择并填写服务项目与时间`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
this.saveSku().then(res => {
|
|
|
this.type = 2
|
|
|
this.isShowImg = true
|
|
|
}).catch(err => {
|
|
|
console.log(err);
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '请重试'
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//签退
|
|
|
signOut() {
|
|
|
if (this.detail.logs_count < this.detail.product.process_total) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: `请先完成${this.detail.product.process_total}次打卡，再签退。当前完成打卡次数${this.detail.logs_count}`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
//验证是否有选择服务项目并填写
|
|
|
let flag = false
|
|
|
for (let i of this.skuList) {
|
|
|
if (i.isSelect && i.form.time) {
|
|
|
flag = true
|
|
|
}
|
|
|
}
|
|
|
if (!flag) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: `请选择并填写服务项目与时间`
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
//验证服务时间是否都已完成
|
|
|
// let flag2 = 0
|
|
|
// let tempArr = []
|
|
|
// for (let i of this.skuList) {
|
|
|
// if (i.isSelect && (i.form.time >= i.info.time_lenth)) {
|
|
|
// flag2++
|
|
|
// } else {
|
|
|
// tempArr.push(i.info.name)
|
|
|
// }
|
|
|
// }
|
|
|
// if (flag2 < this.skuList.length) {
|
|
|
// uni.showToast({
|
|
|
// icon: 'none',
|
|
|
// title: `${tempArr.toString()}服务时间未满`
|
|
|
// })
|
|
|
// return
|
|
|
// }
|
|
|
|
|
|
this.saveSku().then(() => {
|
|
|
this.type = 3
|
|
|
this.isShowImg = true
|
|
|
}).catch(err => {
|
|
|
console.log(err);
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '请重试'
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
ageComputed() {
|
|
|
return function(birth) {
|
|
|
return new Date().getFullYear() - new Date(birth).getFullYear()
|
|
|
}
|
|
|
},
|
|
|
addressFormat() {
|
|
|
return function(addresses) {
|
|
|
return addresses.filter(item => {
|
|
|
item.default === 1
|
|
|
})[0]?.address || addresses[0]?.address || '无'
|
|
|
}
|
|
|
},
|
|
|
dateFormat() {
|
|
|
return function(date, fmt = "YYYY-MM-DD") {
|
|
|
if (date) {
|
|
|
return moment(date).format(fmt)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.getDeatil(option.id)
|
|
|
this.id = option.id
|
|
|
|
|
|
},
|
|
|
onShow() {
|
|
|
this.timer = setInterval(() => {
|
|
|
this.time = new Date()
|
|
|
}, 1000)
|
|
|
},
|
|
|
onHide() {
|
|
|
clearInterval(this.timer)
|
|
|
},
|
|
|
mounted() {
|
|
|
this.load()
|
|
|
this.getLoaction()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.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;
|
|
|
}
|
|
|
|
|
|
.table-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
&>view {
|
|
|
text-align: center;
|
|
|
width: 260rpx;
|
|
|
|
|
|
padding-top: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
|
|
|
padding: 14rpx 20rpx 24rpx 20rpx;
|
|
|
|
|
|
.content-item {
|
|
|
height: 70rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 24rpx 0;
|
|
|
padding-left: 10rpx;
|
|
|
|
|
|
.checkbox {
|
|
|
flex: 1
|
|
|
}
|
|
|
|
|
|
::v-deep .u-checkbox {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
|
|
|
::v-deep .u-checkbox__label {
|
|
|
width: 100% !important;
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
::v-deep .u-checkbox__icon-wrap--disabled--checked text {
|
|
|
color: #1d5cba !important;
|
|
|
}
|
|
|
</style>
|
