index.wxss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /* pages/uni-cropper/index.wxss */
  2. .cropper-config {
  3. padding: 20rpx 40rpx;
  4. }
  5. .cropper-content {
  6. min-height: 750rpx;
  7. width: 100%;
  8. }
  9. .uni-corpper {
  10. position: relative;
  11. overflow: hidden;
  12. -webkit-user-select: none;
  13. user-select: none;
  14. -webkit-tap-highlight-color: transparent;
  15. -webkit-touch-callout: none;
  16. box-sizing: border-box;
  17. }
  18. .uni-corpper-content {
  19. position: relative;
  20. }
  21. .uni-corpper-content image {
  22. display: block;
  23. width: 100%;
  24. min-width: 0 !important;
  25. max-width: none !important;
  26. height: 100%;
  27. min-height: 0 !important;
  28. max-height: none !important;
  29. image-orientation: 0deg !important;
  30. margin: 0 auto;
  31. }
  32. /* 移动图片效果 */
  33. .uni-cropper-drag-box {
  34. position: absolute;
  35. top: 0;
  36. right: 0;
  37. bottom: 0;
  38. left: 0;
  39. cursor: move;
  40. background: rgba(0, 0, 0, 0.6);
  41. z-index: 1;
  42. }
  43. /* 内部的信息 */
  44. .uni-corpper-crop-box {
  45. position: absolute;
  46. background: rgba(255, 255, 255, 0.3);
  47. z-index: 2;
  48. }
  49. .uni-corpper-crop-box .uni-cropper-view-box {
  50. position: relative;
  51. display: block;
  52. width: 100%;
  53. height: 100%;
  54. overflow: visible;
  55. outline: 1rpx solid #69f;
  56. outline-color: rgba(102, 153, 255, .75)
  57. }
  58. /* 横向虚线 */
  59. .uni-cropper-dashed-h {
  60. position: absolute;
  61. top: 33.33333333%;
  62. left: 0;
  63. width: 100%;
  64. height: 33.33333333%;
  65. border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
  66. border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
  67. }
  68. /* 纵向虚线 */
  69. .uni-cropper-dashed-v {
  70. position: absolute;
  71. left: 33.33333333%;
  72. top: 0;
  73. width: 33.33333333%;
  74. height: 100%;
  75. border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
  76. border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
  77. }
  78. /* 四个方向的线 为了之后的拖动事件*/
  79. .uni-cropper-line-t {
  80. position: absolute;
  81. display: block;
  82. width: 100%;
  83. background-color: #69f;
  84. top: 0;
  85. left: 0;
  86. height: 1rpx;
  87. opacity: 0.1;
  88. cursor: n-resize;
  89. }
  90. .uni-cropper-line-t::before {
  91. content: '';
  92. position: absolute;
  93. top: 50%;
  94. right: 0rpx;
  95. width: 100%;
  96. transform: translate3d(0, -50%, 0);
  97. bottom: 0;
  98. height: 41rpx;
  99. background: transparent;
  100. z-index: 11;
  101. }
  102. .uni-cropper-line-r {
  103. position: absolute;
  104. display: block;
  105. background-color: #69f;
  106. top: 0;
  107. right: 0rpx;
  108. width: 1rpx;
  109. opacity: 0.1;
  110. height: 100%;
  111. cursor: e-resize;
  112. }
  113. .uni-cropper-line-r::before {
  114. content: '';
  115. position: absolute;
  116. top: 0;
  117. left: 50%;
  118. width: 41rpx;
  119. transform: translate3d(-50%, 0, 0);
  120. bottom: 0;
  121. height: 100%;
  122. background: transparent;
  123. z-index: 11;
  124. }
  125. .uni-cropper-line-b {
  126. position: absolute;
  127. display: block;
  128. width: 100%;
  129. background-color: #69f;
  130. bottom: 0;
  131. left: 0;
  132. height: 1rpx;
  133. opacity: 0.1;
  134. cursor: s-resize;
  135. }
  136. .uni-cropper-line-b::before {
  137. content: '';
  138. position: absolute;
  139. top: 50%;
  140. right: 0rpx;
  141. width: 100%;
  142. transform: translate3d(0, -50%, 0);
  143. bottom: 0;
  144. height: 41rpx;
  145. background: transparent;
  146. z-index: 11;
  147. }
  148. .uni-cropper-line-l {
  149. position: absolute;
  150. display: block;
  151. background-color: #69f;
  152. top: 0;
  153. left: 0;
  154. width: 1rpx;
  155. opacity: 0.1;
  156. height: 100%;
  157. cursor: w-resize;
  158. }
  159. .uni-cropper-line-l::before {
  160. content: '';
  161. position: absolute;
  162. top: 0;
  163. left: 50%;
  164. width: 41rpx;
  165. transform: translate3d(-50%, 0, 0);
  166. bottom: 0;
  167. height: 100%;
  168. background: transparent;
  169. z-index: 11;
  170. }
  171. .uni-cropper-point {
  172. width: 5rpx;
  173. height: 5rpx;
  174. background-color: #69f;
  175. opacity: .75;
  176. position: absolute;
  177. z-index: 3;
  178. }
  179. .point-t {
  180. top: -3rpx;
  181. left: 50%;
  182. margin-left: -3rpx;
  183. cursor: n-resize;
  184. }
  185. .point-tr {
  186. top: -3rpx;
  187. left: 100%;
  188. margin-left: -3rpx;
  189. cursor: n-resize;
  190. }
  191. .point-r {
  192. top: 50%;
  193. left: 100%;
  194. margin-left: -3rpx;
  195. margin-top: -3rpx;
  196. cursor: n-resize;
  197. }
  198. .point-rb {
  199. left: 100%;
  200. top: 100%;
  201. transform: translate3d(-50%, -50%, 0);
  202. cursor: n-resize;
  203. width: 36rpx;
  204. height: 36rpx;
  205. background-color: #69f;
  206. position: absolute;
  207. z-index: 1112;
  208. opacity: 1;
  209. }
  210. .point-b {
  211. left: 50%;
  212. top: 100%;
  213. margin-left: -3rpx;
  214. margin-top: -3rpx;
  215. cursor: n-resize;
  216. }
  217. .point-bl {
  218. left: 0%;
  219. top: 100%;
  220. margin-left: -3rpx;
  221. margin-top: -3rpx;
  222. cursor: n-resize;
  223. }
  224. .point-l {
  225. left: 0%;
  226. top: 50%;
  227. margin-left: -3rpx;
  228. margin-top: -3rpx;
  229. cursor: n-resize;
  230. }
  231. .point-lt {
  232. left: 0%;
  233. top: 0%;
  234. margin-left: -3rpx;
  235. margin-top: -3rpx;
  236. cursor: n-resize;
  237. }
  238. /* 裁剪框预览内容 */
  239. .uni-cropper-viewer {
  240. position: relative;
  241. width: 100%;
  242. height: 100%;
  243. overflow: hidden;
  244. }
  245. .uni-cropper-viewer image {
  246. position: absolute;
  247. z-index: 2;
  248. }