263 lines
6.9 KiB
Vue
263 lines
6.9 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="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,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 初始化下面侧单列表
|
|||
|
|
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 undermenuIndex = ref<number>(0);
|
|||
|
|
// 暗黑模式
|
|||
|
|
// const darkFans = ref<boolean>(false);
|
|||
|
|
const underFans = ref<boolean>(false);
|
|||
|
|
// 当前选中的菜单索引
|
|||
|
|
const roomTar = ref<number[]>([]);
|
|||
|
|
const emit = defineEmits(['darkchange']);
|
|||
|
|
// 暗黑模式改变
|
|||
|
|
const darkFanschange = () => {
|
|||
|
|
emit('darkchange', !props.darkFans);
|
|||
|
|
}
|
|||
|
|
// 变更底部菜单
|
|||
|
|
const changeMenuUnder = (index : number) => {
|
|||
|
|
undermenuIndex.value = index;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 生命周期钩子
|
|||
|
|
onMounted(() => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
// 在组件销毁时清除定时器
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.right-container {
|
|||
|
|
width: calc(100% - 235rpx);
|
|||
|
|
height: 100vh;
|
|||
|
|
transition: opacity 1s ease;
|
|||
|
|
.doctorsay-container{
|
|||
|
|
width: 1850rpx;
|
|||
|
|
height: 1220rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 80rpx;
|
|||
|
|
}
|
|||
|
|
.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>
|