123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- .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:#333;
- 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; }
- }
|