|
- /* 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%;
- }
- }
- }
- }
- }
- }
|