.backgroundContainer.data-v-d5065f48 { 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.data-v-d5065f48 { 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.data-v-d5065f48 { border: 2rpx solid #fff; width: calc(100% - 4rpx); height: calc(100vh - 4rpx); /* 设置背景图和白色背景 */ /* 使用 screen 混合模式,让图像与白色混合变淡 */ background-color: #eff0f4; border-radius: 30rpx; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); /* 右下角阴影 */ overflow: hidden; } .doctorsay-container-container .super-card-end.data-v-d5065f48 { width: 100%; display: flex; } .doctorsay-container-container .super-card-end .super-end-father.data-v-d5065f48 { height: 100%; display: flex; flex-direction: column; width: 100%; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items-all.data-v-d5065f48 { width: calc(100% - 85rpx); height: 200rpx; margin-left: 40rpx; margin-right: 40rpx; margin-top: 20rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items.data-v-d5065f48 { display: flex; width: calc(100% - 85rpx); height: 200rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father.data-v-d5065f48 { 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; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-father-close-father.data-v-d5065f48 { width: 40rpx; height: 40rpx; border-radius: 50%; display: flex; background-color: #A9ACB1; justify-content: center; align-items: center; position: absolute; top: 0rpx; right: 0rpx; z-index: 10; color: #fff; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-img-father.data-v-d5065f48 { width: 100rpx; height: 100rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center; /* 让正方形变成圆 */ } .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-d5065f48 { width: 85rpx; height: 85rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-img-father-active.data-v-d5065f48 { width: 100rpx; height: 100rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center; animation: shake 0.5s infinite; /* 让正方形变成圆 */ } .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-d5065f48 { width: 85rpx; height: 85rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-items .super-end-items-father .super-end-items-font.data-v-d5065f48 { margin-top: -10rpx; font-size: 25rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-font-father.data-v-d5065f48 { display: flex; margin-top: 20rpx; margin-bottom: 10rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-font-father .super-end-font-gun.data-v-d5065f48 { margin-left: 40rpx; margin-right: 20rpx; margin-top: 5rpx; width: 13rpx; height: 40rpx; background: linear-gradient(to bottom, #04BCED, #0160CE); border-radius: 10rpx; } .doctorsay-container-container .super-card-end .super-end-father .super-end-font-father .super-end-font-font.data-v-d5065f48 { font-size: 38rpx; font-weight: 700; } .doctorsay-container-container .doctorsay-container-title.data-v-d5065f48 { width: 100%; height: 105rpx; margin-top: 50rpx; display: flex; align-items: center; justify-content: space-between; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right.data-v-d5065f48 { height: 100%; display: flex; align-items: center; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-juzhen.data-v-d5065f48 { 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; margin-right: 50rpx; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-button-father.data-v-d5065f48 { display: flex; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-button-father .doctorsay-container-button-target.data-v-d5065f48 { 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-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-button-father .doctorsay-container-button.data-v-d5065f48 { 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-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-right-kuai-cheng.data-v-d5065f48 { background-color: #FFDBA1; height: 35rpx; width: 35rpx; border-radius: 7rpx; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-right-kuai-zi.data-v-d5065f48 { background-color: #7B61FF; height: 35rpx; width: 35rpx; border-radius: 7rpx; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-right .doctorsay-container-kuai-font.data-v-d5065f48 { font-size: 32rpx; margin-left: 10rpx; margin-right: 25rpx; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-left.data-v-d5065f48 { display: flex; } .doctorsay-container-container .doctorsay-container-title .doctorsay-container-left .doctorsay-container-left-gun.data-v-d5065f48 { 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-container .doctorsay-container-title .doctorsay-container-left .doctorsay-container-left-font.data-v-d5065f48 { font-size: 38rpx; font-weight: 700; } .super-card.data-v-d5065f48 { display: flex; justify-content: center; width: 100%; height: calc(100% - 150rpx); margin-top: 100rpx; } .super-card .scroll-x.data-v-d5065f48 { height: 100%; width: 100%; } .super-card .super-card-container.data-v-d5065f48 { /* 设置背景图和白色背景 */ /* 使用 screen 混合模式,让图像与白色混合变淡 */ overflow: hidden; width: calc(100% - 100rpx); height: 100%; position: relative; } .super-card .super-card-time.data-v-d5065f48 { display: flex; justify-content: center; align-items: center; height: 80rpx; width: 380rpx; color: #A9ACB1; } .super-card .super-card-time-und.data-v-d5065f48 { display: flex; justify-content: center; align-items: center; width: 380rpx; position: relative; flex-direction: column; border-right: 1rpx solid transparent; border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; } .super-card .super-card-time-card.data-v-d5065f48 { display: flex; justify-content: center; align-items: center; width: calc(100%); border-top: 1rpx solid transparent; border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; } .title-time-border-yellow.data-v-d5065f48 { margin: 10rpx; background-color: #fff; width: calc(100% - 40rpx); height: calc(100% - 40rpx); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; } .title-time-border-pouple.data-v-d5065f48 { margin: 10rpx; background-color: #fff; width: calc(100% - 40rpx); height: calc(100% - 40rpx); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; } .title-time-border.data-v-d5065f48 { margin: 10rpx; width: calc(100% - 40rpx); height: calc(100% - 40rpx); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; } .title-time.data-v-d5065f48 { display: flex; width: 100%; } .title-time .title-time-time.data-v-d5065f48 { font-size: 32rpx; margin: 0 auto; margin-top: 12rpx; } .title-time .title-time-button.data-v-d5065f48 { position: absolute; top: -4rpx; right: -4rpx; width: 65rpx; height: 60rpx; } .title-time .title-time-zhejiao.data-v-d5065f48 { position: absolute; top: 0rpx; left: 5rpx; width: 40rpx; height: 40rpx; } .title-time .title-time-font.data-v-d5065f48 { position: absolute; top: 7rpx; right: 5rpx; font-size: 20rpx; color: #fff; } .down-icons.data-v-d5065f48 { margin-top: 5rpx; width: 100%; height: 58rpx; background-color: #ffd87e; display: flex; justify-content: center; align-items: center; } .down-icons .icon.data-v-d5065f48 { margin: 0 5rpx; font-size: 20rpx; padding: 3rpx 5rpx; background-color: #ff8a00; color: #fff; border-radius: 5rpx; } .popup-overlay-content.data-v-d5065f48 { position: fixed; display: flex; 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 .popup-overlay-content-left.data-v-d5065f48 { height: 100%; width: 350rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; } .popup-overlay-content .popup-overlay-content-left .popup-overlay-content-left-img.data-v-d5065f48 { width: 280rpx; height: 180rpx; margin-top: -30rpx; } .popup-overlay-content .popup-overlay-content-left .popup-overlay-content-left-font.data-v-d5065f48 { font-size: 30rpx; } .popup-overlay-content .popup-overlay-content-right.data-v-d5065f48 { height: 100%; width: 450rpx; position: relative; } .popup-overlay-content .popup-overlay-content-right .time-font.data-v-d5065f48 { 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; } .popup-overlay-content .popup-overlay-content-right .time-text.data-v-d5065f48 { margin-left: 10rpx; font-size: 30rpx; width: 380rpx; margin-bottom: 50rpx; line-height: 35rpx; } .popup-overlay-content .popup-overlay-content-right .right-richang.data-v-d5065f48 { background-color: #FFC363; position: absolute; top: 108rpx; right: 50rpx; padding: 5rpx; border-radius: 10rpx; } .popup-overlay-content .popup-overlay-content-right .right-richangnot.data-v-d5065f48 { background-color: #7B61FF; position: absolute; top: 108rpx; right: 50rpx; padding: 5rpx; border-radius: 10rpx; color: #fff; } .popup-overlay-content .popup-overlay-content-right .right-crush.data-v-d5065f48 { position: absolute; top: 20rpx; right: 20rpx; width: 70rpx; height: 70rpx; animation: shake 0.5s 3; } .titlebutton-father.data-v-d5065f48 { display: flex; margin-right: 20rpx; } .titlebutton-father .titlebutton.data-v-d5065f48 { background-color: #fff; display: flex; justify-content: center; align-items: center; padding: 10rpx 30rpx; border-radius: 20rpx; font-size: 27rpx; margin-right: 10rpx; } .titlebutton-father .titlebutton-target.data-v-d5065f48 { 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-father .titlebutton-target-yellow.data-v-d5065f48 { background: #FFDBA1; display: flex; justify-content: center; align-items: center; padding: 10rpx 30rpx; border-radius: 20rpx; font-size: 27rpx; margin-right: 10rpx; } .titlebutton-father .titlebutton-target-pouple.data-v-d5065f48 { 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.data-v-d5065f48 { position: absolute; top: 80rpx; left: 0rpx; width: 30rpx; height: 1500rpx; display: flex; flex-direction: column; align-items: center; overflow: hidden; z-index: 10; } .boom .boom-son.data-v-d5065f48 { height: 153rpx; width: 100%; font-size: 22rpx; letter-spacing: 5rpx; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; /* 竖排文字,从右往左 */ text-align: center; z-index: 10; /* 确保文字在容器内居中 */ background: linear-gradient(to bottom, #ffe2b2, #e3deff); border-bottom-right-radius: 40rpx; border-top-right-radius: 40rpx; } .boom .boom-son-target.data-v-d5065f48 { height: 153rpx; width: 100%; font-size: 22rpx; letter-spacing: 5rpx; -webkit-writing-mode: vertical-rl; 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; } .title-time-blue.data-v-d5065f48 { /* 你的定位与尺寸保持不变 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 105%; height: 105%; z-index: 10; --color: #99C9FD; --thick: 2px; --radius: 16px; border: var(--thick) dashed var(--color); border-radius: var(--radius); background: repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / 100% var(--thick) no-repeat, /* 下边 */ repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) bottom left / 100% var(--thick) no-repeat, /* 左边 */ repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / var(--thick) 100% no-repeat, /* 右边 */ repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top right / var(--thick) 100% no-repeat; } .title-time-font-rel.data-v-d5065f48 { min-width: 0; /* 关键:允许在 flex 中收缩以触发 overflow */ overflow: hidden; text-align: center; } .xian-bian.data-v-d5065f48 { 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; } .bottom-bian.data-v-d5065f48 { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 999; border-bottom: 1rpx solid transparent; border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; }