/* pages/upload/upload.wxss */ page { background-color: #292929; .content { padding: 50rpx 0; .title { font-size: 45rpx; text-align: center; color: #ffffff; font-weight: 600; } .uploadArea { position: relative; width: 60%; height: 600rpx; background-color: #393b3d; margin: 50rpx auto; border-radius: 40rpx; @keyframes scanAnimation { 0% { transform: translateY(-100%); } 100% { transform: translateY(150%); } } .scanLine { position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%); border-bottom: 2px solid #00ff33; animation: scanAnimation 2s linear infinite; z-index: 9; } .scanBorder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; height: 85%; } .addBtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25%; } .chooseImage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; } } .uploadImgBtn { width: 70%; height: 100rpx; line-height: 100rpx; font-weight: 600; background-color: #ff4f00; color: #ffffff; font-size: 32rpx; text-align: center; border-radius: 50rpx; margin: auto; } .reUpload { width: 70%; height: 100rpx; line-height: 100rpx; font-weight: 600; background-color: #292929; color: #ff4f00; font-size: 32rpx; text-align: center; border-radius: 50rpx; margin: auto; border: 1px solid #ff4f00; box-sizing: border-box; margin-top: 30rpx; } .notice { margin-top: 50rpx; .text { font-size: 23rpx; color: #ffffff; text-align: center; margin-bottom: 40rpx; } .example { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 40rpx; .item { position: relative; width: 28%; &.right { width: 32%; } .mainImg { width: 100%; } .icon { position: absolute; top: -15rpx; right: -15rpx; width: 20%; } } } } } }