hldy_app/pages/index/index.vue

<template>
	<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" @touchmove="getxy" @touchend="cleanall">
		<view class="move-font" v-show="savename" :style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }">
			{{savename}}
		</view>
		<view class="left-container">
			<view class="left-head">
				<image class="left-head-img" src="/static/index/oldman.png" />
				<text :class="darkFans?`left-head-font-dark`:`left-head-font`">
					王金凤
				</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>
					<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"
						@click="changeMenu(index)" />
				</view>
			</view>
		</view>
		<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
		<rightItemssecond :isshow="menuIndexshowsecond" :canmove="canmove" :darkFans="darkFans" v-show="menuIndex==1" @darkchange="darkchange" @savename="openname"/>
	</view>
</template>

<script setup lang="ts">
	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';

	// 初始化左侧菜单列表
	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' },
		{ url: '/static/index/lefticon/doctor.png', targetUrl: '/static/index/lefticontarget/bluedoctor.png'},
		{ url: '/static/index/lefticon/give.png', targetUrl: '/static/index/lefticontarget/givedark.png' },
		{ 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>(1);
	const menuIndexshow = ref<boolean>(false);
	const menuIndexshowsecond = ref<boolean>(false);
	// 暗黑模式
	const darkFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	//滑块按钮
	const firstcurrentIndex = ref<number>(0);
	const firstcurrentIndexup = ref<number>(0);
	const secondcurrentIndexup = ref<number>(0);
	const secondcurrentIndex = ref<number>(0);
	const thirdcurrentIndex = ref<number>(0);
	// 暗黑模式改变
	const darkchange = (res:boolean) =>{
		darkFans.value = res
	}
	// 变更菜单
	const changeMenu = (index : number) => {
		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
		}
		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)
	};
	const clientX = ref(0);
	const clientY = ref(0);
	const savename = ref("")
	const canmove = ref(true)
	//全局获得x轴和y轴
	const getxy = (event) => {
		const touch = event.touches[0];
		clientX.value = 2*(Math.floor(touch.clientX) - 60);
		clientY.value = 2*(Math.floor(touch.clientY) - 55);
	}
	const openname = (res:string) =>{
		savename.value = res;
		canmove.value = false;
	}
	//禁止滑动
	const cleanall = () =>{
		savename.value = "";
		clientX.value = 9999;
		clientY.value = 9999;
		canmove.value = true;
	}
	// 生命周期钩子
	onShow(() => {
		//首次加载和跳转回来需要重新做个动画
		setTimeout(()=>{
			changeMenu(menuIndex.value)
		},50)
	});

</script>

<style lang="less" scoped>
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/lightbgcnew.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		z-index: 12;
	}

	//暗黑模式
	.darkbackgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('/static/index/background.png');
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		z-index: 11;
	}
	.move-font{
		position: absolute;
		font-size: 45rpx;
		font-weight: 700;
		z-index: 10;
	}
	.left-container {
		width: 235rpx;
		height: 100%;
	
		.blue-circle-pos {
			position: relative;
	
			.blue-circle {
				position: absolute;
				top: -50rpx;
				left: -68rpx;
	
				.blue-circle-size {
					width: 170rpx;
					height: 250rpx;
				}
			}
		}
	
		.left-head {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		
			.left-head-img {
				width: 150rpx;
				height: 150rpx;
				margin-top: 60rpx;
			}
	
			.left-head-font {
				font-weight: 700;
				font-size: 40rpx;
			}
	
			.left-head-font-dark {
				font-weight: 700;
				font-size: 40rpx;
				background: linear-gradient(to right, #EBF4FF, #ADC4E0);
				-webkit-background-clip: text;
				color: transparent;
			}
		}
	
		.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;
			}
		}
	}

</style>