invinbg-image-cropper.wxss 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. @font-face {
  2. font-family: "iconfont";
  3. src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAR4AAsAAAAACKgAAAQsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEfIRGATYCJAMMCwgABCAFhG0HShugB8gOJUHBwAAAAAFEBNmwzd4dtatSmmpFoVAEhUThEAYkCozFKDCqCVO6RfH/89v869awDnTR1qrSANFt4GG4SNxreBn91fmV9f3+53J613ieHba+N1zmGM8PA7oXTaCAxpjei8IoLWFsGLu4jPME6vWJJdovqmgAO4U2LRBnep0K7GJmpYQWanXVOWuLuAFrtenK4haAa/f38QnKsCOpyrRFh6eFWsh5KXnfYcn958BGQNKfE8wmMmaAQpzkuo9Z+ukZluoltVV5abUipL5i/ysArlhWVut/eCRBVNPUjYg6oUo7JTHFoaYDSvdacnKTq9GAB4AY5y2dtL3qpFh1DENdnJC6Hq+xYb7pyRMDMzc/fYoJjY8flwO3m98rMucF+IZHj6Cagw5UeKpxyFbt2rHGY/8jpa7CYMvLfcIesLjY3bdqhaf+nqgQs2qT/+rjCH/VfA0VFGuAC3iE8NEr/Vau8vZsXiUy7+V3c3tQQXMAuNjDCC89KDIHH0OFhnUi81GEPwyc7wZUaN7DnUf4g+ZLQsMKYV/94NjK7R7TEM4niTY1oJ5zEU62aNVaasUub08YLUEam5EnT6a61/I17dNk+vTu9jpJjXhsTFwjqTtpCBxBIIgS6iQnc/Zod1YGKp0rAwsD8kkyP6AwcK0hcAwkiQmBhWvxPZWKDu86aUH2nLEdi9rGX1eXq5P6A1SrnAucMVMdZH/GKi/jyfCqJyucfK3mXpVujXOPfFf5LC4Dvx0X/943JyOq4HuCTZ8KiIPPAb6ro8akpT6ufiq39BQrNlk5mp8pO0JlJLk8f5QalRjoP60IMx0N8n7wGhSD3n6/F1zlcTVz/cR+Ev0lkLSTd7UiPbD/wCxGRMA2Krwro2O0bTQtImbwhjAJc0S3N4ROx15/PH60IzaIOjCbEelqkDOfETNxb/FMixnWNzeJp2KPQw9A5d76jGUOQOUvH7RE/o2RfkNatd3OGf9q0QKbnq8WB7qy+hVqJRjJn1BQgP/iErks0yy5iGJTrOayW7C/z0IoZH0qNH+7N+31XXc7G2p1hZDU6IWs1ghaqDNQpcEKVKu1BfWmFW9u0IFhKUodpswCEFodgqTZHWStbqOF+hqqdPsG1VrDEuodhfueDcZCj+QzuIrFtZh6BNNraIowbCzi1dbhOlOfionKXHoTzgzoY5hCKk/minEKZ/pYMDCoU7IsgREM3Y8Vgcvwvj4aMzK0AdewUpJljWkyGZH3IKmG7gfEHgZOhYXTwqiNwOhp0CiE3ZiFpL5fB6dj0keFKcGV+JvgGAP0vWMUpOQ10GI1VQt3LoMHDNJRYrEIPInAoPXDFEEnrk9P0zDG/FEGOA2WFNkiaZRGhuoRddXS8bX917cL6mn9c6TIUXSekybKHKQfJXFq2KSiRklLYU8dNKWDIX0cAA==') format('woff2');
  4. }
  5. .vue-cropper.data-v-02b3d9d8 {
  6. position: fixed;
  7. left: 0;
  8. right: 0;
  9. bottom: 0;
  10. z-index: 1001;
  11. box-sizing: border-box;
  12. user-select: none;
  13. -webkit-user-select: none;
  14. -moz-user-select: none;
  15. -ms-user-select: none;
  16. direction: ltr;
  17. touch-action: none;
  18. text-align: left;
  19. /* background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
  20. */
  21. background-color: #000000;
  22. }
  23. .cropper-canvas.data-v-02b3d9d8 {
  24. position: absolute;
  25. top: -9999px;
  26. left:-9999px;
  27. z-index: -998;
  28. }
  29. .vue-cropper .uni-info__ft.data-v-02b3d9d8 {
  30. position: absolute;
  31. line-height: 48px;
  32. font-size: 18px;
  33. display: -webkit-flex;
  34. background-color: #000000;
  35. padding-bottom: 34rpx;
  36. display: flex;
  37. bottom: 0;
  38. left: 0;
  39. right: 0;
  40. z-index: 998;
  41. }
  42. .btn-group.data-v-02b3d9d8 {
  43. position: absolute;
  44. right: 30px;
  45. bottom: 78px;
  46. z-index: 998;
  47. }
  48. .btn-item.data-v-02b3d9d8 {
  49. position: relative;
  50. width: 40px;
  51. height: 40px;
  52. background: #fff;
  53. border-radius: 20px;
  54. padding: 10px;
  55. display: inline-block;
  56. margin-left: 10px;
  57. }
  58. .btn-item.data-v-02b3d9d8:active {
  59. background: #ccc;
  60. }
  61. .rotate-btn.data-v-02b3d9d8 {
  62. font-family: "iconfont" !important;
  63. font-size: 24px;
  64. font-style: normal;
  65. -webkit-font-smoothing: antialiased;
  66. -moz-osx-font-smoothing: grayscale;
  67. line-height: 20px;
  68. }
  69. .rotate-btn.data-v-02b3d9d8:before {
  70. content: "\e65c";
  71. margin-left: -2px;
  72. }
  73. .reset-btn.data-v-02b3d9d8 {
  74. font-family: "iconfont" !important;
  75. font-size: 24px;
  76. font-style: normal;
  77. -webkit-font-smoothing: antialiased;
  78. -moz-osx-font-smoothing: grayscale;
  79. line-height: 20px;
  80. }
  81. .reset-btn.data-v-02b3d9d8:before {
  82. content: "\e648";
  83. margin-left: -2px;
  84. }
  85. .vue-cropper .uni-info__ft.data-v-02b3d9d8:after {
  86. content: " ";
  87. position: absolute;
  88. left: 0;
  89. top: 0;
  90. right: 0;
  91. height: 1px;
  92. border-top: 1px solid #d5d5d6;
  93. color: #d5d5d6;
  94. -webkit-transform-origin: 0 0;
  95. transform-origin: 0 0;
  96. -webkit-transform: scaleY(.5);
  97. transform: scaleY(.5);
  98. z-index: 998;
  99. }
  100. .vue-cropper .uni-modal__btn.data-v-02b3d9d8 {
  101. display: block;
  102. flex: 1;
  103. font-size:28rpx;
  104. text-decoration: none;
  105. -webkit-tap-highlight-color: rgba(0,0,0,0);
  106. position: relative;
  107. text-align: center;
  108. background-color: #000000;
  109. z-index: 998;
  110. }
  111. /*
  112. .vue-cropper .uni-modal__btn:first-child:after { display: none }
  113. .vue-cropper .uni-modal__btn:after {
  114. content: " ";
  115. position: absolute;
  116. left: 0;
  117. top: 0;
  118. width: 1px;
  119. bottom: 0;
  120. border-left: 1px solid #d5d5d6;
  121. color: #d5d5d6;
  122. -webkit-transform-origin: 0 0;
  123. transform-origin: 0 0;
  124. -webkit-transform: scaleX(.5);
  125. transform: scaleX(.5);
  126. z-index: 998;
  127. } */
  128. .vue-cropper .uni-modal__btn.data-v-02b3d9d8:active {
  129. background-color: #eee;
  130. }
  131. .cropper-box.data-v-02b3d9d8,
  132. .cropper-box-canvas.data-v-02b3d9d8,
  133. .cropper-drag-box.data-v-02b3d9d8,
  134. .cropper-crop-box.data-v-02b3d9d8,
  135. .cropper-face.data-v-02b3d9d8 {
  136. position: absolute;
  137. top: 0;
  138. right: 0;
  139. bottom: 0;
  140. left: 0;
  141. -webkit-user-select: none;
  142. user-select: none;
  143. z-index: 998;
  144. }
  145. .uni-image.data-v-02b3d9d8 {
  146. width: 100%;
  147. height: 100%;
  148. }
  149. .cropper-box-canvas image.data-v-02b3d9d8 {
  150. position: relative;
  151. text-align: left;
  152. -webkit-user-select: none;
  153. user-select: none;
  154. -webkit-transform: none;
  155. transform: none;
  156. max-width: none;
  157. max-height: none;
  158. z-index: 998;
  159. }
  160. .cropper-box.data-v-02b3d9d8 {
  161. overflow: hidden;
  162. }
  163. .cropper-move.data-v-02b3d9d8 {
  164. cursor: move;
  165. }
  166. .cropper-crop.data-v-02b3d9d8 {
  167. cursor: crosshair;
  168. }
  169. .cropper-modal.data-v-02b3d9d8 {
  170. background: rgba(0, 0, 0, 0.5);
  171. }
  172. .pointer-events.data-v-02b3d9d8 {
  173. pointer-events:none;
  174. }
  175. .cropper-crop-box.data-v-02b3d9d8 {
  176. /*border: 2px solid #39f;*/
  177. }
  178. .cropper-view-box.data-v-02b3d9d8 {
  179. display: block;
  180. overflow: hidden;
  181. width: 100%;
  182. height: 100%;
  183. outline: 1px solid #39f;
  184. outline-color: rgba(51, 153, 255, 0.75);
  185. -webkit-user-select: none;
  186. user-select: none;
  187. }
  188. .cropper-view-box image.data-v-02b3d9d8 {
  189. -webkit-user-select: none;
  190. user-select: none;
  191. text-align: left;
  192. max-width: none;
  193. max-height: none;
  194. }
  195. .cropper-face.data-v-02b3d9d8 {
  196. top: 0;
  197. left: 0;
  198. background-color: #fff;
  199. opacity: 0.1;
  200. }
  201. .crop-line.data-v-02b3d9d8 {
  202. position: absolute;
  203. display: block;
  204. width: 100%;
  205. height: 100%;
  206. opacity: 0.1;
  207. z-index: 998;
  208. }
  209. .line-w.data-v-02b3d9d8 {
  210. top: -3px;
  211. left: 0;
  212. height: 5px;
  213. cursor: n-resize;
  214. }
  215. .line-a.data-v-02b3d9d8 {
  216. top: 0;
  217. left: -3px;
  218. width: 5px;
  219. cursor: w-resize;
  220. }
  221. .line-s.data-v-02b3d9d8 {
  222. bottom: -3px;
  223. left: 0;
  224. height: 5px;
  225. cursor: s-resize;
  226. }
  227. .line-d.data-v-02b3d9d8 {
  228. top: 0;
  229. right: -3px;
  230. width: 5px;
  231. cursor: e-resize;
  232. }
  233. .crop-point.data-v-02b3d9d8 {
  234. position: absolute;
  235. width: 8px;
  236. height: 8px;
  237. opacity: 0.75;
  238. background-color: #39f;
  239. border-radius: 100%;
  240. z-index: 998;
  241. }
  242. .point-lt.data-v-02b3d9d8 {
  243. top: -4px;
  244. left: -4px;
  245. cursor: nw-resize;
  246. }
  247. .point-mt.data-v-02b3d9d8 {
  248. top: -5px;
  249. left: 50%;
  250. margin-left: -3px;
  251. cursor: n-resize;
  252. }
  253. .point-rt.data-v-02b3d9d8 {
  254. top: -4px;
  255. right: -4px;
  256. cursor: ne-resize;
  257. }
  258. .point-ml.data-v-02b3d9d8 {
  259. top: 50%;
  260. left: -4px;
  261. margin-top: -3px;
  262. cursor: w-resize;
  263. }
  264. .point-mr.data-v-02b3d9d8 {
  265. top: 50%;
  266. right: -4px;
  267. margin-top: -3px;
  268. cursor: e-resize;
  269. }
  270. .point-lb.data-v-02b3d9d8 {
  271. bottom: -5px;
  272. left: -4px;
  273. cursor: sw-resize;
  274. }
  275. .point-mb.data-v-02b3d9d8 {
  276. bottom: -5px;
  277. left: 50%;
  278. margin-left: -3px;
  279. cursor: s-resize;
  280. }
  281. .point-rb.data-v-02b3d9d8 {
  282. bottom: -5px;
  283. right: -4px;
  284. cursor: se-resize;
  285. }