index.wxss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. .share{
  2. width: 100vw;
  3. display: flex;
  4. flex-direction: column;
  5. align-items: center;
  6. box-sizing: border-box;
  7. padding-top: 40rpx;
  8. overflow: hidden;
  9. }
  10. .share__canvas {
  11. width: 700rpx;
  12. height: 420rpx;
  13. background: #f0f0f0;
  14. margin-bottom: 40rpx;
  15. font-size: 32rpx;
  16. }
  17. .share__title {
  18. width:100%;
  19. margin-left: 80rpx;
  20. margin-bottom: 40rpx;
  21. }
  22. .share__canvas1-text {
  23. color: #000000;
  24. }
  25. .share__canvas1-text-2 {
  26. color: #ff0000;
  27. font-size: 36rpx;
  28. margin-left: 20rpx;
  29. margin-top: 20rpx;
  30. }
  31. .share__canvas1-text-3 {
  32. color: #00ff00;
  33. padding-left: 40rpx;
  34. padding-top: 20rpx;
  35. }
  36. .share__canvas1-text-4 {
  37. color: #0000ff;
  38. margin-left: 20rpx;
  39. margin-top: 20rpx;
  40. width: 600rpx;
  41. text-align: center;
  42. background: rgba(255, 0, 0, 0.4);
  43. padding: 20rpx;
  44. }
  45. .share__canvas1-text-5 {
  46. color: #0000ff;
  47. margin-left: 20rpx;
  48. margin-top: 20rpx;
  49. width: 600rpx;
  50. background: rgba(255, 0, 0, 0.4);
  51. padding: 20rpx;
  52. }
  53. .share__canvas2 {
  54. position: relative;
  55. }
  56. .share__canvas2-image {
  57. width: 200rpx;
  58. height: 120rpx;
  59. border: 2px solid #ff0000;
  60. margin: 10rpx 20rpx;
  61. box-shadow: 20rpx 20rpx 10rpx #cccccc;
  62. }
  63. .share__canvas2-image-2 {
  64. width: 120rpx;
  65. height: 120rpx;
  66. border: 2px solid #ff0000;
  67. margin: 10rpx 20rpx;
  68. box-shadow: 20rpx 20rpx 10rpx #cccccc;
  69. border-radius: 100%;
  70. }
  71. .share__canvas2-image-3 {
  72. width: 200rpx;
  73. height: 120rpx;
  74. border: 2px solid #ff0000;
  75. margin: 10rpx 20rpx;
  76. background-size: 200rpx 120rpx;
  77. }
  78. .share__canvas2-image-4 {
  79. width: 200rpx;
  80. height: 60rpx;
  81. position: absolute;
  82. right: 20rpx;
  83. top: 100rpx;
  84. background-size: 200rpx 60rpx;
  85. background-image: url(data:image/png;base64,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)
  86. }
  87. .share__canvas3 {
  88. padding: 30rpx;
  89. box-sizing: border-box;
  90. }
  91. .share__canvas3-inline {
  92. display: inline;
  93. vertical-align: middle;
  94. line-height: 50rpx;
  95. }
  96. .share__canvas3-inline_bold {
  97. font-weight: bold;
  98. }
  99. .share__canvas-emoji {
  100. width: 42rpx;
  101. height: 42rpx;
  102. vertical-align: top;
  103. padding: 4rpx 0rpx;
  104. }
  105. .share__canvas4 {
  106. padding: 30rpx;
  107. box-sizing: border-box;
  108. height: 800rpx;
  109. }
  110. .share__canvas4-block {
  111. line-height: 50rpx;
  112. margin-bottom: 30rpx;
  113. }
  114. .share__canvas4-image {
  115. width: 200rpx;
  116. height: 120rpx;
  117. padding: 0 0 20rpx;
  118. }
  119. .share__result-img {
  120. width: 700rpx;
  121. height: 420rpx;
  122. margin-bottom: 30rpx;
  123. }
  124. .share__result-img-4 {
  125. height: 800rpx;
  126. }
  127. .share__canvas5 {
  128. position: relative;
  129. }
  130. .share__canvas5-image {
  131. width: 600rpx;
  132. height: 360rpx;
  133. margin-left: 30rpx
  134. }
  135. .share__canvas5-text {
  136. position: absolute;
  137. bottom: 0;
  138. width: 400rpx;
  139. margin-left: 100rpx;
  140. height: 60rpx;
  141. line-height: 60rpx;
  142. text-align: center;
  143. }
  144. .share__canvas5-text-2 {
  145. position: absolute;
  146. top: 100rpx;
  147. right: 100rpx;
  148. }
  149. .share__button {
  150. margin-bottom: 30rpx;
  151. width: 240rpx;
  152. }
  153. .share__canvas6-image {
  154. width: 216rpx;
  155. height: 116rpx;
  156. margin: 0 5rpx;
  157. }
  158. .share__canvas6-image-2 {
  159. width: 240rpx;
  160. height: 216rpx;
  161. margin: 20rpx 5rpx 0;
  162. }
  163. .share__canvas6 {
  164. height: 900rpx;
  165. display: -webkit-box;
  166. display: -ms-flexbox;
  167. display: flex;
  168. flex-wrap: wrap;
  169. }