index.wxss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. .wux-card {
  2. position: relative;
  3. min-height: 192rpx;
  4. padding-bottom: 12rpx;
  5. display: flex;
  6. flex-direction: column;
  7. background-color: #fff
  8. }
  9. .wux-card--hover {
  10. background-color: #ececec
  11. }
  12. .wux-card--bordered {
  13. border-radius: 20rpx
  14. }
  15. .wux-card--bordered::before {
  16. content: " ";
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. width: 200%;
  21. height: 200%;
  22. transform: scale(.5);
  23. transform-origin: 0 0;
  24. pointer-events: none;
  25. box-sizing: border-box;
  26. border: 0 solid #d9d9d9;
  27. border-radius: 20rpx;
  28. border-top-width: 1PX;
  29. border-right-width: 1PX;
  30. border-bottom-width: 1PX;
  31. border-left-width: 1PX
  32. }
  33. .wux-card--full {
  34. border-radius: 0
  35. }
  36. .wux-card--full::before {
  37. border-radius: 0;
  38. border-right-width: 0;
  39. border-left-width: 0
  40. }
  41. .wux-card--has-actions {
  42. padding-bottom: 0
  43. }
  44. .wux-card__hd {
  45. position: relative;
  46. display: flex;
  47. font-size: 34rpx;
  48. padding: 18rpx 30rpx;
  49. align-items: center
  50. }
  51. .wux-card__hd::before {
  52. content: " ";
  53. position: absolute;
  54. left: 0;
  55. bottom: 0;
  56. right: 0;
  57. height: 1PX;
  58. border-bottom: 1PX solid #d9d9d9;
  59. color: #d9d9d9;
  60. transform-origin: 0 100%;
  61. transform: scaleY(.5)
  62. }
  63. .wux-card__content {
  64. flex: 1;
  65. text-align: left;
  66. color: #000
  67. }
  68. .wux-card__thumb {
  69. width: 64rpx;
  70. height: 64rpx;
  71. display: inline-block;
  72. position: relative;
  73. margin-left: auto;
  74. margin-right: 10rpx;
  75. overflow: hidden;
  76. vertical-align: middle
  77. }
  78. .wux-card__extra {
  79. flex: 1;
  80. text-align: right;
  81. font-size: 34rpx;
  82. color: rgba(0,0,0,.45)
  83. }
  84. .wux-card__bd {
  85. position: relative;
  86. padding: 30rpx 30rpx 12rpx;
  87. font-size: 30rpx;
  88. color: rgba(0,0,0,.85);
  89. min-height: 80rpx
  90. }
  91. .wux-card__ft {
  92. display: flex;
  93. font-size: 28rpx;
  94. color: rgba(0,0,0,.45);
  95. padding: 0 30rpx
  96. }
  97. .wux-card__actions {
  98. position: relative;
  99. display: flex;
  100. line-height: 100rpx;
  101. margin-top: 12rpx;
  102. justify-content: center;
  103. align-items: center
  104. }
  105. .wux-card__actions::before {
  106. content: " ";
  107. position: absolute;
  108. left: 0;
  109. top: 0;
  110. right: 0;
  111. height: 1PX;
  112. border-top: 1PX solid #d9d9d9;
  113. color: #d9d9d9;
  114. transform-origin: 0 0;
  115. transform: scaleY(.5)
  116. }
  117. .wux-card__action {
  118. position: relative;
  119. display: block;
  120. flex: 1;
  121. color: #33cd5f;
  122. text-align: center
  123. }
  124. .wux-card__action::before {
  125. content: " ";
  126. position: absolute;
  127. right: 0;
  128. top: 0;
  129. width: 1PX;
  130. bottom: 0;
  131. border-right: 1PX solid #d9d9d9;
  132. color: #d9d9d9;
  133. transform-origin: 100% 0;
  134. transform: scaleX(.5)
  135. }
  136. .wux-card__action:last-child::before {
  137. display: none
  138. }
  139. .wux-card__action--default {
  140. color: #444!important
  141. }
  142. .wux-card__action--primary {
  143. color: #33cd5f!important
  144. }
  145. .wux-card__action--light {
  146. color: #ddd!important
  147. }
  148. .wux-card__action--stable {
  149. color: #b2b2b2!important
  150. }
  151. .wux-card__action--positive {
  152. color: #387ef5!important
  153. }
  154. .wux-card__action--calm {
  155. color: #11c1f3!important
  156. }
  157. .wux-card__action--assertive {
  158. color: #ef473a!important
  159. }
  160. .wux-card__action--balanced {
  161. color: #33cd5f!important
  162. }
  163. .wux-card__action--energized {
  164. color: #ffc900!important
  165. }
  166. .wux-card__action--royal {
  167. color: #886aea!important
  168. }
  169. .wux-card__action--dark {
  170. color: #444!important
  171. }
  172. .wux-card__action--bold {
  173. font-weight: 500!important
  174. }
  175. .wux-card__action--hover {
  176. background-color: #ececec!important
  177. }
  178. .wux-card__action--disabled {
  179. opacity: .3
  180. }