462 lines
13 KiB
Vue
462 lines
13 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="upmenuIndex=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">
|
||
<view v-for="(item,index) in downList" :key="index" class="doctorsay-container-button" @touchstart="handleTouchStart(item,index)" @touchend="handleTouchEnd">
|
||
<view class="doctorsay-container-button-gun" v-show="downmenuIndex===index"></view>
|
||
<text :class="downmenuIndex===index?`doctorsay-container-text-target`:`doctorsay-container-text`"
|
||
>{{item}}</text>
|
||
</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">
|
||
2
|
||
</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>
|
||
|
||
</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,
|
||
}
|
||
});
|
||
//左下的数组
|
||
const downList = ref<String[]>([
|
||
"口腔清洁啊",
|
||
"头部清洁",
|
||
"面部清洁",
|
||
"躯干清洁",
|
||
"四肢清洁",
|
||
"会阴清洁",
|
||
"肛周清洁",
|
||
"手清洁",
|
||
"足清洁",
|
||
"剃须",
|
||
|
||
"口腔清洁",
|
||
"头部清洁",
|
||
"面部清洁",
|
||
"躯干清洁",
|
||
"四肢清洁",
|
||
"会阴清洁",
|
||
"肛周清洁",
|
||
"手清洁",
|
||
"足清洁",
|
||
"剃须",
|
||
])
|
||
// 初始化下面侧单列表
|
||
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 undermenuIndex = ref<number>(0);
|
||
const upmenuIndex = ref<number>(0);
|
||
const downmenuIndex = ref<number>(0);
|
||
// 暗黑模式
|
||
// const darkFans = ref<boolean>(false);
|
||
const underFans = ref<boolean>(false);
|
||
// 当前选中的菜单索引
|
||
const roomTar = ref<number[]>([]);
|
||
const emit = defineEmits(['darkchange','savename']);
|
||
// 暗黑模式改变
|
||
const darkFanschange = () => {
|
||
emit('darkchange', !props.darkFans);
|
||
}
|
||
// 变更底部菜单
|
||
const changeMenuUnder = (index : number) => {
|
||
undermenuIndex.value = index;
|
||
};
|
||
|
||
const timer = ref(null);//计时器
|
||
//长按开始
|
||
const handleTouchStart = (item:string,index : number) => {
|
||
timer.value = setTimeout(() => {
|
||
downmenuIndex.value = index
|
||
emit('savename', item);
|
||
}, 500);
|
||
}
|
||
// 触摸松开，清除定时器
|
||
const handleTouchEnd = () => {
|
||
if (timer.value) {
|
||
clearTimeout(timer.value);
|
||
timer.value = null;
|
||
}
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.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: rgb(221, 234, 250);
|
||
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;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
position: relative;
|
||
.doctorsay-container-text-target{
|
||
color:#016AD1;
|
||
background-color: #c9e8ff;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid #fff;
|
||
font-size: 40rpx;
|
||
}
|
||
.doctorsay-container-button-gun {
|
||
position: absolute;
|
||
top: 22rpx;
|
||
left: 1rpx;
|
||
width: 10rpx;
|
||
height: 42rpx;
|
||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
.doctorsay-container-title{
|
||
width: 100%;
|
||
height: 130rpx;
|
||
background-color: #c9e8ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |