hldy_app/pages/index/index.vue

183 lines
4.9 KiB
Vue
Raw Normal View History

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>