hldy_app/pages/timeMatrix/index.vue

983 lines
25 KiB
Vue
Raw Normal View History

2025-03-24 17:37:51 +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>
<view class="doctorsay-container-right">
2025-03-26 17:34:08 +08:00
<view class="titlebutton-father">
<view v-for="(item,index) in buttonArray" :key="index">
2025-04-02 17:33:46 +08:00
<view :class="getClassItem(index)" @click="changeTarget(index)">
2025-03-26 17:34:08 +08:00
{{item}}
</view>
</view>
</view>
2025-03-24 17:37:51 +08:00
<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">
2025-03-26 17:34:08 +08:00
返回
2025-03-24 17:37:51 +08:00
</view>
</view>
</view>
<view class="super-card">
<view class="super-card-container">
2025-03-26 17:34:08 +08:00
<view class="boom">
<view :style="{ marginTop: `-${2 *moveDownNumber}rpx` }">
2025-04-02 17:33:46 +08:00
<view v-for="(item,index) in changetimearr[0]?.children" :key="index">
<view :class="(clickY === index) ? `boom-son-target`: `boom-son`" v-show="item.typeName">
{{item.typeName}}
2025-03-26 17:34:08 +08:00
</view>
</view>
</view>
</view>
2025-04-02 17:33:46 +08:00
<scroll-view style="height: 100%;width: 100%;" :scroll-left="scrollLeft" scroll-x
2025-03-24 17:37:51 +08:00
:show-scrollbar="false">
<view
2025-03-26 17:34:08 +08:00
style="display: flex;width: 5945rpx; box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);background: linear-gradient(to right, #c4dbf4,#c9c2ef, #c6dcf3);">
2025-04-02 17:33:46 +08:00
<view v-for="(item0,index0) in changetimearr" :key="index0">
2025-03-24 17:37:51 +08:00
<view class="super-card-time">
2025-04-02 17:33:46 +08:00
{{(item0.positioning.length == 1 ? ('0' + item0.positioning) : item0.positioning) + ":00"}}
2025-03-24 17:37:51 +08:00
</view>
</view>
</view>
2025-03-26 17:34:08 +08:00
<view style="display: flex;height: calc(100% - 80rpx);width: 5945rpx">
<scroll-view scroll-y :show-scrollbar="false" @scroll="handleScrolltime">
2025-03-24 17:37:51 +08:00
<view style="display: flex;height: 100%;">
2025-03-26 17:34:08 +08:00
<view v-for="(item0,index0) in changetimearr" :key="index0">
2025-03-24 17:37:51 +08:00
<view class="super-card-time-und">
<view v-for="(item1,index1) in item0.children" style="width: 100%;"
:key="index1">
<view
:class="(clickX === index0 && clickY ===index1) ? `title-time-border-blue` : ``"
class="super-card-time-card" style="position: relative;"
@click="rulerTouchClick(item1,index0,index1,$event)"
@touchstart="rulerTouchStart()" @touchmove="rulerTouchMove()"
@touchend="rulerTouchEnd()" :data-index0="index0" :data-index1="index1">
<view :class="getClass(item1,index0,index1)"
style="font-size: 30rpx;overflow: hidden;">
2025-04-02 17:33:46 +08:00
<view class="title-time" v-if="item1.startTime"
2025-03-26 17:34:08 +08:00
style="margin-top: 0rpx;">
<view class="title-time-time" style="font-size: 25rpx;">
2025-04-02 17:33:46 +08:00
{{item1.startTime + `-` + item1.endTime}}
2025-03-24 17:37:51 +08:00
</view>
<image class="title-time-button"
2025-04-02 17:33:46 +08:00
:src="item1.cycleType=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
2025-03-24 17:37:51 +08:00
<view class="title-time-font">
2025-04-02 17:33:46 +08:00
{{item1.cycleType}}
2025-03-24 17:37:51 +08:00
</view>
</view>
2025-04-02 17:33:46 +08:00
<view
:style="splitString(item1.directiveName)[1] ? {}:{marginTop:`20rpx`}"
style="font-weight: 700;font-size: 24rpx;">
{{splitString(item1.directiveName)[0]}}
2025-03-24 17:37:51 +08:00
</view>
<view class="down-icons"
2025-04-02 17:33:46 +08:00
:style="item1.cycleType!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
v-if="splitString(item1.directiveName)[1]">
2025-03-24 17:37:51 +08:00
<view class=""
2025-04-02 17:33:46 +08:00
v-for="(item,index) in splitString(item1.directiveName).slice(1)"
2025-03-24 17:37:51 +08:00
:key="index">
<view class="icon"
2025-04-02 17:33:46 +08:00
:style="item1.cycleType!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
{{splitString(item1.directiveName)[index + 1]}}
2025-03-24 17:37:51 +08:00
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</scroll-view>
</view>
</view>
2025-03-26 17:34:08 +08:00
<!-- 长按的弹出层` -->
2025-03-24 17:37:51 +08:00
<view v-show="isopen" class="popup-overlay" @click="closeIsOpen">
<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">
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
2025-04-02 17:33:46 +08:00
import { getNclist } from "@/component/rightItemssecond/api.js";
2025-03-24 17:37:51 +08:00
// 暗黑模式
const darkFans = ref(false);
const timearr = ref([]);
type darkFanstype = {
darkFans : boolean
}
2025-03-26 17:34:08 +08:00
const buttonArray = ref(["全部", "日常", "周期"]);
const buttonTarget = ref(0);
2025-03-24 17:37:51 +08:00
// 方法:根据条件返回不同的类名
const getClass = (item : any, index0 : number, index1 : number) => {
2025-04-02 17:33:46 +08:00
if (item.cycleType === '日常') {
2025-03-24 17:37:51 +08:00
return 'title-time-border-yellow';
2025-04-02 17:33:46 +08:00
} else if (item.cycleType) {
2025-03-24 17:37:51 +08:00
//为啥这么写,是因为动画写行内无效!!!
return 'title-time-border-pouple'
}
return 'title-time-border';
}
2025-03-26 17:34:08 +08:00
const moveDownNumber = ref(0);
function handleScrolltime(e) {
let num = e.detail.scrollTop
let formattedNum = parseFloat(num.toFixed(2));
moveDownNumber.value = formattedNum
}
2025-04-02 17:33:46 +08:00
const getClassItem = (index) => {
if (buttonTarget.value !== index) {
2025-03-26 17:34:08 +08:00
return `titlebutton`
2025-04-02 17:33:46 +08:00
} else {
switch (index) {
2025-03-26 17:34:08 +08:00
case 0:
return `titlebutton-target`
2025-04-02 17:33:46 +08:00
2025-03-26 17:34:08 +08:00
case 1:
return `titlebutton-target-yellow`
2025-04-02 17:33:46 +08:00
2025-03-26 17:34:08 +08:00
case 2:
return `titlebutton-target-pouple`
}
}
}
2025-03-24 17:37:51 +08:00
// 切割bigArray
function splitString(str : any) {
2025-04-02 17:33:46 +08:00
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();
2025-03-24 17:37:51 +08:00
}
}
2025-04-02 17:33:46 +08:00
// 如果最后还有剩余部分,也加入结果
if (remainingStr.trim()) {
result.push(remainingStr.trim());
}
return result;
} else {
return [];
2025-03-24 17:37:51 +08:00
}
}
const scrollLeft = ref(0);
2025-03-26 17:34:08 +08:00
const changetimearr = ref([]);
2025-03-24 17:37:51 +08:00
// 生命周期钩子
onLoad((options) => {
2025-04-02 17:33:46 +08:00
getNclist().then((res : any) => {
timearr.value = res.result
if (timearr.value[0].children.length < 8) {
timearr.value.forEach((element : any) => {
// 循环直到长度达到 7
while (element.children.length < 8) {
element.children.push({ value: "" });
}
});
}
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
if (options.currentNumber) {
scrollLeft.value = options.currentNumber * 745
}
})
2025-03-24 17:37:51 +08:00
});
const openX = ref(0);
const openY = ref(0);
const isopen = ref(false);
const isopacity = ref(false);
const clickX = ref(-1);
const clickY = ref(-1);
//表格点击开始
const rulerTouchClick = (item : any, index0 : number, index1 : number, e : any) => {
2025-04-02 17:33:46 +08:00
if (item.directiveName) {
2025-03-24 17:37:51 +08:00
clickX.value = index0;
clickY.value = index1;
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) {
// 表格太靠左侧,修改到右面
2025-03-26 17:34:08 +08:00
openX.value = Math.floor(res.left) + 510;
2025-03-24 17:37:51 +08:00
} else {
2025-04-02 17:33:46 +08:00
openX.value = Math.floor(res.left) - 10
2025-03-24 17:37:51 +08:00
}
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)
}
})
})
.exec()
}
}
const rulerTouchStart = () => {
}
const rulerTouchMove = () => {
}
const rulerTouchEnd = () => {
}
const routerBack = () => {
uni.navigateBack()
}
const closeIsOpen = (event : any) => {
const touch = event.touches[0];
let clientX = (Math.floor(touch.clientX))
let clientY = (Math.floor(touch.clientY))
const query = uni.createSelectorQuery()
query
.selectAll('.super-card-time-card')
.boundingClientRect((data : any) => {
data.forEach(async (res : any) => {
// 根据你的条件筛选元素
if (res.dataset.index0 == clickX.value && res.dataset.index1 == clickY.value) {
if (clientX >= Math.floor(res.left) && clientX <= Math.floor(res.right) &&
clientY >= Math.floor(res.top) && clientY <= Math.floor(res.bottom)) {
2025-03-26 17:34:08 +08:00
//调用上一个页面中的方法
uni.navigateBack({
delta: 1,
success: () => {
uni.$emit('where', {
index0: clickX.value,
index1: clickY.value,
});
}
})
2025-03-24 17:37:51 +08:00
}
}
})
})
.exec()
setTimeout(() => {
isopen.value = false;
clickX.value = -1;
clickY.value = -1
}, 100)
2025-03-26 17:34:08 +08:00
}
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) => {
2025-04-02 17:33:46 +08:00
if (element1.directiveName && element1.cycleType !== "日常") {
element1.directiveName = "";
element1.cycleType = ""
element1.startTime = ""
2025-03-26 17:34:08 +08:00
}
})
})
break;
case 2:
changetimearr.value = JSON.parse(JSON.stringify(timearr.value));
changetimearr.value.forEach((element0 : any) => {
element0.children.forEach((element1 : any) => {
2025-04-02 17:33:46 +08:00
if (element1.directiveName && element1.cycleType === "日常") {
element1.directiveName = "";
element1.cycleType = ""
element1.startTime = ""
2025-03-26 17:34:08 +08:00
}
})
})
break;
}
}
2025-03-24 17:37:51 +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;
2025-03-26 17:34:08 +08:00
width: 800rpx;
2025-03-24 17:37:51 +08:00
.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-03-26 17:34:08 +08:00
width: 247rpx;
2025-03-24 17:37:51 +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-03-26 17:34:08 +08:00
width: 247rpx;
2025-03-24 17:37:51 +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-03-26 17:34:08 +08:00
height: 153rpx;
2025-03-24 17:37:51 +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 {
2025-03-26 17:34:08 +08:00
margin-top: 5rpx;
2025-03-24 17:37:51 +08:00
width: 100%;
2025-03-26 17:34:08 +08:00
height: 58rpx;
2025-03-24 17:37:51 +08:00
background-color: rgb(255, 216, 126);
display: flex;
justify-content: center;
align-items: center;
.icon {
margin: 0 5rpx;
2025-03-26 17:34:08 +08:00
font-size: 20rpx;
padding: 3rpx 5rpx;
2025-03-24 17:37:51 +08:00
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;
}
}
}
}
2025-03-26 17:34:08 +08:00
.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;
}
2025-04-02 17:33:46 +08:00
.titlebutton-target-yellow {
2025-03-26 17:34:08 +08:00
background: #FFDBA1;
// color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 10rpx 30rpx;
border-radius: 20rpx;
font-size: 27rpx;
margin-right: 10rpx;
}
2025-04-02 17:33:46 +08:00
.titlebutton-target-pouple {
2025-03-26 17:34:08 +08:00
background: #7B61FF;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 10rpx 30rpx;
border-radius: 20rpx;
font-size: 27rpx;
margin-right: 10rpx;
}
}
2025-04-02 17:33:46 +08:00
2025-03-26 17:34:08 +08:00
.boom {
position: absolute;
top: 80rpx;
left: 0rpx;
width: 30rpx;
height: 1500rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
z-index: 10;
2025-04-02 17:33:46 +08:00
2025-03-26 17:34:08 +08:00
.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;
}
2025-04-02 17:33:46 +08:00
2025-03-26 17:34:08 +08:00
.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;
}
}
2025-03-24 17:37:51 +08:00
</style>