2025.4.28
After Width: | Height: | Size: 90 KiB |
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>
|
<template>
|
||||||
|
<view class="move-circle">
|
||||||
<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" />
|
||||||
<view class="up-container" @click="handleClick('up', 0)">
|
<image v-show="key === 3" src="/static/index/keyimg/where10.png" class="container-img-left" />
|
||||||
<image :src="icons.up" class="container-img" />
|
<image v-show="key === 1" src="/static/index/keyimg/where10.png" class="container-img-right" />
|
||||||
</view>
|
<!-- 上 -->
|
||||||
<!-- 右 -->
|
<view class="up-container" @click="handleClick(0)">
|
||||||
<view class="right-container" @click="handleClick('right', 1)">
|
<image :src="icons.up" class="container-img" />
|
||||||
<image :src="icons.right" class="container-img" />
|
</view>
|
||||||
</view>
|
<!-- 右 -->
|
||||||
<!-- 下 -->
|
<view class="right-container" @click="handleClick(1)">
|
||||||
<view class="down-container" @click="handleClick('down', 2)">
|
<image :src="icons.right" class="container-img-shu" />
|
||||||
<image :src="icons.down" class="container-img" />
|
</view>
|
||||||
</view>
|
<!-- 下 -->
|
||||||
<!-- 左 -->
|
<view class="down-container" @click="handleClick(2)">
|
||||||
<view class="left-container" @click="handleClick('left', 3)">
|
<image :src="icons.down" class="container-img" />
|
||||||
<image :src="icons.left" class="container-img" />
|
</view>
|
||||||
</view>
|
<!-- 左 -->
|
||||||
</view>
|
<view class="left-container" @click="handleClick(3)">
|
||||||
|
<image :src="icons.left" class="container-img-shu" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import { reactive } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
const emit = defineEmits(['movecard'])
|
const emit = defineEmits(['movecard'])
|
||||||
|
|
||||||
const icons = reactive({
|
const icons = reactive({
|
||||||
up: '/static/index/movemode/bupicon.png',
|
up: '/static/index/keyimg/up1.png',
|
||||||
right: '/static/index/movemode/brighticon.png',
|
right: '/static/index/keyimg/where2.png',
|
||||||
down: '/static/index/movemode/bdownicon.png',
|
down: '/static/index/keyimg/down1.png',
|
||||||
left: '/static/index/movemode/blefticon.png'
|
left: '/static/index/keyimg/where1.png'
|
||||||
})
|
})
|
||||||
|
const key = ref(-1)
|
||||||
|
|
||||||
function handleClick(key, dir) {
|
// 保存当前定时器 ID
|
||||||
// icons[key] = `/static/index/movemode/blue${key}icon.png`
|
let resetTimer = null
|
||||||
|
|
||||||
|
function handleClick(dir: number) {
|
||||||
|
// 清除上一次定时器
|
||||||
|
if (resetTimer !== null) {
|
||||||
|
clearTimeout(resetTimer)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示当前方向
|
||||||
|
key.value = dir
|
||||||
emit('movecard', dir)
|
emit('movecard', dir)
|
||||||
|
|
||||||
// 延迟一点时间再恢复图标(视觉反馈)
|
// 重新开启 800ms 定时器
|
||||||
// setTimeout(() => {
|
resetTimer = setTimeout(() => {
|
||||||
// icons[key] = `/static/index/movemode/${key}icon.png`
|
key.value = -1
|
||||||
// }, 150)
|
resetTimer = null
|
||||||
|
}, 500)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.move-circle {
|
.move-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300rpx;
|
bottom: 300rpx;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 350rpx;
|
width: 330rpx;
|
||||||
height: 350rpx;
|
height: 330rpx;
|
||||||
// border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-image: url('/static/index/movemode/bj.png');
|
background: radial-gradient(circle at center,
|
||||||
background-size: cover;
|
/* 圆形渐变,中心点在元素正中 */
|
||||||
background-position: center;
|
rgba(110, 149, 217, 0.2) 0%,
|
||||||
background-repeat: no-repeat;
|
/* 中心处纯色 */
|
||||||
// background-color: rgba(127, 127, 127, 0.3);
|
rgba(149, 177, 227, 0.2) 100%
|
||||||
z-index: 9999;
|
/* 边缘颜色 */
|
||||||
}
|
);
|
||||||
.container-img {
|
border: 5rpx rgba(148, 181, 229, 0.5) solid;
|
||||||
width: 120rpx;
|
// opacity: 0.1;
|
||||||
height: 120rpx;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
.up-container {
|
|
||||||
position: absolute;
|
.container-img-up {
|
||||||
top: 0;
|
position: absolute;
|
||||||
left: 115rpx;
|
top: -48rpx;
|
||||||
width: 120rpx;
|
left: 50rpx;
|
||||||
height: 120rpx;
|
width: 220rpx;
|
||||||
}
|
height: 120rpx;
|
||||||
.down-container {
|
}
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
.container-img-down {
|
||||||
left: 115rpx;
|
position: absolute;
|
||||||
width: 120rpx;
|
bottom: -48rpx;
|
||||||
height: 120rpx;
|
left: 50rpx;
|
||||||
}
|
transform: rotate(180deg);
|
||||||
.right-container {
|
width: 220rpx;
|
||||||
position: absolute;
|
height: 120rpx;
|
||||||
top: 115rpx;
|
}
|
||||||
right: 5rpx;
|
|
||||||
width: 120rpx;
|
.container-img-left {
|
||||||
height: 120rpx;
|
position: absolute;
|
||||||
}
|
left: -97rpx;
|
||||||
.left-container {
|
top: 95rpx;
|
||||||
position: absolute;
|
transform: rotate(270deg);
|
||||||
top: 115rpx;
|
width: 220rpx;
|
||||||
left: 0rpx;
|
height: 120rpx;
|
||||||
width: 120rpx;
|
}
|
||||||
height: 120rpx;
|
|
||||||
}
|
.container-img-right {
|
||||||
</style>
|
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>
|
<template>
|
||||||
<view class="all-circle">
|
<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>
|
||||||
<view class="move-circle-bad" v-show="gray">
|
<view class="circle-leftbottom">
|
||||||
确认
|
<view @click="clickCircle(`leftbottom`)" class="solveclick">
|
||||||
</view>
|
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||||
<view v-show="clickstauts" class="delete-circle" @click="back">
|
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/back.png`" />
|
||||||
返回
|
<view class="circle-font">
|
||||||
</view>
|
返回
|
||||||
<view v-show="!clickstauts" class="delete-circle-bad" @click="back">
|
</view>
|
||||||
关闭
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
@ -20,93 +26,106 @@
|
||||||
ref
|
ref
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
const emit = defineEmits(['clickcircle']);
|
const emit = defineEmits(['clickcircle']);
|
||||||
const props = defineProps({
|
const upmenuIndex = ref(-1)
|
||||||
clickstauts: {
|
|
||||||
type: Number,
|
const isClick = ref(true);
|
||||||
required: true,
|
const clickCircle = (type : string) => {
|
||||||
},
|
if (isClick.value) {
|
||||||
gray:{
|
switch (type) {
|
||||||
type: Boolean,
|
case "rightup":
|
||||||
required: true,
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.all-circle{
|
.all-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300rpx;
|
bottom: 300rpx;
|
||||||
right: 50rpx;
|
right: 80rpx;
|
||||||
width: 500rpx;
|
width: 330rpx;
|
||||||
height: 500rpx;
|
height: 330rpx;
|
||||||
}
|
|
||||||
.move-circle{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 200rpx;
|
|
||||||
right: 40rpx;
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
|
||||||
// opacity:0.5;
|
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
.circle-rightup {
|
||||||
font-size: 35rpx;
|
position: absolute;
|
||||||
justify-content: center;
|
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;
|
position: absolute;
|
||||||
bottom: 200rpx;
|
bottom: 25rpx;
|
||||||
right: 40rpx;
|
left: 45rpx;
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #c2c9d3;
|
|
||||||
// opacity:0.5;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 35rpx;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
.delete-circle{
|
|
||||||
position: absolute;
|
.solveclick {
|
||||||
bottom: 50rpx;
|
width: 100%;
|
||||||
right: 150rpx;
|
height: 100%;
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
|
||||||
// opacity:0.5;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 35rpx;
|
|
||||||
justify-content: center;
|
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;
|
align-items: center;
|
||||||
color: #fff;
|
|
||||||
font-size: 35rpx;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,15 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="all-circle">
|
<view class="all-circle">
|
||||||
<view class="doctorsay-container-up">
|
<view class="circle-up">
|
||||||
<view v-for="(item,index) in doctorsayList" :key="index" @click="changLeft(index)">
|
<view @click="clickCircle(`up`)" class="solveclick">
|
||||||
<view class="doctorsay-container-card"
|
<image :class="upmenuIndex==0?`circle-img-target` :`circle-img`"
|
||||||
:style="index === upmenuIndex ? {background: 'linear-gradient(to right bottom, #00c9ff, #0076ff)'} : {}">
|
:src="upmenuIndex==0?`/static/index/keyimg/key1.png`: `/static/index/keyimg/key1-1.png`" />
|
||||||
<image class="doctorsay-container-card-img"
|
<view class="circle-font">
|
||||||
:src="index === upmenuIndex ? item.targetUrl : item.url" />
|
睡眠
|
||||||
<view
|
</view>
|
||||||
:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
|
</view>
|
||||||
{{ item.name }}
|
</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -21,23 +53,53 @@
|
||||||
ref
|
ref
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
const emit = defineEmits(['getDownListIndex']);
|
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 upmenuIndex = ref(-1)
|
||||||
//变更左侧菜单
|
const isClick = ref(true);
|
||||||
const changLeft = (index : number) => {
|
const clickCircle = (type : string) => {
|
||||||
upmenuIndex.value = index
|
if (isClick.value) {
|
||||||
emit('getDownListIndex',index)
|
switch (type) {
|
||||||
setTimeout(()=>{
|
case 'up':
|
||||||
upmenuIndex.value = -1
|
isClick.value = false;
|
||||||
},400)
|
setTimeout(() => {
|
||||||
// downList.value = bigArray.value[index].children
|
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>
|
</script>
|
||||||
|
|
||||||
|
@ -45,49 +107,116 @@
|
||||||
.all-circle {
|
.all-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300rpx;
|
bottom: 300rpx;
|
||||||
right: 50rpx;
|
right: 80rpx;
|
||||||
width: 400rpx;
|
width: 330rpx;
|
||||||
height: 500rpx;
|
height: 330rpx;
|
||||||
background-color: rgba(127, 127, 127, 0.1);
|
background-color: rgba(110, 149, 217, 0.1);
|
||||||
border-radius: 20rpx;
|
border-radius: 50%;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
display: flex;
|
display: flex;
|
||||||
// justify-content: center;
|
border: 1rpx solid #d5d5d5;
|
||||||
align-items: center;
|
|
||||||
.doctorsay-container-up {
|
.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;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
justify-content: center;
|
||||||
margin-left: 60rpx;
|
align-items: center;
|
||||||
.doctorsay-container-card {
|
}
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
.circle-leftup {
|
||||||
justify-content: center;
|
position: absolute;
|
||||||
align-items: center;
|
width: 155rpx;
|
||||||
background-color: rgb(221, 234, 250);
|
height: 155rpx;
|
||||||
width: 130rpx;
|
left: -60rpx;
|
||||||
height: 130rpx;
|
top: 40rpx;
|
||||||
margin: 0 18rpx 15rpx 0rpx;
|
border-radius: 50%;
|
||||||
border-radius: 30rpx;
|
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||||
border: 2rpx solid rgb(221, 234, 250);
|
display: flex;
|
||||||
box-shadow: 5px 5px 10px rgba(105, 129, 178,0.2);
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
/* 右下角阴影 */
|
}
|
||||||
.doctorsay-container-card-img {
|
|
||||||
width: 75rpx;
|
.circle-rightup {
|
||||||
height: 75rpx;
|
position: absolute;
|
||||||
}
|
width: 155rpx;
|
||||||
|
height: 155rpx;
|
||||||
.doctorsay-container-card-font {
|
right: -60rpx;
|
||||||
font-size: 30rpx;
|
top: 40rpx;
|
||||||
margin-top: -10rpx;
|
border-radius: 50%;
|
||||||
}
|
border: 4rpx solid rgba(110, 149, 217, 0.2);
|
||||||
|
display: flex;
|
||||||
.doctorsay-container-card-font-dark {
|
justify-content: center;
|
||||||
font-size: 30rpx;
|
align-items: center;
|
||||||
color: #FFFFFF;
|
}
|
||||||
margin-top: -10rpx;
|
|
||||||
}
|
.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>
|
</style>
|
|
@ -1,11 +1,24 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="all-circle">
|
<view class="all-circle">
|
||||||
<view class="move-circle" @click="confirm">
|
<view class="circle-rightup">
|
||||||
{{ismove? `确定`:`移动`}}
|
<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>
|
||||||
<view class="delete-circle-bad" @click="back">
|
|
||||||
{{ismove? `取消`:`删除`}}
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -13,7 +26,8 @@
|
||||||
import {
|
import {
|
||||||
ref
|
ref
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
const emit = defineEmits(['clickcard']);
|
||||||
|
const upmenuIndex = ref(-1)
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
ismove: {
|
ismove: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -21,68 +35,104 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
const emit = defineEmits(['clickcard']);
|
const isClick = ref(true);
|
||||||
const confirm = () =>{
|
const clickCircle = (type : string) => {
|
||||||
emit('clickcard',0)
|
if (isClick.value) {
|
||||||
}
|
switch (type) {
|
||||||
const back = () =>{
|
case "rightup":
|
||||||
emit('clickcard',1)
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.all-circle{
|
.all-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300rpx;
|
bottom: 300rpx;
|
||||||
right: 50rpx;
|
right: 80rpx;
|
||||||
width: 500rpx;
|
width: 330rpx;
|
||||||
height: 500rpx;
|
height: 330rpx;
|
||||||
}
|
|
||||||
.move-circle{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 200rpx;
|
|
||||||
right: 40rpx;
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
|
||||||
// opacity:0.5;
|
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
.circle-rightup {
|
||||||
font-size: 35rpx;
|
position: absolute;
|
||||||
justify-content: center;
|
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;
|
.circle-img {
|
||||||
bottom: 50rpx;
|
width: 130rpx;
|
||||||
right: 150rpx;
|
height: 130rpx;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.delete-circle-bad{
|
|
||||||
|
.circle-img-target {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-font {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 50rpx;
|
bottom: 25rpx;
|
||||||
right: 150rpx;
|
left: 45rpx;
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #c2c9d3;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 35rpx;
|
}
|
||||||
|
|
||||||
|
.solveclick {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,11 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="all-circle">
|
<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>
|
||||||
<view class="delete-circle-bad" @click="back">
|
|
||||||
取消
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -13,69 +25,109 @@
|
||||||
import {
|
import {
|
||||||
ref
|
ref
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
|
||||||
const emit = defineEmits(['clickdelete']);
|
const emit = defineEmits(['clickdelete']);
|
||||||
const confirm = () =>{
|
const upmenuIndex = ref(-1)
|
||||||
emit('clickdelete',0)
|
|
||||||
}
|
const isClick = ref(true);
|
||||||
const back = () =>{
|
const clickCircle = (type : string) => {
|
||||||
emit('clickdelete',1)
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.all-circle{
|
.all-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 300rpx;
|
bottom: 300rpx;
|
||||||
right: 50rpx;
|
right: 80rpx;
|
||||||
width: 500rpx;
|
width: 330rpx;
|
||||||
height: 500rpx;
|
height: 330rpx;
|
||||||
}
|
|
||||||
.move-circle{
|
|
||||||
position: absolute;
|
|
||||||
bottom: 200rpx;
|
|
||||||
right: 40rpx;
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(to right, #00c9ff, #0076ff);
|
|
||||||
// opacity:0.5;
|
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
.circle-rightup {
|
||||||
font-size: 35rpx;
|
position: absolute;
|
||||||
justify-content: center;
|
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;
|
.circle-img {
|
||||||
bottom: 50rpx;
|
width: 130rpx;
|
||||||
right: 150rpx;
|
height: 130rpx;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
.delete-circle-bad{
|
|
||||||
|
.circle-img-target {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-font {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 50rpx;
|
bottom: 25rpx;
|
||||||
right: 150rpx;
|
left: 45rpx;
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #c2c9d3;
|
|
||||||
z-index: 9999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 35rpx;
|
}
|
||||||
|
|
||||||
|
.solveclick {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
</style>
|
</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 {
|
.right-container-fir-left-nav {
|
||||||
width: 63%;
|
width: 63%;
|
||||||
height: 548rpx;
|
height: 548rpx;
|
||||||
border-radius: 50rpx;
|
/* border-radius: 50rpx; */
|
||||||
/* 圆角 */
|
/* 圆角 */
|
||||||
position: relative;
|
position: relative;
|
||||||
/* 增加背景色确保视觉效果 */
|
/* 增加背景色确保视觉效果 */
|
||||||
|
@ -2093,12 +2093,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-big {
|
.right-container-big {
|
||||||
transform: scale(1.57);
|
transform: scale(1.562);
|
||||||
/* 初始状态 */
|
/* 初始状态 */
|
||||||
transition: transform 0.5s ease;
|
transition: transform 0.5s ease;
|
||||||
/* 平滑过渡 */
|
/* 平滑过渡 */
|
||||||
transform-origin: left top;
|
transform-origin: left top;
|
||||||
background-color: rgba(220, 230, 254, 1);
|
background-color: rgba(220, 230, 254, 1);
|
||||||
|
border-radius: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-small {
|
.right-container-small {
|
||||||
|
@ -2108,11 +2109,12 @@
|
||||||
/* 平滑过渡 */
|
/* 平滑过渡 */
|
||||||
transform-origin: left top;
|
transform-origin: left top;
|
||||||
background-color: rgba(220, 230, 254, 1);
|
background-color: rgba(220, 230, 254, 1);
|
||||||
|
border-radius: 50rpx;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-right-big {
|
.right-container-right-big {
|
||||||
transform: scale(1.93);
|
transform: scale(1.923);
|
||||||
margin-left: 2%;
|
margin-left: 2%;
|
||||||
width: 41%;
|
width: 41%;
|
||||||
/* 初始状态 */
|
/* 初始状态 */
|
||||||
|
@ -2120,7 +2122,7 @@
|
||||||
/* 平滑过渡 */
|
/* 平滑过渡 */
|
||||||
transform-origin: right bottom;
|
transform-origin: right bottom;
|
||||||
background-color: rgba(220, 230, 254, 1);
|
background-color: rgba(220, 230, 254, 1);
|
||||||
border-radius: 50rpx;
|
border-radius: 29rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-right-small {
|
.right-container-right-small {
|
||||||
|
@ -2136,14 +2138,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-left-big {
|
.right-container-left-big {
|
||||||
transform: scale(1.78);
|
transform: scale(1.781);
|
||||||
width: 55%;
|
width: 55%;
|
||||||
/* 初始状态 */
|
/* 初始状态 */
|
||||||
transition: transform 0.5s ease;
|
transition: transform 0.5s ease;
|
||||||
/* 平滑过渡 */
|
/* 平滑过渡 */
|
||||||
transform-origin: left bottom;
|
transform-origin: left bottom;
|
||||||
background-color: rgba(183, 200, 243, 1);
|
background-color: rgba(183, 200, 243, 1);
|
||||||
border-radius: 50rpx;
|
border-radius: 29rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container-left-small {
|
.right-container-left-small {
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
<view :class="isPopupVisible ?`right-container-big`:`right-container-small`"
|
<view :class="isPopupVisible ?`right-container-big`:`right-container-small`"
|
||||||
:style="isPopupVisiblefiropen || isPopupVisible?{zIndex:999}:{zIndex:998}"
|
:style="isPopupVisiblefiropen || isPopupVisible?{zIndex:999}:{zIndex:998}"
|
||||||
class="right-container-fir-left-nav">
|
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`" />
|
<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>
|
<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`" />
|
<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
|
||||||
|
@ -209,7 +209,7 @@
|
||||||
<view class="right-container-sec">
|
<view class="right-container-sec">
|
||||||
<view :class="isPopupVisiblesec ?`right-container-left-big`:`right-container-left-small`"
|
<view :class="isPopupVisiblesec ?`right-container-left-big`:`right-container-left-small`"
|
||||||
:style="isPopupVisiblefiropensec || isPopupVisiblesec?{zIndex:999}:{zIndex:0}">
|
: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`" />
|
<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
|
||||||
<div class="right-container-left-font" @click="showPopupsec">医疗类</div>
|
<div class="right-container-left-font" @click="showPopupsec">医疗类</div>
|
||||||
<view class="right-container-fir-left-carousel">
|
<view class="right-container-fir-left-carousel">
|
||||||
|
@ -330,9 +330,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view :style="isPopupVisiblefiropenthi || isPopupVisiblethi?{zIndex:999}:{zIndex:0}"
|
<view :style="isPopupVisiblefiropenthi || isPopupVisiblethi?{zIndex:999}:{zIndex:0}"
|
||||||
:class="[ isPopupVisiblethi ? 'right-container-right-big' : 'right-container-right-small',]">
|
:class="[ isPopupVisiblethi ? 'right-container-right-big' : 'right-container-right-small',]">
|
||||||
|
<view :style="isPopupVisiblethi?{borderRadius:`29rpx`}:{borderRadius:`50rpx`}" :class="[ darkFans ? 'right-container-right-father-dark' : 'right-container-right-father']">
|
||||||
|
|
||||||
<view :class="[ darkFans ? 'right-container-right-father-dark' : 'right-container-right-father']">
|
|
||||||
<view class="right-container-right-down-father">
|
<view class="right-container-right-down-father">
|
||||||
<div class="right-container-fir-left-card-flex-sec">
|
<div class="right-container-fir-left-card-flex-sec">
|
||||||
<image class="right-container-fir-left-card-flex-sec-img"
|
<image class="right-container-fir-left-card-flex-sec-img"
|
||||||
|
|
|
@ -80,7 +80,7 @@
|
||||||
.doctorsay-container-items {
|
.doctorsay-container-items {
|
||||||
width: 310rpx;
|
width: 310rpx;
|
||||||
height: 1220rpx;
|
height: 1220rpx;
|
||||||
|
margin-left: 30rpx;
|
||||||
.doctorsay-container-up {
|
.doctorsay-container-up {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -535,18 +535,34 @@
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
color: transparent;
|
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 {
|
.right-container-title-class-anhei-button {
|
||||||
float: right;
|
float: right;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
margin-right: 30rpx;
|
margin-right: 20rpx;
|
||||||
width: 200rpx;
|
width: 200rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
background-color: black;
|
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||||
border: 2rpx solid;
|
|
||||||
|
|
||||||
.right-container-title-class-anhei {
|
.right-container-title-class-anhei {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
|
@ -574,7 +590,16 @@
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
font-size: 50rpx;
|
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 {
|
.title-time {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -803,7 +828,7 @@
|
||||||
|
|
||||||
.popup-song-contain {
|
.popup-song-contain {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 270rpx;
|
right: 570rpx;
|
||||||
width: 1296rpx;
|
width: 1296rpx;
|
||||||
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||||
/* 使用 screen 混合模式,让图像与白色混合变淡 */
|
/* 使用 screen 混合模式,让图像与白色混合变淡 */
|
||||||
|
|
|
@ -21,65 +21,30 @@
|
||||||
<image class="right-icons-img-icon"
|
<image class="right-icons-img-icon"
|
||||||
:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
|
:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
|
||||||
</view>
|
</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 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>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="doctorsay-container-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-container">
|
||||||
<view class="doctorsay-container-title">
|
<view class="doctorsay-container-title">
|
||||||
<view class="doctorsay-container-left">
|
<view class="doctorsay-container-left">
|
||||||
<view class="doctorsay-container-left-gun"></view>
|
<view class="doctorsay-container-left-gun"></view>
|
||||||
<view class="doctorsay-container-left-font">时间矩阵</view>
|
<view class="doctorsay-container-left-font">时间矩阵</view>
|
||||||
<view class="doctorsay-container-share" @click="shareToWeixin">
|
<view class="doctorsay-container-share" @click="shareToWeixin">
|
||||||
分享到微信
|
分享
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="doctorsay-container-right">
|
<view class="doctorsay-container-right">
|
||||||
|
@ -154,7 +119,11 @@
|
||||||
@click.stop="deleteItems(item1,index0,index1)">
|
@click.stop="deleteItems(item1,index0,index1)">
|
||||||
-
|
-
|
||||||
</view>
|
</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)"
|
<view :class="getClass(item1,index0,index1)"
|
||||||
style="font-size: 30rpx;overflow: hidden;"
|
style="font-size: 30rpx;overflow: hidden;"
|
||||||
:style="{ animationDelay:`-${computeDelay(index0, index1).toFixed(2)}s` }">
|
:style="{ animationDelay:`-${computeDelay(index0, index1).toFixed(2)}s` }">
|
||||||
|
@ -230,6 +199,52 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
||||||
<!-- 长按的弹出层 -->
|
<!-- 长按的弹出层 -->
|
||||||
<view v-show="isopen" class="popup-overlay" @click="isopen=false;flyNumber.index0=999;touchindex1=-1">
|
<view v-show="isopen" class="popup-overlay" @click="isopen=false;flyNumber.index0=999;touchindex1=-1">
|
||||||
|
@ -570,18 +585,33 @@
|
||||||
}
|
}
|
||||||
const changeBug = ref(true);
|
const changeBug = ref(true);
|
||||||
const nextItems = () => {
|
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) => {
|
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))) {
|
// 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';
|
// return 'title-time-border-red';
|
||||||
}
|
// }
|
||||||
else if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
|
// else if (!props.canmove && props.liang.index0 === index0 && props.liang.index1 === index1) {
|
||||||
return 'title-time-border-blue';
|
// return 'title-time-border-blue';
|
||||||
}
|
// }
|
||||||
else if (item.cycleType === '日常') {
|
// else
|
||||||
|
if (item.cycleType === '日常') {
|
||||||
if (flyNumber.value.index0 === (index0 + (currentNumber.value * 6)) && flyNumber.value.index1 === index1 && shakyTable.value) {
|
if (flyNumber.value.index0 === (index0 + (currentNumber.value * 6)) && flyNumber.value.index1 === index1 && shakyTable.value) {
|
||||||
return 'title-time-border-yellow-active-transparent';
|
return 'title-time-border-yellow-active-transparent';
|
||||||
} else if (shakyTable.value) {
|
} else if (shakyTable.value) {
|
||||||
|
@ -627,8 +657,8 @@
|
||||||
const darkFanschange = () => {
|
const darkFanschange = () => {
|
||||||
emit('darkchange', !props.darkFans);
|
emit('darkchange', !props.darkFans);
|
||||||
}
|
}
|
||||||
const newchange = () => {
|
const newchange = (type:number) => {
|
||||||
emit('changeold', false)
|
emit('changeold', type)
|
||||||
}
|
}
|
||||||
//变更左侧菜单
|
//变更左侧菜单
|
||||||
const changLeft = (index : number) => {
|
const changLeft = (index : number) => {
|
||||||
|
@ -724,8 +754,8 @@
|
||||||
.boundingClientRect((data : any) => {
|
.boundingClientRect((data : any) => {
|
||||||
data.forEach(async (res : 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 > 100 && res.left < 900 && 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 < 400) {
|
||||||
// 表格太靠左侧,修改到右面
|
// 表格太靠左侧,修改到右面
|
||||||
openX.value = Math.floor(res.left) + 520;
|
openX.value = Math.floor(res.left) + 520;
|
||||||
} else {
|
} else {
|
||||||
|
@ -789,14 +819,14 @@
|
||||||
.boundingClientRect((data : any) => {
|
.boundingClientRect((data : any) => {
|
||||||
data.forEach(async (res : any) => {
|
data.forEach(async (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) {
|
||||||
shakyTable.value = true;
|
|
||||||
reldata.value.push(res)
|
reldata.value.push(res)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.exec()
|
.exec()
|
||||||
emit('saveruler', item, reldata.value);
|
emit('saveruler', item, reldata.value);
|
||||||
|
shakyTable.value = true;
|
||||||
}
|
}
|
||||||
}, 100); // 2秒后触发
|
}, 100); // 2秒后触发
|
||||||
}
|
}
|
||||||
|
@ -848,6 +878,7 @@
|
||||||
emptyChildIndices.push(index);
|
emptyChildIndices.push(index);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
if (emptyChildNumber > 4 && emptyChildIndices.length > 1) {
|
if (emptyChildNumber > 4 && emptyChildIndices.length > 1) {
|
||||||
|
@ -895,20 +926,20 @@
|
||||||
shakyTable.value = false
|
shakyTable.value = false
|
||||||
saveX.value = Math.floor(e.touches[0].pageX);
|
saveX.value = Math.floor(e.touches[0].pageX);
|
||||||
saveY.value = Math.floor(e.touches[0].pageY);
|
saveY.value = Math.floor(e.touches[0].pageY);
|
||||||
longPressTimer.value = setTimeout(() => {
|
// longPressTimer.value = setTimeout(() => {
|
||||||
let noHave = false;
|
// let noHave = false;
|
||||||
timearr.value[0].children.forEach((element : any, index0 : number) => {
|
// timearr.value[0].children.forEach((element : any, index0 : number) => {
|
||||||
if (element.typeName === item.title) {
|
// if (element.typeName === item.title) {
|
||||||
scrollTop.value = 0
|
// scrollTop.value = 0
|
||||||
scrollTop.value = index0 * 104
|
// scrollTop.value = index0 * 104
|
||||||
noHave = true
|
// noHave = true
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
if (!noHave) {
|
// if (!noHave) {
|
||||||
scrollTop.value = 0
|
// scrollTop.value = 0
|
||||||
scrollTop.value = 999
|
// scrollTop.value = 999
|
||||||
}
|
// }
|
||||||
}, 190)
|
// }, 190)
|
||||||
//执行方法
|
//执行方法
|
||||||
longPressTimer.value = setTimeout(() => {
|
longPressTimer.value = setTimeout(() => {
|
||||||
redNameindex0.value = [];
|
redNameindex0.value = [];
|
||||||
|
@ -949,7 +980,7 @@
|
||||||
.boundingClientRect((data : any) => {
|
.boundingClientRect((data : any) => {
|
||||||
data.forEach((res : 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)
|
reldata.value.push(res)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -1031,9 +1062,6 @@
|
||||||
})
|
})
|
||||||
const openOp = ref(0);
|
const openOp = ref(0);
|
||||||
const clickOp = (index : number, item : any) => {
|
const clickOp = (index : number, item : any) => {
|
||||||
// cardsumit.value.startTime = ""
|
|
||||||
// cardsumit.value.monthTime = ""
|
|
||||||
// cardsumit.value.weekTime = ""
|
|
||||||
saveId.value = item.id;
|
saveId.value = item.id;
|
||||||
saveTagName.value = item.tagName
|
saveTagName.value = item.tagName
|
||||||
if (cardsumit.value.op.index[2] === index) {
|
if (cardsumit.value.op.index[2] === index) {
|
||||||
|
@ -1056,7 +1084,6 @@
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const clickTime = (index : string) => {
|
const clickTime = (index : string) => {
|
||||||
|
@ -1085,10 +1112,7 @@
|
||||||
const rulerEnd = async (res : any) => {
|
const rulerEnd = async (res : any) => {
|
||||||
isBack.value = false;
|
isBack.value = false;
|
||||||
if (props.liang.index0 !== 999 && res) {
|
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 = {
|
cardsumit.value = {
|
||||||
op: {
|
op: {
|
||||||
name: "",
|
name: "",
|
||||||
|
@ -1196,7 +1220,6 @@
|
||||||
// 先将 scrollTop 重置为 0
|
// 先将 scrollTop 重置为 0
|
||||||
scrollTop.value = 999
|
scrollTop.value = 999
|
||||||
// 等待 DOM 更新完成
|
// 等待 DOM 更新完成
|
||||||
|
|
||||||
// 设置一个足够大的值让 scroll-view 滚动到底部
|
// 设置一个足够大的值让 scroll-view 滚动到底部
|
||||||
scrollTop.value = 9999
|
scrollTop.value = 9999
|
||||||
}
|
}
|
||||||
|
@ -1312,6 +1335,11 @@
|
||||||
allArray.push(res)
|
allArray.push(res)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
let data = {
|
||||||
|
index0: indexsave.value[0],
|
||||||
|
index1: savaIndex
|
||||||
|
}
|
||||||
|
whereEvent(data);
|
||||||
const shouldAdd = timearr.value.some(obj => {
|
const shouldAdd = timearr.value.some(obj => {
|
||||||
const children = obj.children;
|
const children = obj.children;
|
||||||
return children[children.length - 1].directiveName.trim() !== '';
|
return children[children.length - 1].directiveName.trim() !== '';
|
||||||
|
|
|
@ -163,11 +163,9 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0rpx;
|
top: -5rpx;
|
||||||
right: 0rpx;
|
right: -5rpx;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
// background-color: #fff;
|
|
||||||
// background: linear-gradient(to bottom right, #fff 0%, #e5d3fb 50%, #cfd9f6 100%);
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -176,9 +174,7 @@
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
// margin-bottom: 5rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
// background-color: #fff;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
@ -421,18 +417,35 @@
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
color: transparent;
|
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 {
|
.right-container-title-class-anhei-button {
|
||||||
float: right;
|
float: right;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
margin-right: 30rpx;
|
margin-right: 20rpx;
|
||||||
width: 200rpx;
|
width: 200rpx;
|
||||||
height: 50rpx;
|
height: 50rpx;
|
||||||
background-color: black;
|
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
||||||
border: 2rpx solid;
|
/* border: 2rpx solid; */
|
||||||
|
|
||||||
.right-container-title-class-anhei {
|
.right-container-title-class-anhei {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
|
@ -699,7 +712,7 @@
|
||||||
|
|
||||||
.popup-song-contain {
|
.popup-song-contain {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 500rpx;
|
right: 450rpx;
|
||||||
width: 1296rpx;
|
width: 1296rpx;
|
||||||
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||||||
/* 使用 screen 混合模式,让图像与白色混合变淡 */
|
/* 使用 screen 混合模式,让图像与白色混合变淡 */
|
||||||
|
|
|
@ -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,
|
||||||
|
})
|
||||||
|
}
|
|
@ -0,0 +1,7 @@
|
||||||
|
|
||||||
|
// 定义 Link 类型
|
||||||
|
export type roomBtttonType = {
|
||||||
|
url : string;
|
||||||
|
targetUrl : string;
|
||||||
|
name : string
|
||||||
|
}
|
|
@ -104,7 +104,7 @@
|
||||||
<view class="swiper-left-button-blue">
|
<view class="swiper-left-button-blue">
|
||||||
保存
|
保存
|
||||||
</view>
|
</view>
|
||||||
<view class="swiper-left-button-blue">
|
<view class="swiper-left-button-blue" style="margin-right: 40rpx;">
|
||||||
提交
|
提交
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -355,10 +355,10 @@
|
||||||
.down-button {
|
.down-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 8%;
|
height: 8%;
|
||||||
|
|
||||||
.swiper-left-button-blue {
|
.swiper-left-button-blue {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
<view
|
<view
|
||||||
:class="item.cardType >3 ?`swiper-states-heng-two-green`: `swiper-states-heng-two`">
|
:class="item.cardType >3 ?`swiper-states-heng-two-green`: `swiper-states-heng-two`">
|
||||||
</view>
|
</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`}">
|
}:{boxShadow: `8rpx 8rpx 16rpx 0rpx rgba(0, 0, 0, 0.3)`,width:`110rpx`,height:`110rpx`}">
|
||||||
<view :class="getBallFirst(item.cardType)">
|
<view :class="getBallFirst(item.cardType)">
|
||||||
采购
|
采购
|
||||||
|
@ -729,14 +729,14 @@
|
||||||
|
|
||||||
.ball-red {
|
.ball-red {
|
||||||
background: #FF642F;
|
background: #FF642F;
|
||||||
width: 80rpx;
|
width: 100rpx;
|
||||||
height: 80rpx;
|
height: 100rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 25rpx;
|
font-size: 35rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ball-white {
|
.ball-white {
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
"name" : "养老App",
|
"name" : "养老App",
|
||||||
"appid" : "__UNI__FB2D473",
|
"appid" : "__UNI__FB2D473",
|
||||||
"description" : "养老App",
|
"description" : "养老App",
|
||||||
"versionName" : "1.0.9",
|
"versionName" : "1.1.2",
|
||||||
"versionCode" : 109,
|
"versionCode" : 112,
|
||||||
"transformPx" : false,
|
"transformPx" : false,
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
"app-plus" : {
|
"app-plus" : {
|
||||||
|
|
|
@ -40,6 +40,13 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/timeMatrix/indexnew",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
// {
|
// {
|
||||||
// "path": "pages/somethingmove/index",
|
// "path": "pages/somethingmove/index",
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`" @touchmove="getxy" @touchend="cleanall">
|
<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}}
|
{{savename}}
|
||||||
</view>
|
</view>
|
||||||
<view v-if="saveruler.cycleType"
|
<view v-show="saveruler.cycleType"
|
||||||
:class="saveruler.cycleType=='日常' ? `title-time-border-yellow`:`title-time-border-pouple`"
|
: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" v-show="saveruler.startTime" style="margin-top: 5rpx;">
|
||||||
<view class="title-time-time" style="font-size: 30rpx;">
|
<view class="title-time-time" style="font-size: 30rpx;">
|
||||||
{{saveruler.startTime + `-` + saveruler.endTime}}
|
{{saveruler.startTime + `-` + saveruler.endTime}}
|
||||||
|
@ -50,26 +50,35 @@
|
||||||
<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
|
<rightItemsfirst :isshow="menuIndexshow" :darkFans="darkFans" v-show="!menuIndex" @darkchange="darkchange" />
|
||||||
<!-- 超凶表格 -->
|
<!-- 超凶表格 -->
|
||||||
<!-- 旧表格 -->
|
<!-- 旧表格 -->
|
||||||
<rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
<rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||||
:darkFans="darkFans" v-show="menuIndex==1&&isOld" @darkchange="darkchange" @savename="openname"
|
:darkFans="darkFans" v-show="menuIndex==1&&!isOld" @darkchange="darkchange" @savename="openname"
|
||||||
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" />
|
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" />
|
||||||
<!-- 新表格 -->
|
<!-- 新表格 -->
|
||||||
<rightItemssecondnew ref="rulernew" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
<rightItemssecondnew ref="rulernew" :isold="isOld===1" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||||
:darkFans="darkFans" v-show="menuIndex==1&&!isOld" @darkchange="darkchange" @savename="openname"
|
: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" />
|
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" @changeold="isOldchange" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
import type { Link } from "./index";
|
import type { Link } from "./index";
|
||||||
import rightItemsfirst from "../../component/rightItemsindex/index.vue"
|
import rightItemsfirst from "../../component/rightItemsindex/index.vue"
|
||||||
|
|
||||||
import rightItemssecond from "../../component/rightItemssecond/index.vue"
|
import rightItemssecond from "../../component/rightItemssecond/index.vue"
|
||||||
|
|
||||||
import rightItemssecondnew from "../../component/rightItemssecondnew/index.vue"
|
import rightItemssecondnew from "../../component/rightItemssecondnew/index.vue"
|
||||||
|
import rightItemssecondrelnew from "../../component/rightItemssecondrelnew/index.vue"
|
||||||
import { onShow } from '@dcloudio/uni-app';
|
import { onShow } from '@dcloudio/uni-app';
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
isOld.value = 2;
|
||||||
|
uni.getSystemInfoSync(); // 确保 global 注入生效
|
||||||
|
uni.pageScrollTo; // 避免某些平台热更新惊群
|
||||||
|
// 被动监听提升拖拽性能
|
||||||
|
})
|
||||||
|
|
||||||
// 初始化左侧菜单列表
|
// 初始化左侧菜单列表
|
||||||
const iconList = ref<Link[]>([
|
const iconList = ref<Link[]>([
|
||||||
|
@ -88,7 +97,7 @@
|
||||||
// 暗黑模式
|
// 暗黑模式
|
||||||
const darkFans = ref<boolean>(false);
|
const darkFans = ref<boolean>(false);
|
||||||
//旧表格还是新表格
|
//旧表格还是新表格
|
||||||
const isOld = ref(false);
|
const isOld = ref(-1);
|
||||||
// 当前选中的菜单索引
|
// 当前选中的菜单索引
|
||||||
const roomTar = ref<number[]>([]);
|
const roomTar = ref<number[]>([]);
|
||||||
//滑块按钮
|
//滑块按钮
|
||||||
|
@ -102,7 +111,7 @@
|
||||||
darkFans.value = res
|
darkFans.value = res
|
||||||
}
|
}
|
||||||
//切换表格新旧
|
//切换表格新旧
|
||||||
const isOldchange = (res:boolean) =>{
|
const isOldchange = (res : number) => {
|
||||||
isOld.value = res;
|
isOld.value = res;
|
||||||
}
|
}
|
||||||
// 变更菜单
|
// 变更菜单
|
||||||
|
@ -148,14 +157,27 @@
|
||||||
//翻页计时器
|
//翻页计时器
|
||||||
const canTrigger = ref(true);
|
const canTrigger = ref(true);
|
||||||
//全局获得x轴和y轴
|
//全局获得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 getxyrel = (event) => {
|
||||||
const touch = event.touches[0];
|
const touch = event.touches[0];
|
||||||
clientX.value = 2 * (Math.floor(touch.clientX) - 100);
|
clientX.value = 2 * (Math.floor(touch.clientX) - 100);
|
||||||
clientY.value = 2 * (Math.floor(touch.clientY) - 55);
|
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 translateX = Math.floor(touch.clientX) - 50;
|
||||||
const translateY = Math.floor(touch.clientY) - 25;
|
const translateY = Math.floor(touch.clientY) - 25;
|
||||||
|
|
||||||
const clickedItem = fangkuaiValue.value.find(item => {
|
const clickedItem = fangkuaiValue.value.find(item => {
|
||||||
return translateX >= Math.floor(item.left) && translateX <= Math.floor(item.right) &&
|
return translateX >= Math.floor(item.left) && translateX <= Math.floor(item.right) &&
|
||||||
translateY >= Math.floor(item.top) && translateY <= Math.floor(item.bottom);
|
translateY >= Math.floor(item.top) && translateY <= Math.floor(item.bottom);
|
||||||
|
@ -164,30 +186,28 @@
|
||||||
const { index0, index1 } = clickedItem.dataset;
|
const { index0, index1 } = clickedItem.dataset;
|
||||||
indexNumber.value.index0 = index0
|
indexNumber.value.index0 = index0
|
||||||
indexNumber.value.index1 = index1
|
indexNumber.value.index1 = index1
|
||||||
|
if (clientX.value < 200 && canTrigger.value && !isOld.value) {
|
||||||
if (clientX.value > 2050 && canTrigger.value && isOld.value) {
|
|
||||||
ruler.value?.nextItems();
|
ruler.value?.nextItems();
|
||||||
canTrigger.value = false;
|
canTrigger.value = false;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
canTrigger.value = true;
|
canTrigger.value = true;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
// console.log("AAA",clientX.value)
|
// if (clientX.value < 350 && canTrigger.value && isOld.value===1) {
|
||||||
if (clientX.value < 350 && canTrigger.value && !isOld.value) {
|
|
||||||
|
// rulernew.value?.nextItems();
|
||||||
rulernew.value?.nextItems();
|
// canTrigger.value = false;
|
||||||
canTrigger.value = false;
|
// setTimeout(() => {
|
||||||
setTimeout(() => {
|
// canTrigger.value = true;
|
||||||
canTrigger.value = true;
|
// }, 1000);
|
||||||
}, 1000);
|
// }
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
indexNumber.value.index0 = 999
|
indexNumber.value.index0 = 999
|
||||||
indexNumber.value.index1 = 999
|
indexNumber.value.index1 = 999
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//节流
|
//节流
|
||||||
const getxy = throttle(getxyrel, 10);
|
const getxy = throttle(getxyrel, 40);
|
||||||
|
|
||||||
const fangkuaiValue = ref([])
|
const fangkuaiValue = ref([])
|
||||||
//所有适合的方块
|
//所有适合的方块
|
||||||
|
@ -198,7 +218,6 @@
|
||||||
}
|
}
|
||||||
const changefangkuang = (fangkuang : any) => {
|
const changefangkuang = (fangkuang : any) => {
|
||||||
fangkuaiValue.value = fangkuang
|
fangkuaiValue.value = fangkuang
|
||||||
console.log("!!!!", fangkuaiValue.value)
|
|
||||||
}
|
}
|
||||||
//移动方块
|
//移动方块
|
||||||
const saveruler = ref({
|
const saveruler = ref({
|
||||||
|
@ -220,7 +239,6 @@
|
||||||
const closename = () => {
|
const closename = () => {
|
||||||
savename.value = "";
|
savename.value = "";
|
||||||
canmove.value = true;
|
canmove.value = true;
|
||||||
// fangkuaiValue.value = []
|
|
||||||
}
|
}
|
||||||
const ruler = ref(null)
|
const ruler = ref(null)
|
||||||
const rulernew = ref(null)
|
const rulernew = ref(null)
|
||||||
|
@ -228,25 +246,24 @@
|
||||||
const cleanall = () => {
|
const cleanall = () => {
|
||||||
clientX.value = 9999;
|
clientX.value = 9999;
|
||||||
clientY.value = 9999;
|
clientY.value = 9999;
|
||||||
|
animation.translate3d(clientX.value / 2, clientY.value / 2, 0).step({ duration: 0 });
|
||||||
|
animationData.value = animation.export();
|
||||||
canmove.value = true;
|
canmove.value = true;
|
||||||
indexNumber.value = {
|
indexNumber.value = {
|
||||||
index0: 999,
|
index0: 999,
|
||||||
index1: 999,
|
index1: 999,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (savename.value) {
|
if (savename.value) {
|
||||||
if(isOld.value){
|
if (!isOld.value) {
|
||||||
ruler.value?.rulerEnd(savename.value);
|
ruler.value?.rulerEnd(savename.value);
|
||||||
}else{
|
} else {
|
||||||
// rulernew.value?.rulerEnd(savename.value);
|
|
||||||
}
|
}
|
||||||
} else if (saveruler.value.typeName) {
|
} else if (saveruler.value.typeName) {
|
||||||
if(isOld.value){
|
if (isOld.value===1) {
|
||||||
ruler.value?.rulerMoveEnd(saveruler.value);
|
ruler.value?.rulerMoveEnd(saveruler.value);
|
||||||
}else{
|
} else {
|
||||||
rulernew.value?.rulerMoveEnd(saveruler.value);
|
rulernew.value?.rulerMoveEnd(saveruler.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
savename.value = "";
|
savename.value = "";
|
||||||
saveruler.value = {
|
saveruler.value = {
|
||||||
|
@ -275,10 +292,8 @@
|
||||||
// 使用正则表达式找到所有括号的内容
|
// 使用正则表达式找到所有括号的内容
|
||||||
let result = [];
|
let result = [];
|
||||||
let remainingStr = str;
|
let remainingStr = str;
|
||||||
|
|
||||||
// 正则匹配最外层括号(支持全角和半角)
|
// 正则匹配最外层括号(支持全角和半角)
|
||||||
let regex = /([^((]*)[((]([^))]+)[))]/;
|
let regex = /([^((]*)[((]([^))]+)[))]/;
|
||||||
|
|
||||||
while (regex.test(remainingStr)) {
|
while (regex.test(remainingStr)) {
|
||||||
let match = remainingStr.match(regex);
|
let match = remainingStr.match(regex);
|
||||||
if (match) {
|
if (match) {
|
||||||
|
@ -294,12 +309,10 @@
|
||||||
remainingStr = remainingStr.replace(match[0], '').trim();
|
remainingStr = remainingStr.replace(match[0], '').trim();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果最后还有剩余部分,也加入结果
|
// 如果最后还有剩余部分,也加入结果
|
||||||
if (remainingStr.trim()) {
|
if (remainingStr.trim()) {
|
||||||
result.push(remainingStr.trim());
|
result.push(remainingStr.trim());
|
||||||
}
|
}
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
// 生命周期钩子
|
// 生命周期钩子
|
||||||
|
@ -339,11 +352,8 @@
|
||||||
|
|
||||||
.move-font {
|
.move-font {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// font-size: 45rpx;
|
|
||||||
// font-weight: 700;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
// color: #016AD1;
|
|
||||||
background-color: rgb(201, 232, 255);
|
background-color: rgb(201, 232, 255);
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
border: 2rpx solid #fff;
|
border: 2rpx solid #fff;
|
||||||
|
@ -355,6 +365,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-container {
|
.left-container {
|
||||||
|
@ -407,7 +418,6 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// margin-top: 30rpx;
|
|
||||||
|
|
||||||
.left-img {
|
.left-img {
|
||||||
width: 93rpx;
|
width: 93rpx;
|
||||||
|
@ -424,8 +434,6 @@
|
||||||
margin: 10rpx;
|
margin: 10rpx;
|
||||||
border: 1rpx solid #dae8fa;
|
border: 1rpx solid #dae8fa;
|
||||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||||
// width: calc(100% - 20rpx);
|
|
||||||
// height: calc(100% - 20rpx);
|
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -440,8 +448,6 @@
|
||||||
margin: 10rpx;
|
margin: 10rpx;
|
||||||
border: 1rpx solid #dae8fa;
|
border: 1rpx solid #dae8fa;
|
||||||
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||||
// width: calc(100% - 20rpx);
|
|
||||||
// height: calc(100% - 20rpx);
|
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -55,9 +55,7 @@
|
||||||
<view
|
<view
|
||||||
:class="(clickX === index0 && clickY ===index1) ? `title-time-border-blue` : ``"
|
:class="(clickX === index0 && clickY ===index1) ? `title-time-border-blue` : ``"
|
||||||
class="super-card-time-card" style="position: relative;"
|
class="super-card-time-card" style="position: relative;"
|
||||||
@click="rulerTouchClick(item1,index0,index1,$event)"
|
@touchend="handleTap(item1,index0,index1,$event)" :data-index0="index0" :data-index1="index1">
|
||||||
@touchstart="rulerTouchStart()" @touchmove="rulerTouchMove()"
|
|
||||||
@touchend="rulerTouchEnd()" :data-index0="index0" :data-index1="index1">
|
|
||||||
|
|
||||||
<view :class="getClass(item1,index0,index1)"
|
<view :class="getClass(item1,index0,index1)"
|
||||||
style="font-size: 30rpx;overflow: hidden;">
|
style="font-size: 30rpx;overflow: hidden;">
|
||||||
|
@ -101,7 +99,7 @@
|
||||||
</view>
|
</view>
|
||||||
</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"
|
<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)' }"
|
: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>
|
@click.stop>
|
||||||
|
@ -229,7 +227,7 @@
|
||||||
timearr.value.forEach((element : any) => {
|
timearr.value.forEach((element : any) => {
|
||||||
// 循环直到长度达到 7
|
// 循环直到长度达到 7
|
||||||
while (element.children.length < 8) {
|
while (element.children.length < 8) {
|
||||||
element.children.push({ value: "" });
|
element.children.push({ directiveName: "" });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -293,40 +291,59 @@
|
||||||
const routerBack = () => {
|
const routerBack = () => {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
const closeIsOpen = (event : any) => {
|
const closeIsOpen = (index0 : number, index1 : number,) => {
|
||||||
const touch = event.touches[0];
|
uni.navigateBack({
|
||||||
let clientX = (Math.floor(touch.clientX))
|
delta: 1,
|
||||||
let clientY = (Math.floor(touch.clientY))
|
success: () => {
|
||||||
const query = uni.createSelectorQuery()
|
uni.$emit('where', {
|
||||||
query
|
index0: index0,
|
||||||
.selectAll('.super-card-time-card')
|
index1: index1,
|
||||||
.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)) {
|
const changeWhiteLine = () => {
|
||||||
//调用上一个页面中的方法
|
let emptyChildIndices = [];
|
||||||
uni.navigateBack({
|
//找空行
|
||||||
delta: 1,
|
changetimearr.value.forEach((res : any, rowIndex : number) => {
|
||||||
success: () => {
|
emptyChildIndices = [];
|
||||||
uni.$emit('where', {
|
// 遍历 res.children 数组中的每个子元素 child
|
||||||
index0: clickX.value,
|
res.children.forEach((child, index) => {
|
||||||
index1: clickY.value,
|
// 检查 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(() => {
|
// emptyChildIndices.forEach((item : number) => {
|
||||||
isopen.value = false;
|
// changetimearr.value.forEach((element : any) => {
|
||||||
clickX.value = -1;
|
// element.children.splice(item, 1)
|
||||||
clickY.value = -1
|
// })
|
||||||
}, 100)
|
// })
|
||||||
|
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) => {
|
const changeTarget = (index : number) => {
|
||||||
if (buttonTarget.value !== index) {
|
if (buttonTarget.value !== index) {
|
||||||
|
@ -347,6 +364,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
changeWhiteLine()
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
||||||
|
@ -359,10 +377,41 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
changeWhiteLine()
|
||||||
break;
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 218 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 705 B |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 693 B |
After Width: | Height: | Size: 563 B |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 739 KiB |
|
@ -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"}
|
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 22 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 4.1 KiB |