hldy_app/component/rightItemssecond/index.vue

263 lines
6.9 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>
<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>