hldy_app/component/rightItemssecond/index.vue

462 lines
13 KiB
Vue
Raw Normal View History

2025-03-05 17:29:32 +08:00
<!-- 护嘱 -->
<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>
2025-03-07 17:26:02 +08:00
<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>
2025-03-05 17:29:32 +08:00
</view>
2025-03-07 17:26:02 +08:00
2025-03-05 17:29:32 +08:00
<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,
},
2025-03-07 17:26:02 +08:00
canmove:{
type: Boolean,
required: true,
}
2025-03-05 17:29:32 +08:00
});
2025-03-07 17:26:02 +08:00
//左下的数组
const downList = ref<String[]>([
"口腔清洁啊",
"头部清洁",
"面部清洁",
"躯干清洁",
"四肢清洁",
"会阴清洁",
"肛周清洁",
"手清洁",
"足清洁",
"剃须",
2025-03-05 17:29:32 +08:00
2025-03-07 17:26:02 +08:00
"口腔清洁",
"头部清洁",
"面部清洁",
"躯干清洁",
"四肢清洁",
"会阴清洁",
"肛周清洁",
"手清洁",
"足清洁",
"剃须",
])
2025-03-05 17:29:32 +08:00
// 初始化下面侧单列表
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: '我的指令' },
]);
2025-03-07 17:26:02 +08:00
// 初始化下面侧单列表
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: '日常' },
]);
2025-03-05 17:29:32 +08:00
// 当前选中的菜单索引
const undermenuIndex = ref<number>(0);
2025-03-07 17:26:02 +08:00
const upmenuIndex = ref<number>(0);
const downmenuIndex = ref<number>(0);
2025-03-05 17:29:32 +08:00
// 暗黑模式
// const darkFans = ref<boolean>(false);
const underFans = ref<boolean>(false);
// 当前选中的菜单索引
const roomTar = ref<number[]>([]);
2025-03-07 17:26:02 +08:00
const emit = defineEmits(['darkchange','savename']);
2025-03-05 17:29:32 +08:00
// 暗黑模式改变
const darkFanschange = () => {
emit('darkchange', !props.darkFans);
}
// 变更底部菜单
const changeMenuUnder = (index : number) => {
undermenuIndex.value = index;
};
2025-03-07 17:26:02 +08:00
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;
}
};
2025-03-05 17:29:32 +08:00
</script>
<style lang="less" scoped>
.right-container {
width: calc(100% - 235rpx);
height: 100vh;
transition: opacity 1s ease;
2025-03-07 17:26:02 +08:00
position: relative;
.move-font{
position: absolute;
font-size: 35rpx;
font-weight: 700;
}
.doctorsay-container-view {
width: 100%;
2025-03-05 17:29:32 +08:00
height: 1220rpx;
2025-03-07 17:26:02 +08:00
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;
}
}
}
}
2025-03-05 17:29:32 +08:00
}
2025-03-07 17:26:02 +08:00
2025-03-05 17:29:32 +08:00
.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>