app.wxss 2.5 KB

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