2025.4.28
This commit is contained in:
parent
265dabc191
commit
e0bbb92c9d
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<scroll-view id="scrollContainer" ref="scrollViewRef" class="scroll-view" scroll-y :scroll-top="scrollTop"
|
||||
@scroll="onScroll">
|
||||
<view v-for="(item, index) in items" :key="index" class="item" :class="{ active: index === activeIndex }"
|
||||
:style="{ marginLeft: marginList[index] + 'rpx' }">
|
||||
{{ item }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
|
||||
const {
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
const scrollViewRef = ref(null);
|
||||
// 原始列表数据及状态
|
||||
const originalItems = Array.from({
|
||||
length: 20
|
||||
}, (_, i) => `列表项 ${i+1}`);
|
||||
const items = ref([]);
|
||||
const marginList = ref([]);
|
||||
const activeIndex = ref(0);
|
||||
const scrollTop = ref(0);
|
||||
let offsetCount = 0;
|
||||
|
||||
// 计算各项 margin 并更新高亮
|
||||
function updateMargins(scrollY) {
|
||||
const query = uni.createSelectorQuery().in(proxy);
|
||||
query.select('#scrollContainer').boundingClientRect();
|
||||
query.selectAll('.item').boundingClientRect();
|
||||
query.exec(res => {
|
||||
const [scrollRect, itemRects] = res;
|
||||
if (!scrollRect || !itemRects) return;
|
||||
|
||||
const centerY = scrollRect.height / 2;
|
||||
const maxMargin = 300; // ← 从 60 调到 120，偏移加倍
|
||||
const maxDist = centerY;
|
||||
|
||||
itemRects.forEach((r, i) => {
|
||||
const itemCenter = r.top - scrollRect.top + r.height / 2;
|
||||
const dist = Math.abs(itemCenter - centerY);
|
||||
const t = Math.min(dist / maxDist, 1);
|
||||
const eased = 1 - Math.cos(t * Math.PI / 2);
|
||||
const m = eased * maxMargin;
|
||||
|
||||
marginList.value[i] = Math.round(m);
|
||||
});
|
||||
|
||||
// 剩下高亮逻辑不变
|
||||
const slice = marginList.value.slice(offsetCount, offsetCount + originalItems.length);
|
||||
const minM = Math.min(...slice);
|
||||
activeIndex.value = slice.indexOf(minM) + offsetCount;
|
||||
});
|
||||
}
|
||||
// 滚动时触发
|
||||
const scrollTimeout = ref(null);
|
||||
|
||||
const onScroll = (e) => {
|
||||
nextTick(() => updateMargins(e.detail.scrollTop));
|
||||
|
||||
// 检测停止滚动
|
||||
if (scrollTimeout.value) clearTimeout(scrollTimeout.value);
|
||||
scrollTimeout.value = setTimeout(() => {
|
||||
// 滚动停止后的处理逻辑
|
||||
console.log('滚动已停止');
|
||||
console.log("??????????????", activeIndex.value - 8)
|
||||
// 你可以在这里触发居中对齐、播放动画等
|
||||
}, 100); // 100ms 内未触发 scroll，判定为停止
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// 初始先用原始列表测量高度
|
||||
items.value = originalItems;
|
||||
marginList.value = Array(items.value.length).fill(0);
|
||||
await nextTick();
|
||||
const query = uni.createSelectorQuery().in(proxy);
|
||||
query.select('#scrollContainer').boundingClientRect();
|
||||
query.selectAll('.item').boundingClientRect();
|
||||
query.exec(res => {
|
||||
const [scrollRect, itemRects] = res;
|
||||
if (!scrollRect || !itemRects || !itemRects.length) return;
|
||||
const itemH = itemRects[0].height;
|
||||
offsetCount = Math.ceil((scrollRect.height / 2) / itemH) + 3;
|
||||
// 重构带占位的列表
|
||||
items.value = [
|
||||
...Array(offsetCount).fill(''),
|
||||
...originalItems,
|
||||
...Array(offsetCount).fill(''),
|
||||
];
|
||||
marginList.value = Array(items.value.length).fill(0);
|
||||
// 设置初始滚动位置
|
||||
scrollTop.value = offsetCount * itemH;
|
||||
nextTick(() => updateMargins(scrollTop.value));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 800rpx;
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
right: 100rpx;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
/* transition: color 0.2s; */
|
||||
}
|
||||
|
||||
.active {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<view id="arc-wrapper" @touchstart="onStart" @touchmove.prevent="onMove" @touchend="onEnd">
|
||||
<!-- 父容器旋转 -->
|
||||
<view id="arc" :style="{ transform: `rotate(${rotation}deg)` }">
|
||||
<view v-for="(item, idx) in items" :key="idx" class="arc-item" :style="getItemStyle(idx)">
|
||||
<!-- 文字反向旋转，保持水平 -->
|
||||
<view class="item-content" :style="{
|
||||
transform: `rotate(${-rotation}deg)`,
|
||||
transformOrigin: 'center center'
|
||||
}">
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
|
||||
const items = ['A', 'B', 'C', 'D', 'E'];
|
||||
const radius = 100;
|
||||
const rotation = ref(0);
|
||||
const startAngle = ref(0);
|
||||
const centerLocal = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
const centerScreen = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
// 获取半圆容器在屏幕中的中心坐标
|
||||
onMounted(() => {
|
||||
uni.createSelectorQuery()
|
||||
.in(instance)
|
||||
.select('#arc')
|
||||
.boundingClientRect(rect => {
|
||||
centerLocal.x = rect.width / 2;
|
||||
centerLocal.y = rect.height;
|
||||
centerScreen.x = rect.left + centerLocal.x;
|
||||
centerScreen.y = rect.top + centerLocal.y;
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
|
||||
// 计算触摸点相对于屏幕圆心的角度
|
||||
function calcAngle(x, y) {
|
||||
const dx = x - centerScreen.x;
|
||||
const dy = y - centerScreen.y;
|
||||
return Math.atan2(dy, dx) * 180 / Math.PI; // rotate() 基于度数 :contentReference[oaicite:6]{index=6}
|
||||
}
|
||||
|
||||
function onStart(e) {
|
||||
const {
|
||||
clientX,
|
||||
clientY
|
||||
} = e.touches[0];
|
||||
startAngle.value = calcAngle(clientX, clientY);
|
||||
}
|
||||
|
||||
function onMove(e) {
|
||||
const {
|
||||
clientX,
|
||||
clientY
|
||||
} = e.touches[0];
|
||||
const current = calcAngle(clientX, clientY);
|
||||
rotation.value += current - startAngle.value;
|
||||
startAngle.value = current;
|
||||
}
|
||||
|
||||
function onEnd() {
|
||||
// 可加惯性或回正逻辑
|
||||
}
|
||||
|
||||
// 计算每个子项在半圆上的定位
|
||||
function getItemStyle(idx) {
|
||||
const per = 180 / (items.length + 1);
|
||||
const baseAngle = -90 + per * (idx + 1);
|
||||
const rad = baseAngle * Math.PI / 180;
|
||||
const x = centerLocal.x + radius * Math.cos(rad);
|
||||
const y = centerLocal.y + radius * Math.sin(rad);
|
||||
return {
|
||||
position: 'absolute',
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
transform: 'translate(-50%,-50%)'
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#arc-wrapper {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
right: 100rpx;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#arc {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform-origin: center bottom;
|
||||
/* 半圆底部中心为旋转中心 :contentReference[oaicite:7]{index=7} */
|
||||
}
|
||||
|
||||
.arc-item {
|
||||
/* 可自定义尺寸 */
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* 确保 transform-origin 在自身中心 */
|
||||
transform-box: fill-box;
|
||||
/* 在某些渲染环境需指定 reference box :contentReference[oaicite:8]{index=8} */
|
||||
transform-origin: center center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,92 +1,149 @@
|
|||
<template>
|
||||
|
||||
<view class="move-circle">
|
||||
<!-- 上 -->
|
||||
<view class="up-container" @click="handleClick('up', 0)">
|
||||
<image :src="icons.up" class="container-img" />
|
||||
</view>
|
||||
<!-- 右 -->
|
||||
<view class="right-container" @click="handleClick('right', 1)">
|
||||
<image :src="icons.right" class="container-img" />
|
||||
</view>
|
||||
<!-- 下 -->
|
||||
<view class="down-container" @click="handleClick('down', 2)">
|
||||
<image :src="icons.down" class="container-img" />
|
||||
</view>
|
||||
<!-- 左 -->
|
||||
<view class="left-container" @click="handleClick('left', 3)">
|
||||
<image :src="icons.left" class="container-img" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="move-circle">
|
||||
<image v-show="key === 0" src="/static/index/keyimg/where10.png" class="container-img-up" />
|
||||
<image v-show="key === 2" src="/static/index/keyimg/where10.png" class="container-img-down" />
|
||||
<image v-show="key === 3" src="/static/index/keyimg/where10.png" class="container-img-left" />
|
||||
<image v-show="key === 1" src="/static/index/keyimg/where10.png" class="container-img-right" />
|
||||
<!-- 上 -->
|
||||
<view class="up-container" @click="handleClick(0)">
|
||||
<image :src="icons.up" class="container-img" />
|
||||
</view>
|
||||
<!-- 右 -->
|
||||
<view class="right-container" @click="handleClick(1)">
|
||||
<image :src="icons.right" class="container-img-shu" />
|
||||
</view>
|
||||
<!-- 下 -->
|
||||
<view class="down-container" @click="handleClick(2)">
|
||||
<image :src="icons.down" class="container-img" />
|
||||
</view>
|
||||
<!-- 左 -->
|
||||
<view class="left-container" @click="handleClick(3)">
|
||||
<image :src="icons.left" class="container-img-shu" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
const emit = defineEmits(['movecard'])
|
||||
|
||||
const icons = reactive({
|
||||
up: '/static/index/movemode/bupicon.png',
|
||||
right: '/static/index/movemode/brighticon.png',
|
||||
down: '/static/index/movemode/bdownicon.png',
|
||||
left: '/static/index/movemode/blefticon.png'
|
||||
up: '/static/index/keyimg/up1.png',
|
||||
right: '/static/index/keyimg/where2.png',
|
||||
down: '/static/index/keyimg/down1.png',
|
||||
left: '/static/index/keyimg/where1.png'
|
||||
})
|
||||
const key = ref(-1)
|
||||
|
||||
function handleClick(key, dir) {
|
||||
// icons[key] = `/static/index/movemode/blue${key}icon.png`
|
||||
// 保存当前定时器 ID
|
||||
let resetTimer = null
|
||||
|
||||
function handleClick(dir: number) {
|
||||
// 清除上一次定时器
|
||||
if (resetTimer !== null) {
|
||||
clearTimeout(resetTimer)
|
||||
}
|
||||
|
||||
// 显示当前方向
|
||||
key.value = dir
|
||||
emit('movecard', dir)
|
||||
|
||||
// 延迟一点时间再恢复图标（视觉反馈）
|
||||
// setTimeout(() => {
|
||||
// icons[key] = `/static/index/movemode/${key}icon.png`
|
||||
// }, 150)
|
||||
// 重新开启 800ms 定时器
|
||||
resetTimer = setTimeout(() => {
|
||||
key.value = -1
|
||||
resetTimer = null
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.move-circle {
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
left: 0;
|
||||
width: 350rpx;
|
||||
height: 350rpx;
|
||||
// border-radius: 50%;
|
||||
background-image: url('/static/index/movemode/bj.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
// background-color: rgba(127, 127, 127, 0.3);
|
||||
z-index: 9999;
|
||||
}
|
||||
.container-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.up-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 115rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.down-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 115rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.right-container {
|
||||
position: absolute;
|
||||
top: 115rpx;
|
||||
right: 5rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.left-container {
|
||||
position: absolute;
|
||||
top: 115rpx;
|
||||
left: 0rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
.move-circle {
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
left: 0;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at center,
|
||||
/* 圆形渐变，中心点在元素正中 */
|
||||
rgba(110, 149, 217, 0.2) 0%,
|
||||
/* 中心处纯色 */
|
||||
rgba(149, 177, 227, 0.2) 100%
|
||||
/* 边缘颜色 */
|
||||
);
|
||||
border: 5rpx rgba(148, 181, 229, 0.5) solid;
|
||||
// opacity: 0.1;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container-img-up {
|
||||
position: absolute;
|
||||
top: -48rpx;
|
||||
left: 50rpx;
|
||||
width: 220rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.container-img-down {
|
||||
position: absolute;
|
||||
bottom: -48rpx;
|
||||
left: 50rpx;
|
||||
transform: rotate(180deg);
|
||||
width: 220rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.container-img-left {
|
||||
position: absolute;
|
||||
left: -97rpx;
|
||||
top: 95rpx;
|
||||
transform: rotate(270deg);
|
||||
width: 220rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.container-img-right {
|
||||
position: absolute;
|
||||
right: -97rpx;
|
||||
transform: rotate(90deg);
|
||||
top: 95rpx;
|
||||
width: 220rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.container-img {
|
||||
width: 170rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.container-img-shu {
|
||||
width: 70rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
|
||||
.up-container {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
left: 75rpx;
|
||||
}
|
||||
|
||||
.down-container {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
left: 75rpx;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
position: absolute;
|
||||
top: 75rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.left-container {
|
||||
position: absolute;
|
||||
top: 75rpx;
|
||||
left: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<view class="move-circle">
|
||||
<image src="/static/index/keyimg/lunpan.png" class="move-circle-all" />
|
||||
<view class="click-box-top" @click="handleClick(0)">
|
||||
</view>
|
||||
<view class="click-box-left" @click="handleClick(3)">
|
||||
</view>
|
||||
<view class="click-box-bottom" @click="handleClick(2)">
|
||||
</view>
|
||||
<view class="click-box-right" @click="handleClick(1)">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
const emit = defineEmits(['movecard'])
|
||||
|
||||
const key = ref(-1)
|
||||
|
||||
// 保存当前定时器 ID
|
||||
let resetTimer = null
|
||||
|
||||
function handleClick(dir: number) {
|
||||
// 清除上一次定时器
|
||||
if (resetTimer !== null) {
|
||||
clearTimeout(resetTimer)
|
||||
}
|
||||
|
||||
// 显示当前方向
|
||||
key.value = dir
|
||||
emit('movecard', dir)
|
||||
|
||||
// 重新开启 800ms 定时器
|
||||
resetTimer = setTimeout(() => {
|
||||
key.value = -1
|
||||
resetTimer = null
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.move-circle {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
left: 100rpx;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
.click-box-top{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100rpx;
|
||||
width: 130rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.click-box-bottom{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 100rpx;
|
||||
width: 130rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.click-box-left{
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
left: 0;
|
||||
width: 98rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
.click-box-right{
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
right: 0;
|
||||
width: 98rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
.move-circle-all{
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,16 +1,22 @@
|
|||
<template>
|
||||
<view class="all-circle">
|
||||
<view class="move-circle" v-show="!gray" @click="confirm">
|
||||
确认
|
||||
<view class="circle-rightup">
|
||||
<view @click="clickCircle(`rightup`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/white.png`: `/static/index/keyimg/white.png`" />
|
||||
<view class="circle-font">
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="move-circle-bad" v-show="gray">
|
||||
确认
|
||||
</view>
|
||||
<view v-show="clickstauts" class="delete-circle" @click="back">
|
||||
返回
|
||||
</view>
|
||||
<view v-show="!clickstauts" class="delete-circle-bad" @click="back">
|
||||
关闭
|
||||
<view class="circle-leftbottom">
|
||||
<view @click="clickCircle(`leftbottom`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/back.png`" />
|
||||
<view class="circle-font">
|
||||
返回
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -20,93 +26,106 @@
|
|||
ref
|
||||
} from 'vue'
|
||||
const emit = defineEmits(['clickcircle']);
|
||||
const props = defineProps({
|
||||
clickstauts: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
gray:{
|
||||
type: Boolean,
|
||||
required: true,
|
||||
const upmenuIndex = ref(-1)
|
||||
|
||||
const isClick = ref(true);
|
||||
const clickCircle = (type : string) => {
|
||||
if (isClick.value) {
|
||||
switch (type) {
|
||||
case "rightup":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('clickcircle',0)
|
||||
}, 0)
|
||||
break;
|
||||
case "leftbottom":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('clickcircle',1)
|
||||
}, 0)
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
const confirm = () =>{
|
||||
emit('clickcircle',0)
|
||||
}
|
||||
const back = () =>{
|
||||
emit('clickcircle',1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.all-circle{
|
||||
.all-circle {
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
right: 50rpx;
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
.move-circle{
|
||||
position: absolute;
|
||||
bottom: 200rpx;
|
||||
right: 40rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
right: 80rpx;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
|
||||
.circle-rightup {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
right: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgb(197, 220, 255);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-leftbottom {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
left: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgb(197, 220, 255);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-up-target {
|
||||
position: absolute;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
top: -60rpx;
|
||||
left: 89rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.move-circle-bad{
|
||||
|
||||
.circle-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.circle-img-target {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.circle-font {
|
||||
position: absolute;
|
||||
bottom: 200rpx;
|
||||
right: 40rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #c2c9d3;
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 25rpx;
|
||||
left: 45rpx;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.delete-circle{
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
|
||||
.solveclick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.delete-circle-bad{
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #c2c9d3;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,47 @@
|
|||
<template>
|
||||
<view class="all-circle">
|
||||
<view class="doctorsay-container-up">
|
||||
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
||||
<view class="doctorsay-container-card"
|
||||
:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
|
||||
<image class="doctorsay-container-card-img"
|
||||
:src="index === upmenuIndex ? item.targetUrl : item.url" />
|
||||
<view
|
||||
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="circle-up">
|
||||
<view @click="clickCircle(`up`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/key1-1.png`" />
|
||||
<view class="circle-font">
|
||||
睡眠
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-leftup">
|
||||
<view @click="clickCircle(`leftup`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/key5-1.png`" />
|
||||
<view class="circle-font">
|
||||
饮食
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-rightup">
|
||||
<view @click="clickCircle(`rightup`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/key4-1.png`" />
|
||||
<view class="circle-font">
|
||||
清洁
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-leftbottom">
|
||||
<view @click="clickCircle(`leftbottom`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/key3-1.png`" />
|
||||
<view class="circle-font">
|
||||
排泄
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-rightbottom">
|
||||
<view @click="clickCircle(`rightbottom`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/key2-2.png`" />
|
||||
<view class="circle-font">
|
||||
日常
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -21,23 +53,53 @@
|
|||
ref
|
||||
} from 'vue'
|
||||
const emit = defineEmits(['getDownListIndex']);
|
||||
// 初始化下面侧单列表
|
||||
const doctorsayList = ref([
|
||||
{ url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' },
|
||||
{ url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' },
|
||||
{ url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' },
|
||||
{ url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' },
|
||||
{ url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排泻' },
|
||||
]);
|
||||
const upmenuIndex = ref(-1)
|
||||
//变更左侧菜单
|
||||
const changLeft = (index : number) => {
|
||||
upmenuIndex.value = index
|
||||
emit('getDownListIndex',index)
|
||||
setTimeout(()=>{
|
||||
upmenuIndex.value = -1
|
||||
},400)
|
||||
// downList.value = bigArray.value[index].children
|
||||
const isClick = ref(true);
|
||||
const clickCircle = (type : string) => {
|
||||
if (isClick.value) {
|
||||
switch (type) {
|
||||
case 'up':
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('getDownListIndex', 3)
|
||||
}, 0)
|
||||
break;
|
||||
case 'leftup':
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('getDownListIndex', 2)
|
||||
}, 0)
|
||||
break;
|
||||
case "rightup":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('getDownListIndex', 1)
|
||||
}, 0)
|
||||
break;
|
||||
case "leftbottom":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('getDownListIndex', 4)
|
||||
}, 0)
|
||||
break;
|
||||
case "rightbottom":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('getDownListIndex', 0)
|
||||
}, 0)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -45,49 +107,116 @@
|
|||
.all-circle {
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
right: 50rpx;
|
||||
width: 400rpx;
|
||||
height: 500rpx;
|
||||
background-color: rgba(127, 127, 127, 0.1);
|
||||
border-radius: 20rpx;
|
||||
right: 80rpx;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
background-color: rgba(110, 149, 217, 0.1);
|
||||
border-radius: 50%;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
.doctorsay-container-up {
|
||||
border: 1rpx solid #d5d5d5;
|
||||
|
||||
.circle-up {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
top: -60rpx;
|
||||
left: 89rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 60rpx;
|
||||
.doctorsay-container-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(221, 234, 250);
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
margin: 0 18rpx 15rpx 0rpx;
|
||||
border-radius: 30rpx;
|
||||
border: 2rpx solid rgb(221, 234, 250);
|
||||
box-shadow: 5px 5px 10px rgba(105, 129, 178,0.2);
|
||||
|
||||
/* 右下角阴影 */
|
||||
.doctorsay-container-card-img {
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
}
|
||||
|
||||
.doctorsay-container-card-font {
|
||||
font-size: 30rpx;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
|
||||
.doctorsay-container-card-font-dark {
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
margin-top: -10rpx;
|
||||
}
|
||||
}
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-leftup {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
left: -60rpx;
|
||||
top: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-rightup {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
right: -60rpx;
|
||||
top: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-leftbottom {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
left: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-rightbottom {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
right: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-up-target {
|
||||
position: absolute;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
top: -60rpx;
|
||||
left: 89rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.circle-img-target {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.circle-font {
|
||||
position: absolute;
|
||||
bottom: 25rpx;
|
||||
left: 45rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.solveclick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,24 @@
|
|||
|
||||
<template>
|
||||
<view class="all-circle">
|
||||
<view class="move-circle" @click="confirm">
|
||||
{{ismove? `确定`:`移动`}}
|
||||
<view class="circle-rightup">
|
||||
<view @click="clickCircle(`rightup`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="ismove?`/static/index/keyimg/white.png`: `/static/index/keyimg/move.png`" />
|
||||
<view class="circle-font">
|
||||
{{ismove? `确定`:`移动`}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-leftbottom">
|
||||
<view @click="clickCircle(`leftbottom`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="ismove?`/static/index/keyimg/back.png`: `/static/index/keyimg/delete.png`" />
|
||||
<view class="circle-font">
|
||||
{{ismove? `取消`:`删除`}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delete-circle-bad" @click="back">
|
||||
{{ismove? `取消`:`删除`}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,7 +26,8 @@
|
|||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
const emit = defineEmits(['clickcard']);
|
||||
const upmenuIndex = ref(-1)
|
||||
const props = defineProps({
|
||||
ismove: {
|
||||
type: Boolean,
|
||||
|
|
@ -21,68 +35,104 @@
|
|||
},
|
||||
|
||||
});
|
||||
const emit = defineEmits(['clickcard']);
|
||||
const confirm = () =>{
|
||||
emit('clickcard',0)
|
||||
}
|
||||
const back = () =>{
|
||||
emit('clickcard',1)
|
||||
const isClick = ref(true);
|
||||
const clickCircle = (type : string) => {
|
||||
if (isClick.value) {
|
||||
switch (type) {
|
||||
case "rightup":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('clickcard',0)
|
||||
}, 0)
|
||||
break;
|
||||
case "leftbottom":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('clickcard',1)
|
||||
}, 0)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.all-circle{
|
||||
.all-circle {
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
right: 50rpx;
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
.move-circle{
|
||||
position: absolute;
|
||||
bottom: 200rpx;
|
||||
right: 40rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
right: 80rpx;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
|
||||
.circle-rightup {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
right: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-leftbottom {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
left: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-up-target {
|
||||
position: absolute;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
top: -60rpx;
|
||||
left: 89rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.delete-circle{
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
|
||||
.circle-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
.delete-circle-bad{
|
||||
|
||||
.circle-img-target {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.circle-font {
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #c2c9d3;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 25rpx;
|
||||
left: 45rpx;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.solveclick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,23 @@
|
|||
<template>
|
||||
<view class="all-circle">
|
||||
<view class="move-circle" @click="confirm">
|
||||
确定
|
||||
<view class="circle-rightup">
|
||||
<view @click="clickCircle(`rightup`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/white.png`" />
|
||||
<view class="circle-font">
|
||||
确认
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-leftbottom">
|
||||
<view @click="clickCircle(`leftbottom`)" class="solveclick">
|
||||
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/back.png`" />
|
||||
<view class="circle-font">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="delete-circle-bad" @click="back">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,69 +25,109 @@
|
|||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
const emit = defineEmits(['clickdelete']);
|
||||
const confirm = () =>{
|
||||
emit('clickdelete',0)
|
||||
}
|
||||
const back = () =>{
|
||||
emit('clickdelete',1)
|
||||
const upmenuIndex = ref(-1)
|
||||
|
||||
const isClick = ref(true);
|
||||
const clickCircle = (type : string) => {
|
||||
if (isClick.value) {
|
||||
switch (type) {
|
||||
case "rightup":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('clickdelete',0)
|
||||
}, 0)
|
||||
break;
|
||||
case "leftbottom":
|
||||
isClick.value = false;
|
||||
setTimeout(() => {
|
||||
upmenuIndex.value = -1;
|
||||
isClick.value = true;
|
||||
emit('clickdelete',1)
|
||||
}, 0)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.all-circle{
|
||||
.all-circle {
|
||||
position: absolute;
|
||||
bottom: 300rpx;
|
||||
right: 50rpx;
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
.move-circle{
|
||||
position: absolute;
|
||||
bottom: 200rpx;
|
||||
right: 40rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
right: 80rpx;
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
|
||||
.circle-rightup {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
right: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgb(197, 220, 255);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.circle-leftbottom {
|
||||
position: absolute;
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
left: 0rpx;
|
||||
bottom: -30rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgb(197, 220, 255);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.circle-up-target {
|
||||
position: absolute;
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
top: -60rpx;
|
||||
left: 89rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.delete-circle{
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
||||
// opacity:0.5;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
justify-content: center;
|
||||
|
||||
.circle-img {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
}
|
||||
.delete-circle-bad{
|
||||
|
||||
.circle-img-target {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.circle-font {
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
right: 150rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #c2c9d3;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 25rpx;
|
||||
left: 45rpx;
|
||||
color: #fff;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.solveclick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<view class="move-circle">
|
||||
<image src="/static/index/keyimg/yaogan.png" class="move-circle-all" />
|
||||
<view class="click-box-top" @click="handleClick(0)">
|
||||
</view>
|
||||
<view class="click-box-left" @click="handleClick(3)">
|
||||
</view>
|
||||
<view class="click-box-bottom" @click="handleClick(2)">
|
||||
</view>
|
||||
<view class="click-box-right" @click="handleClick(1)">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
const emit = defineEmits(['movecard'])
|
||||
|
||||
const key = ref(-1)
|
||||
|
||||
// 保存当前定时器 ID
|
||||
let resetTimer = null
|
||||
|
||||
function handleClick(dir: number) {
|
||||
// 清除上一次定时器
|
||||
if (resetTimer !== null) {
|
||||
clearTimeout(resetTimer)
|
||||
}
|
||||
|
||||
// 显示当前方向
|
||||
key.value = dir
|
||||
emit('movecard', dir)
|
||||
|
||||
// 重新开启 800ms 定时器
|
||||
resetTimer = setTimeout(() => {
|
||||
key.value = -1
|
||||
resetTimer = null
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.move-circle {
|
||||
position: absolute;
|
||||
bottom: 93rpx;
|
||||
left: 130rpx;
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
// border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
.click-box-top{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 70rpx;
|
||||
width: 110rpx;
|
||||
height: 70rpx;
|
||||
// background-color: red;
|
||||
}
|
||||
.click-box-bottom{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 70rpx;
|
||||
width: 110rpx;
|
||||
height: 70rpx;
|
||||
// background-color: blue;
|
||||
}
|
||||
.click-box-left{
|
||||
position: absolute;
|
||||
bottom: 75rpx;
|
||||
left: 0;
|
||||
width: 70rpx;
|
||||
height: 100rpx;
|
||||
// background-color: yellow;
|
||||
}
|
||||
.click-box-right{
|
||||
position: absolute;
|
||||
bottom: 75rpx;
|
||||
right: 0;
|
||||
width: 70rpx;
|
||||
height: 100rpx;
|
||||
// background-color: green;
|
||||
}
|
||||
}
|
||||
.move-circle-all{
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1152,7 +1152,7 @@
|
|||
.right-container-fir-left-nav {
|
||||
width: 63%;
|
||||
height: 548rpx;
|
||||
border-radius: 50rpx;
|
||||
/* border-radius: 50rpx; */
|
||||
/* 圆角 */
|
||||
position: relative;
|
||||
/* 增加背景色确保视觉效果 */
|
||||
|
|
@ -2093,12 +2093,13 @@
|
|||
}
|
||||
|
||||
.right-container-big {
|
||||
transform: scale(1.57);
|
||||
transform: scale(1.562);
|
||||
/* 初始状态 */
|
||||
transition: transform 0.5s ease;
|
||||
/* 平滑过渡 */
|
||||
transform-origin: left top;
|
||||
background-color: rgba(220, 230, 254, 1);
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.right-container-small {
|
||||
|
|
@ -2108,11 +2109,12 @@
|
|||
/* 平滑过渡 */
|
||||
transform-origin: left top;
|
||||
background-color: rgba(220, 230, 254, 1);
|
||||
border-radius: 50rpx;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.right-container-right-big {
|
||||
transform: scale(1.93);
|
||||
transform: scale(1.923);
|
||||
margin-left: 2%;
|
||||
width: 41%;
|
||||
/* 初始状态 */
|
||||
|
|
@ -2120,7 +2122,7 @@
|
|||
/* 平滑过渡 */
|
||||
transform-origin: right bottom;
|
||||
background-color: rgba(220, 230, 254, 1);
|
||||
border-radius: 50rpx;
|
||||
border-radius: 29rpx;
|
||||
}
|
||||
|
||||
.right-container-right-small {
|
||||
|
|
@ -2136,14 +2138,14 @@
|
|||
}
|
||||
|
||||
.right-container-left-big {
|
||||
transform: scale(1.78);
|
||||
transform: scale(1.781);
|
||||
width: 55%;
|
||||
/* 初始状态 */
|
||||
transition: transform 0.5s ease;
|
||||
/* 平滑过渡 */
|
||||
transform-origin: left bottom;
|
||||
background-color: rgba(183, 200, 243, 1);
|
||||
border-radius: 50rpx;
|
||||
border-radius: 29rpx;
|
||||
}
|
||||
|
||||
.right-container-left-small {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<view :class="isPopupVisible ?`right-container-big`:`right-container-small`"
|
||||
:style="isPopupVisiblefiropen || isPopupVisible?{zIndex:999}:{zIndex:998}"
|
||||
class="right-container-fir-left-nav">
|
||||
<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
|
||||
<view :style="isPopupVisible?{borderRadius:`30rpx`}:{borderRadius:`50rpx`}" :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
|
||||
<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
|
||||
<div class="right-container-fir-left-card-hulilei-font" @click="showPopup">护理类</div>
|
||||
<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
|
||||
|
|
@ -209,7 +209,7 @@
|
|||
<view class="right-container-sec">
|
||||
<view :class="isPopupVisiblesec ?`right-container-left-big`:`right-container-left-small`"
|
||||
:style="isPopupVisiblefiropensec || isPopupVisiblesec?{zIndex:999}:{zIndex:0}">
|
||||
<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
|
||||
<view :style="isPopupVisiblesec?{borderRadius:`29rpx`}:{borderRadius:`50rpx`}" :class="darkFans?`right-container-left-dark`:`right-container-left`">
|
||||
<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
|
||||
<div class="right-container-left-font" @click="showPopupsec">医疗类</div>
|
||||
<view class="right-container-fir-left-carousel">
|
||||
|
|
@ -330,9 +330,7 @@
|
|||
</view>
|
||||
<view :style="isPopupVisiblefiropenthi || isPopupVisiblethi?{zIndex:999}:{zIndex:0}"
|
||||
:class="[ isPopupVisiblethi ? 'right-container-right-big' : 'right-container-right-small',]">
|
||||
|
||||
|
||||
<view :class="[ darkFans ? 'right-container-right-father-dark' : 'right-container-right-father']">
|
||||
<view :style="isPopupVisiblethi?{borderRadius:`29rpx`}:{borderRadius:`50rpx`}" :class="[ darkFans ? 'right-container-right-father-dark' : 'right-container-right-father']">
|
||||
<view class="right-container-right-down-father">
|
||||
<div class="right-container-fir-left-card-flex-sec">
|
||||
<image class="right-container-fir-left-card-flex-sec-img"
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
.doctorsay-container-items {
|
||||
width: 310rpx;
|
||||
height: 1220rpx;
|
||||
|
||||
margin-left: 30rpx;
|
||||
.doctorsay-container-up {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -535,18 +535,34 @@
|
|||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.right-container-title-class-anhei-button-wrong {
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 15rpx;
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
.right-container-title-class-anhei {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
/* color: white; */
|
||||
}
|
||||
}
|
||||
.right-container-title-class-anhei-button {
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
background-color: black;
|
||||
border: 2rpx solid;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
|
||||
.right-container-title-class-anhei {
|
||||
font-size: 30rpx;
|
||||
|
|
@ -574,7 +590,16 @@
|
|||
z-index: 999;
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.title-time-blue {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
left: 0rpx;
|
||||
z-index: 10;
|
||||
.title-time-blue-img{
|
||||
height: 209rpx;
|
||||
width: 275rpx;
|
||||
}
|
||||
}
|
||||
.title-time {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
@ -803,7 +828,7 @@
|
|||
|
||||
.popup-song-contain {
|
||||
position: absolute;
|
||||
right: 270rpx;
|
||||
right: 570rpx;
|
||||
width: 1296rpx;
|
||||
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
|
|
|
|||
|
|
@ -21,65 +21,30 @@
|
|||
<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="newchange()">
|
||||
<view class="right-container-title-class-anhei-button">
|
||||
<text class="right-container-title-class-anhei">
|
||||
手柄模式
|
||||
拖动模式
|
||||
</text>
|
||||
</view>
|
||||
<view class="right-container-title-class-anhei-button-wrong" @click="newchange(1)">
|
||||
<text class="right-container-title-class-anhei">
|
||||
手柄模式1
|
||||
</text>
|
||||
</view>
|
||||
<view class="right-container-title-class-anhei-button-wrong" @click="newchange(2)">
|
||||
<text class="right-container-title-class-anhei">
|
||||
手柄模式2
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-view">
|
||||
<view class="doctorsay-container-items">
|
||||
<view class="doctorsay-container-up">
|
||||
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
||||
<view class="doctorsay-container-card"
|
||||
:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
|
||||
<image class="doctorsay-container-card-img"
|
||||
:src="index === upmenuIndex ? item.targetUrl : item.url" />
|
||||
<view
|
||||
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="doctorsay-container-card"
|
||||
style="background: linear-gradient(135deg, #01e7be 0%, #0080dd 100%);">
|
||||
<image class="doctorsay-container-card-img" src="/static/index/shexiang.png" />
|
||||
<view class="doctorsay-container-card-font-dark">
|
||||
监控
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-down">
|
||||
<view class="doctorsay-top">
|
||||
<view class="doctorsay-top-gun"></view>
|
||||
<view class="doctorsay-top-font">服务类型</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="canmove" class="doctorsay-container-scroll" @scroll="handleScroll">
|
||||
<view v-for="(item,index) in downList" :key="index">
|
||||
<view class="doctorsay-container-button" @touchstart="handleTouchStart(item,index,$event)"
|
||||
@touchmove="handleTouchMove" @touchend="handleTouchEnd">
|
||||
<text
|
||||
:class="downmenuIndex===index?`doctorsay-container-text-target`:`doctorsay-container-text`"
|
||||
:style="{
|
||||
backgroundColor: item.color ? item.color : '',
|
||||
...(isBack ? {} : { width: '250rpx', height: '75rpx', fontSize: '30rpx', borderRadius: '25rpx' })
|
||||
}">{{item.title}}</text>
|
||||
<image v-show="downmenuIndex===index" class="doctorsay-container-button-uplight"
|
||||
:style="isBack?{}:{top:'30rpx'}" :src="`/static/index/cardicons/uplight.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-container">
|
||||
<view class="doctorsay-container-title">
|
||||
<view class="doctorsay-container-left">
|
||||
<view class="doctorsay-container-left-gun"></view>
|
||||
<view class="doctorsay-container-left-font">时间矩阵</view>
|
||||
<view class="doctorsay-container-share" @click="shareToWeixin">
|
||||
分享到微信
|
||||
分享
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-right">
|
||||
|
|
@ -154,7 +119,11 @@
|
|||
@click.stop="deleteItems(item1,index0,index1)">
|
||||
-
|
||||
</view>
|
||||
|
||||
<view class="title-time-blue"
|
||||
v-show="getBlue(index0,index1)">
|
||||
<image class="title-time-blue-img"
|
||||
:src="getRed(index0,index1)?`/static/index/movemode/targetcheng.png`: `/static/index/movemode/target.png`" />
|
||||
</view>
|
||||
<view :class="getClass(item1,index0,index1)"
|
||||
style="font-size: 30rpx;overflow: hidden;"
|
||||
:style="{ animationDelay:`-${computeDelay(index0, index1).toFixed(2)}s` }">
|
||||
|
|
@ -230,6 +199,52 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-items">
|
||||
<view class="doctorsay-container-up">
|
||||
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
||||
<view class="doctorsay-container-card"
|
||||
:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
|
||||
<image class="doctorsay-container-card-img"
|
||||
:src="index === upmenuIndex ? item.targetUrl : item.url" />
|
||||
<view
|
||||
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="doctorsay-container-card"
|
||||
style="background: linear-gradient(135deg, #01e7be 0%, #0080dd 100%);">
|
||||
<image class="doctorsay-container-card-img" src="/static/index/shexiang.png" />
|
||||
<view class="doctorsay-container-card-font-dark">
|
||||
监控
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="doctorsay-container-down">
|
||||
<view class="doctorsay-top">
|
||||
<view class="doctorsay-top-gun"></view>
|
||||
<view class="doctorsay-top-font">服务类型</view>
|
||||
</view>
|
||||
<scroll-view :scroll-y="canmove" class="doctorsay-container-scroll" @scroll="handleScroll">
|
||||
<view v-for="(item,index) in downList" :key="index">
|
||||
<view class="doctorsay-container-button" @click="downmenuIndex=index"
|
||||
@touchstart="handleTouchStart(item,index,$event)" @touchmove="handleTouchMove"
|
||||
@touchend="handleTouchEnd">
|
||||
<text
|
||||
:class="downmenuIndex===index?`doctorsay-container-text-target`:`doctorsay-container-text`"
|
||||
:style="{
|
||||
backgroundColor: item.color ? item.color : '',
|
||||
...(isBack ? {} : { width: '250rpx', height: '75rpx', fontSize: '30rpx', borderRadius: '25rpx' })
|
||||
}">{{item.title}}</text>
|
||||
<image v-show="downmenuIndex===index" class="doctorsay-container-button-uplight"
|
||||
:style="isBack?{}:{top:'30rpx'}" :src="`/static/index/cardicons/uplight.png`" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 长按的弹出层 -->
|
||||
<view v-show="isopen" class="popup-overlay" @click="isopen=false;flyNumber.index0=999;touchindex1=-1">
|
||||
|
|
@ -570,18 +585,33 @@
|
|||
}
|
||||
const changeBug = ref(true);
|
||||
const nextItems = () => {
|
||||
currentNumber.value > 2 ? currentNumber.value = 0 : currentNumber.value++
|
||||
currentNumber.value == 0 ? currentNumber.value = 3 : currentNumber.value--
|
||||
}
|
||||
const getRed = (index0, index1) => {
|
||||
if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1 && (redNameindex0.value.includes(index0 + (currentNumber.value * 6)) || (redNameindex1.value != index1))) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const getBlue = (index0, index1) => {
|
||||
if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 方法：根据条件返回不同的类名
|
||||
const getClass = (item, index0, index1) => {
|
||||
|
||||
if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1 && (redNameindex0.value.includes(index0 + (currentNumber.value * 6)) || (redNameindex1.value != index1))) {
|
||||
return 'title-time-border-red';
|
||||
}
|
||||
else if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
|
||||
return 'title-time-border-blue';
|
||||
}
|
||||
else if (item.cycleType === '日常') {
|
||||
// if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1 && (redNameindex0.value.includes(index0 + (currentNumber.value * 6)) || (redNameindex1.value != index1))) {
|
||||
// return 'title-time-border-red';
|
||||
// }
|
||||
// else if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
|
||||
// return 'title-time-border-blue';
|
||||
// }
|
||||
// else
|
||||
if (item.cycleType === '日常') {
|
||||
if (flyNumber.value.index0 === (index0 + (currentNumber.value * 6)) && flyNumber.value.index1 === index1 && shakyTable.value) {
|
||||
return 'title-time-border-yellow-active-transparent';
|
||||
} else if (shakyTable.value) {
|
||||
|
|
@ -627,8 +657,8 @@
|
|||
const darkFanschange = () => {
|
||||
emit('darkchange', !props.darkFans);
|
||||
}
|
||||
const newchange = () => {
|
||||
emit('changeold', false)
|
||||
const newchange = (type:number) => {
|
||||
emit('changeold', type)
|
||||
}
|
||||
//变更左侧菜单
|
||||
const changLeft = (index : number) => {
|
||||
|
|
@ -724,8 +754,8 @@
|
|||
.boundingClientRect((data : any) => {
|
||||
data.forEach(async (res : any) => {
|
||||
// 根据你的条件筛选元素
|
||||
if (res.left > 200 && res.left < 1067 && res.top < 570 && res.top > 140 && res.dataset.index0 == index0 && res.dataset.index1 == index1) {
|
||||
if (res.left > 200 && res.left < 500) {
|
||||
if (res.left > 100 && res.left < 900 && res.top < 570 && res.top > 140 && res.dataset.index0 == index0 && res.dataset.index1 == index1) {
|
||||
if (res.left > 100 && res.left < 400) {
|
||||
// 表格太靠左侧，修改到右面
|
||||
openX.value = Math.floor(res.left) + 520;
|
||||
} else {
|
||||
|
|
@ -789,14 +819,14 @@
|
|||
.boundingClientRect((data : any) => {
|
||||
data.forEach(async (res : any) => {
|
||||
// 根据你的条件筛选元素
|
||||
if (res.left > 200 && res.left < 1067 && res.top < 570 && res.top > 140) {
|
||||
shakyTable.value = true;
|
||||
if (res.left > 100 && res.left < 900 && res.top < 570 && res.top > 140) {
|
||||
reldata.value.push(res)
|
||||
}
|
||||
})
|
||||
})
|
||||
.exec()
|
||||
emit('saveruler', item, reldata.value);
|
||||
shakyTable.value = true;
|
||||
}
|
||||
}, 100); // 2秒后触发
|
||||
}
|
||||
|
|
@ -848,6 +878,7 @@
|
|||
emptyChildIndices.push(index);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
if (emptyChildNumber > 4 && emptyChildIndices.length > 1) {
|
||||
|
|
@ -895,20 +926,20 @@
|
|||
shakyTable.value = false
|
||||
saveX.value = Math.floor(e.touches[0].pageX);
|
||||
saveY.value = Math.floor(e.touches[0].pageY);
|
||||
longPressTimer.value = setTimeout(() => {
|
||||
let noHave = false;
|
||||
timearr.value[0].children.forEach((element : any, index0 : number) => {
|
||||
if (element.typeName === item.title) {
|
||||
scrollTop.value = 0
|
||||
scrollTop.value = index0 * 104
|
||||
noHave = true
|
||||
}
|
||||
})
|
||||
if (!noHave) {
|
||||
scrollTop.value = 0
|
||||
scrollTop.value = 999
|
||||
}
|
||||
}, 190)
|
||||
// longPressTimer.value = setTimeout(() => {
|
||||
// let noHave = false;
|
||||
// timearr.value[0].children.forEach((element : any, index0 : number) => {
|
||||
// if (element.typeName === item.title) {
|
||||
// scrollTop.value = 0
|
||||
// scrollTop.value = index0 * 104
|
||||
// noHave = true
|
||||
// }
|
||||
// })
|
||||
// if (!noHave) {
|
||||
// scrollTop.value = 0
|
||||
// scrollTop.value = 999
|
||||
// }
|
||||
// }, 190)
|
||||
//执行方法
|
||||
longPressTimer.value = setTimeout(() => {
|
||||
redNameindex0.value = [];
|
||||
|
|
@ -949,7 +980,7 @@
|
|||
.boundingClientRect((data : any) => {
|
||||
data.forEach((res : any) => {
|
||||
// 根据你的条件筛选元素
|
||||
if (res.left > 200 && res.left < 1067 && res.top < 570 && res.top > 140) {
|
||||
if (res.left > 100 && res.left < 900 && res.top < 570 && res.top > 140) {
|
||||
reldata.value.push(res)
|
||||
}
|
||||
})
|
||||
|
|
@ -1031,9 +1062,6 @@
|
|||
})
|
||||
const openOp = ref(0);
|
||||
const clickOp = (index : number, item : any) => {
|
||||
// cardsumit.value.startTime = ""
|
||||
// cardsumit.value.monthTime = ""
|
||||
// cardsumit.value.weekTime = ""
|
||||
saveId.value = item.id;
|
||||
saveTagName.value = item.tagName
|
||||
if (cardsumit.value.op.index[2] === index) {
|
||||
|
|
@ -1056,7 +1084,6 @@
|
|||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
const clickTime = (index : string) => {
|
||||
|
|
@ -1085,10 +1112,7 @@
|
|||
const rulerEnd = async (res : any) => {
|
||||
isBack.value = false;
|
||||
if (props.liang.index0 !== 999 && res) {
|
||||
//检测拖动是否超出范围和是否不合法
|
||||
if (redNameindex0.value.includes(props.liang.index0 + (currentNumber.value * 6)) || redNameindex1.value !== props.liang.index1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
cardsumit.value = {
|
||||
op: {
|
||||
name: "",
|
||||
|
|
@ -1196,7 +1220,6 @@
|
|||
// 先将 scrollTop 重置为 0
|
||||
scrollTop.value = 999
|
||||
// 等待 DOM 更新完成
|
||||
|
||||
// 设置一个足够大的值让 scroll-view 滚动到底部
|
||||
scrollTop.value = 9999
|
||||
}
|
||||
|
|
@ -1312,6 +1335,11 @@
|
|||
allArray.push(res)
|
||||
})
|
||||
})
|
||||
let data = {
|
||||
index0: indexsave.value[0],
|
||||
index1: savaIndex
|
||||
}
|
||||
whereEvent(data);
|
||||
const shouldAdd = timearr.value.some(obj => {
|
||||
const children = obj.children;
|
||||
return children[children.length - 1].directiveName.trim() !== '';
|
||||
|
|
|
|||
|
|
@ -163,11 +163,9 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
right: 0rpx;
|
||||
top: -5rpx;
|
||||
right: -5rpx;
|
||||
z-index: 10;
|
||||
// background-color: #fff;
|
||||
// background: linear-gradient(to bottom right, #fff 0%, #e5d3fb 50%, #cfd9f6 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -176,9 +174,7 @@
|
|||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
// margin-bottom: 5rpx;
|
||||
display: flex;
|
||||
// background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -421,18 +417,35 @@
|
|||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.right-container-title-class-anhei-button-wrong {
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 15rpx;
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
background-color: #fff;
|
||||
/* border: 2rpx solid; */
|
||||
|
||||
.right-container-title-class-anhei {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
/* color: white; */
|
||||
}
|
||||
}
|
||||
.right-container-title-class-anhei-button {
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
background-color: black;
|
||||
border: 2rpx solid;
|
||||
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||
/* border: 2rpx solid; */
|
||||
|
||||
.right-container-title-class-anhei {
|
||||
font-size: 30rpx;
|
||||
|
|
@ -699,7 +712,7 @@
|
|||
|
||||
.popup-song-contain {
|
||||
position: absolute;
|
||||
right: 500rpx;
|
||||
right: 450rpx;
|
||||
width: 1296rpx;
|
||||
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,49 @@
|
|||
// 引入 request 文件
|
||||
import request from '@/request/index.js'
|
||||
|
||||
// 以下 api 为博主项目示例，实际与项目相匹配
|
||||
|
||||
// 查询服务类型
|
||||
export const getServiceTree = () => {
|
||||
return request({
|
||||
url: '/nuIpadApi/nuConfigServiceCategory/getServiceTree',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 查询表格
|
||||
export const getNclist = () => {
|
||||
return request({
|
||||
url: '/nuIpadApi/nuBizNuCustomerServer/getNclist?nuId=1&customerId=1',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 新增表格
|
||||
export const addNuCustomerServer = (params) => {
|
||||
return request({
|
||||
url: '/nuIpadApi/nuBizNuCustomerServer/addNuCustomerServer',
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
// 移动表格
|
||||
export const editNuCustomerServer = (params) => {
|
||||
return request({
|
||||
url: '/nuIpadApi/nuBizNuCustomerServer/editNuCustomerServer',
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
export const deleteNuCustomerServer = (params) => {
|
||||
return request({
|
||||
url: `/nuIpadApi/nuBizNuCustomerServer/deleteNuCustomerServer?id=${params.id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
// 移动表格
|
||||
export const addBatch = (params) => {
|
||||
return request({
|
||||
url: '/nuIpadApi/nuBizNuCustomerServer/addBatch',
|
||||
method: 'post',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
// 定义 Link 类型
|
||||
export type roomBtttonType = {
|
||||
url : string;
|
||||
targetUrl : string;
|
||||
name : string
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -104,7 +104,7 @@
|
|||
<view class="swiper-left-button-blue">
|
||||
保存
|
||||
</view>
|
||||
<view class="swiper-left-button-blue">
|
||||
<view class="swiper-left-button-blue" style="margin-right: 40rpx;">
|
||||
提交
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -355,10 +355,10 @@
|
|||
.down-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 8%;
|
||||
|
||||
|
||||
.swiper-left-button-blue {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<view
|
||||
:class="item.cardType >3 ?`swiper-states-heng-two-green`: `swiper-states-heng-two`">
|
||||
</view>
|
||||
<view class="ball-bgc" :style="item.cardType!=1 ?{
|
||||
<view class="ball-bgc" :style="item.cardType !==0 && item.cardType !==1?{
|
||||
}:{boxShadow: `8rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.3)`,width:`110rpx`,height:`110rpx`}">
|
||||
<view :class="getBallFirst(item.cardType)">
|
||||
采购
|
||||
|
|
@ -729,14 +729,14 @@
|
|||
|
||||
.ball-red {
|
||||
background: #FF642F;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 25rpx;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.ball-white {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"name" : "养老App",
|
||||
"appid" : "__UNI__FB2D473",
|
||||
"description" : "养老App",
|
||||
"versionName" : "1.0.9",
|
||||
"versionCode" : 109,
|
||||
"versionName" : "1.1.2",
|
||||
"versionCode" : 112,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,13 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path": "pages/timeMatrix/indexnew",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
}
|
||||
// {
|
||||
// "path": "pages/somethingmove/index",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<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` }">
|
||||
<view class="move-font" v-show="savename && clientX" :animation="animationData">
|
||||
{{savename}}
|
||||
</view>
|
||||
<view v-if="saveruler.cycleType"
|
||||
<view v-show="saveruler.cycleType"
|
||||
:class="saveruler.cycleType=='日常' ? `title-time-border-yellow`:`title-time-border-pouple`"
|
||||
:style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }" style="font-size: 30rpx;overflow: hidden;">
|
||||
:animation="animationData" style="font-size: 30rpx;overflow: hidden;">
|
||||
<view class="title-time" v-show="saveruler.startTime" style="margin-top: 5rpx;">
|
||||
<view class="title-time-time" style="font-size: 30rpx;">
|
||||
{{saveruler.startTime + `-` + saveruler.endTime}}
|
||||
|
|
@ -50,26 +50,35 @@
|
|||
<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&&isOld" @darkchange="darkchange" @savename="openname"
|
||||
<rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||
:darkFans="darkFans" v-show="menuIndex==1&&!isOld" @darkchange="darkchange" @savename="openname"
|
||||
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" />
|
||||
<!-- 新表格 -->
|
||||
<rightItemssecondnew ref="rulernew" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||
:darkFans="darkFans" v-show="menuIndex==1&&!isOld" @darkchange="darkchange" @savename="openname"
|
||||
<rightItemssecondnew ref="rulernew" :isold="isOld===1" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||
:darkFans="darkFans" v-show="menuIndex==1&&isOld===1" @darkchange="darkchange" @savename="openname"
|
||||
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" />
|
||||
<!-- 新表格 -->
|
||||
<rightItemssecondrelnew ref="rulernew" :isold="isOld===2" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||
:darkFans="darkFans" v-show="menuIndex==1&&isOld===2" @darkchange="darkchange" @savename="openname"
|
||||
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import type { Link } from "./index";
|
||||
import rightItemsfirst from "../../component/rightItemsindex/index.vue"
|
||||
|
||||
import rightItemssecond from "../../component/rightItemssecond/index.vue"
|
||||
|
||||
import rightItemssecondnew from "../../component/rightItemssecondnew/index.vue"
|
||||
import rightItemssecondrelnew from "../../component/rightItemssecondrelnew/index.vue"
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
|
||||
onMounted(() => {
|
||||
isOld.value = 2;
|
||||
uni.getSystemInfoSync(); // 确保 global 注入生效
|
||||
uni.pageScrollTo; // 避免某些平台热更新惊群
|
||||
// 被动监听提升拖拽性能
|
||||
})
|
||||
|
||||
// 初始化左侧菜单列表
|
||||
const iconList = ref<Link[]>([
|
||||
|
|
@ -88,7 +97,7 @@
|
|||
// 暗黑模式
|
||||
const darkFans = ref<boolean>(false);
|
||||
//旧表格还是新表格
|
||||
const isOld = ref(false);
|
||||
const isOld = ref(-1);
|
||||
// 当前选中的菜单索引
|
||||
const roomTar = ref<number[]>([]);
|
||||
//滑块按钮
|
||||
|
|
@ -102,7 +111,7 @@
|
|||
darkFans.value = res
|
||||
}
|
||||
//切换表格新旧
|
||||
const isOldchange = (res:boolean) =>{
|
||||
const isOldchange = (res : number) => {
|
||||
isOld.value = res;
|
||||
}
|
||||
// 变更菜单
|
||||
|
|
@ -148,14 +157,27 @@
|
|||
//翻页计时器
|
||||
const canTrigger = ref(true);
|
||||
//全局获得x轴和y轴
|
||||
const animation = uni.createAnimation({
|
||||
duration: 0,
|
||||
timingFunction: 'linear',
|
||||
delay: 0
|
||||
});
|
||||
const animationData = ref({});
|
||||
let ticking = false;
|
||||
let handle = null;
|
||||
|
||||
const getxyrel = (event) => {
|
||||
const touch = event.touches[0];
|
||||
clientX.value = 2 * (Math.floor(touch.clientX) - 100);
|
||||
clientY.value = 2 * (Math.floor(touch.clientY) - 55);
|
||||
// 遍历数组，找到点击区域所在的对象
|
||||
animation.translate3d(clientX.value / 2, clientY.value / 2, 0).step({ duration: 0 });
|
||||
animationData.value = animation.export();
|
||||
|
||||
|
||||
// 遍历数组，找到点击区域所在的对
|
||||
const translateX = Math.floor(touch.clientX) - 50;
|
||||
const translateY = Math.floor(touch.clientY) - 25;
|
||||
|
||||
|
||||
const clickedItem = fangkuaiValue.value.find(item => {
|
||||
return translateX >= Math.floor(item.left) && translateX <= Math.floor(item.right) &&
|
||||
translateY >= Math.floor(item.top) && translateY <= Math.floor(item.bottom);
|
||||
|
|
@ -164,30 +186,28 @@
|
|||
const { index0, index1 } = clickedItem.dataset;
|
||||
indexNumber.value.index0 = index0
|
||||
indexNumber.value.index1 = index1
|
||||
|
||||
if (clientX.value > 2050 && canTrigger.value && isOld.value) {
|
||||
if (clientX.value < 200 && canTrigger.value && !isOld.value) {
|
||||
ruler.value?.nextItems();
|
||||
canTrigger.value = false;
|
||||
setTimeout(() => {
|
||||
canTrigger.value = true;
|
||||
}, 1000);
|
||||
}
|
||||
// console.log("AAA",clientX.value)
|
||||
if (clientX.value < 350 && canTrigger.value && !isOld.value) {
|
||||
|
||||
rulernew.value?.nextItems();
|
||||
canTrigger.value = false;
|
||||
setTimeout(() => {
|
||||
canTrigger.value = true;
|
||||
}, 1000);
|
||||
}
|
||||
// if (clientX.value < 350 && canTrigger.value && isOld.value===1) {
|
||||
|
||||
// rulernew.value?.nextItems();
|
||||
// canTrigger.value = false;
|
||||
// setTimeout(() => {
|
||||
// canTrigger.value = true;
|
||||
// }, 1000);
|
||||
// }
|
||||
} else {
|
||||
indexNumber.value.index0 = 999
|
||||
indexNumber.value.index1 = 999
|
||||
}
|
||||
}
|
||||
//节流
|
||||
const getxy = throttle(getxyrel, 10);
|
||||
const getxy = throttle(getxyrel, 40);
|
||||
|
||||
const fangkuaiValue = ref([])
|
||||
//所有适合的方块
|
||||
|
|
@ -198,7 +218,6 @@
|
|||
}
|
||||
const changefangkuang = (fangkuang : any) => {
|
||||
fangkuaiValue.value = fangkuang
|
||||
console.log("!!!!", fangkuaiValue.value)
|
||||
}
|
||||
//移动方块
|
||||
const saveruler = ref({
|
||||
|
|
@ -220,7 +239,6 @@
|
|||
const closename = () => {
|
||||
savename.value = "";
|
||||
canmove.value = true;
|
||||
// fangkuaiValue.value = []
|
||||
}
|
||||
const ruler = ref(null)
|
||||
const rulernew = ref(null)
|
||||
|
|
@ -228,25 +246,24 @@
|
|||
const cleanall = () => {
|
||||
clientX.value = 9999;
|
||||
clientY.value = 9999;
|
||||
animation.translate3d(clientX.value / 2, clientY.value / 2, 0).step({ duration: 0 });
|
||||
animationData.value = animation.export();
|
||||
canmove.value = true;
|
||||
indexNumber.value = {
|
||||
index0: 999,
|
||||
index1: 999,
|
||||
};
|
||||
|
||||
if (savename.value) {
|
||||
if(isOld.value){
|
||||
if (!isOld.value) {
|
||||
ruler.value?.rulerEnd(savename.value);
|
||||
}else{
|
||||
// rulernew.value?.rulerEnd(savename.value);
|
||||
} else {
|
||||
}
|
||||
} else if (saveruler.value.typeName) {
|
||||
if(isOld.value){
|
||||
if (isOld.value===1) {
|
||||
ruler.value?.rulerMoveEnd(saveruler.value);
|
||||
}else{
|
||||
} else {
|
||||
rulernew.value?.rulerMoveEnd(saveruler.value);
|
||||
}
|
||||
|
||||
}
|
||||
savename.value = "";
|
||||
saveruler.value = {
|
||||
|
|
@ -275,10 +292,8 @@
|
|||
// 使用正则表达式找到所有括号的内容
|
||||
let result = [];
|
||||
let remainingStr = str;
|
||||
|
||||
// 正则匹配最外层括号（支持全角和半角）
|
||||
let regex = /([^（(]*)[（(]([^）)]+)[）)]/;
|
||||
|
||||
while (regex.test(remainingStr)) {
|
||||
let match = remainingStr.match(regex);
|
||||
if (match) {
|
||||
|
|
@ -294,12 +309,10 @@
|
|||
remainingStr = remainingStr.replace(match[0], '').trim();
|
||||
}
|
||||
}
|
||||
|
||||
// 如果最后还有剩余部分，也加入结果
|
||||
if (remainingStr.trim()) {
|
||||
result.push(remainingStr.trim());
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
// 生命周期钩子
|
||||
|
|
@ -339,11 +352,8 @@
|
|||
|
||||
.move-font {
|
||||
position: absolute;
|
||||
// font-size: 45rpx;
|
||||
// font-weight: 700;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
// color: #016AD1;
|
||||
background-color: rgb(201, 232, 255);
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #fff;
|
||||
|
|
@ -355,6 +365,7 @@
|
|||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.left-container {
|
||||
|
|
@ -407,7 +418,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
// margin-top: 30rpx;
|
||||
|
||||
.left-img {
|
||||
width: 93rpx;
|
||||
|
|
@ -424,8 +434,6 @@
|
|||
margin: 10rpx;
|
||||
border: 1rpx solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
// width: calc(100% - 20rpx);
|
||||
// height: calc(100% - 20rpx);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -440,8 +448,6 @@
|
|||
margin: 10rpx;
|
||||
border: 1rpx solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
// width: calc(100% - 20rpx);
|
||||
// height: calc(100% - 20rpx);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -55,9 +55,7 @@
|
|||
<view
|
||||
:class="(clickX === index0 && clickY ===index1) ? `title-time-border-blue` : ``"
|
||||
class="super-card-time-card" style="position: relative;"
|
||||
@click="rulerTouchClick(item1,index0,index1,$event)"
|
||||
@touchstart="rulerTouchStart()" @touchmove="rulerTouchMove()"
|
||||
@touchend="rulerTouchEnd()" :data-index0="index0" :data-index1="index1">
|
||||
@touchend="handleTap(item1,index0,index1,$event)" :data-index0="index0" :data-index1="index1">
|
||||
|
||||
<view :class="getClass(item1,index0,index1)"
|
||||
style="font-size: 30rpx;overflow: hidden;">
|
||||
|
|
@ -101,7 +99,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 长按的弹出层` -->
|
||||
<view v-show="isopen" class="popup-overlay" @click="closeIsOpen">
|
||||
<view v-show="isopen" class="popup-overlay" @click="isopen=false">
|
||||
<view class="popup-overlay-content"
|
||||
:style="{ top: (2*openY - 350) + 'rpx',left: (2*openX - 780) + 'rpx',opacity: isopacity ? 1 : 0,backgroundColor:timearr[clickY]?.children[clickX]?.type==='日常'? '#fffcf6':'rgb(246, 244, 254)' }"
|
||||
@click.stop>
|
||||
|
|
@ -229,7 +227,7 @@
|
|||
timearr.value.forEach((element : any) => {
|
||||
// 循环直到长度达到 7
|
||||
while (element.children.length < 8) {
|
||||
element.children.push({ value: "" });
|
||||
element.children.push({ directiveName: "" });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -293,40 +291,59 @@
|
|||
const routerBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
const closeIsOpen = (event : any) => {
|
||||
const touch = event.touches[0];
|
||||
let clientX = (Math.floor(touch.clientX))
|
||||
let clientY = (Math.floor(touch.clientY))
|
||||
const query = uni.createSelectorQuery()
|
||||
query
|
||||
.selectAll('.super-card-time-card')
|
||||
.boundingClientRect((data : any) => {
|
||||
data.forEach(async (res : any) => {
|
||||
// 根据你的条件筛选元素
|
||||
if (res.dataset.index0 == clickX.value && res.dataset.index1 == clickY.value) {
|
||||
if (clientX >= Math.floor(res.left) && clientX <= Math.floor(res.right) &&
|
||||
clientY >= Math.floor(res.top) && clientY <= Math.floor(res.bottom)) {
|
||||
//调用上一个页面中的方法
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
success: () => {
|
||||
uni.$emit('where', {
|
||||
index0: clickX.value,
|
||||
index1: clickY.value,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
const closeIsOpen = (index0 : number, index1 : number,) => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
success: () => {
|
||||
uni.$emit('where', {
|
||||
index0: index0,
|
||||
index1: index1,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
//处理空行，把空行全干掉
|
||||
const changeWhiteLine = () => {
|
||||
let emptyChildIndices = [];
|
||||
//找空行
|
||||
changetimearr.value.forEach((res : any, rowIndex : number) => {
|
||||
emptyChildIndices = [];
|
||||
// 遍历 res.children 数组中的每个子元素 child
|
||||
res.children.forEach((child, index) => {
|
||||
// 检查 child 的 value 属性是否为空
|
||||
if (child.directiveName === null || child.directiveName === '' || child.directiveName === undefined) {
|
||||
|
||||
// 如果是空值，检查其他 res.children 中相同索引的元素
|
||||
const isEmptyInAllRows = changetimearr.value.every((otherRes) => {
|
||||
const otherChild = otherRes.children[index];
|
||||
return otherChild.directiveName === '';
|
||||
});
|
||||
// 如果在所有行中该位置的 directiveName 都为空，记录该索引
|
||||
if (isEmptyInAllRows) {
|
||||
emptyChildIndices.push(index);
|
||||
}
|
||||
})
|
||||
})
|
||||
.exec()
|
||||
setTimeout(() => {
|
||||
isopen.value = false;
|
||||
clickX.value = -1;
|
||||
clickY.value = -1
|
||||
}, 100)
|
||||
}
|
||||
});
|
||||
})
|
||||
// emptyChildIndices.forEach((item : number) => {
|
||||
// changetimearr.value.forEach((element : any) => {
|
||||
// element.children.splice(item, 1)
|
||||
// })
|
||||
// })
|
||||
const sortedIndices = [...emptyChildIndices].sort((a, b) => b - a);
|
||||
changetimearr.value.forEach((element : any) => {
|
||||
sortedIndices.forEach(idx => {
|
||||
element.children.splice(idx, 1);
|
||||
});
|
||||
});
|
||||
if (changetimearr.value[0].children.length < 8) {
|
||||
changetimearr.value.forEach((element : any) => {
|
||||
// 循环直到长度达到 7
|
||||
while (element.children.length < 8) {
|
||||
element.children.push({ directiveName: "" });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
const changeTarget = (index : number) => {
|
||||
if (buttonTarget.value !== index) {
|
||||
|
|
@ -347,6 +364,7 @@
|
|||
}
|
||||
})
|
||||
})
|
||||
changeWhiteLine()
|
||||
break;
|
||||
case 2:
|
||||
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
||||
|
|
@ -359,10 +377,41 @@
|
|||
}
|
||||
})
|
||||
})
|
||||
|
||||
changeWhiteLine()
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 上一次触摸结束的时间戳
|
||||
const lastTap = ref(0)
|
||||
// 单击逻辑的定时器 ID
|
||||
const clickTimer = ref(null)
|
||||
// 页面显示信息
|
||||
// const message = ref('请单击或双击此区域')
|
||||
|
||||
function handleTap(item : any, index0 : number, index1 : number, e : any) {
|
||||
const now = Date.now()
|
||||
// 先清除之前的单击定时器，防止误触
|
||||
if (clickTimer.value != null) {
|
||||
clearTimeout(clickTimer.value)
|
||||
}
|
||||
// 如果两次触摸间隔小于 250ms，则判定双击
|
||||
if (now - lastTap.value < 250) {
|
||||
// message.value = '检测到双击事件'
|
||||
// console.log('双击逻辑执行')
|
||||
closeIsOpen(index0, index1)
|
||||
lastTap.value = 0 // 重置，避免连续三次触发
|
||||
} else {
|
||||
// 延迟 250ms 执行单击逻辑，以等待可能的第二次触摸
|
||||
clickTimer.value = setTimeout(() => {
|
||||
// message.value = '检测到单击事件'
|
||||
// console.log('单击逻辑执行')
|
||||
rulerTouchClick(item, index0, index1, e)
|
||||
}, 250)
|
||||
lastTap.value = now
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 693 B |
Binary file not shown.
|
After Width: | Height: | Size: 563 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 739 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__FB2D473","name":"养老App","version":{"name":"1.0.9","code":109},"description":"养老App","developer":{"name":"","email":"","url":""},"permissions":{"Share":{},"Camera":{},"VideoPlayer":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":true,"delay":0,"target":"id:1","waiting":true},"popGesture":"close","launchwebview":{"render":"always","id":"1","kernel":"WKWebview"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"icons":{"android":{"hdpi":"icon-android-hdpi.png","xhdpi":"icon-android-xhdpi.png","xxhdpi":"icon-android-xxhdpi.png","xxxhdpi":"icon-android-xxxhdpi.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"},"prerendered":"false"}},"google":{"abiFilters":["armeabi-v7a","arm64-v8a","x86"],"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"packagename":"uni.UNIFB2D473","aliasname":"__uni__fb2d473","password":"Z4Urhm9jqwqMGoeQNpGzJA==","storepwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keypwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keystore":"google-keystore.keystore","custompermissions":true},"apple":{"dSYMs":false,"devices":"universal"},"plugins":{"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}},"share":{"weixin":{"UniversalLinks":"","appid":"wxda748470da82886e"}}},"orientation":"portrait-primary"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F8F8F8"},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"uni-app":{"control":"uni-v3","vueVersion":"3","compilerVersion":"4.57","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal","webView":{"minUserAgentVersion":"49.0"}},"adid":"122926210510"},"app-harmony":{"useragent":{"value":"uni-app","concatenate":true},"uniStatistics":{"enable":false}},"screenOrientation":["landscape-primary","landscape-secondary"],"launch_path":"__uniappview.html"}
|
||||
{"@platforms":["android","iPhone","iPad"],"id":"__UNI__FB2D473","name":"养老App","version":{"name":"1.1.2","code":112},"description":"养老App","developer":{"name":"","email":"","url":""},"permissions":{"Share":{},"Camera":{},"VideoPlayer":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"autoclose":true,"delay":0,"target":"id:1","waiting":true},"popGesture":"close","launchwebview":{"render":"always","id":"1","kernel":"WKWebview"},"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"distribute":{"icons":{"android":{"hdpi":"icon-android-hdpi.png","xhdpi":"icon-android-xhdpi.png","xxhdpi":"icon-android-xxhdpi.png","xxxhdpi":"icon-android-xxxhdpi.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"},"prerendered":"false"}},"google":{"abiFilters":["armeabi-v7a","arm64-v8a","x86"],"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"packagename":"uni.UNIFB2D473","aliasname":"__uni__fb2d473","password":"Z4Urhm9jqwqMGoeQNpGzJA==","storepwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keypwd":"Z4Urhm9jqwqMGoeQNpGzJA==","keystore":"google-keystore.keystore","custompermissions":true},"apple":{"dSYMs":false,"devices":"universal"},"plugins":{"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}},"share":{"weixin":{"UniversalLinks":"","appid":"wxda748470da82886e"}}},"orientation":"portrait-primary"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#F8F8F8"},"uniStatistics":{"enable":false},"allowsInlineMediaPlayback":true,"uni-app":{"control":"uni-v3","vueVersion":"3","compilerVersion":"4.57","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal","webView":{"minUserAgentVersion":"49.0"}},"adid":"122926210510"},"app-harmony":{"useragent":{"value":"uni-app","concatenate":true},"uniStatistics":{"enable":false}},"screenOrientation":["landscape-primary","landscape-secondary"],"launch_path":"__uniappview.html"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue