app.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. /**app.wxss**/
  2. @import "colorui/main.wxss";
  3. @import "colorui/icon.wxss";
  4. @import "pages/components/background/background.wxss";
  5. .container {
  6. height: 100%;
  7. display: flex;
  8. flex-direction: column;
  9. align-items: center;
  10. justify-content: space-between;
  11. padding: 20rpx 0;
  12. box-sizing: border-box;
  13. }
  14. .hidden {
  15. display: none;
  16. }
  17. .show {
  18. display: block;
  19. }
  20. .margin-10{
  21. margin: 10rpx 10rpx;
  22. }
  23. .margin-20{
  24. margin: 20rpx 20rpx;
  25. }
  26. .font-18{
  27. font-size:1.2em;
  28. }
  29. .font-20{
  30. font-size:1.5em;
  31. }
  32. .scrollPage {
  33. height: 100vh;
  34. }
  35. .nav-list {
  36. display: flex;
  37. flex-wrap: wrap;
  38. padding: 0px 40rpx 0px;
  39. justify-content: space-between;
  40. }
  41. .nav-li {
  42. padding: 30rpx;
  43. border-radius: 12rpx;
  44. width: 45%;
  45. margin: 0 2.5% 40rpx;
  46. background-image: url(https://image.weilanwl.com/color2.0/cardBg.png);
  47. background-size: cover;
  48. background-position: center;
  49. position: relative;
  50. z-index: 1;
  51. }
  52. .nav-li::after {
  53. content: "";
  54. position: absolute;
  55. z-index: -1;
  56. background-color: inherit;
  57. width: 100%;
  58. height: 100%;
  59. left: 0;
  60. bottom: -10%;
  61. border-radius: 10rpx;
  62. opacity: 0.2;
  63. transform: scale(0.9, 0.9);
  64. }
  65. .nav-li.cur {
  66. color: #fff;
  67. background: rgb(94, 185, 94);
  68. box-shadow: 4rpx 4rpx 6rpx rgba(94, 185, 94, 0.4);
  69. }
  70. .nav-title {
  71. font-size: 32rpx;
  72. font-weight: 300;
  73. }
  74. .nav-title::first-letter {
  75. font-size: 40rpx;
  76. margin-right: 4rpx;
  77. }
  78. .nav-name {
  79. font-size: 28rpx;
  80. text-transform: Capitalize;
  81. margin-top: 20rpx;
  82. position: relative;
  83. }
  84. .nav-name::before {
  85. content: "";
  86. position: absolute;
  87. display: block;
  88. width: 40rpx;
  89. height: 6rpx;
  90. background: #fff;
  91. bottom: 0;
  92. right: 0;
  93. opacity: 0.5;
  94. }
  95. .nav-name::after {
  96. content: "";
  97. position: absolute;
  98. display: block;
  99. width: 100rpx;
  100. height: 1px;
  101. background: #fff;
  102. bottom: 0;
  103. right: 40rpx;
  104. opacity: 0.3;
  105. }
  106. .nav-name::first-letter {
  107. font-weight: bold;
  108. font-size: 36rpx;
  109. margin-right: 1px;
  110. }
  111. .nav-li text {
  112. position: absolute;
  113. right: 30rpx;
  114. top: 30rpx;
  115. font-size: 52rpx;
  116. width: 60rpx;
  117. height: 60rpx;
  118. text-align: center;
  119. line-height: 60rpx;
  120. }
  121. .text-light {
  122. font-weight: 300;
  123. }
  124. .justify-middle{
  125. margin: 0 auto;
  126. }
  127. .red {
  128. color: red;
  129. }
  130. .padding-xl {
  131. padding: 50rpx;
  132. }
  133. .cu-avatar.small-font{
  134. font-size: 1.0em;
  135. }
  136. .padding-tabbar{
  137. padding-bottom: 120rpx;
  138. }
  139. button[plain]{ border:0 }
  140. .tab-bottom{padding:43rpx;}
  141. .text-center{text-align: center;}