hldy_app/component/rightItemssecond/index.vue

462 lines
13 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 护嘱 -->
<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`">
ID12345678
</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>