index.wxss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .i-card {
  2. margin: 0 32rpx;
  3. font-size: 28rpx;
  4. overflow: hidden;
  5. position: relative;
  6. background: #fff;
  7. border: 1rpx solid #dddee1;
  8. border-radius: 10rpx
  9. }
  10. .i-card-full {
  11. margin: 0;
  12. border-left: none;
  13. border-right: none;
  14. border-radius: 0
  15. }
  16. .i-card-header {
  17. display: flex;
  18. padding: 12rpx 32rpx;
  19. align-items: center
  20. }
  21. .i-card-header-content {
  22. flex: 1;
  23. color: #0081ff;
  24. font-size: 32rpx;
  25. text-align: left
  26. }
  27. .i-card-header-thumb {
  28. display: inline-block;
  29. width: 128rpx;
  30. height: 128rpx;
  31. position: relative;
  32. margin-left: auto;
  33. margin-right: auto;
  34. overflow: hidden;
  35. background-size: cover;
  36. vertical-align: middle
  37. }
  38. .i-card-header-title {
  39. display: inline-block;
  40. vertical-align: middle;
  41. font-size: 36rpx;
  42. color: #1c2438
  43. }
  44. .i-card-header-extra {
  45. flex: 1;
  46. text-align: right;
  47. font-size: 36rpx;
  48. color: #80848f
  49. }
  50. .i-card-body {
  51. position: relative;
  52. padding: 12rpx 32rpx;
  53. color: #495060;
  54. font-size: 28rpx
  55. }
  56. .i-card-body::before {
  57. content: '';
  58. position: absolute;
  59. top: 0;
  60. left: 0;
  61. width: 200%;
  62. height: 200%;
  63. transform: scale(.5);
  64. transform-origin: 0 0;
  65. pointer-events: none;
  66. box-sizing: border-box;
  67. border: 0 solid #e9eaec;
  68. border-top-width: 2rpx
  69. }
  70. .i-card-footer {
  71. position: relative;
  72. padding: 12rpx 32rpx;
  73. color: #80848f;
  74. font-size: 24rpx
  75. }