邃芒智像相册
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

138 lines
2.6 KiB

  1. /* pages/upload/upload.wxss */
  2. page {
  3. background-color: #292929;
  4. .content {
  5. padding: 50rpx 0;
  6. .title {
  7. font-size: 45rpx;
  8. text-align: center;
  9. color: #ffffff;
  10. font-weight: 600;
  11. }
  12. .uploadArea {
  13. position: relative;
  14. width: 60%;
  15. height: 600rpx;
  16. background-color: #393b3d;
  17. margin: 50rpx auto;
  18. border-radius: 40rpx;
  19. @keyframes scanAnimation {
  20. 0% {
  21. transform: translateY(-100%);
  22. }
  23. 100% {
  24. transform: translateY(150%);
  25. }
  26. }
  27. .scanLine {
  28. position: absolute;
  29. top: 0;
  30. left: 0;
  31. width: 100%;
  32. height: 40%;
  33. background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
  34. border-bottom: 2px solid #00ff33;
  35. animation: scanAnimation 2s linear infinite;
  36. z-index: 9;
  37. }
  38. .scanBorder {
  39. position: absolute;
  40. top: 50%;
  41. left: 50%;
  42. transform: translate(-50%, -50%);
  43. width: 92%;
  44. height: 85%;
  45. }
  46. .addBtn {
  47. position: absolute;
  48. top: 50%;
  49. left: 50%;
  50. transform: translate(-50%, -50%);
  51. width: 25%;
  52. }
  53. .chooseImage {
  54. position: absolute;
  55. top: 50%;
  56. left: 50%;
  57. transform: translate(-50%, -50%);
  58. width: 70%;
  59. }
  60. }
  61. .uploadImgBtn {
  62. width: 70%;
  63. height: 100rpx;
  64. line-height: 100rpx;
  65. font-weight: 600;
  66. background-color: #ff4f00;
  67. color: #ffffff;
  68. font-size: 32rpx;
  69. text-align: center;
  70. border-radius: 50rpx;
  71. margin: auto;
  72. }
  73. .reUpload {
  74. width: 70%;
  75. height: 100rpx;
  76. line-height: 100rpx;
  77. font-weight: 600;
  78. background-color: #292929;
  79. color: #ff4f00;
  80. font-size: 32rpx;
  81. text-align: center;
  82. border-radius: 50rpx;
  83. margin: auto;
  84. border: 1px solid #ff4f00;
  85. box-sizing: border-box;
  86. margin-top: 30rpx;
  87. }
  88. .notice {
  89. margin-top: 50rpx;
  90. .text {
  91. font-size: 23rpx;
  92. color: #ffffff;
  93. text-align: center;
  94. margin-bottom: 40rpx;
  95. }
  96. .example {
  97. display: flex;
  98. justify-content: space-between;
  99. align-items: flex-end;
  100. padding: 0 40rpx;
  101. .item {
  102. position: relative;
  103. width: 28%;
  104. &.right {
  105. width: 32%;
  106. }
  107. .mainImg {
  108. width: 100%;
  109. }
  110. .icon {
  111. position: absolute;
  112. top: -15rpx;
  113. right: -15rpx;
  114. width: 20%;
  115. }
  116. }
  117. }
  118. }
  119. }
  120. }