.swiper { height: 100%; } .swiper-item { height: 100%; } .backup { position: fixed;left:40rpx;width:80rpx;height:80rpx; top: calc(30rpx + var(--status-bar-height)); } .setps-container { width: 100vw; height: 100vh; position: relative; background: #F7F7F8; &-title_image { width: 100%; height: calc(308rpx + var(--status-bar-height)); } &-top { width: 100%; position: absolute; top: calc(140rpx + var(--status-bar-height)); border-top-left-radius: 60rpx; border-top-right-radius: 60rpx; display: flex; flex-direction: column; align-items: center; background: #F7F7F8; &_title { margin-top: 73rpx; margin-bottom: 10rpx; font-size: 36rpx; font-weight: bold; color: #3D3D3D; } &_line { width: 600rpx; height: 5rpx; border-radius: 5rpx; background: #D8D8D8; margin-bottom: 30rpx; &__lineTow { width: 120rpx; height: 5rpx; border-radius: 5rpx; background: #000000; } &__lineTow2 { width: 120rpx;margin-left:120rpx; height: 5rpx; border-radius: 5rpx; background: #000000; } &__lineTow3 { width: 120rpx;margin-left:240rpx; height: 5rpx; border-radius: 5rpx; background: #000000; } &__lineTow4 { width: 120rpx;margin-left:360rpx; height: 5rpx; border-radius: 5rpx; background: #000000; } &__lineTow5 { width: 120rpx;margin-left:480rpx; height: 5rpx; border-radius: 5rpx; background: #000000; } } &_desc { font-size: 42rpx; font-weight: bold; color: #3D3D3D; } } &-center { width: 100%; height: 600rpx; margin-top: 100rpx; display: flex;flex-direction: column;justify-content: flex-start;align-items: center; .avator { width:380rpx;height:380rpx; } .scroll-text { width:700rpx;height: 500rpx;margin:25rpx; overflow: scroll; } .cucang { font-size:38rpx;text-align: center;padding:30rpx; } .scroll-text-content { color:#333;animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */ } .bg-content { display: flex;flex-direction: column;justify-content: center;align-items: center; .avator { animation: spin 5s linear infinite; } } } &-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; &__btn { width: 516rpx; height: 88rpx; border-radius: 66rpx; background: #AEE500; font-size: 36rpx; font-weight: 600; color: #3D3D3D; text-align: center; line-height: 88rpx; text { color:#666;font-size: 24rpx; } } &__tips { font-size: 23rpx; font-weight: 500; color: #A3A3A3; margin-bottom: 16rpx; } } } .pop { position: fixed;left:0;top:0;width:750rpx;height:100vh; background-color: #fff; .blurred-background { position: absolute; width: 750rpx; height: 100vh; background-image: url('/static/make/1_12.png'); /* 替换为你的图片URL */ background-size: cover; filter: blur(10px); /* 调整模糊程度 */ z-index:1; } .xinxiang { position: absolute;height:100vh;width:100vh; z-index:99; } .play_video { position: absolute;left:30rpx;top:40%;width:80rpx;height:80rpx; z-index:100; } .backup { position: absolute;left:40rpx;width:80rpx;height:80rpx; z-index:9999; top: calc(50rpx + var(--status-bar-height)); } .cucang { position: absolute;top:220rpx;z-index: 9999; padding:30rpx;color:#fff;font-size: 38rpx;text-align: center; animation: shine 1s ease-in-out infinite; text-shadow: 0 0 10px #fff; } .scroll-text { position: absolute;bottom:20rpx;z-index: 9999; width:700rpx;height: 500rpx;margin:25rpx; overflow: hidden; } .scroll-text-content { position: absolute; bottom: 0;color:#fff; animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */ } .video-container { position: relative; display: inline-block; width:100%;height:100%; } .video-text { position: absolute; top: 100rpx; left: 20rpx;width:100%; transform: translate(-50%, -50%); color: #ff0000; font-size: 24px; text-shadow: 2px 2px 4px #000;z-index: 99999; } @keyframes scroll { 0% { transform: translateY(100%); /* 从底部开始 */ } 100% { transform: translateY(-50%); /* 滚动到顶部 */ } } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes shine { 0% { text-shadow: 0 0 10px #fff; } 50% { text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff0000; } 100% { text-shadow: 0 0 10px #fff; } }