sin-signature.wxss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. @charset "UTF-8";
  2. /* 需要放到文件最上面 */
  3. /* 水平间距 */
  4. /* 水平间距 */
  5. /*
  6. 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值
  7. */
  8. /* 水平间距 */
  9. .signature-wrap {
  10. height: 100%;
  11. width: 100%;
  12. }
  13. .signature-wrap .img-wrap {
  14. width: 100%;
  15. min-height: 200rpx;
  16. display: flex;
  17. align-items: center;
  18. text-align: center;
  19. align-content: center;
  20. justify-content: center;
  21. }
  22. .signature-wrap .img-wrap image {
  23. width: 100%;
  24. }
  25. .signature-contain {
  26. z-index: 9000;
  27. position: fixed;
  28. left: 0;
  29. top: 0;
  30. width: 100%;
  31. }
  32. .signature-contain .signature-main {
  33. background: white;
  34. flex-direction: row-reverse;
  35. display: flex;
  36. align-items: stretch;
  37. height: 101%;
  38. overflow: scroll;
  39. }
  40. .signature-contain .signature-title {
  41. font-weight: bold;
  42. font-size: 18px;
  43. display: flex;
  44. padding: 0 20rpx;
  45. flex-direction: column;
  46. justify-content: center;
  47. height: 100vh;
  48. color: #333;
  49. }
  50. .signature-contain .signature-title text {
  51. -webkit-transform: rotate(90deg);
  52. transform: rotate(90deg);
  53. }
  54. .signature-contain .signature {
  55. border: 1px dotted black;
  56. border-bottom: 1px dotted black;
  57. background: #FFF;
  58. margin: 10px 0;
  59. width: 90vw;
  60. height: 90vh;
  61. align-self: center;
  62. }
  63. .signature-contain .signature-btns {
  64. display: flex;
  65. padding: 2px;
  66. flex-direction: column;
  67. }
  68. .signature-contain .signature-btns .btn {
  69. flex-grow: 1;
  70. flex-shrink: 0;
  71. padding: 20rpx;
  72. font-size: 20px;
  73. margin: 0;
  74. text-align: center;
  75. text-decoration: none;
  76. height: 30vh;
  77. display: flex;
  78. align-content: center;
  79. justify-content: center;
  80. flex-direction: column;
  81. }
  82. .signature-contain .signature-btns .btn text {
  83. -webkit-transform: rotate(90deg);
  84. transform: rotate(90deg);
  85. }
  86. .signature-contain .signature-btns .btn + .btn {
  87. border-top: 1px solid #eee;
  88. }
  89. .signature-contain .signature-btns .btn.btn-clear {
  90. color: #4cd964;
  91. }
  92. .signature-contain .signature-btns .btn.btn-cancel {
  93. color: #f0ad4e;
  94. }
  95. .signature-contain .signature-btns .btn.btn-ok {
  96. color: #007aff;
  97. }