2025-04-28 17:33:10 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="doctorsay-container-container">
|
|
|
|
|
|
<view class="doctorsay-container-title">
|
|
|
|
|
|
<view class="doctorsay-container-left">
|
|
|
|
|
|
<view class="doctorsay-container-left-gun"></view>
|
|
|
|
|
|
<view class="doctorsay-container-left-font">时间矩阵</view>
|
|
|
|
|
|
</view>
|
2025-07-23 17:34:48 +08:00
|
|
|
|
|
2025-04-28 17:33:10 +08:00
|
|
|
|
<view class="doctorsay-container-right">
|
|
|
|
|
|
<view class="titlebutton-father">
|
|
|
|
|
|
<view v-for="(item,index) in buttonArray" :key="index">
|
|
|
|
|
|
<view :class="getClassItem(index)" @click="changeTarget(index)">
|
|
|
|
|
|
{{item}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="doctorsay-container-right-kuai-cheng"></view>
|
|
|
|
|
|
<view class="doctorsay-container-kuai-font">日常</view>
|
|
|
|
|
|
<view class="doctorsay-container-right-kuai-zi"></view>
|
|
|
|
|
|
<view class="doctorsay-container-kuai-font">周期</view>
|
|
|
|
|
|
<view class="doctorsay-container-juzhen" @click="routerBack">
|
|
|
|
|
|
返回
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="super-card">
|
|
|
|
|
|
<view class="super-card-container">
|
|
|
|
|
|
<scroll-view style="height: 100%;width: 100%;" :scroll-left="scrollLeft" scroll-x
|
|
|
|
|
|
:show-scrollbar="false">
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view :style="{width:widthType * 24 + `rpx`}"
|
|
|
|
|
|
style="display: flex; box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);background: linear-gradient(to right, #c4dbf4,#c9c2ef, #c6dcf3);">
|
2025-04-28 17:33:10 +08:00
|
|
|
|
<view v-for="(item0,index0) in changetimearr" :key="index0">
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view class="super-card-time" :style="{width:widthType + `rpx`}">
|
2025-04-28 17:33:10 +08:00
|
|
|
|
{{(item0.positioning.length == 1 ? ('0' + item0.positioning) : item0.positioning) + ":00"}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view style="display: flex;height: calc(100% - 80rpx);" :style="{width:widthType * 24 + `rpx`}">
|
|
|
|
|
|
<scroll-view scroll-y :show-scrollbar="false" :scroll-top="scrollTop">
|
2025-04-28 17:33:10 +08:00
|
|
|
|
<view style="display: flex;height: 100%;">
|
|
|
|
|
|
<view v-for="(item0,index0) in changetimearr" :key="index0">
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view class="super-card-time-und" :style="{width:widthType + `rpx`}">
|
2025-04-28 17:33:10 +08:00
|
|
|
|
<view v-for="(item1,index1) in item0.children" style="width: 100%;"
|
|
|
|
|
|
:key="index1">
|
|
|
|
|
|
<view
|
|
|
|
|
|
:class="(clickX === index0 && clickY ===index1) ? `title-time-border-blue` : ``"
|
2025-07-23 17:34:48 +08:00
|
|
|
|
:style="{height:heightType + `rpx`}"
|
2025-04-28 17:33:10 +08:00
|
|
|
|
class="super-card-time-card" style="position: relative;"
|
|
|
|
|
|
@touchend="handleTap(item1,index0,index1,$event)" :data-index0="index0"
|
|
|
|
|
|
:data-index1="index1">
|
|
|
|
|
|
|
|
|
|
|
|
<view :class="getClass(item1,index0,index1)"
|
|
|
|
|
|
style="font-size: 30rpx;overflow: hidden;">
|
|
|
|
|
|
<view class="title-time" v-if="item1.startTime"
|
|
|
|
|
|
style="margin-top: 0rpx;">
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view class="title-time-time" style="font-size: 25rpx;"
|
|
|
|
|
|
v-show="scalcType<10">
|
2025-04-28 17:33:10 +08:00
|
|
|
|
{{item1.startTime + `-` + item1.endTime}}
|
|
|
|
|
|
</view>
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<image class="title-time-button" v-show="scalcType<10"
|
2025-04-28 17:33:10 +08:00
|
|
|
|
:src="item1.cycleType=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view class="title-time-font" v-show="scalcType<10">
|
2025-04-28 17:33:10 +08:00
|
|
|
|
{{item1.cycleType}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view v-show="scalcType>=10" style="margin: auto;" :style="{fontSize: cardFont + `rpx`}">
|
|
|
|
|
|
{{item1.cycleType}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-show="scalcType<10"
|
2025-04-28 17:33:10 +08:00
|
|
|
|
:style="splitString(item1.directiveName)[1] ? {}:{marginTop:`20rpx`}"
|
|
|
|
|
|
style="font-weight: 700;font-size: 24rpx;">
|
|
|
|
|
|
{{splitString(item1.directiveName)[0]}}
|
|
|
|
|
|
</view>
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<view class="down-icons" v-show="scalcType<10"
|
2025-04-28 17:33:10 +08:00
|
|
|
|
:style="item1.cycleType!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
|
|
|
|
|
|
v-if="splitString(item1.directiveName)[1]">
|
|
|
|
|
|
<view class=""
|
|
|
|
|
|
v-for="(item,index) in splitString(item1.directiveName).slice(1)"
|
|
|
|
|
|
:key="index">
|
|
|
|
|
|
<view class="icon"
|
|
|
|
|
|
:style="item1.cycleType!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
|
|
|
|
|
|
{{splitString(item1.directiveName)[index + 1]}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2025-07-23 17:34:48 +08:00
|
|
|
|
<addball :isShow="true" @clickBall="changeType(0)" />
|
|
|
|
|
|
<decball :isShow="true" @clickBall="changeType(1)" />
|
|
|
|
|
|
<!-- 轮盘 -->
|
|
|
|
|
|
<joystick @movecard="movecard" />
|
2025-04-28 17:33:10 +08:00
|
|
|
|
<!-- 长按的弹出层` -->
|
|
|
|
|
|
<view v-show="isopen" class="popup-overlay" @click="isopen=false">
|
|
|
|
|
|
<view class="popup-overlay-content"
|
|
|
|
|
|
:style="{ top: (2*openY - 350) + 'rpx',left: (2*openX - 780) + 'rpx',opacity: isopacity ? 1 : 0,backgroundColor:timearr[clickY]?.children[clickX]?.type==='日常'? '#fffcf6':'rgb(246, 244, 254)' }"
|
|
|
|
|
|
@click.stop>
|
|
|
|
|
|
<view class="popup-overlay-content-left">
|
|
|
|
|
|
<image class="popup-overlay-content-left-img" :src="`/static/index/teeth.png`" />
|
|
|
|
|
|
<text class="popup-overlay-content-left-font">
|
|
|
|
|
|
占个位置
|
|
|
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="popup-overlay-content-right">
|
|
|
|
|
|
<view class="time-font">
|
|
|
|
|
|
10:00 - 10:10
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="time-text">
|
|
|
|
|
|
为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2025-07-23 17:34:48 +08:00
|
|
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive, watch } from 'vue';
|
2025-04-28 17:33:10 +08:00
|
|
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
|
|
|
import { getNclist } from "@/component/rightItemssecond/api.js";
|
2025-07-23 17:34:48 +08:00
|
|
|
|
import addball from "./addball.vue"
|
|
|
|
|
|
import decball from "./decball.vue"
|
|
|
|
|
|
import joystick from '@/component/public/newgame/joysticknew.vue';
|
2025-04-28 17:33:10 +08:00
|
|
|
|
// 暗黑模式
|
|
|
|
|
|
const darkFans = ref(false);
|
|
|
|
|
|
const timearr = ref([]);
|
|
|
|
|
|
type darkFanstype = {
|
|
|
|
|
|
darkFans : boolean
|
|
|
|
|
|
}
|
|
|
|
|
|
const buttonArray = ref(["全部", "日常", "周期"]);
|
|
|
|
|
|
const buttonTarget = ref(0);
|
2025-07-23 17:34:48 +08:00
|
|
|
|
const sysInfo = uni.getSystemInfoSync();
|
|
|
|
|
|
const rpx2px = sysInfo.windowWidth / 750;
|
2025-04-28 17:33:10 +08:00
|
|
|
|
// 方法：根据条件返回不同的类名
|
|
|
|
|
|
const getClass = (item : any, index0 : number, index1 : number) => {
|
|
|
|
|
|
if (item.cycleType === '日常') {
|
|
|
|
|
|
return 'title-time-border-yellow';
|
|
|
|
|
|
} else if (item.cycleType) {
|
|
|
|
|
|
//为啥这么写，是因为动画写行内无效！！！
|
|
|
|
|
|
return 'title-time-border-pouple'
|
|
|
|
|
|
}
|
|
|
|
|
|
return 'title-time-border';
|
|
|
|
|
|
}
|
2025-07-23 17:34:48 +08:00
|
|
|
|
|
2025-04-28 17:33:10 +08:00
|
|
|
|
const getClassItem = (index) => {
|
|
|
|
|
|
if (buttonTarget.value !== index) {
|
|
|
|
|
|
return `titlebutton`
|
|
|
|
|
|
} else {
|
|
|
|
|
|
switch (index) {
|
|
|
|
|
|
case 0:
|
|
|
|
|
|
return `titlebutton-target`
|
|
|
|
|
|
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
return `titlebutton-target-yellow`
|
|
|
|
|
|
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
return `titlebutton-target-pouple`
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 切割bigArray
|
|
|
|
|
|
function splitString(str : any) {
|
|
|
|
|
|
if (str) {
|
|
|
|
|
|
// 使用正则表达式找到所有括号的内容
|
|
|
|
|
|
let result = [];
|
|
|
|
|
|
let remainingStr = str;
|
|
|
|
|
|
// 正则匹配最外层括号（支持全角和半角）
|
|
|
|
|
|
let regex = /([^（(]*)[（(]([^）)]+)[）)]/;
|
|
|
|
|
|
|
|
|
|
|
|
while (regex.test(remainingStr)) {
|
|
|
|
|
|
let match = remainingStr.match(regex);
|
|
|
|
|
|
if (match) {
|
|
|
|
|
|
// 添加括号前的部分（去掉空白）
|
|
|
|
|
|
if (match[1].trim()) {
|
|
|
|
|
|
result.push(match[1].trim());
|
|
|
|
|
|
}
|
|
|
|
|
|
// 添加括号内的内容
|
|
|
|
|
|
if (match[2].trim()) {
|
|
|
|
|
|
result.push(match[2].trim());
|
|
|
|
|
|
}
|
|
|
|
|
|
// 更新剩余的字符串
|
|
|
|
|
|
remainingStr = remainingStr.replace(match[0], '').trim();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 如果最后还有剩余部分，也加入结果
|
|
|
|
|
|
if (remainingStr.trim()) {
|
|
|
|
|
|
result.push(remainingStr.trim());
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return result;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return [];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
const scrollLeft = ref(0);
|
2025-07-23 17:34:48 +08:00
|
|
|
|
const scrollTop = ref(0);
|
|
|
|
|
|
|
2025-04-28 17:33:10 +08:00
|
|
|
|
const changetimearr = ref([]);
|
2025-07-23 17:34:48 +08:00
|
|
|
|
const scalcType = ref(9);
|
|
|
|
|
|
const widthType = ref(247);
|
|
|
|
|
|
const heightType = ref(180);
|
|
|
|
|
|
const cardFont = ref(0);
|
|
|
|
|
|
const bili = ref(0)
|
2025-04-28 17:33:10 +08:00
|
|
|
|
// 生命周期钩子
|
|
|
|
|
|
onLoad((options) => {
|
|
|
|
|
|
let arr = uni.getStorageSync('myArray');
|
|
|
|
|
|
timearr.value = arr
|
|
|
|
|
|
if (timearr.value[0].children.length < 8) {
|
|
|
|
|
|
timearr.value.forEach((element : any) => {
|
|
|
|
|
|
// 循环直到长度达到 7
|
|
|
|
|
|
while (element.children.length < 8) {
|
|
|
|
|
|
element.children.push({ directiveName: "" });
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
2025-07-23 17:34:48 +08:00
|
|
|
|
// scrollLeft.value = 740
|
|
|
|
|
|
scalcType.value = 9
|
|
|
|
|
|
widthType.value = 247;
|
|
|
|
|
|
scrollLeft.value = 740;
|
|
|
|
|
|
heightType.value = 140
|
|
|
|
|
|
|
2025-04-28 17:33:10 +08:00
|
|
|
|
});
|
2025-07-23 17:34:48 +08:00
|
|
|
|
|
|
|
|
|
|
const changeType = (number : number) => {
|
|
|
|
|
|
if (number) {
|
|
|
|
|
|
if (scalcType.value < 24) {
|
|
|
|
|
|
scalcType.value++
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if (scalcType.value > 7) {
|
|
|
|
|
|
scalcType.value--
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const totalColumns = 24; // 总列数
|
|
|
|
|
|
const totalRows = 11; // 总行数
|
|
|
|
|
|
const visibleWidth = 2220; // 可视区域宽度 (rpx)，基于 scalcType * widthType ≈ 2220
|
|
|
|
|
|
const visibleHeight = 512.5; // 可视区域高度 (rpx)，假设显示约5行时 heightType = 102.5
|
|
|
|
|
|
function centerCell() {
|
|
|
|
|
|
if (clickX.value >= 0 && clickX.value <= totalColumns && clickY.value >= 0 && clickY.value <= totalRows) {
|
|
|
|
|
|
// 计算点击格子的中心位置 (rpx)
|
|
|
|
|
|
const cellCenterX = (clickX.value) * widthType.value;
|
|
|
|
|
|
const cellCenterY = (clickY.value) * heightType.value;
|
|
|
|
|
|
|
|
|
|
|
|
// 计算 scrollLeft 和 scrollTop，使格子中心位于可视区域中心
|
|
|
|
|
|
scrollLeft.value = cellCenterX - visibleWidth / 2;
|
|
|
|
|
|
scrollTop.value = cellCenterY - visibleHeight / 2;
|
|
|
|
|
|
|
|
|
|
|
|
// 计算网格总宽高
|
|
|
|
|
|
const totalWidth = totalColumns * widthType.value;
|
|
|
|
|
|
const totalHeight = totalRows * heightType.value;
|
|
|
|
|
|
|
|
|
|
|
|
// 限制 scrollLeft 和 scrollTop 在有效范围内
|
|
|
|
|
|
scrollLeft.value = Math.max(0, Math.min(scrollLeft.value, totalWidth - visibleWidth)) /2;
|
|
|
|
|
|
// scrollTop.value = 0
|
|
|
|
|
|
scrollTop.value = Math.max(0, Math.min(scrollTop.value, totalHeight - visibleHeight)) /2;
|
|
|
|
|
|
|
|
|
|
|
|
// console.log("????",scrollLeft.value,scrollTop.value,rpx2px)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const clickX = ref(10);
|
|
|
|
|
|
const clickY = ref(0);
|
|
|
|
|
|
watch([clickX, clickY], () => {
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
|
scalcType,
|
|
|
|
|
|
(newVal, oldVal) => {
|
|
|
|
|
|
if (oldVal !== newVal) {
|
|
|
|
|
|
switch (newVal) {
|
|
|
|
|
|
case 24:
|
|
|
|
|
|
widthType.value = 92.5;
|
|
|
|
|
|
// scrollLeft.value = 0;
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 18
|
|
|
|
|
|
return
|
|
|
|
|
|
case 23:
|
|
|
|
|
|
widthType.value = 96.5;
|
|
|
|
|
|
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 50
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 18
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 22:
|
|
|
|
|
|
widthType.value = 101;
|
|
|
|
|
|
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 100
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 18
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 21:
|
|
|
|
|
|
widthType.value = 106;
|
|
|
|
|
|
// scrollLeft.value = 159
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 159
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 19
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 20:
|
|
|
|
|
|
widthType.value = 112;
|
|
|
|
|
|
// scrollLeft.value = 230
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 230
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 20
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 19:
|
|
|
|
|
|
widthType.value = 117;
|
|
|
|
|
|
// scrollLeft.value = 292
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 292
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 21
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 18:
|
|
|
|
|
|
widthType.value = 124;
|
|
|
|
|
|
// scrollLeft.value = 373
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 373
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 22
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 17:
|
|
|
|
|
|
widthType.value = 131;
|
|
|
|
|
|
// scrollLeft.value = 395
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 395
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 23
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 16:
|
|
|
|
|
|
widthType.value = 139;
|
|
|
|
|
|
// scrollLeft.value = 416
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 416
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 24
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 15:
|
|
|
|
|
|
widthType.value = 148;
|
|
|
|
|
|
// scrollLeft.value = 445
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 445
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 25
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 14:
|
|
|
|
|
|
widthType.value = 159;
|
|
|
|
|
|
// scrollLeft.value = 477
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 477
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 26
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 13:
|
|
|
|
|
|
widthType.value = 171;
|
|
|
|
|
|
// scrollLeft.value = 515
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 515
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 27
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 12:
|
|
|
|
|
|
widthType.value = 185;
|
|
|
|
|
|
// scrollLeft.value = 555
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 555
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 28
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 11:
|
|
|
|
|
|
widthType.value = 202;
|
|
|
|
|
|
// scrollLeft.value = 607
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 607
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5
|
|
|
|
|
|
cardFont.value = 29
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 10:
|
|
|
|
|
|
widthType.value = 222;
|
|
|
|
|
|
// scrollLeft.value = 665
|
|
|
|
|
|
// if(clickX.value>10){
|
|
|
|
|
|
// scrollLeft.value = 665
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// scrollLeft.value = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
heightType.value = 102.5;
|
|
|
|
|
|
cardFont.value = 30
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 9:
|
|
|
|
|
|
widthType.value = 247;
|
|
|
|
|
|
// scrollLeft.value = 740;
|
|
|
|
|
|
heightType.value = 140
|
|
|
|
|
|
cardFont.value = 30
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
case 8:
|
|
|
|
|
|
widthType.value = 280;
|
|
|
|
|
|
// scrollLeft.value = 850
|
|
|
|
|
|
heightType.value = 150
|
|
|
|
|
|
cardFont.value = 30
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 7:
|
|
|
|
|
|
widthType.value = 320;
|
|
|
|
|
|
// scrollLeft.value = 960
|
|
|
|
|
|
heightType.value = 160
|
|
|
|
|
|
cardFont.value = 30
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
case 6:
|
|
|
|
|
|
widthType.value = 380;
|
|
|
|
|
|
// scrollLeft.value = 1150
|
|
|
|
|
|
heightType.value = 170
|
|
|
|
|
|
cardFont.value = 30
|
|
|
|
|
|
centerCell();
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// centerCell();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
// 上一次触摸结束的时间戳
|
|
|
|
|
|
const lastTap = ref(0)
|
|
|
|
|
|
// 单击逻辑的定时器 ID
|
|
|
|
|
|
const clickTimer = ref(null)
|
|
|
|
|
|
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('双击逻辑执行')
|
|
|
|
|
|
if(item.startTime){
|
|
|
|
|
|
closeIsOpen(index0, index1)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
lastTap.value = 0 // 重置，避免连续三次触发
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 延迟 250ms 执行单击逻辑，以等待可能的第二次触摸
|
|
|
|
|
|
clickTimer.value = setTimeout(() => {
|
|
|
|
|
|
// message.value = '检测到单击事件'
|
|
|
|
|
|
// console.log('单击逻辑执行')
|
|
|
|
|
|
rulerTouchClick(item, index0, index1, e)
|
|
|
|
|
|
}, 250)
|
|
|
|
|
|
lastTap.value = now
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-04-28 17:33:10 +08:00
|
|
|
|
const openX = ref(0);
|
|
|
|
|
|
const openY = ref(0);
|
|
|
|
|
|
const isopen = ref(false);
|
|
|
|
|
|
const isopacity = ref(false);
|
2025-07-23 17:34:48 +08:00
|
|
|
|
|
2025-04-28 17:33:10 +08:00
|
|
|
|
const timer = ref<number | null>(null)
|
2025-07-23 17:34:48 +08:00
|
|
|
|
|
2025-04-28 17:33:10 +08:00
|
|
|
|
//表格点击开始
|
|
|
|
|
|
const rulerTouchClick = (item : any, index0 : number, index1 : number, e : any) => {
|
|
|
|
|
|
if (item.directiveName) {
|
|
|
|
|
|
clickX.value = index0;
|
|
|
|
|
|
clickY.value = index1;
|
2025-07-23 17:34:48 +08:00
|
|
|
|
nextTick(()=>{
|
|
|
|
|
|
const query = uni.createSelectorQuery()
|
|
|
|
|
|
query
|
|
|
|
|
|
.selectAll('.super-card-time-card')
|
|
|
|
|
|
.boundingClientRect((data : any) => {
|
|
|
|
|
|
data.forEach(async (res : any) => {
|
|
|
|
|
|
// 根据你的条件筛选元素
|
|
|
|
|
|
if (res.dataset.index0 == index0 && res.dataset.index1 == index1) {
|
|
|
|
|
|
if (res.left < 500) {
|
|
|
|
|
|
// 表格太靠左侧，修改到右面
|
|
|
|
|
|
openX.value = Math.floor(res.left) + 510;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
openX.value = Math.floor(res.left) - 10
|
|
|
|
|
|
}
|
|
|
|
|
|
if (res.top < 300) {
|
|
|
|
|
|
// 表格太靠上侧，修改到下面
|
|
|
|
|
|
openY.value = Math.floor(res.top) + 250;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
openY.value = Math.floor(res.top)
|
|
|
|
|
|
}
|
|
|
|
|
|
await nextTick()
|
|
|
|
|
|
isopen.value = true;
|
|
|
|
|
|
isopacity.value = false;
|
|
|
|
|
|
//加动画
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
isopacity.value = true;
|
|
|
|
|
|
}, 100)
|
2025-04-28 17:33:10 +08:00
|
|
|
|
}
|
2025-07-23 17:34:48 +08:00
|
|
|
|
})
|
2025-04-28 17:33:10 +08:00
|
|
|
|
})
|
2025-07-23 17:34:48 +08:00
|
|
|
|
.exec()
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
// clickX.value = index0;
|
|
|
|
|
|
// clickY.value = index1;
|
2025-04-28 17:33:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const rulerTouchStart = () => {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
const rulerTouchMove = () => {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
const rulerTouchEnd = () => {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
const routerBack = () => {
|
|
|
|
|
|
uni.navigateBack()
|
|
|
|
|
|
}
|
|
|
|
|
|
const closeIsOpen = (index0 : number, index1 : number,) => {
|
|
|
|
|
|
uni.navigateBack({
|
|
|
|
|
|
delta: 1,
|
|
|
|
|
|
success: () => {
|
|
|
|
|
|
uni.$emit('where', {
|
|
|
|
|
|
index0: index0,
|
|
|
|
|
|
index1: index1,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
//处理空行，把空行全干掉
|
|
|
|
|
|
const changeWhiteLine = () => {
|
|
|
|
|
|
let emptyChildIndices = [];
|
|
|
|
|
|
//找空行
|
|
|
|
|
|
changetimearr.value.forEach((res : any, rowIndex : number) => {
|
|
|
|
|
|
emptyChildIndices = [];
|
|
|
|
|
|
// 遍历 res.children 数组中的每个子元素 child
|
|
|
|
|
|
res.children.forEach((child, index) => {
|
|
|
|
|
|
// 检查 child 的 value 属性是否为空
|
|
|
|
|
|
if (child.directiveName === null || child.directiveName === '' || child.directiveName === undefined) {
|
|
|
|
|
|
|
|
|
|
|
|
// 如果是空值，检查其他 res.children 中相同索引的元素
|
|
|
|
|
|
const isEmptyInAllRows = changetimearr.value.every((otherRes) => {
|
|
|
|
|
|
const otherChild = otherRes.children[index];
|
|
|
|
|
|
return otherChild.directiveName === '';
|
|
|
|
|
|
});
|
|
|
|
|
|
// 如果在所有行中该位置的 directiveName 都为空，记录该索引
|
|
|
|
|
|
if (isEmptyInAllRows) {
|
|
|
|
|
|
emptyChildIndices.push(index);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
const sortedIndices = [...emptyChildIndices].sort((a, b) => b - a);
|
|
|
|
|
|
changetimearr.value.forEach((element : any) => {
|
|
|
|
|
|
sortedIndices.forEach(idx => {
|
|
|
|
|
|
element.children.splice(idx, 1);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
if (changetimearr.value[0].children.length < 8) {
|
|
|
|
|
|
changetimearr.value.forEach((element : any) => {
|
|
|
|
|
|
// 循环直到长度达到 7
|
|
|
|
|
|
while (element.children.length < 8) {
|
|
|
|
|
|
element.children.push({ directiveName: "" });
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const changeTarget = (index : number) => {
|
|
|
|
|
|
if (buttonTarget.value !== index) {
|
|
|
|
|
|
changetimearr.value = []
|
|
|
|
|
|
buttonTarget.value = index
|
|
|
|
|
|
switch (index) {
|
|
|
|
|
|
case 0:
|
|
|
|
|
|
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
|
|
|
|
|
break;
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
|
|
|
|
|
changetimearr.value.forEach((element0 : any) => {
|
|
|
|
|
|
element0.children.forEach((element1 : any) => {
|
|
|
|
|
|
if (element1.directiveName && element1.cycleType !== "日常") {
|
|
|
|
|
|
element1.directiveName = "";
|
|
|
|
|
|
element1.cycleType = ""
|
|
|
|
|
|
element1.startTime = ""
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
2025-07-23 17:34:48 +08:00
|
|
|
|
// changeWhiteLine()
|
2025-04-28 17:33:10 +08:00
|
|
|
|
break;
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
|
|
|
|
|
|
changetimearr.value.forEach((element0 : any) => {
|
|
|
|
|
|
element0.children.forEach((element1 : any) => {
|
|
|
|
|
|
if (element1.directiveName && element1.cycleType === "日常") {
|
|
|
|
|
|
element1.directiveName = "";
|
|
|
|
|
|
element1.cycleType = ""
|
|
|
|
|
|
element1.startTime = ""
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
|
2025-07-23 17:34:48 +08:00
|
|
|
|
// changeWhiteLine()
|
2025-04-28 17:33:10 +08:00
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-07-23 17:34:48 +08:00
|
|
|
|
const movecard = (type:number) => {
|
|
|
|
|
|
isopen.value = false
|
|
|
|
|
|
switch (type) {
|
|
|
|
|
|
case 0:
|
|
|
|
|
|
if(clickY.value>0){
|
|
|
|
|
|
clickY.value--
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
break
|
|
|
|
|
|
case 1:
|
|
|
|
|
|
if(clickX.value<23){
|
|
|
|
|
|
clickX.value++
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
break
|
|
|
|
|
|
case 2:
|
|
|
|
|
|
if(clickY.value<11){
|
|
|
|
|
|
clickY.value++
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
break
|
|
|
|
|
|
case 3:
|
|
|
|
|
|
if(clickX.value>0){
|
|
|
|
|
|
clickX.value--
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
2025-04-28 17:33:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
.backgroundContainer {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
background-image: url('/static/index/lightbgcnew.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: center center;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//暗黑模式
|
|
|
|
|
|
.darkbackgroundContainer {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
background-image: url('/static/index/background.png');
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
background-position: center center;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-container {
|
|
|
|
|
|
border: 2rpx solid #fff;
|
|
|
|
|
|
width: calc(100% - 4rpx);
|
|
|
|
|
|
height: calc(100vh - 4rpx);
|
|
|
|
|
|
/* 设置背景图和白色背景 */
|
|
|
|
|
|
background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.3);
|
|
|
|
|
|
backdrop-filter: blur(20rpx);
|
|
|
|
|
|
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
|
|
|
|
|
background-blend-mode: screen;
|
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
/* 右下角阴影 */
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
.super-card-end {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-father {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items-all {
|
|
|
|
|
|
width: calc(100% - 85rpx);
|
|
|
|
|
|
height: 200rpx;
|
|
|
|
|
|
margin-left: 40rpx;
|
|
|
|
|
|
margin-right: 40rpx;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: calc(100% - 85rpx);
|
|
|
|
|
|
height: 200rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items-father {
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
width: 150rpx;
|
|
|
|
|
|
height: 150rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
background: linear-gradient(to bottom right, #fff 0%, #dcdcf9 50%, #dbdcf8 100%);
|
|
|
|
|
|
border-radius: 25rpx;
|
|
|
|
|
|
border: 2rpx solid #fff;
|
|
|
|
|
|
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
transition: all 1.5s ease-in-out;
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items-father-close-father {
|
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
background-color: #0184db;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0rpx;
|
|
|
|
|
|
right: 0rpx;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items-img-father {
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
/* 让正方形变成圆 */
|
|
|
|
|
|
.super-end-items-img {
|
|
|
|
|
|
width: 85rpx;
|
|
|
|
|
|
height: 85rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items-img-father-active {
|
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
|
height: 100rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
animation: shake 0.5s infinite;
|
|
|
|
|
|
|
|
|
|
|
|
/* 让正方形变成圆 */
|
|
|
|
|
|
.super-end-items-img {
|
|
|
|
|
|
width: 85rpx;
|
|
|
|
|
|
height: 85rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-items-font {
|
|
|
|
|
|
margin-top: -10rpx;
|
|
|
|
|
|
font-size: 25rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-font-father {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-font-gun {
|
|
|
|
|
|
margin-left: 40rpx;
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
margin-top: 5rpx;
|
|
|
|
|
|
width: 13rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-end-font-font {
|
|
|
|
|
|
font-size: 38rpx;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-title {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 105rpx;
|
|
|
|
|
|
margin-top: 50rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-right {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 800rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-juzhen {
|
|
|
|
|
|
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10rpx 20rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
font-size: 27rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-button-father {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-button-target {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background-color: #3FA9F5;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
width: 140rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-button {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
width: 140rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-right-kuai-cheng {
|
|
|
|
|
|
background-color: #FFDBA1;
|
|
|
|
|
|
height: 35rpx;
|
|
|
|
|
|
width: 35rpx;
|
|
|
|
|
|
border-radius: 7rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-right-kuai-zi {
|
|
|
|
|
|
background-color: #7B61FF;
|
|
|
|
|
|
height: 35rpx;
|
|
|
|
|
|
width: 35rpx;
|
|
|
|
|
|
border-radius: 7rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-kuai-font {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
margin-right: 25rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-left {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-left-gun {
|
|
|
|
|
|
margin-top: 7rpx;
|
|
|
|
|
|
margin-left: 40rpx;
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
width: 13rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.doctorsay-container-left-font {
|
|
|
|
|
|
font-size: 38rpx;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-card {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: calc(100% - 200rpx);
|
|
|
|
|
|
|
|
|
|
|
|
.scroll-x {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-card-container {
|
|
|
|
|
|
/* 设置背景图和白色背景 */
|
|
|
|
|
|
background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.5);
|
|
|
|
|
|
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
|
|
|
|
|
background-blend-mode: screen;
|
|
|
|
|
|
isolation: isolate;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
width: calc(100% - 100rpx);
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
border: 2rpx solid #fff;
|
|
|
|
|
|
box-shadow: 10rpx 10rpx 20px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-card-time {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
height: 80rpx;
|
2025-07-23 17:34:48 +08:00
|
|
|
|
width: 380rpx;
|
2025-04-28 17:33:10 +08:00
|
|
|
|
border-right: 1rpx solid transparent;
|
|
|
|
|
|
border-image: repeating-linear-gradient(180deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-card-time-und {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2025-07-23 17:34:48 +08:00
|
|
|
|
width: 380rpx;
|
2025-04-28 17:33:10 +08:00
|
|
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
border-right: 1rpx solid transparent;
|
|
|
|
|
|
border-image: repeating-linear-gradient(180deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.super-card-time-card {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
2025-07-23 17:34:48 +08:00
|
|
|
|
// height: 180rpx;
|
2025-04-28 17:33:10 +08:00
|
|
|
|
width: calc(100%);
|
|
|
|
|
|
border-top: 1rpx solid transparent;
|
|
|
|
|
|
border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-border-blue {
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
background:
|
|
|
|
|
|
/* 左上角水平 */
|
|
|
|
|
|
linear-gradient(to right, #0184db, #0184db) top left / 60rpx 8rpx no-repeat,
|
|
|
|
|
|
/* 左上角垂直 */
|
|
|
|
|
|
linear-gradient(to bottom, #0184db, #0184db) top left / 8rpx 60rpx no-repeat,
|
|
|
|
|
|
|
|
|
|
|
|
/* 右上角水平 */
|
|
|
|
|
|
linear-gradient(to left, #0184db, #0184db) top right / 60rpx 8rpx no-repeat,
|
|
|
|
|
|
/* 右上角垂直 */
|
|
|
|
|
|
linear-gradient(to bottom, #0184db, #0184db) top right / 8rpx 60rpx no-repeat,
|
|
|
|
|
|
|
|
|
|
|
|
/* 左下角水平 */
|
|
|
|
|
|
linear-gradient(to right, #0184db, #0184db) bottom left / 60rpx 8rpx no-repeat,
|
|
|
|
|
|
/* 左下角垂直 */
|
|
|
|
|
|
linear-gradient(to top, #0184db, #0184db) bottom left / 8rpx 60rpx no-repeat,
|
|
|
|
|
|
|
|
|
|
|
|
/* 右下角水平 */
|
|
|
|
|
|
linear-gradient(to left, #0184db, #0184db) bottom right / 60rpx 8rpx no-repeat,
|
|
|
|
|
|
/* 右下角垂直 */
|
|
|
|
|
|
linear-gradient(to top, #0184db, #0184db) bottom right / 8rpx 60rpx no-repeat;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-border-yellow {
|
|
|
|
|
|
margin: 10rpx;
|
|
|
|
|
|
border: 2rpx solid #d0d8e0;
|
|
|
|
|
|
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
|
|
|
|
|
width: calc(100% - 20rpx);
|
|
|
|
|
|
height: calc(100% - 20rpx);
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
box-shadow: 6rpx 6rpx 12rpx rgba(255, 138, 0, 0.7);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-border-pouple {
|
|
|
|
|
|
margin: 10rpx;
|
|
|
|
|
|
border: 1rpx solid #dae8fa;
|
|
|
|
|
|
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
|
|
|
|
|
width: calc(100% - 20rpx);
|
|
|
|
|
|
height: calc(100% - 20rpx);
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
box-shadow: 6rpx 6rpx 12rpx rgba(123, 97, 255, 0.7);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-border {
|
|
|
|
|
|
margin-top: 4rpx;
|
|
|
|
|
|
margin-left: 4rpx;
|
|
|
|
|
|
// border: 1rpx solid black;
|
|
|
|
|
|
width: calc(100% - 8rpx);
|
|
|
|
|
|
height: calc(100% - 8rpx);
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-time {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin-left: 40rpx;
|
|
|
|
|
|
margin-top: 12rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-button {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: -4rpx;
|
|
|
|
|
|
right: -4rpx;
|
|
|
|
|
|
width: 65rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-zhejiao {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 0rpx;
|
|
|
|
|
|
left: 5rpx;
|
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title-time-font {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 7rpx;
|
|
|
|
|
|
right: 5rpx;
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.down-icons {
|
|
|
|
|
|
margin-top: 5rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 58rpx;
|
|
|
|
|
|
background-color: rgb(255, 216, 126);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
|
margin: 0 5rpx;
|
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
padding: 3rpx 5rpx;
|
|
|
|
|
|
background-color: rgb(255, 138, 0);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
border-radius: 5rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.popup-overlay {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
/* 添加毛玻璃效果 */
|
|
|
|
|
|
z-index: 998;
|
|
|
|
|
|
|
|
|
|
|
|
.popup-overlay-content {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
width: 800rpx;
|
|
|
|
|
|
height: 390rpx;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 30rpx;
|
|
|
|
|
|
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transition: opacity 0.4s ease;
|
|
|
|
|
|
|
|
|
|
|
|
.popup-overlay-content-left {
|
|
|
|
|
|
// background-color: red;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 350rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
|
|
.popup-overlay-content-left-img {
|
|
|
|
|
|
width: 280rpx;
|
|
|
|
|
|
height: 180rpx;
|
|
|
|
|
|
margin-top: -30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.popup-overlay-content-left-font {
|
|
|
|
|
|
// margin-top: 20rpx;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.popup-overlay-content-right {
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 450rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.time-font {
|
|
|
|
|
|
font-size: 50rpx;
|
|
|
|
|
|
margin-top: 100rpx;
|
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
background: linear-gradient(to bottom, #7080A1, #263556);
|
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
|
color: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.time-text {
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
// font-weight: 700;
|
|
|
|
|
|
width: 380rpx;
|
|
|
|
|
|
margin-bottom: 50rpx;
|
|
|
|
|
|
line-height: 35rpx;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-richang {
|
|
|
|
|
|
background-color: #FFC363;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 108rpx;
|
|
|
|
|
|
right: 50rpx;
|
|
|
|
|
|
padding: 5rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-richangnot {
|
|
|
|
|
|
background-color: #7B61FF;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 108rpx;
|
|
|
|
|
|
right: 50rpx;
|
|
|
|
|
|
padding: 5rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.right-crush {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 20rpx;
|
|
|
|
|
|
right: 20rpx;
|
|
|
|
|
|
width: 70rpx;
|
|
|
|
|
|
height: 70rpx;
|
|
|
|
|
|
animation: shake 0.5s 3;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.titlebutton-father {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.titlebutton {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
font-size: 27rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.titlebutton-target {
|
|
|
|
|
|
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
font-size: 27rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.titlebutton-target-yellow {
|
|
|
|
|
|
background: #FFDBA1;
|
|
|
|
|
|
// color: #fff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
font-size: 27rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.titlebutton-target-pouple {
|
|
|
|
|
|
background: #7B61FF;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
padding: 10rpx 30rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
font-size: 27rpx;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.boom {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 80rpx;
|
|
|
|
|
|
left: 0rpx;
|
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
|
height: 1500rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
|
|
|
|
.boom-son {
|
|
|
|
|
|
height: 153rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
letter-spacing: 5rpx;
|
|
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
|
|
/* 竖排文字，从右往左 */
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
/* 确保文字在容器内居中 */
|
|
|
|
|
|
background: linear-gradient(to bottom, #ffe2b2, #e3deff);
|
|
|
|
|
|
// z-index: -1;
|
|
|
|
|
|
border-bottom-right-radius: 40rpx;
|
|
|
|
|
|
border-top-right-radius: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.boom-son-target {
|
|
|
|
|
|
height: 153rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
font-size: 22rpx;
|
|
|
|
|
|
letter-spacing: 5rpx;
|
|
|
|
|
|
writing-mode: vertical-rl;
|
|
|
|
|
|
/* 竖排文字，从右往左 */
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
/* 确保文字在容器内居中 */
|
|
|
|
|
|
background: linear-gradient(to bottom, #ff8a00, #eceaff);
|
|
|
|
|
|
border-bottom-right-radius: 40rpx;
|
|
|
|
|
|
border-top-right-radius: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
