282 lines
7.5 KiB
Vue
282 lines
7.5 KiB
Vue
<template>
|
|
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" @touchmove="getxy" @touchend="cleanall">
|
|
<view class="move-font" v-show="savename && clientX" :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 ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
|
:darkFans="darkFans" v-show="menuIndex==1" @darkchange="darkchange" @savename="openname"
|
|
@cleanname="closename" />
|
|
</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)
|
|
const indexNumber = ref({
|
|
index0: 999,
|
|
index1: 999,
|
|
})
|
|
//全局获得x轴和y轴
|
|
const getxyrel = (event) => {
|
|
// event.stopPropagation();
|
|
// event.preventDefault();
|
|
const touch = event.touches[0];
|
|
clientX.value = 2 * (Math.floor(touch.clientX) - 100);
|
|
clientY.value = 2 * (Math.floor(touch.clientY) - 55);
|
|
// console.log("?????",clientX.value,clientY.value)
|
|
// 遍历数组，找到点击区域所在的对象
|
|
const translateX = Math.floor(touch.clientX) - 50;
|
|
const translateY = Math.floor(touch.clientY) - 25;
|
|
const clickedItem = fangkuaiValue.value.find(item => {
|
|
return translateX >= item.left && translateX <= item.right &&
|
|
translateY >= item.top && translateY <= item.bottom;
|
|
});
|
|
// 如果找到，则输出该对象的 index0 和 index1
|
|
if (clickedItem) {
|
|
const { index0, index1 } = clickedItem.dataset;
|
|
indexNumber.value.index0 = index0
|
|
indexNumber.value.index1 = index1
|
|
} else {
|
|
indexNumber.value.index0 = 999
|
|
indexNumber.value.index1 = 999
|
|
}
|
|
}
|
|
//节流
|
|
const getxy = throttle(getxyrel, 10);
|
|
|
|
const fangkuaiValue = ref([])
|
|
//所有适合的方块
|
|
const openname = (res : string, fangkuai : Object) => {
|
|
savename.value = res;
|
|
canmove.value = false;
|
|
fangkuaiValue.value = fangkuai
|
|
}
|
|
//解决拖动bug
|
|
const closename = () => {
|
|
savename.value = "";
|
|
canmove.value = true;
|
|
fangkuaiValue.value = []
|
|
}
|
|
const ruler = ref(null)
|
|
//结束、禁止滑动
|
|
const cleanall = () => {
|
|
clientX.value = 9999;
|
|
clientY.value = 9999;
|
|
canmove.value = true;
|
|
indexNumber.value = {
|
|
index0: 999,
|
|
index1: 999,
|
|
};
|
|
ruler.value?.rulerEnd(savename.value);
|
|
savename.value = "";
|
|
}
|
|
//节流函数
|
|
function throttle(fn, delay) {
|
|
let lastExecutionTime = 0;
|
|
return function (...args) {
|
|
const now = Date.now();
|
|
if (now - lastExecutionTime >= delay) {
|
|
lastExecutionTime = now;
|
|
fn.apply(this, args);
|
|
}
|
|
};
|
|
}
|
|
// 生命周期钩子
|
|
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;
|
|
pointer-events: none;
|
|
color: #016AD1;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
border: 2rpx solid #fff;
|
|
width: 300rpx;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: 45rpx;
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.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> |