.backgroundContainer.data-v-b6cc7861 { display: flex; position: relative; width: 100%; height: 100vh; background-image: url('../../static/index/lightbgcnew.png'); background-size: cover; background-position: center center; overflow: hidden; z-index: 12; } .darkbackgroundContainer.data-v-b6cc7861 { display: flex; position: relative; width: 100%; height: 100vh; background-image: url('../../static/index/background.png'); background-size: cover; background-position: center center; overflow: hidden; z-index: 11; } .move-font.data-v-b6cc7861 { position: absolute; z-index: 10; pointer-events: none; background-color: #c9e8ff; border-radius: 20rpx; border: 2rpx solid #fff; width: 220rpx; height: 100rpx; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 40rpx; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); will-change: transform; } .left-container.data-v-b6cc7861 { width: 235rpx; height: 100%; } .left-container .blue-circle-pos.data-v-b6cc7861 { position: relative; } .left-container .blue-circle-pos .blue-circle.data-v-b6cc7861 { position: absolute; top: -50rpx; left: -68rpx; } .left-container .blue-circle-pos .blue-circle .blue-circle-size.data-v-b6cc7861 { width: 170rpx; height: 250rpx; } .left-container .left-head.data-v-b6cc7861 { display: flex; justify-content: center; align-items: center; flex-direction: column; } .left-container .left-head .left-head-img.data-v-b6cc7861 { width: 150rpx; height: 150rpx; margin-top: 60rpx; } .left-container .left-head .left-head-font.data-v-b6cc7861 { font-weight: 700; font-size: 40rpx; } .left-container .left-head .left-head-font-dark.data-v-b6cc7861 { font-weight: 700; font-size: 40rpx; background: linear-gradient(to right, #EBF4FF, #ADC4E0); -webkit-background-clip: text; color: transparent; } .left-container .left-img-container.data-v-b6cc7861 { display: flex; justify-content: center; align-items: center; flex-direction: column; } .left-container .left-img-container .left-img.data-v-b6cc7861 { width: 93rpx; height: 93rpx; margin: 50rpx 0; z-index: 100; } .title-time-border-yellow.data-v-b6cc7861 { width: 255rpx; height: 189rpx; margin: 10rpx; border: 1rpx solid #dae8fa; background: linear-gradient(to bottom, #fff1db, #ffe2b2); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; position: absolute; z-index: 10; } .title-time-border-pouple.data-v-b6cc7861 { width: 255rpx; height: 189rpx; margin: 10rpx; border: 1rpx solid #dae8fa; background: linear-gradient(to bottom, #f1eeff, #e3deff); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; position: absolute; z-index: 10; } .title-time.data-v-b6cc7861 { display: flex; width: 100%; position: relative; } .title-time .title-time-time.data-v-b6cc7861 { font-size: 32rpx; margin-left: 27rpx; margin-top: 12rpx; } .title-time .title-time-button.data-v-b6cc7861 { position: absolute; top: -5rpx; right: 0rpx; width: 70rpx; height: 70rpx; } .title-time .title-time-font.data-v-b6cc7861 { position: absolute; top: 7rpx; right: 5rpx; font-size: 23rpx; color: #fff; } .down-icons.data-v-b6cc7861 { margin-top: 20rpx; width: 100%; height: 50rpx; background-color: #ffd87e; display: flex; justify-content: center; align-items: center; } .down-icons .icon.data-v-b6cc7861 { margin: 0 5rpx; font-size: 20rpx; padding: 5rpx 10rpx; background-color: #ff8a00; color: #fff; border-radius: 5rpx; }