graveDetail.wxss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. page {
  2. background: #F7F7F7;
  3. }
  4. .detail {
  5. position: absolute;
  6. padding: 30px 15px;
  7. width: 100vw;
  8. height: 100vh;
  9. box-sizing: border-box;
  10. overflow-y: auto;
  11. }
  12. .detail > view {
  13. background: #FFFFFF;
  14. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  15. border-radius: 10px;
  16. margin-bottom: 20px;
  17. gap: 6px 10px;
  18. }
  19. .head {
  20. display: grid;
  21. padding: 40rpx 30rpx;
  22. grid: 30px 30px / 60px 1fr;
  23. }
  24. .head image {
  25. width: 60px;
  26. height: 60px;
  27. grid-area: 1 / 1 / 3 / 2;
  28. }
  29. .head .ase {
  30. font-size: 28rpx;
  31. color: #666666;
  32. line-height: 40rpx;
  33. word-wrap : break-word;
  34. word-break: break-all;
  35. }
  36. .head .weight {
  37. color: #333333;
  38. font-size: 36rpx;
  39. line-height: 80rpx;
  40. }
  41. .title {
  42. padding: 12px;
  43. border-bottom: 1px solid #ECECEC;
  44. font-size: 16px;
  45. font-weight: 500;
  46. color: #333333;
  47. line-height: 22px;
  48. }
  49. .from {
  50. margin-left: 16px;
  51. font-size: 14px;
  52. }
  53. .from > view {
  54. padding: 10px 0;
  55. }
  56. .from > view:not(:last-child) {
  57. border-bottom: 1px solid #ECECEC;
  58. }
  59. .label {
  60. color: #666666;
  61. line-height: 20px;
  62. font-weight: 400;
  63. }
  64. .value {
  65. color: #333333;
  66. line-height: 20px;
  67. font-weight: 400;
  68. }
  69. .base-content .from > view {
  70. display: flex;
  71. }
  72. .base-content .from > view > .label {
  73. flex: 0 0 84px;
  74. }
  75. .more-content .from > view > .label {
  76. display: block;
  77. margin-bottom: 6px;
  78. }
  79. .address {
  80. display: block;
  81. width: calc(100% - 84px);
  82. position: relative;
  83. }
  84. .address image {
  85. position: absolute;
  86. width: 20px;
  87. height: 20px;
  88. right: 15px;
  89. top: 50%;
  90. transform: translateY(-50%);
  91. }
  92. .remarks {
  93. height: 115px;
  94. display: block;
  95. position: relative;
  96. }
  97. .remarks textarea {
  98. width: 100%;
  99. height: 100%;
  100. }
  101. .remarks view {
  102. position: absolute;
  103. right: 16px;
  104. bottom: 10px;
  105. font-weight: 400;
  106. color: #C8C9CC;
  107. line-height: 20px;
  108. font-size: 10px;
  109. }
  110. .phone {
  111. position: relative;
  112. padding-left: 40px;
  113. }
  114. .phone::before {
  115. content: '';
  116. position: absolute;
  117. left: 35px;
  118. border: 4px solid transparent;
  119. width: 0;
  120. height: 0;
  121. border-top-width: 6px;
  122. border-top-color: #C8C9CC;
  123. top: 50%;
  124. margin-top: 0;
  125. transform: translate(-100%, -50%);
  126. z-index: 0;
  127. }
  128. .type {
  129. position: absolute;
  130. left: 0;
  131. padding-right: 20px;
  132. z-index: 1;
  133. }
  134. .bottom {
  135. margin: 30px 0 50px;
  136. font-size: 14px;
  137. font-weight: 400;
  138. color: #FF4641;
  139. line-height: 40px;
  140. border: 1px solid currentColor;
  141. border-radius: 20px;
  142. height: 40px;
  143. text-align: center;
  144. }
  145. .disable {
  146. color: #cacaca;
  147. background: none;
  148. }
  149. .show-asc {
  150. padding-right: 10px;
  151. }