.super-card { display: flex; width: 100%; .super-card-container { background-blend-mode: screen; isolation: isolate; overflow: hidden; margin-left: 10rpx; width: 1455rpx; border-left: 0; position: relative; border-radius: 30rpx; overflow: hidden; border: 3rpx dashed #dde1e6; } .super-card-right { border-right: 1rpx solid transparent; border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; } .super-card-time { display: flex; justify-content: center; align-items: center; height: 50rpx; width: 289.3rpx; border-bottom: 1rpx solid transparent; border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; /* font-weight: 700; */ z-index: -1; font-size: 25rpx; color: #A9ACB1; background-color: #EDF3FD; } .super-card-time-und { display: flex; justify-content: center; align-items: center; width: 290rpx; flex-direction: column; border-right: 1rpx solid transparent; border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; .title-time-img { width: 65rpx; height: 65rpx; margin-top: -5rpx; } .title-time-font-rel { font-size: 32rpx; font-weight: 600; /* margin-bottom: 5rpx; */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: black; } .title-time-font-tags { font-size: 24rpx; font-weight: 600; /* margin-bottom: 5rpx; */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #999; } .title-time-items { display: flex; justify-content: space-around; align-items: center; .right-box-items-button { width: 35rpx; height: 35rpx; margin: 0 5rpx; } } } .super-card-time-card { display: flex; justify-content: center; align-items: center; height: 234rpx; width: 100%; transition: all 0.8s; border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; } } .right-container { width: calc(100% - 260rpx); height: 100vh; transition: opacity 1s ease; position: relative; margin-left: -50rpx; .joystick { position: absolute; bottom: 200rpx; left: 20rpx; width: 300rpx; height: 300rpx; z-index: 9999; } .outer-circle { width: 100%; height: 100%; border-radius: 50%; background-color: rgba(127, 127, 127, 0.1); position: relative; } .inner-circle { width: 120rpx; height: 120rpx; border-radius: 50%; background-color: rgba(127, 127, 127, 0.3); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .doctorsay-container-view { width: 100%; height: 1350rpx; display: flex; margin-top: 62rpx; .doctorsay-container-container { width: 100%; overflow: hidden; } } } .title-time-blue { /* 你的定位与尺寸保持不变 */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; .blue-img { width: 100%; height: 100%; } } .time-button-orange-spe { transition: all 1s; position: absolute; width: 280rpx; height: 100rpx; padding: 0 20rpx; border-radius: 20rpx; border-top-right-radius: 0rpx; border: 2rpx solid #e8e9eb; background-color: #fff; color: #545569; bottom: -100rpx; left: -130rpx; display: flex; justify-content: center; align-items: center; z-index: 999; } .time-button-orange { transition: all 1s; position: absolute; width: 280rpx; height: 100rpx; border-radius: 20rpx; padding: 0 20rpx; border: 2rpx solid #e8e9eb; border-bottom-right-radius: 0rpx; background-color: #fff; top: -90rpx; left: -130rpx; color: #545569; display: flex; justify-content: center; align-items: center; z-index: 999; } .title-time { display: flex; width: 100%; position: relative; height: 100%; padding: 20rpx; .card-time { position: absolute; bottom: 20rpx; left: 20rpx; font-size: 27rpx; } .card-time-red { position: absolute; bottom: 20rpx; left: 20rpx; font-size: 27rpx; color: #E33B3B; } .card-time-blue { position: absolute; bottom: 20rpx; left: 20rpx; font-size: 27rpx; color: #4690FF; } .title-time-time { font-size: 32rpx; margin: 0 auto; font-weight: 600; } .title-time-button { position: absolute; top: -6rpx; right: -4rpx; width: 55rpx; height: 40rpx; } .title-time-font { position: absolute; top: 0rpx; right: 4rpx; font-size: 20rpx; color: #1083f8; } } .title-time-border { margin-top: 4rpx; margin-left: 4rpx; width: calc(100% - 8rpx); height: calc(100% - 8rpx); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; } .title-time-border-big { transform: scale(1.3); transform-origin: top; border-top: 0rpx solid #fff; transition: transform 0.5s ease-out, opacity 0.5s ease-out; z-index: 999; display: flex; justify-content: center; align-items: center; height: 226rpx; width: 100%; border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; } .title-time-border-big-top { transform: scale(1.3); transform-origin: top; border-top: 0rpx solid #fff; transition: transform 0.5s ease-out, opacity 0.5s ease-out; z-index: 999; display: flex; justify-content: center; align-items: center; height: 226rpx; width: 100%; border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; } .title-time-border-yellow { border: 2rpx solid #e5e6e6; width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; background-color: #fdfeff; flex-direction: column; } /* .title-time-border-target{ border: 2rpx solid #46B2F6; width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; background-color: #fdfeff; flex-direction: column; } */ .title-time-border-hisOk { border: 2rpx solid #D4E4FE; width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; background-color: #F6F9FF; flex-direction: column; } .title-time-border-current { border: 3rpx dashed #4690FF; width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; background-color: #F6F9FF; flex-direction: column; } .title-time-border-hisFaild { border: 2rpx dashed #FFE2E2; width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; background-color: #FFF8F8; flex-direction: column; } .title-time-border-yellow-active-transparent { width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; opacity: 0.3; background-color: rgba(255, 255, 255, 0.5); } .title-time-border-yellow-active { border: 1rpx solid #dae8fa; width: calc(100% - 20rpx); height: calc(100% - 20rpx); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; animation: shakesmall 0.8s infinite; background-color: rgba(255, 255, 255, 0.5); } @keyframes shakesmall { 0% { transform: rotate(-2deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(-2deg); } } .boom-father { position: absolute; top: 110rpx; left: -17rpx; width: 60rpx; height: 1170rpx; margin-top: 0rpx; overflow: hidden; z-index: 999; } .boom { height: 3000rpx; display: flex; flex-direction: column; overflow: hidden; z-index: 0; .boom-son { height: 234rpx; width: 60rpx; font-size: 30rpx; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 10; font-size: 22rpx; color: #A9ACB1; .boom-text { width: 30rpx; height: 50rpx; border: 2rpx dashed #A9ACB1; border-radius: 20rpx; display: flex; justify-content: center; align-items: center; z-index: 1; background-color: #eff0f4; } } .boom-son-target { height: 250rpx; width: 60rpx; font-size: 30rpx; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 10; font-weight: 700; font-size: 25rpx; color: #A9ACB1; background: linear-gradient(to bottom, #ff8a00, #eceaff); } } .left-top { border-top-left-radius: 0 !important; } .right-top { border-top-right-radius: 0 !important; } .left-bottom { border-bottom-left-radius: 0 !important } .right-bottom { border-bottom-right-radius: 0 !important; } .xian-bian { height: 100%; position: absolute; top: 0; left: 0; z-index: 999; border-right: 1rpx solid transparent; border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; } .pulic-time { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #99C9FD; font-size: 35rpx; font-weight: 600; } .right-order { position: fixed; right: 20rpx; top: 62rpx; height: 1220rpx; width: 430rpx; background-color: #fff; border-radius: 30rpx; .order-title { width: 100%; height: 100rpx; display: flex; align-items: center; .order-month { margin-left: 30rpx; font-size: 30rpx; font-weight: 600; width: 80rpx; } .order-day { width: 300rpx; height: 100rpx; .days-father { display: flex; align-items: center; .days { height: 100rpx; min-width: 50rpx; display: flex; justify-content: center; align-items: center; font-size: 26rpx; color: #BBBABA; } .targetdays { height: 50rpx; min-width: 50rpx; display: flex; justify-content: center; align-items: center; font-size: 26rpx; color: #fff; border-radius: 50%; background-color: #4690FF; } } } } } .calendar-father { position: fixed; top: 150rpx; right: 30rpx; width: 700rpx; height: 600rpx; z-index: 101; } .mengban { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; background: RGBA(239, 240, 244, 0.55); }