1628 lines
44 KiB
Vue
1628 lines
44 KiB
Vue
<!-- 护嘱 -->
|
||
<template>
|
||
<view class="right-container" :style="isshow?{opacity: `1`}:{opacity: `0`}">
|
||
<view class="right-container-title-nav">
|
||
<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
|
||
ID：12345678
|
||
</text>
|
||
<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
|
||
名称：未命名01
|
||
</text>
|
||
|
||
<view class="right-icons">
|
||
<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
|
||
<view :class="darkFans?`right-icons-font-dark`: `right-icons-font` ">王金福</view>
|
||
<image class="right-icons-img-icon"
|
||
:src="darkFans?`/static/index/undericons/face.png`:`/static/index/undericons/facelight.png`" />
|
||
<image class="right-icons-img-icon"
|
||
:src="darkFans?`/static/index/undericons/hand.png`:`/static/index/undericons/handlight.png`" />
|
||
<image class="right-icons-img-icon"
|
||
:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
|
||
</view>
|
||
<view class="right-container-title-class-anhei-button" @click="darkFanschange()" v-show="!darkFans">
|
||
<text class="right-container-title-class-anhei">
|
||
切换到暗黑模式
|
||
</text>
|
||
</view>
|
||
<view class="right-container-title-class-anhei-button" :style="darkFans ? { backgroundColor:'#fff' } : {}"
|
||
@click="darkFanschange()" v-show="darkFans">
|
||
<text class="right-container-title-class-anhei" :style="darkFans ? { color: 'black' } : {}">
|
||
取消暗黑模式
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="doctorsay-container-view">
|
||
<view class="doctorsay-container-items">
|
||
<view class="doctorsay-container-up">
|
||
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
||
<view class="doctorsay-container-card"
|
||
:style="index === upmenuIndex ? {backgroundColor:`#0184db`} : {}">
|
||
<image class="doctorsay-container-card-img"
|
||
:src="index === upmenuIndex ? item.targetUrl : item.url" />
|
||
<view
|
||
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="doctorsay-container-down">
|
||
<view class="doctorsay-top"></view>
|
||
<scroll-view :scroll-y="canmove" class="doctorsay-container-scroll" @scroll="handleScroll">
|
||
<view v-for="(item,index) in downList" :key="index">
|
||
<view class="doctorsay-container-button" @touchstart="handleTouchStart(item.type,index)"
|
||
@touchend="handleTouchEnd">
|
||
<text
|
||
:class="downmenuIndex===index?`doctorsay-container-text-target`:`doctorsay-container-text`"
|
||
:style="isBack?{}:{width: `220rpx`,height:`75rpx`,fontSize:`30rpx`}">{{item.type}}</text>
|
||
<image v-show="downmenuIndex===index" class="doctorsay-container-button-uplight"
|
||
:style="isBack?{}:{top:'30rpx'}" :src="`/static/index/cardicons/uplight.png`" />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="doctorsay-top"></view>
|
||
</view>
|
||
</view>
|
||
<view class="doctorsay-container-container">
|
||
<view class="doctorsay-container-title">
|
||
<view class="doctorsay-container-left">
|
||
<view class="doctorsay-container-left-gun"></view>
|
||
<view class="doctorsay-container-left-font">时间矩阵</view>
|
||
</view>
|
||
<view class="doctorsay-container-right">
|
||
<view class="doctorsay-container-right-kuai-cheng"></view>
|
||
<view class="doctorsay-container-kuai-font">日常</view>
|
||
<view class="doctorsay-container-right-kuai-zi"></view>
|
||
<view class="doctorsay-container-kuai-font">周期</view>
|
||
<view class="doctorsay-container-button-father" v-for="(item,index) in rightList" :key="index">
|
||
<view
|
||
:class="rightListIndex===index?`doctorsay-container-button-target`:`doctorsay-container-button`"
|
||
@click="rightListClick(index)">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="super-card">
|
||
<view class="super-card-container">
|
||
<scroll-view class="scroll-x" :scroll-left="rightListIndex?1240:930" scroll-x
|
||
:show-scrollbar="false">
|
||
<view style="display: flex;">
|
||
<view v-for="(item0,index) in timearr" :key="index">
|
||
<view class="super-card-time"
|
||
:style="rightListIndex ? { width: '275rpx' } : { width: '206rpx' }">
|
||
{{item0.time}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;height: calc(100% - 80rpx);">
|
||
<scroll-view style="height: 100%;" :scroll-top="scrollTop"
|
||
:style="rightListIndex ? { width: '6700rpx' } : { width: '5000rpx' }" scroll-y
|
||
:show-scrollbar="false">
|
||
<view style="display: flex;height: 100%;">
|
||
<view v-for="(item0,index0) in timearr" :key="index0">
|
||
<view class="super-card-time-und"
|
||
:style="rightListIndex ? { width: '275rpx' } : { width: '206rpx' }">
|
||
<view v-for="(item1,index1) in item0.children" style="width: 100%;"
|
||
:key="index1">
|
||
<view :class="getClass(item1,index0,index1)"
|
||
@touchstart="rulerTouchStart(item1,index0,index1)"
|
||
@touchend="rulerTouchEnd()" :data-index0="index0"
|
||
:data-index1="index1">
|
||
<view class="title-time" v-show="item1.time">
|
||
<view class="title-time-time">
|
||
{{item1.time}}
|
||
</view>
|
||
<view class="title-time-button" :style="item1.type==='日常'?{color:`#4A2E00`}:{backgroundColor:`#7B61FF`,color:`#fff`}">
|
||
{{item1.type}}
|
||
</view>
|
||
</view>
|
||
|
||
{{item1.value}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<view class="super-card-end">
|
||
<view class="super-end-father">
|
||
<view class="super-end-font-father">
|
||
<view class="super-end-font-gun"></view>
|
||
<view class="super-end-font-font">快捷指令</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="right-container-sec">
|
||
<view class="under-father">
|
||
<view class="under-father-view" v-for="(item,index) in undericonList" :key="index"
|
||
@click="changeMenuUnder(index)">
|
||
<image class="under-father-light" src="/static/index/undericons/upguang.png"
|
||
v-show="index === undermenuIndex" />
|
||
<image class="under-father-img" :src="index === undermenuIndex ? item.targetUrl : item.url" />
|
||
<view :class="darkFans? `under-father-img-font-dark`:`under-father-img-font`">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 弹出层 -->
|
||
<!-- <view v-show="isPopupVisible" class="popup-overlay" @click="isPopupVisible=false">
|
||
<view class="popup-overlay-content" @click.stop>
|
||
确认删除吗
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
|
||
import type { roomBtttonType } from "./index";
|
||
|
||
const props = defineProps({
|
||
isshow: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
darkFans: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
canmove: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
liang: {
|
||
type: Object,
|
||
}
|
||
});
|
||
onMounted(() => {
|
||
downList.value = bigArray[0].data
|
||
})
|
||
//弹窗
|
||
// const isPopupVisible = ref(false);
|
||
//移动表格
|
||
const scrollTop = ref(0)
|
||
//左下的数组
|
||
const downList = ref<any>()
|
||
//左下的数组
|
||
const rightList = ref<String[]>([
|
||
// "三分段",
|
||
// "四分段",
|
||
])
|
||
// 方法：根据条件返回不同的类名
|
||
const getClass = (item, index0, index1) => {
|
||
if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
|
||
return 'super-card-time-card-blue';
|
||
} else if (item.type==='日常') {
|
||
return 'super-card-time-card-yellow';
|
||
} else if (item.type) {
|
||
return 'super-card-time-card-pouple';
|
||
}
|
||
return 'super-card-time-card';
|
||
}
|
||
// 初始化下面侧单列表
|
||
const undericonList = ref<roomBtttonType[]>([
|
||
{ url: '/static/index/undericons/alarm.png', targetUrl: '/static/index/undericons/alarmdark.png', name: '服务考核' },
|
||
{ url: '/static/index/undericons/linshitime.png', targetUrl: '/static/index/undericons/linshitimedark.png', name: '护理流程' },
|
||
{ url: '/static/index/darkicon/zhaomingdark.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: '电子医嘱' },
|
||
{ url: '/static/index/darkicon/kontiaodark.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: '进销存' },
|
||
{ url: '/static/index/darkicon/nuanfengdark.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: '实时监控' },
|
||
{ url: '/static/index/darkicon/dianqidark.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: '我的指令' },
|
||
]);
|
||
|
||
// 初始化下面侧单列表
|
||
const doctorsayList = ref<roomBtttonType[]>([
|
||
{ url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' },
|
||
{ url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' },
|
||
{ url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' },
|
||
{ url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排泻' },
|
||
{ url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' },
|
||
|
||
]);
|
||
// 当前选中的菜单索引
|
||
const rightListIndex = ref<number>(1);
|
||
const undermenuIndex = ref<number>(0);
|
||
const upmenuIndex = ref<number>(0);
|
||
const downmenuIndex = ref<number>(999);
|
||
// 暗黑模式
|
||
// const darkFans = ref<boolean>(false);
|
||
const underFans = ref<boolean>(false);
|
||
// 当前选中的菜单索引
|
||
const roomTar = ref<number[]>([]);
|
||
const emit = defineEmits(['darkchange', 'savename','closename']);
|
||
// 暗黑模式改变
|
||
const darkFanschange = () => {
|
||
emit('darkchange', !props.darkFans);
|
||
}
|
||
//变更左侧菜单
|
||
const changLeft = (index : number) => {
|
||
upmenuIndex.value = index
|
||
downList.value = bigArray[index].data
|
||
downmenuIndex.value = 999
|
||
}
|
||
// 变更底部菜单
|
||
const changeMenuUnder = (index : number) => {
|
||
undermenuIndex.value = index;
|
||
};
|
||
// 变更右部菜单
|
||
const rightListClick = (index : number) => {
|
||
rightListIndex.value = index;
|
||
};
|
||
|
||
const timer = ref(null);//计时器
|
||
const elementsInfo = ref({})//所有表格的信息
|
||
|
||
//表格长按开始
|
||
const rulerTouchStart = (item : any, index0 : number, index1 : number) => {
|
||
timer.value = setTimeout(() => {
|
||
if (item.value) {
|
||
uni.showModal({
|
||
title: '警告',
|
||
content: '确认删除该方格吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
timearr.value[index0].children[index1].value = ""
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}, 1500); // 2秒后触发
|
||
}
|
||
//表格长按结束
|
||
const rulerTouchEnd = () => {
|
||
if (timer.value) {
|
||
clearTimeout(timer.value);
|
||
timer.value = null;
|
||
}
|
||
}
|
||
const longPressTimer = ref(null);
|
||
const isScrolling = ref(false)
|
||
//长按计时器
|
||
let scrollTimeout = null
|
||
|
||
function handleScroll(e) {
|
||
isScrolling.value = true
|
||
// 清除之前的定时器
|
||
if (scrollTimeout) clearTimeout(scrollTimeout)
|
||
// 设置新的定时器
|
||
scrollTimeout = setTimeout(() => {
|
||
isScrolling.value = false;
|
||
}, 400)
|
||
}
|
||
const isBack = ref(false)
|
||
//左下菜单长按开始
|
||
const handleTouchStart = (item : string, index : number) => {
|
||
//执行方法
|
||
longPressTimer.value = setTimeout(() => {
|
||
if (isScrolling.value) return
|
||
isBack.value = true;
|
||
downmenuIndex.value = index
|
||
const reldata = []
|
||
const query = uni.createSelectorQuery();
|
||
query.selectAll('.super-card-time-card').boundingClientRect((data : any) => {
|
||
data.forEach((res : any) => {
|
||
if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) {
|
||
reldata.push(res)
|
||
}
|
||
})
|
||
|
||
}).exec();
|
||
query.selectAll('.super-card-time-card-yellow').boundingClientRect((data : any) => {
|
||
data.forEach((res : any) => {
|
||
if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) {
|
||
reldata.push(res)
|
||
}
|
||
})
|
||
|
||
}).exec();
|
||
query.selectAll('.super-card-time-card-pouple').boundingClientRect((data : any) => {
|
||
data.forEach((res : any) => {
|
||
if (res.left > 200 && res.left < 1067 && res.top < 500 && res.top > 190) {
|
||
reldata.push(res)
|
||
}
|
||
})
|
||
|
||
}).exec();
|
||
emit('savename', item, reldata);
|
||
// 如果触发了长按，也可以考虑设置一个标记，防止后续重复触发
|
||
}, 200)
|
||
|
||
}
|
||
const handleTouchEnd = () => {
|
||
if (longPressTimer.value) {
|
||
clearTimeout(longPressTimer.value)
|
||
longPressTimer.value = null
|
||
}
|
||
}
|
||
//表格拖动结束
|
||
const rulerEnd = async (res : any) => {
|
||
isBack.value = false;
|
||
if (props.liang.index0 !== 999 && res) {
|
||
timearr.value[props.liang.index0].children[props.liang.index1].value = res;
|
||
// 检查是否有任意一个对象的 children 数组最后一个对象的 value 有值
|
||
const shouldAdd = timearr.value.some(obj => {
|
||
const children = obj.children;
|
||
return children[children.length - 1].value.trim() !== '';
|
||
});
|
||
|
||
// 如果满足条件，则为每个对象的 children 数组追加一个新对象
|
||
if (shouldAdd) {
|
||
timearr.value.forEach(obj => {
|
||
obj.children.push({ value: '' });
|
||
});
|
||
// 先将 scrollTop 重置为 0
|
||
scrollTop.value = 999
|
||
// 等待 DOM 更新完成
|
||
await nextTick()
|
||
// 设置一个足够大的值让 scroll-view 滚动到底部
|
||
scrollTop.value = 9999
|
||
}
|
||
}
|
||
}
|
||
defineExpose({
|
||
rulerEnd
|
||
})
|
||
const moveNumber = ref({
|
||
index0: 999,
|
||
index1: 999
|
||
})
|
||
|
||
|
||
const timearr = ref([
|
||
{
|
||
time: '00',
|
||
children: [
|
||
{ value: 'A' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'B' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '01',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'C' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'D' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '02',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'E' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '03',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '04',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'F' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '05',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'G' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '06',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '07',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'H' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '08',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '09',
|
||
children: [
|
||
{
|
||
value: '四肢清洁',
|
||
type: '日常',
|
||
time: '9:00-9:30',
|
||
},
|
||
{
|
||
value: '指甲',
|
||
type: '周一',
|
||
time: '9:00-9:33',
|
||
},
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '10',
|
||
children: [
|
||
{ value: 'ccc' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '11',
|
||
children: [
|
||
{ value: 'aaa' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '12',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'J' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '13',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'K' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '14',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '15',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'L' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '16',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '17',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'xxx' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '18',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '19',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '20',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '21',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '22',
|
||
children: [
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
{
|
||
time: '23',
|
||
children: [
|
||
{ value: '1' },
|
||
{ value: '' },
|
||
{ value: '3' },
|
||
{ value: '' },
|
||
{ value: '' },
|
||
{ value: 'e' },
|
||
{ value: '' },
|
||
{ value: '' }
|
||
]
|
||
},
|
||
])
|
||
const bigArray =
|
||
[
|
||
{
|
||
"type": "清洁照料",
|
||
"data": [
|
||
{
|
||
"type": "口腔清洁",
|
||
"data": [
|
||
{ "type": "准备洁具（口腔）", "data": "为老人提供口腔清洁器具，牙膏牙刷及水杯.看护完成" },
|
||
{ "type": "协助清洁（口腔）", "data": "准备水杯.牙刷牙膏.纸巾.协助完成清洁." },
|
||
{ "type": "义齿清洁（口腔）", "data": "准备凉开水浸泡.取下流水冲洗.盐水棉球擦拭口腔.漱口.水.协助清洁" },
|
||
{ "type": "棉球清洁（口腔）", "data": "准备好盐水棉球.镊子.止血钳.压舌板.垫巾.手电筒.完成清洁" }
|
||
]
|
||
},
|
||
{
|
||
"type": "头部清洁",
|
||
"data": [
|
||
{ "type": "准备洁具（头部）", "data": "准备温水.一次性面巾.洗发水.清洗头部." },
|
||
{ "type": "协助洗头", "data": "准备温水.毛巾.洗发水.清洗头部.擦干头部." },
|
||
{ "type": "卧式洗头", "data": "" },
|
||
{ "type": "擦头", "data": "" },
|
||
{ "type": "刮头", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "面部清洁",
|
||
"data": [
|
||
{ "type": "准备洁具（面部）", "data": "" },
|
||
{ "type": "协助洁面", "data": "准备温水.一次性面巾.洁面乳.清洁面部.涂抹面霜.棉签擦拭耳朵.鼻孔." }
|
||
]
|
||
},
|
||
{
|
||
"type": "躯干清洁",
|
||
"data": [
|
||
{ "type": "准备洁具（躯干）", "data": "准备温水.一次性面巾.香皂.换洗衣物.清洁皮肤.完成后涂抹身体保湿乳." },
|
||
{ "type": "协助清洁（躯干）", "data": "" },
|
||
{ "type": "卧床清洁（躯干）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "四肢清洁",
|
||
"data": [
|
||
{ "type": "准备洁具（四肢）", "data": "" },
|
||
{ "type": "协助清洁（四肢）", "data": "准备温水.一次性面巾.香皂.清洁后涂抹身体保湿乳." },
|
||
{ "type": "卧床清洁（四肢）", "data": "" },
|
||
{ "type": "肌张力高（清洁）", "data": "准备温水.一次性面巾.香皂.清洁后涂抹身体保湿乳." }
|
||
]
|
||
},
|
||
{
|
||
"type": "会阴清洁",
|
||
"data": [
|
||
{ "type": "会阴清洁（男）", "data": "准备手套.盐水棉球.碘伏棉球.干棉球.环形完成清洁" },
|
||
{ "type": "会阴清洁（女）", "data": "准备手套.碘伏棉球.盐水棉球.干棉球.纵向完成擦拭" }
|
||
]
|
||
},
|
||
{
|
||
"type": "肛周清洁",
|
||
"data": [
|
||
{ "type": "肛周清洁", "data": "准备手套.碘伏棉球.盐水棉球.干棉球完成清洁" }
|
||
]
|
||
},
|
||
{
|
||
"type": "手清洁",
|
||
"data": [
|
||
{ "type": "洗手", "data": "" },
|
||
{ "type": "泡手", "data": "准备温水水盆.洗手液.一次性面巾.清洁后涂抹润手霜" },
|
||
{ "type": "准备洁具", "data": "" },
|
||
{ "type": "协助洗手", "data": "" },
|
||
{ "type": "强直屈曲洗手", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "足清洁",
|
||
"data": [
|
||
{ "type": "泡脚", "data": "准备温水水盆.毛巾完成清洁后涂抹保湿乳" },
|
||
{ "type": "卧式泡脚", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "剃须",
|
||
"data": [
|
||
{ "type": "修睫毛", "data": "" },
|
||
{ "type": "剃须", "data": "准备剃须液.剃须刀.一次性面巾.温水.协助剃须" }
|
||
]
|
||
},
|
||
{
|
||
"type": "修甲",
|
||
"data": [
|
||
{ "type": "角质增生（修甲）", "data": "准备指甲刀.纸巾.进行修剪" },
|
||
{ "type": "灰指甲（修甲）", "data": "准备专用指甲刀.纸巾.盐水棉球.进行修剪" },
|
||
{ "type": "正常（修甲）", "data": "准备指甲刀.纸巾.进行修剪" }
|
||
]
|
||
},
|
||
{
|
||
"type": "理发",
|
||
"data": [
|
||
{ "type": "理发", "data": "准备围巾.推子理发后.温水清洗." },
|
||
{ "type": "理发（颅骨缺损）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "沐浴",
|
||
"data": [
|
||
{ "type": "床上沐浴", "data": "准备温水.一次性毛巾.香皂.洗发水.身体保湿乳协助清洗." },
|
||
{ "type": "深度清洁", "data": "准备温水.一次性面巾.洗发水.香皂.棉签.指甲刀.身体保湿乳.盐水棉球.完成清洁" },
|
||
{ "type": "浴间洗浴", "data": "准备平车.换洗衣物.浴巾.洗发水.澡巾.香皂.被子.完成清洁" },
|
||
{ "type": "床上沐浴（大体重）", "data": "" },
|
||
{ "type": "深度清洁（大体重）", "data": "" },
|
||
{ "type": "浴间洗浴（大体重）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "气切消毒",
|
||
"data": [
|
||
{ "type": "内套管清洁", "data": "" },
|
||
{ "type": "更换气切纱布", "data": "" }
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "饮食照料",
|
||
"data": [
|
||
{
|
||
"type": "正餐饮食",
|
||
"data": [
|
||
{ "type": "准备餐具", "data": "按需床头摇起" },
|
||
{ "type": "协助进餐（正常）", "data": "按需床头摇起" },
|
||
{ "type": "协助进餐（超时）", "data": "按需床头摇起" },
|
||
{ "type": "鼻胃管进餐", "data": "床头摇起45度角" },
|
||
{ "type": "鼻肠管进餐", "data": "床头摇起45度角" },
|
||
{ "type": "轮椅进餐", "data": "" },
|
||
{ "type": "轮椅进餐（大体重）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "辅餐饮食",
|
||
"data": [
|
||
{ "type": "准备餐具", "data": "按需床头摇起" },
|
||
{ "type": "协助进餐（正常）", "data": "按需床头摇起" },
|
||
{ "type": "协助进餐（超时）", "data": "按需床头摇起" },
|
||
{ "type": "鼻胃管进餐", "data": "床头摇起45度角" },
|
||
{ "type": "鼻肠管进餐", "data": "床头摇起45度角" }
|
||
]
|
||
},
|
||
{
|
||
"type": "果汁饮食",
|
||
"data": [
|
||
{ "type": "准备餐具", "data": "按需床头摇起" },
|
||
{ "type": "协助进餐（正常）", "data": "按需床头摇起" },
|
||
{ "type": "协助进餐（超时）", "data": "按需床头摇起" },
|
||
{ "type": "鼻胃管进餐", "data": "床头摇起45度角" },
|
||
{ "type": "鼻肠管进餐", "data": "床头摇起45度角" }
|
||
]
|
||
},
|
||
{
|
||
"type": "饮水饮食",
|
||
"data": [
|
||
{ "type": "吸管喂药", "data": "" },
|
||
{ "type": "准备水杯", "data": "" },
|
||
{ "type": "协助饮水", "data": "" },
|
||
{ "type": "协助饮水（超时）", "data": "" },
|
||
{ "type": "鼻胃管饮水", "data": "床头摇起45度角" },
|
||
{ "type": "鼻肠管饮水", "data": "床头摇起45度角" },
|
||
{ "type": "准备水杯", "data": "按需床头摇起" },
|
||
{ "type": "协助饮水", "data": "按需床头摇起" },
|
||
{ "type": "协助饮水（超时）", "data": "按需床头摇起" },
|
||
{ "type": "鼻胃管饮水", "data": "" },
|
||
{ "type": "鼻肠管饮水", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "加餐饮食",
|
||
"data": [
|
||
{ "type": "准备餐具", "data": "" },
|
||
{ "type": "协助进餐", "data": "" },
|
||
{ "type": "协助进餐（超时）", "data": "" },
|
||
{ "type": "鼻胃管进餐", "data": "" },
|
||
{ "type": "胃肠管进餐", "data": "" },
|
||
{ "type": "准备餐具", "data": "" },
|
||
{ "type": "协助进餐", "data": "" },
|
||
{ "type": "协助进餐（超时）", "data": "" },
|
||
{ "type": "鼻胃管进餐", "data": "" },
|
||
{ "type": "胃肠管进餐", "data": "" },
|
||
{ "type": "食物加工", "data": "" }
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "睡眠照料",
|
||
"data": [
|
||
{
|
||
"type": "巡视",
|
||
"data": [
|
||
{ "type": "巡视", "data": "巡视中.避免说话.走路轻." },
|
||
{ "type": "体位调整", "data": "巡视过程中发现老人体位不正确或踢蹬被褥，进行体位调整和盖被褥" }
|
||
]
|
||
},
|
||
{
|
||
"type": "体位调整",
|
||
"data": [
|
||
{ "type": "防坠床", "data": "" },
|
||
{ "type": "被褥调整", "data": "老人踢蹬被褥，调成被褥" },
|
||
{ "type": "睡姿调整", "data": "" }
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "排泄照料",
|
||
"data": [
|
||
{
|
||
"type": "小便",
|
||
"data": [
|
||
{ "type": "更换尿袋", "data": "准备尿袋一次性面巾.温水.进行操作" },
|
||
{ "type": "更换隔尿垫", "data": "准备尿片.尿裤.温水.一次性面巾.进行操作" },
|
||
{ "type": "使用尿盆", "data": "准备尿盆.温水.一次性面巾进行操作" },
|
||
{ "type": "使用尿壶", "data": "准备尿壶.温水.一次性面巾.协助操作" },
|
||
{ "type": "协助入厕", "data": "准备轮椅.推至卫生间.协助如厕" },
|
||
{ "type": "坐便椅", "data": "准备坐便椅.手纸.床椅转移.协助如厕" },
|
||
{ "type": "留置尿袋", "data": "准备尿液指定容器夹闭尿管.将.尿液倒出后.关闭开关." },
|
||
{ "type": "更换纸尿裤", "data": "" },
|
||
{ "type": "热敷抚触排尿", "data": "" },
|
||
{ "type": "协助坐便椅", "data": "" },
|
||
{ "type": "更换尿片", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "大便",
|
||
"data": [
|
||
{ "type": "床上排便", "data": "准备尿片.尿裤.温水.一次性面巾.手纸.进行操作" },
|
||
{ "type": "协助坐便椅", "data": "准备坐便椅.手纸." },
|
||
{ "type": "协助入厕", "data": "准备轮椅" },
|
||
{ "type": "人工取便", "data": "准备排便手套.开塞露.温水.一次性面巾.手纸.尿片.尿裤." },
|
||
{ "type": "造瘘袋", "data": "准备手套.便器.温水." },
|
||
{ "type": "坐便椅", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "吸痰",
|
||
"data": [
|
||
{ "type": "口腔吸痰", "data": "准备吸痰器.吸痰管.泡管液.冲管水.盐水棉球.纱布.完成吸痰" },
|
||
{ "type": "气切吸痰", "data": "准备吸痰器.吸痰管.冲管水.泡管液.纱布块.完成操作" }
|
||
]
|
||
},
|
||
{
|
||
"type": "呕吐",
|
||
"data": [
|
||
{ "type": "呕吐", "data": "准备换洗衣物.被褥.吸痰器.吸痰管.冲管水.漱口水.纱布.完成操作." }
|
||
]
|
||
},
|
||
{
|
||
"type": "引流",
|
||
"data": [
|
||
{ "type": "腹腔引流护理", "data": "" }
|
||
]
|
||
}
|
||
]
|
||
},
|
||
|
||
{
|
||
"type": "日常照料",
|
||
"data": [
|
||
{
|
||
"type": "协助喂药",
|
||
"data": [
|
||
{ "type": "协助喂药", "data": "准备好服用药物.温水.看护服用" },
|
||
{ "type": "鼻饲喂药", "data": "床头摇起45度角，准备温水.灌注器.药物.匀速灌注." },
|
||
{ "type": "注射器/吸管喂药", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "床椅转移",
|
||
"data": [
|
||
{ "type": "床椅转移", "data": "准备轮椅.换好衣物手纸.水杯.食物.进行转移" },
|
||
{ "type": "床椅转移（大体重）", "data": "" },
|
||
{ "type": "床椅转移", "data": "" },
|
||
{ "type": "床椅转移（大体重）", "data": "" },
|
||
{ "type": "协助床椅转移", "data": "" },
|
||
{ "type": "协助床椅转移", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "压疮防护",
|
||
"data": [
|
||
{ "type": "一级压疮防护", "data": "准备好体位垫.整理好衣物.进行翻身.扣背" },
|
||
{ "type": "二级压疮防护", "data": "翻身扣背垫枕开始操作" },
|
||
{ "type": "三级压疮防护", "data": "带压疮翻身扣背垫枕.进行操作" },
|
||
{ "type": "一级压疮防护（大体重）", "data": "" },
|
||
{ "type": "二级压疮防护（大体重）", "data": "" },
|
||
{ "type": "三级压疮防护（大体重）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "轮椅防护",
|
||
"data": [
|
||
{ "type": "轮椅防护", "data": "准备好安全带.坐垫.1小内将长者抬起.放松肌肉." },
|
||
{ "type": "轮椅防护（大体重）", "data": "" },
|
||
{ "type": "轮椅防护", "data": "" },
|
||
{ "type": "床椅转移（大体重）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "约束防护",
|
||
"data": [
|
||
{ "type": "约束位按摩（手）", "data": "约束位置用约束手套或束缚带.2小时.解开.放松." },
|
||
{ "type": "约束位按摩（足）", "data": "使用约束带.约束位置2小时按摩.用温水清洁." },
|
||
{ "type": "约束位按摩（全）", "data": "约束位置2小时放松.清洗." },
|
||
{ "type": "防护网约束", "data": "通过防护网对老人进行约束看护" }
|
||
]
|
||
},
|
||
{
|
||
"type": "按摩保健",
|
||
"data": [
|
||
{ "type": "协助行走", "data": "准备舒适鞋子.水杯.手纸.协助行走" },
|
||
{ "type": "放松按摩", "data": "手法放松.舒筋活血." },
|
||
{ "type": "心灵慰藉", "data": "陪同倾听.肢体放松.互动.安抚." },
|
||
{ "type": "躁狂", "data": "针对躁狂老人的狂燥期，发出喊叫，敲打等动作的忍受服务" }
|
||
]
|
||
},
|
||
{
|
||
"type": "更换衣物",
|
||
"data": [
|
||
{ "type": "准备衣物", "data": "准备舒适衣裤" },
|
||
{ "type": "协助更换", "data": "" },
|
||
{ "type": "肢体障碍（半侧）", "data": "" },
|
||
{ "type": "肢体障碍（全身）", "data": "" },
|
||
{ "type": "准备衣物", "data": "" },
|
||
{ "type": "协助更换", "data": "" },
|
||
{ "type": "肢体障碍（半侧）", "data": "" },
|
||
{ "type": "肢体障碍（全身）", "data": "" },
|
||
{ "type": "协助更换（大体重）", "data": "" },
|
||
{ "type": "肢体障碍（半侧）（大体重）", "data": "" },
|
||
{ "type": "肢体障碍（全测）（大体重）", "data": "" },
|
||
{ "type": "肢体障碍（半测）（大体重）", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "调整坐卧",
|
||
"data": [
|
||
{ "type": "坐起", "data": "为老人调整床位60度角" },
|
||
{ "type": "躺下", "data": "为老人调整床位180度角" }
|
||
]
|
||
},
|
||
{
|
||
"type": "殡仪服务",
|
||
"data": [
|
||
{ "type": "遗体净身", "data": "" },
|
||
{ "type": "遗体穿衣", "data": "" },
|
||
{ "type": "遗体转移", "data": "" },
|
||
{ "type": "床位消毒", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "换床上用品",
|
||
"data": [
|
||
{ "type": "更换床上用品（全部）", "data": "" },
|
||
{ "type": "隔尿褥子更换", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "临终服务",
|
||
"data": [
|
||
{ "type": "临终护理", "data": "" }
|
||
]
|
||
},
|
||
{
|
||
"type": "制氧机应用",
|
||
"data": [
|
||
{ "type": "制氧机吸氧", "data": "制氧机吸氧" },
|
||
{ "type": "制氧机维护", "data": "制氧机维护，清洁维护，更换湿化瓶" }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.super-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
// align-items: center;
|
||
width: 100%;
|
||
height: calc(100% - 400rpx);
|
||
margin-top: 30rpx;
|
||
|
||
.scroll-x {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.super-card-container {
|
||
background-color: rgb(241, 247, 253);
|
||
overflow: hidden;
|
||
width: 1650rpx;
|
||
height: 780rpx;
|
||
border-radius: 20rpx;
|
||
border: 1rpx solid black;
|
||
}
|
||
|
||
.super-card-time {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgb(233, 239, 257);
|
||
height: 80rpx;
|
||
width: 100rpx;
|
||
border-right: 1rpx solid #BFBFCB;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.super-card-time-und {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100rpx;
|
||
flex-direction: column;
|
||
border-right: 1rpx solid #BFBFCB;
|
||
}
|
||
|
||
.super-card-time-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 140rpx;
|
||
width: calc(100%);
|
||
border-right: 1rpx solid #BFBFCB;
|
||
border-top: 1rpx solid #BFBFCB;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.super-card-time-card-blue {
|
||
background-color: #3FA9F5;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
height: 140rpx;
|
||
width: calc(100%);
|
||
border-right: 1rpx solid #BFBFCB;
|
||
border-top: 1rpx solid #BFBFCB;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.super-card-time-card-yellow {
|
||
background-color: rgb(255, 250, 241);
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
height: 140rpx;
|
||
width: calc(100%);
|
||
border-right: 1rpx solid #BFBFCB;
|
||
border-top: 1rpx solid #BFBFCB;
|
||
flex-direction: column;
|
||
}
|
||
.super-card-time-card-pouple {
|
||
background-color: rgb(224,218,255);
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
height: 140rpx;
|
||
width: calc(100%);
|
||
border-right: 1rpx solid #BFBFCB;
|
||
border-top: 1rpx solid #BFBFCB;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.right-container {
|
||
width: calc(100% - 235rpx);
|
||
height: 100vh;
|
||
transition: opacity 1s ease;
|
||
position: relative;
|
||
|
||
.move-font {
|
||
position: absolute;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.doctorsay-container-view {
|
||
width: 100%;
|
||
height: 1220rpx;
|
||
display: flex;
|
||
|
||
.doctorsay-container-items {
|
||
width: 310rpx;
|
||
height: 1220rpx;
|
||
|
||
.doctorsay-container-up {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.doctorsay-container-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgb(221, 234, 250);
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
margin: 0 18rpx 15rpx 0rpx;
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid rgb(221, 234, 250);
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||
|
||
/* 右下角阴影 */
|
||
.doctorsay-container-card-img {
|
||
width: 75rpx;
|
||
height: 75rpx;
|
||
}
|
||
|
||
.doctorsay-container-card-font {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.doctorsay-container-card-font-dark {
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.doctorsay-container-down {
|
||
background-color: rgba(221, 234, 250);
|
||
backdrop-filter: blur(8rpx);
|
||
width: 290rpx;
|
||
height: 770rpx;
|
||
border-radius: 40rpx;
|
||
margin-top: 0rpx;
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||
|
||
/* 右下角阴影 */
|
||
.doctorsay-container-scroll {
|
||
height: 690rpx;
|
||
}
|
||
|
||
.doctorsay-top {
|
||
height: 40rpx;
|
||
}
|
||
|
||
.doctorsay-container-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 85rpx;
|
||
// overflow: hidden;
|
||
|
||
position: relative;
|
||
|
||
.doctorsay-container-text-target {
|
||
color: #016AD1;
|
||
background-color: #c9e8ff;
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #fff;
|
||
width: 250rpx;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
font-size: 45rpx;
|
||
transition: all 0.4s ease-in-out;
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||
z-index: 20;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.doctorsay-container-text {
|
||
background-color: #f3f6fc;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 10rpx;
|
||
width: 220rpx;
|
||
height: 75rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
transition: all 0.4s ease-in-out;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.doctorsay-container-button-gun {
|
||
position: absolute;
|
||
top: 19rpx;
|
||
left: 1rpx;
|
||
width: 10rpx;
|
||
height: 50rpx;
|
||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.doctorsay-container-button-uplight {
|
||
position: absolute;
|
||
top: 40rpx;
|
||
left: 20rpx;
|
||
width: 250rpx;
|
||
height: 50rpx;
|
||
z-index: 21;
|
||
transition: all 0.4s ease-in-out;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.doctorsay-container-container {
|
||
width: 1730rpx;
|
||
height: 1220rpx;
|
||
background-color: rgba(255, 255, 255, 0.7);
|
||
border-radius: 60rpx;
|
||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||
/* 右下角阴影 */
|
||
overflow: hidden;
|
||
|
||
.super-card-end {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
// background-color: #c9e8ff;
|
||
display: flex;
|
||
// align-items: center;
|
||
|
||
.super-end-father {
|
||
height: 100%;
|
||
display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
width: 100%;
|
||
|
||
.super-end-font-father {
|
||
display: flex;
|
||
|
||
.super-end-font-gun {
|
||
margin-left: 40rpx;
|
||
margin-right: 20rpx;
|
||
width: 13rpx;
|
||
height: 55rpx;
|
||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.super-end-font-font {
|
||
font-size: 42rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.doctorsay-container-title {
|
||
width: 100%;
|
||
height: 130rpx;
|
||
background-color: #c9e8ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.doctorsay-container-right {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 260rpx;
|
||
|
||
.doctorsay-container-button-father {
|
||
display: flex;
|
||
|
||
.doctorsay-container-button-target {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #3FA9F5;
|
||
color: #fff;
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.doctorsay-container-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.doctorsay-container-right-kuai-cheng {
|
||
background-color: #FFDBA1;
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.doctorsay-container-right-kuai-zi {
|
||
background-color: #7B61FF;
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.doctorsay-container-kuai-font {
|
||
font-size: 28rpx;
|
||
margin-left: 10rpx;
|
||
margin-right: 25rpx;
|
||
}
|
||
}
|
||
|
||
.doctorsay-container-left {
|
||
display: flex;
|
||
|
||
.doctorsay-container-left-gun {
|
||
margin-left: 40rpx;
|
||
margin-right: 20rpx;
|
||
width: 13rpx;
|
||
height: 55rpx;
|
||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.doctorsay-container-left-font {
|
||
font-size: 42rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.right-container-sec {
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.under-father {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 150rpx;
|
||
|
||
.under-father-view {
|
||
margin-left: 10rpx;
|
||
margin-right: 150rpx;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.under-father-light {
|
||
position: absolute;
|
||
bottom: -20rpx;
|
||
left: -90rpx;
|
||
width: 300rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.under-father-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-left: -3rpx;
|
||
}
|
||
|
||
.under-father-img-font {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.under-father-img-font-dark {
|
||
font-size: 30rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-container-title-nav {
|
||
margin-top: 75rpx;
|
||
margin-bottom: 20rpx;
|
||
margin-left: 20rpx;
|
||
|
||
.right-icons {
|
||
display: flex;
|
||
align-items: center;
|
||
float: right;
|
||
height: 70rpx;
|
||
margin-right: 40rpx;
|
||
|
||
.right-icons-font {
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
font-size: 35rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
|
||
.right-icons-font-dark {
|
||
color: #fff;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
font-size: 35rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
|
||
.right-icons-img {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
margin-top: -40rpx;
|
||
|
||
}
|
||
|
||
.right-icons-img-icon {
|
||
width: 60rpx;
|
||
height: 80rpx;
|
||
margin-top: -10rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.right-container-title-no {
|
||
font-size: 35rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.right-container-title-no-dark {
|
||
font-size: 35rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.right-container-title-class {
|
||
font-size: 35rpx;
|
||
font-weight: 800;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.right-container-title-class-dark {
|
||
font-size: 35rpx;
|
||
font-weight: 800;
|
||
margin-left: 20rpx;
|
||
background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.right-container-title-class-anhei-button {
|
||
float: right;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
margin-right: 30rpx;
|
||
width: 200rpx;
|
||
height: 50rpx;
|
||
background-color: black;
|
||
border: 2rpx solid;
|
||
|
||
.right-container-title-class-anhei {
|
||
font-size: 20rpx;
|
||
font-weight: 800;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title-time {
|
||
display: flex;
|
||
|
||
.title-time-time {
|
||
font-size: 35rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.title-time-button {
|
||
background-color: #FFC363;
|
||
padding: 0 5rpx;
|
||
padding-top: 5rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
|
||
// .popup-overlay {
|
||
// position: fixed;
|
||
// top: 0;
|
||
// left: 0;
|
||
// right: 0;
|
||
// bottom: 0;
|
||
// // background: rgba(0, 0, 0, 0.5);
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// // backdrop-filter: blur(1rpx);
|
||
// // transition: all 0.4s ease-in-out;
|
||
// /* 添加毛玻璃效果 */
|
||
// z-index: 999;
|
||
|
||
// .popup-overlay-content {
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// width: 600rpx;
|
||
// height: 400rpx;
|
||
// background-color: black;
|
||
// border-radius: 20rpx;
|
||
// color: white;
|
||
// }
|
||
// }
|
||
</style> |