111111
This commit is contained in:
parent
f0a3122e7a
commit
5f73e7f8de
File diff suppressed because it is too large
Load Diff
|
|
@ -3,6 +3,32 @@
|
|||
<view class="move-font" v-show="savename && clientX" :style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }">
|
||||
{{savename}}
|
||||
</view>
|
||||
<view v-if="saveruler.type"
|
||||
:class="saveruler.type=='日常' ? `title-time-border-yellow`:`title-time-border-pouple`"
|
||||
:style="{ top: `${clientY}rpx`, left: `${clientX}rpx` }" style="font-size: 30rpx;overflow: hidden;">
|
||||
<view class="title-time" v-show="saveruler.time" style="margin-top: 5rpx;">
|
||||
<view class="title-time-time" style="font-size: 30rpx;">
|
||||
{{saveruler.time}}
|
||||
</view>
|
||||
<image class="title-time-button"
|
||||
:src="saveruler.type=='日常'?`/static/index/yellowbian.png`:`/static/index/puoplebian.png`" />
|
||||
<view class="title-time-font">
|
||||
{{saveruler.type}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="margin-top: 20rpx;font-weight: 700;">
|
||||
{{splitString(saveruler.value)[0]}}
|
||||
</view>
|
||||
<view class="down-icons" :style="saveruler.type!='日常'?{backgroundColor:`rgb(212,203,255)`}:{}"
|
||||
v-show="splitString(saveruler.value)[1]">
|
||||
<view class="" v-for="(item,index) in splitString(saveruler.value).slice(1)" :key="index">
|
||||
<view class="icon" :style="saveruler.type!='日常'?{backgroundColor:`rgb(123,97,255)`}:{}">
|
||||
{{splitString(saveruler.value)[1]}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="left-container">
|
||||
<view class="left-head">
|
||||
<image class="left-head-img" src="/static/index/oldman.png" />
|
||||
|
|
@ -25,7 +51,7 @@
|
|||
<!-- 超凶表格 -->
|
||||
<rightItemssecond ref="ruler" :liang="indexNumber" :isshow="menuIndexshowsecond" :canmove="canmove"
|
||||
:darkFans="darkFans" v-show="menuIndex==1" @darkchange="darkchange" @savename="openname"
|
||||
@cleanname="closename" />
|
||||
@saveruler="openruler" @changefangkuang="changefangkuang" @cleanname="closename" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -99,26 +125,39 @@
|
|||
index0: 999,
|
||||
index1: 999,
|
||||
})
|
||||
//翻页计时器
|
||||
const canTrigger = ref(true);
|
||||
//全局获得x轴和y轴
|
||||
const getxyrel = (event) => {
|
||||
// event.stopPropagation();
|
||||
// event.preventDefault();
|
||||
const touch = event.touches[0];
|
||||
clientX.value = 2 * (Math.floor(touch.clientX) - 100);
|
||||
clientY.value = 2 * (Math.floor(touch.clientY) - 55);
|
||||
// console.log("?????",clientX.value,clientY.value)
|
||||
// 遍历数组，找到点击区域所在的对象
|
||||
const translateX = Math.floor(touch.clientX) - 50;
|
||||
const translateY = Math.floor(touch.clientY) - 25;
|
||||
|
||||
const clickedItem = fangkuaiValue.value.find(item => {
|
||||
return translateX >= item.left && translateX <= item.right &&
|
||||
translateY >= item.top && translateY <= item.bottom;
|
||||
|
||||
if (translateX >= item.left && translateX <= item.right &&
|
||||
translateY >= item.top && translateY <= item.bottom) {
|
||||
// console.log("AAAA",item.left,item.right,item.top,item.bottom)
|
||||
}
|
||||
|
||||
return translateX >= Math.floor(item.left) && translateX <= Math.floor(item.right) &&
|
||||
translateY >= Math.floor(item.top) && translateY <= Math.floor(item.bottom);
|
||||
});
|
||||
// 如果找到，则输出该对象的 index0 和 index1
|
||||
if (clickedItem) {
|
||||
const { index0, index1 } = clickedItem.dataset;
|
||||
indexNumber.value.index0 = index0
|
||||
indexNumber.value.index1 = index1
|
||||
// console.log("????",indexNumber.value.index0 ,indexNumber.value.index1)
|
||||
if (clientX.value > 2050 && canTrigger.value) {
|
||||
ruler.value?.nextItems();
|
||||
canTrigger.value = false;
|
||||
setTimeout(() => {
|
||||
canTrigger.value = true;
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
indexNumber.value.index0 = 999
|
||||
indexNumber.value.index1 = 999
|
||||
|
|
@ -129,16 +168,27 @@
|
|||
|
||||
const fangkuaiValue = ref([])
|
||||
//所有适合的方块
|
||||
const openname = (res : string, fangkuai : Object) => {
|
||||
const openname = (res : string, fangkuai : any) => {
|
||||
savename.value = res;
|
||||
canmove.value = false;
|
||||
fangkuaiValue.value = fangkuai
|
||||
}
|
||||
const changefangkuang = (fangkuang : any) => {
|
||||
fangkuaiValue.value = fangkuang
|
||||
console.log("!!!!", fangkuaiValue.value)
|
||||
}
|
||||
//移动方块
|
||||
const saveruler = ref({})
|
||||
const openruler = (res : string, fangkuai : any) => {
|
||||
saveruler.value = res
|
||||
canmove.value = false;
|
||||
fangkuaiValue.value = fangkuai
|
||||
}
|
||||
//解决拖动bug
|
||||
const closename = () => {
|
||||
savename.value = "";
|
||||
canmove.value = true;
|
||||
fangkuaiValue.value = []
|
||||
// fangkuaiValue.value = []
|
||||
}
|
||||
const ruler = ref(null)
|
||||
//结束、禁止滑动
|
||||
|
|
@ -150,8 +200,14 @@
|
|||
index0: 999,
|
||||
index1: 999,
|
||||
};
|
||||
|
||||
if (savename.value) {
|
||||
ruler.value?.rulerEnd(savename.value);
|
||||
} else if (saveruler.value.type) {
|
||||
ruler.value?.rulerMoveEnd(saveruler.value);
|
||||
}
|
||||
savename.value = "";
|
||||
saveruler.value = {};
|
||||
}
|
||||
//节流函数
|
||||
function throttle(fn, delay) {
|
||||
|
|
@ -164,6 +220,37 @@
|
|||
}
|
||||
};
|
||||
}
|
||||
function splitString(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;
|
||||
}
|
||||
// 生命周期钩子
|
||||
onShow(() => {
|
||||
//首次加载和跳转回来需要重新做个动画
|
||||
|
|
@ -279,4 +366,83 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-time-border-yellow {
|
||||
width: 255rpx;
|
||||
height: 189rpx;
|
||||
margin: 10rpx;
|
||||
border: 1rpx solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
// width: calc(100% - 20rpx);
|
||||
// height: calc(100% - 20rpx);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.title-time-border-pouple {
|
||||
width: 255rpx;
|
||||
height: 189rpx;
|
||||
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;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.title-time {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.title-time-time {
|
||||
font-size: 32rpx;
|
||||
margin-left: 27rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.title-time-button {
|
||||
position: absolute;
|
||||
top: -5rpx;
|
||||
right: 0rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.title-time-font {
|
||||
position: absolute;
|
||||
top: 7rpx;
|
||||
right: 5rpx;
|
||||
font-size: 23rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.down-icons {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
background-color: rgb(255, 216, 126);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin: 0 5rpx;
|
||||
font-size: 20rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
background-color: rgb(255, 138, 0);
|
||||
color: #fff;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -3323,28 +3323,32 @@
|
|||
justify-content: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 12.5rem);
|
||||
margin-top: 0.9375rem;
|
||||
}
|
||||
.super-card .scroll-x[data-v-337bb5da] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.super-card .super-card-container[data-v-337bb5da] {
|
||||
background-color: #f1f7fd;
|
||||
/* 设置背景图和白色背景 */
|
||||
background: url("../../static/index/clearmountain.png") center / cover, rgba(255, 255, 255, 0.5);
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
background-blend-mode: screen;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
width: 51.5625rem;
|
||||
height: 28.75rem;
|
||||
border-radius: 0.625rem;
|
||||
border: 0.03125rem solid black;
|
||||
border: 0.0625rem solid #fff;
|
||||
box-shadow: 0.3125rem 0.3125rem 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.super-card .super-card-time[data-v-337bb5da] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #e9efff;
|
||||
height: 2.5rem;
|
||||
width: 3.125rem;
|
||||
border-right: 0.03125rem solid #BFBFCB;
|
||||
border-right: 0.03125rem solid transparent;
|
||||
border-image: repeating-linear-gradient(180deg, #0184db 0px, #0184db 0.1875rem, transparent 0.1875rem, transparent 0.375rem) 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
.super-card .super-card-time-und[data-v-337bb5da] {
|
||||
|
|
@ -3353,7 +3357,8 @@
|
|||
align-items: center;
|
||||
width: 3.125rem;
|
||||
flex-direction: column;
|
||||
border-right: 0.03125rem solid #BFBFCB;
|
||||
border-right: 0.03125rem solid transparent;
|
||||
border-image: repeating-linear-gradient(180deg, #0184db 0px, #0184db 0.1875rem, transparent 0.1875rem, transparent 0.375rem) 1;
|
||||
}
|
||||
.super-card .super-card-time-card[data-v-337bb5da] {
|
||||
display: flex;
|
||||
|
|
@ -3361,10 +3366,9 @@
|
|||
align-items: center;
|
||||
height: 6.53125rem;
|
||||
width: calc(100%);
|
||||
border-right: 0.03125rem solid #BFBFCB;
|
||||
border-top: 0.03125rem solid #BFBFCB;
|
||||
border-top: 0.03125rem solid transparent;
|
||||
border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 0.1875rem, transparent 0.1875rem, transparent 0.375rem) 1;
|
||||
flex-direction: column;
|
||||
background-color: #f3f6fc;
|
||||
position: relative;
|
||||
}
|
||||
.super-card .super-card-time-card .boom[data-v-337bb5da] {
|
||||
|
|
@ -3386,6 +3390,7 @@
|
|||
text-align: center;
|
||||
z-index: 10;
|
||||
/* 确保文字在容器内居中 */
|
||||
background: linear-gradient(to bottom, #ffe2b2, #e3deff);
|
||||
}
|
||||
.right-container[data-v-337bb5da] {
|
||||
width: calc(100% - 7.34375rem);
|
||||
|
|
@ -3442,7 +3447,7 @@
|
|||
backdrop-filter: blur(0.25rem);
|
||||
width: 9.0625rem;
|
||||
height: 28.125rem;
|
||||
border-radius: 1.25rem;
|
||||
border-radius: 0.9375rem;
|
||||
margin-top: 0;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
/* 右下角阴影 */
|
||||
|
|
@ -3506,6 +3511,7 @@
|
|||
transition: all 0.4s ease-in-out;
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-items .doctorsay-container-down .doctorsay-container-button .doctorsay-container-button-gun[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
|
|
@ -3526,10 +3532,16 @@
|
|||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container[data-v-337bb5da] {
|
||||
width: 54.0625rem;
|
||||
height: 42rem;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 1.875rem;
|
||||
border: 0.0625rem solid #fff;
|
||||
width: 53.9375rem;
|
||||
height: 41.875rem;
|
||||
/* 设置背景图和白色背景 */
|
||||
background: url("../../static/index/lightbgcnew.png") center / cover, rgba(255, 255, 255, 0.3);
|
||||
-webkit-backdrop-filter: blur(0.625rem);
|
||||
backdrop-filter: blur(0.625rem);
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
background-blend-mode: screen;
|
||||
border-radius: 0.9375rem;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
/* 右下角阴影 */
|
||||
overflow: hidden;
|
||||
|
|
@ -3544,36 +3556,45 @@
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items-all[data-v-337bb5da] {
|
||||
width: calc(100% - 2.65625rem);
|
||||
height: 6.25rem;
|
||||
margin-left: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items[data-v-337bb5da] {
|
||||
display: flex;
|
||||
width: calc(100% - 1.875rem);
|
||||
height: 9.375rem;
|
||||
margin-left: 0.9375rem;
|
||||
overflow-x: auto;
|
||||
width: calc(100% - 2.65625rem);
|
||||
height: 6.25rem;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father[data-v-337bb5da] {
|
||||
margin-left: 0.3125rem;
|
||||
margin-top: 0.46875rem;
|
||||
margin-right: 0.625rem;
|
||||
width: 4.6875rem;
|
||||
height: 4.6875rem;
|
||||
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: 0.78125rem;
|
||||
border: 0.0625rem solid #fff;
|
||||
box-shadow: 0.3125rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.1);
|
||||
transition: all 1.5s ease-in-out;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-father-close-father[data-v-337bb5da] {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
background-color: #0184db;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: -0.3125rem;
|
||||
right: 0.46875rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #02abfe;
|
||||
color: #fff;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-img-father[data-v-337bb5da] {
|
||||
|
|
@ -3581,53 +3602,36 @@
|
|||
height: 3.125rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 让正方形变成圆 */
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-img-father .super-end-items-img[data-v-337bb5da] {
|
||||
width: 2.34375rem;
|
||||
height: 2.34375rem;
|
||||
width: 2.65625rem;
|
||||
height: 2.65625rem;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-img-father-active[data-v-337bb5da] {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
animation: shake-337bb5da 0.5s infinite;
|
||||
/* 让正方形变成圆 */
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-img-father-active .super-end-items-img[data-v-337bb5da] {
|
||||
width: 2.34375rem;
|
||||
height: 2.34375rem;
|
||||
}
|
||||
@keyframes shake-337bb5da {
|
||||
0% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
width: 2.65625rem;
|
||||
height: 2.65625rem;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-font[data-v-337bb5da] {
|
||||
margin-top: 0.3125rem;
|
||||
margin-top: -0.3125rem;
|
||||
font-size: 0.78125rem;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-font-father[data-v-337bb5da] {
|
||||
display: flex;
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .super-card-end .super-end-father .super-end-font-father .super-end-font-gun[data-v-337bb5da] {
|
||||
margin-left: 1.25rem;
|
||||
|
|
@ -3644,8 +3648,9 @@
|
|||
}
|
||||
.right-container .doctorsay-container-view .doctorsay-container-container .doctorsay-container-title[data-v-337bb5da] {
|
||||
width: 100%;
|
||||
height: 4.0625rem;
|
||||
background-color: #f1f6fd;
|
||||
height: 3.28125rem;
|
||||
/* 设置背景图和白色背景 */
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -3794,29 +3799,121 @@
|
|||
font-weight: 800;
|
||||
color: white;
|
||||
}
|
||||
.title-time-delete[data-v-337bb5da] {
|
||||
width: 1.71875rem;
|
||||
height: 1.71875rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
background-color: #02abfe;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
font-size: 1.5625rem;
|
||||
}
|
||||
.title-time[data-v-337bb5da] {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.title-time .title-time-time[data-v-337bb5da] {
|
||||
font-size: 1rem;
|
||||
margin-right: 2.5rem;
|
||||
margin-top: -0.3125rem;
|
||||
margin-left: 1.25rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
.title-time .title-time-button[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
top: -0.875rem;
|
||||
right: -0.78125rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
top: -0.125rem;
|
||||
right: -0.125rem;
|
||||
width: 2.03125rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
.title-time .title-time-zhejiao[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.15625rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
.title-time .title-time-font[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
top: -0.3125rem;
|
||||
right: -0.625rem;
|
||||
font-size: 0.78125rem;
|
||||
top: 0.21875rem;
|
||||
right: 0.15625rem;
|
||||
font-size: 0.625rem;
|
||||
color: #fff;
|
||||
}
|
||||
.popup-delete[data-v-337bb5da] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-backdrop-filter: blur(0.03125rem);
|
||||
backdrop-filter: blur(0.03125rem);
|
||||
background-color: rgba(89, 109, 154, 0.4);
|
||||
/* 添加毛玻璃效果 */
|
||||
z-index: 999;
|
||||
}
|
||||
.popup-delete .popup-delete-content[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
right: 16.09375rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 25rem;
|
||||
height: 15.625rem;
|
||||
background: url("../../static/index/lightbgcnew.png") center / cover, rgba(255, 255, 255, 0.7);
|
||||
border: 0.0625rem solid #fff;
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
background-blend-mode: screen;
|
||||
border-radius: 0.9375rem;
|
||||
box-shadow: 0.3125rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
.popup-delete .popup-delete-content .popup-delete-img[data-v-337bb5da] {
|
||||
width: 7.8125rem;
|
||||
height: 7.1875rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
.popup-delete .popup-delete-content .popup-delete-text[data-v-337bb5da] {
|
||||
font-size: 0.9375rem;
|
||||
color: #42474E;
|
||||
}
|
||||
.popup-delete .popup-delete-content .popup-delete-button[data-v-337bb5da] {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 2.8125rem;
|
||||
margin-top: 0.9375rem;
|
||||
}
|
||||
.popup-delete .popup-delete-content .popup-delete-button .popup-delete-button-left[data-v-337bb5da] {
|
||||
background-color: #02abfe;
|
||||
width: 6.25rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
.popup-delete .popup-delete-content .popup-delete-button .popup-delete-button-right[data-v-337bb5da] {
|
||||
background-color: #ced9e8;
|
||||
width: 6.25rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
.popup-overlay[data-v-337bb5da] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -3912,15 +4009,23 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-backdrop-filter: blur(0.03125rem);
|
||||
backdrop-filter: blur(0.03125rem);
|
||||
background-color: rgba(89, 109, 154, 0.4);
|
||||
/* 添加毛玻璃效果 */
|
||||
z-index: 999;
|
||||
}
|
||||
.popup-song .popup-song-contain[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
right: 13.125rem;
|
||||
width: 40.625rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.625rem;
|
||||
right: 8.4375rem;
|
||||
width: 40.5rem;
|
||||
/* 设置背景图和白色背景 */
|
||||
background: url("../../static/index/clearmountain.png") center / cover, rgba(255, 255, 255, 0.7);
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
border: 0.0625rem solid #fff;
|
||||
/* 使用 screen 混合模式，让图像与白色混合变淡 */
|
||||
background-blend-mode: screen;
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
|
|
@ -3985,9 +4090,10 @@
|
|||
height: 3.125rem;
|
||||
margin-left: 0.625rem;
|
||||
margin-top: 0.625rem;
|
||||
background-color: #fffaf1;
|
||||
background-color: #02abfe;
|
||||
color: #fff;
|
||||
border-radius: 0.625rem;
|
||||
border: 0.03125rem solid #ffb501;
|
||||
border: 0.03125rem solid #02abfe;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -3996,9 +4102,9 @@
|
|||
.ri-img[data-v-337bb5da] {
|
||||
position: absolute;
|
||||
top: -0.125rem;
|
||||
right: -0.09375rem;
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
right: -0.125rem;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
.time-father[data-v-337bb5da] {
|
||||
display: flex;
|
||||
|
|
@ -4019,6 +4125,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.90625rem;
|
||||
box-shadow: 0.15625rem 0.15625rem 0.3125rem rgba(105, 129, 178, 0.4);
|
||||
}
|
||||
.time-father .time-one-target[data-v-337bb5da] {
|
||||
width: 3.125rem;
|
||||
|
|
@ -4033,20 +4140,21 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.90625rem;
|
||||
box-shadow: 0.15625rem 0.15625rem 0.3125rem rgba(105, 129, 178, 0.4);
|
||||
}
|
||||
.time-father .time-one-hui[data-v-337bb5da] {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
margin-left: 0.625rem;
|
||||
margin-top: 0.625rem;
|
||||
background-color: #dadada;
|
||||
color: #fff;
|
||||
background-color: #c2c9d3;
|
||||
border-radius: 0.625rem;
|
||||
border: 0.03125rem solid #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0.90625rem;
|
||||
box-shadow: 0.15625rem 0.15625rem 0.3125rem rgba(105, 129, 178, 0.4);
|
||||
}
|
||||
.button-father[data-v-337bb5da] {
|
||||
height: 6.25rem;
|
||||
|
|
@ -4070,7 +4178,7 @@
|
|||
color: #fff;
|
||||
}
|
||||
.button-father .button-father-wrong[data-v-337bb5da] {
|
||||
background-color: #dadada;
|
||||
background-color: #c2c9d3;
|
||||
width: 6.25rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 1.25rem;
|
||||
|
|
@ -4195,16 +4303,25 @@
|
|||
height: calc(100% - 0.25rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-time-border-red[data-v-337bb5da] {
|
||||
background-color: #dae8fa;
|
||||
width: calc(100%);
|
||||
height: calc(100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* 调整 box-shadow 使其向下投影 */
|
||||
box-shadow: 0px 0.625rem 1.25rem #dae8fa;
|
||||
background: linear-gradient(to right, red, red) top left / 1.875rem 0.25rem no-repeat, linear-gradient(to bottom, red, red) top left / 0.25rem 1.875rem no-repeat, linear-gradient(to left, red, red) top right / 1.875rem 0.25rem no-repeat, linear-gradient(to bottom, red, red) top right / 0.25rem 1.875rem no-repeat, linear-gradient(to right, red, red) bottom left / 1.875rem 0.25rem no-repeat, linear-gradient(to top, red, red) bottom left / 0.25rem 1.875rem no-repeat, linear-gradient(to left, red, red) bottom right / 1.875rem 0.25rem no-repeat, linear-gradient(to top, red, red) bottom right / 0.25rem 1.875rem no-repeat;
|
||||
}
|
||||
.title-time-border-blue[data-v-337bb5da] {
|
||||
background-color: #dae8fa;
|
||||
width: calc(100%);
|
||||
height: calc(100%);
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* 调整 box-shadow 使其向下投影 */
|
||||
|
|
@ -4212,6 +4329,31 @@
|
|||
background: linear-gradient(to right, #0184db, #0184db) top left / 1.875rem 0.25rem no-repeat, linear-gradient(to bottom, #0184db, #0184db) top left / 0.25rem 1.875rem no-repeat, linear-gradient(to left, #0184db, #0184db) top right / 1.875rem 0.25rem no-repeat, linear-gradient(to bottom, #0184db, #0184db) top right / 0.25rem 1.875rem no-repeat, linear-gradient(to right, #0184db, #0184db) bottom left / 1.875rem 0.25rem no-repeat, linear-gradient(to top, #0184db, #0184db) bottom left / 0.25rem 1.875rem no-repeat, linear-gradient(to left, #0184db, #0184db) bottom right / 1.875rem 0.25rem no-repeat, linear-gradient(to top, #0184db, #0184db) bottom right / 0.25rem 1.875rem no-repeat;
|
||||
}
|
||||
.title-time-border-yellow[data-v-337bb5da] {
|
||||
margin: 0.3125rem;
|
||||
border: 0.0625rem solid #d0d8e0;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
width: calc(100% - 0.625rem);
|
||||
height: calc(100% - 0.625rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
box-shadow: 0.25rem 0.25rem 0.5rem rgba(255, 138, 0, 0.7);
|
||||
}
|
||||
.title-time-border-yellow-active-transparent[data-v-337bb5da] {
|
||||
margin: 0.3125rem;
|
||||
border: 0.125rem dashed #ff8a00;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
width: calc(100% - 0.8125rem);
|
||||
height: calc(100% - 0.8125rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
opacity: 0.3;
|
||||
box-shadow: 0.25rem 0.25rem 0.5rem rgba(255, 138, 0, 0.7);
|
||||
}
|
||||
.title-time-border-yellow-active[data-v-337bb5da] {
|
||||
margin: 0.3125rem;
|
||||
border: 0.03125rem solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
|
|
@ -4219,9 +4361,23 @@
|
|||
height: calc(100% - 0.625rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
animation: shakesmall-337bb5da 0.8s infinite;
|
||||
box-shadow: 0.25rem 0.25rem 0.5rem rgba(255, 138, 0, 0.7);
|
||||
}
|
||||
.title-time-border-pouple-active-transparent[data-v-337bb5da] {
|
||||
margin: 0.3125rem;
|
||||
border: 0.125rem dashed #7B61FF;
|
||||
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
width: calc(100% - 0.8125rem);
|
||||
height: calc(100% - 0.8125rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
opacity: 0.3;
|
||||
box-shadow: 0.25rem 0.25rem 0.5rem rgba(123, 97, 255, 0.7);
|
||||
}
|
||||
.title-time-border-pouple[data-v-337bb5da] {
|
||||
margin: 0.3125rem;
|
||||
|
|
@ -4231,9 +4387,73 @@
|
|||
height: calc(100% - 0.625rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
box-shadow: 0.25rem 0.25rem 0.5rem rgba(123, 97, 255, 0.7);
|
||||
}
|
||||
.title-time-border-pouple-active[data-v-337bb5da] {
|
||||
margin: 0.3125rem;
|
||||
border: 0.03125rem solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
width: calc(100% - 0.625rem);
|
||||
height: calc(100% - 0.625rem);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
animation: shakesmall-337bb5da 1s infinite;
|
||||
box-shadow: 0.25rem 0.25rem 0.5rem rgba(123, 97, 255, 0.7);
|
||||
}
|
||||
.down-icons[data-v-337bb5da] {
|
||||
margin-top: 0.3125rem;
|
||||
width: 100%;
|
||||
height: 1.875rem;
|
||||
background-color: #ffd87e;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.down-icons .icon[data-v-337bb5da] {
|
||||
margin: 0 0.15625rem;
|
||||
font-size: 0.625rem;
|
||||
padding: 0.15625rem 0.3125rem;
|
||||
background-color: #ff8a00;
|
||||
color: #fff;
|
||||
border-radius: 0.15625rem;
|
||||
}
|
||||
@keyframes shake-337bb5da {
|
||||
0% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
}
|
||||
@keyframes shakesmall-337bb5da {
|
||||
0% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.backgroundContainer[data-v-1cf27b2a] {
|
||||
|
|
@ -4324,3 +4544,70 @@
|
|||
margin: 1.5625rem 0;
|
||||
z-index: 100;
|
||||
}
|
||||
.title-time-border-yellow[data-v-1cf27b2a] {
|
||||
width: 7.96875rem;
|
||||
height: 5.90625rem;
|
||||
margin: 0.3125rem;
|
||||
border: 0.03125rem solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #fff1db, #ffe2b2);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.title-time-border-pouple[data-v-1cf27b2a] {
|
||||
width: 7.96875rem;
|
||||
height: 5.90625rem;
|
||||
margin: 0.3125rem;
|
||||
border: 0.03125rem solid #dae8fa;
|
||||
background: linear-gradient(to bottom, #f1eeff, #e3deff);
|
||||
border-radius: 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.title-time[data-v-1cf27b2a] {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.title-time .title-time-time[data-v-1cf27b2a] {
|
||||
font-size: 1rem;
|
||||
margin-left: 0.84375rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
.title-time .title-time-button[data-v-1cf27b2a] {
|
||||
position: absolute;
|
||||
top: -0.15625rem;
|
||||
right: 0;
|
||||
width: 2.1875rem;
|
||||
height: 2.1875rem;
|
||||
}
|
||||
.title-time .title-time-font[data-v-1cf27b2a] {
|
||||
position: absolute;
|
||||
top: 0.21875rem;
|
||||
right: 0.15625rem;
|
||||
font-size: 0.71875rem;
|
||||
color: #fff;
|
||||
}
|
||||
.down-icons[data-v-1cf27b2a] {
|
||||
margin-top: 0.625rem;
|
||||
width: 100%;
|
||||
height: 1.5625rem;
|
||||
background-color: #ffd87e;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.down-icons .icon[data-v-1cf27b2a] {
|
||||
margin: 0 0.15625rem;
|
||||
font-size: 0.625rem;
|
||||
padding: 0.15625rem 0.3125rem;
|
||||
background-color: #ff8a00;
|
||||
color: #fff;
|
||||
border-radius: 0.15625rem;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in New Issue