* { margin: 0; padding: 0; } .wrap { width: 100vw; height: 100vh; background: #f5f5f5; box-sizing: border-box; padding: 0.2rem; } .content { background: rgba(255, 255, 255, 1); box-shadow: 0 0.03rem 0.1rem 0 rgba(0, 0, 0, 0.05); border-radius: 0.05rem; box-sizing: border-box; padding: 0 0.3rem; } .content-info { width: 100%; height: 1.2rem; border-bottom: 0.02rem solid RGBA(245, 245, 245, 1); display: flex; align-items: center; } .content-info>input { display: block; width: 100%; height: 100%; border: none; outline: none; font-size: 0.28rem; font-weight: 400; color: rgba(36, 36, 36, 1); } .forget { display: block; font-size: 0.28rem; text-align: right; box-sizing: border-box; padding-top: 0.2rem; color: #666; text-decoration: none; } .submit { width: 100%; height: 1rem; background: #6FA1FB; border-radius: 0.1rem; font-size: 0.30rem; font-weight: 400; color: rgba(255, 255, 255, 1); line-height: 1rem; text-align: center; margin-top: 0.3rem; } .submit>span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(141, 192, 254, 0.5), rgba(84, 143, 246, 0.5)); border-radius: 0.05rem; } .tips { width: 50%; height: 0.8rem; background: #ecf5ff; opacity: 0.8; border: #6FA1FB 1px solid; color: #409eff; position: fixed; left: 0; right: 0; top: 2rem; margin: auto; border-radius: 0.1rem; font-size: 0.3rem; text-align: center; line-height: 0.8rem; } /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateY(-10px); opacity: 0; } .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }