.mine { padding: 48px 20px; // min-height: 100vh; background-color: #041129; .before-painting { padding: 0 20px; } .title { width: 100%; display: flex; justify-content: center; .title-img { width: 500px; height: 120px; } } .banner { position: relative; margin-top: 60px; .banner-content { position: relative; left: 50%; transform: translateX(-50%); width: 100%; height: 730px; .content-img { width: 100%; height: 100%; } .album_swiper_video{ width: 100%; height: 100%; } .delete { position: absolute; right: -20px; top: -20px; width: 40px; height: 40px; } } .banner-tips { margin-top: 20px; text-align: center; font-size: 28px; font-family: PingFang SC; font-weight: bold; color: #FDFDFD; line-height: 40px; } } .step { margin-top: 60px; width: 100%; display: flex; justify-content: center; .step-img { width: 536px; height: 76px; } } .update { margin-top: 40px; width: 100%; display: flex; justify-content: space-between; .update-button-more{ width: 206px; height: 94px; display: flex; justify-content: center; align-items: center; background: #2C2C2C; border-radius: 46px; font-size: 32px; font-family: PingFang SC; font-weight: bold; color: #FDFDFD; } .update-button { width: 418px; height: 94px; background: linear-gradient(90deg, #0F83FE, #01FBCD); display: flex; justify-content: center; align-items: center; font-size: 32px; border-radius: 46px; font-family: PingFang SC; font-weight: bold; color: #FDFDFD; } .update-button:active { opacity: 0.5; } } .tip-img { margin-top: 54px; width: 100%; display: flex; justify-content: center; .ps-image { width: 566px; height: 194px; } } .after-painting { padding: 0 60px; .result-banner { position: relative; margin-top: 20px; .result-banner-content { position: relative; left: 50%; transform: translateX(-50%); width: 440px; .result-content-img { width: 100%; min-height: 440px; } .delete { position: absolute; right: -20px; top: -20px; width: 40px; height: 40px; } } .banner-tips { margin-top: 20px; text-align: center; font-size: 28px; font-family: PingFang SC; font-weight: bold; color: #FDFDFD; line-height: 40px; } } .after-tips { margin-top: 60px; text-align: center; font-size: 36px; font-family: PingFang SC; font-weight: bold; color: #FFFFFF; } .result-update { margin-top: 40px; .result-recharge-button { background: linear-gradient(90deg, #C367DE, #3342FF); border-radius: 46px; width: 100%; height: 94px; display: flex; align-items: center; justify-content: center; .result-recharge-button-content { .result-recharge-button-top { font-size: 32px; font-family: PingFang SC; font-weight: bold; text-align: center; color: #FFFFFF; line-height: 40px; } .result-recharge-button-bottom { font-size: 24px; font-family: PingFang SC; font-weight: bold; text-align: center; color: rgba(255, 255, 255, .7); line-height: 40px; } } } .result-update-button { margin-top: 38px; border-radius: 46px; width: 100%; height: 94px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-family: PingFang SC; font-weight: bold; color: #FDFDFD; border: 2px solid #FFFFFF; .result-update-img { width: 52px; height: 52px; display: block; margin-right: 10px; } } .result-update-button:active { opacity: 0.5; } } } /* 定义动画 */ @keyframes shrink { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(0px) scale(0.95); } } /* 应用动画 */ .update-active { animation: shrink 1.2s ease-in-out infinite; } }