2025-02-18 17:11:31 +08:00
|
|
|
<template>
|
2025-02-19 17:33:12 +08:00
|
|
|
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`">
|
2025-02-18 17:11:31 +08:00
|
|
|
<view class="left-container">
|
2025-03-05 17:29:32 +08:00
|
|
|
<view class="left-head">
|
2025-02-18 17:11:31 +08:00
|
|
|
<image class="left-head-img" src="/static/index/oldman.png" />
|
2025-02-19 17:33:12 +08:00
|
|
|
<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
|
2025-02-18 17:11:31 +08:00
|
|
|
王金凤
|
|
|
|
</text>
|
|
|
|
</view>
|
|
|
|
<view class="left-img-container">
|
|
|
|
<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
|
|
|
|
<view class="blue-circle" v-show="index === menuIndex">
|
|
|
|
<image class="blue-circle-size" :src="`/static/index/ray.png`" />
|
|
|
|
</view>
|
2025-02-19 17:33:12 +08:00
|
|
|
<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"
|
|
|
|
@click="changeMenu(index)" />
|
2025-02-28 17:27:27 +08:00
|
|
|
</view>
|
|
|
|
</view>
|
2025-02-18 17:11:31 +08:00
|
|
|
</view>
|
2025-03-05 17:29:32 +08:00
|
|
|
<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
|
|
|
|
<rightItemssecond :isshow="menuIndexshowsecond" :darkFans="darkFans" v-show="menuIndex==1" @darkchange="darkchange"/>
|
|
|
|
<!-- -->
|
2025-02-18 17:11:31 +08:00
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2025-03-05 17:29:32 +08:00
|
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
import type { Link } from "./index";
|
|
|
|
import rightItemsfirst from "../../component/rightItemsindex/index.vue"
|
|
|
|
import rightItemssecond from "../../component/rightItemssecond/index.vue"
|
|
|
|
import { onShow } from '@dcloudio/uni-app';
|
2025-02-18 17:11:31 +08:00
|
|
|
|
|
|
|
// 初始化左侧菜单列表
|
|
|
|
const iconList = ref<Link[]>([
|
|
|
|
{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png' },
|
|
|
|
{ url: '/static/index/lefticon/nurse.png', targetUrl: '/static/index/lefticontarget/bluenurse.png' },
|
2025-03-05 17:29:32 +08:00
|
|
|
{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png'},
|
2025-02-25 17:23:40 +08:00
|
|
|
{ url: '/static/index/lefticon/give.png', targetUrl: '/static/index/lefticontarget/givedark.png' },
|
2025-02-18 17:11:31 +08:00
|
|
|
{ url: '/static/index/lefticon/wifi.png', targetUrl: '/static/index/lefticontarget/bluewifi.png' },
|
|
|
|
{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png' }
|
|
|
|
]);
|
|
|
|
|
|
|
|
// 当前选中的菜单索引
|
|
|
|
const menuIndex = ref<number>(0);
|
2025-03-05 17:29:32 +08:00
|
|
|
const menuIndexshow = ref<boolean>(false);
|
|
|
|
const menuIndexshowsecond = ref<boolean>(false);
|
2025-02-18 17:11:31 +08:00
|
|
|
// 暗黑模式
|
|
|
|
const darkFans = ref<boolean>(false);
|
|
|
|
// 当前选中的菜单索引
|
|
|
|
const roomTar = ref<number[]>([]);
|
2025-02-19 17:33:12 +08:00
|
|
|
//滑块按钮
|
|
|
|
const firstcurrentIndex = ref<number>(0);
|
2025-02-20 17:21:36 +08:00
|
|
|
const firstcurrentIndexup = ref<number>(0);
|
2025-02-27 17:15:17 +08:00
|
|
|
const secondcurrentIndexup = ref<number>(0);
|
2025-02-19 17:33:12 +08:00
|
|
|
const secondcurrentIndex = ref<number>(0);
|
|
|
|
const thirdcurrentIndex = ref<number>(0);
|
2025-03-05 17:29:32 +08:00
|
|
|
// 暗黑模式改变
|
|
|
|
const darkchange = (res:boolean) =>{
|
|
|
|
darkFans.value = res
|
|
|
|
}
|
2025-02-18 17:11:31 +08:00
|
|
|
// 变更菜单
|
|
|
|
const changeMenu = (index : number) => {
|
2025-03-05 17:29:32 +08:00
|
|
|
if(index===3){
|
|
|
|
menuIndexshow.value = false;
|
|
|
|
menuIndexshowsecond.value = false;
|
|
|
|
uni.navigateTo({
|
|
|
|
url: `/pages/somethingmove/index?darkFans=${darkFans.value}`,
|
|
|
|
animationType: 'slide-in-right',
|
|
|
|
animationDuration: 400// 设置动画时长为300毫秒, // 动画持续时间,单位为毫秒
|
|
|
|
});
|
|
|
|
return
|
2025-02-18 17:11:31 +08:00
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
menuIndex.value = index;
|
|
|
|
menuIndexshow.value = false
|
|
|
|
menuIndexshowsecond.value = false
|
|
|
|
setTimeout(()=>{
|
|
|
|
switch (index) {
|
|
|
|
case 0 :
|
|
|
|
menuIndexshow.value = true
|
|
|
|
break;
|
|
|
|
case 1:
|
|
|
|
menuIndexshowsecond.value = true
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
},50)
|
2025-02-27 17:15:17 +08:00
|
|
|
};
|
|
|
|
|
2025-02-18 17:11:31 +08:00
|
|
|
// 生命周期钩子
|
2025-03-05 17:29:32 +08:00
|
|
|
onShow(() => {
|
|
|
|
//首次加载和跳转回来需要重新做个动画
|
|
|
|
setTimeout(()=>{
|
|
|
|
changeMenu(menuIndex.value)
|
|
|
|
},50)
|
2025-02-18 17:11:31 +08:00
|
|
|
});
|
2025-03-05 17:29:32 +08:00
|
|
|
|
2025-02-18 17:11:31 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.backgroundContainer {
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100vh;
|
2025-02-27 17:15:17 +08:00
|
|
|
background-image: url('/static/index/lightbgcnew.png');
|
2025-02-18 17:11:31 +08:00
|
|
|
background-size: cover;
|
|
|
|
background-position: center center;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
2025-02-19 17:33:12 +08:00
|
|
|
|
2025-02-18 17:11:31 +08:00
|
|
|
//暗黑模式
|
2025-02-19 17:33:12 +08:00
|
|
|
.darkbackgroundContainer {
|
2025-02-18 17:11:31 +08:00
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 100vh;
|
|
|
|
background-image: url('/static/index/background.png');
|
|
|
|
background-size: cover;
|
|
|
|
background-position: center center;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
.left-container {
|
|
|
|
width: 235rpx;
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
.blue-circle-pos {
|
2025-02-20 17:21:36 +08:00
|
|
|
position: relative;
|
2025-03-05 17:29:32 +08:00
|
|
|
|
|
|
|
.blue-circle {
|
2025-02-20 17:21:36 +08:00
|
|
|
position: absolute;
|
2025-03-05 17:29:32 +08:00
|
|
|
top: -50rpx;
|
|
|
|
left: -68rpx;
|
|
|
|
|
|
|
|
.blue-circle-size {
|
|
|
|
width: 170rpx;
|
|
|
|
height: 250rpx;
|
2025-03-04 17:29:52 +08:00
|
|
|
}
|
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.left-head {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
.left-head-img {
|
|
|
|
width: 150rpx;
|
|
|
|
height: 150rpx;
|
|
|
|
margin-top: 60rpx;
|
2025-03-04 17:29:52 +08:00
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
|
|
|
|
.left-head-font {
|
|
|
|
font-weight: 700;
|
|
|
|
font-size: 40rpx;
|
2025-03-04 17:29:52 +08:00
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
|
|
|
|
.left-head-font-dark {
|
|
|
|
font-weight: 700;
|
|
|
|
font-size: 40rpx;
|
|
|
|
background: linear-gradient(to right, #EBF4FF, #ADC4E0);
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
color: transparent;
|
2025-03-04 17:29:52 +08:00
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.left-img-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
// margin-top: 30rpx;
|
|
|
|
|
|
|
|
.left-img {
|
|
|
|
width: 93rpx;
|
|
|
|
height: 93rpx;
|
|
|
|
margin: 50rpx 0;
|
|
|
|
z-index: 100;
|
2025-03-04 17:29:52 +08:00
|
|
|
}
|
2025-03-05 17:29:32 +08:00
|
|
|
}
|
|
|
|
}
|
2025-03-04 17:29:52 +08:00
|
|
|
|
2025-02-18 17:11:31 +08:00
|
|
|
</style>
|