@import "~antd/es/style/themes/default.less"; @keyframes bgmove { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes rebgmove { 0% { opacity: 0; } 100% { opacity: 1; } } .main { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding-top: 10vh; overflow: hidden; background-color: #f0f2f5; background-image: url("https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg"); background-repeat: no-repeat; background-position: center 110px; background-size: 100%; border-radius: 4px; .head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; color: #ffffff; font-weight: bolder; font-size: 20px; img { animation: rebgmove 4s; } img:last-child { position: absolute; right: 0; left: 0; margin: auto; animation: bgmove 4s forwards; } } .body { position: relative; width: 700px; padding: 16px 0; background-color: rgba(255, 255, 255, 0.3); box-shadow: 0px 0px 2px #999; } @media screen and (max-width: @screen-sm) { width: 90%; max-width: 700px; } :global { .@{ant-prefix}-tabs-nav-list { margin: auto; font-size: 16rpx; } } .icon { margin-left: 16px; color: rgba(0, 0, 0, 0.2); font-size: 24px; vertical-align: middle; cursor: pointer; transition: color 0.3s; &:hover { color: @primary-color; } } .other { margin-top: 24px; line-height: 22px; text-align: left; .register { float: right; } } .prefixIcon { color: @primary-color; font-size: @font-size-base; } }