indexes.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. page {
  29. --td-indexes-title-color: #888888;
  30. --td-indexes-title-bg-color: #fbfbfb;
  31. --td-indexes-children-text-color: #000;
  32. --td-indexes-children-bg-color: white;
  33. --td-indexes-index-text-color: #000;
  34. --td-indexes-index-text-active-color: #0052d9;
  35. --td-indexes-index-bg-color: white;
  36. --td-indexes-tips-text-color: white;
  37. --td-indexes-tips-bg-color: #0052d9;
  38. }
  39. .t-indexes {
  40. position: relative;
  41. /* 覆盖weUI样式 */
  42. }
  43. .t-indexes__title {
  44. color: var(--td-indexes-title-color);
  45. background-color: var(--td-indexes-title-bg-color);
  46. }
  47. .t-indexes__row {
  48. font-size: 32rpx;
  49. color: var(--td-indexes-children-text-color);
  50. background-color: var(--td-indexes-children-bg-color);
  51. height: 112rpx;
  52. display: flex;
  53. align-items: center;
  54. }
  55. .t-indexes__row::after {
  56. display: none;
  57. }
  58. .t-indexes__index {
  59. font-size: 32rpx;
  60. position: absolute;
  61. top: 60rpx;
  62. right: 0;
  63. width: 100rpx;
  64. color: var(--td-indexes-index-text-color);
  65. background-color: var(--td-indexes-index-bg-color);
  66. font-size: 24rpx;
  67. line-height: 48rpx;
  68. text-align: center;
  69. display: flex;
  70. flex-flow: column nowrap;
  71. top: 50%;
  72. transform: translateY(-50%);
  73. }
  74. .t-indexes__index .index-icon {
  75. font-size: 32rpx;
  76. }
  77. .t-indexes__bar {
  78. display: flex;
  79. flex-flow: column nowrap;
  80. }
  81. .t-indexes__btn {
  82. position: relative;
  83. }
  84. .t-indexes__btn.is-actived {
  85. color: var(--td-indexes-index-text-active-color);
  86. font-size: 32rpx;
  87. line-height: 56rpx;
  88. }
  89. .t-indexes__tips {
  90. width: 80rpx;
  91. height: 80rpx;
  92. line-height: 80rpx;
  93. text-align: center;
  94. vertical-align: middle;
  95. font-size: 40rpx;
  96. font-weight: 700;
  97. color: var(--td-indexes-tips-text-color);
  98. background-color: var(--td-indexes-tips-bg-color);
  99. border-radius: 40rpx 40rpx 0;
  100. position: absolute;
  101. top: 0;
  102. bottom: 0;
  103. right: 88rpx;
  104. margin: auto;
  105. transform: rotate(-45deg);
  106. }
  107. .t-indexes__tips-text {
  108. transform: rotate(45deg);
  109. }
  110. .t-indexes .weui-cells__title {
  111. font-size: 28rpx;
  112. font-weight: 800;
  113. color: #000;
  114. }