index.less 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. @red:#F01740;
  2. // @yellow:#FFE300;
  3. page {
  4. background: #f6f6f6;
  5. font-family: Source Han Sans CN;
  6. }
  7. .location{
  8. display: flex;
  9. justify-content: space-between;
  10. align-items: center;
  11. padding: 20rpx 25rpx 0rpx 25rpx;
  12. background-color: #ffffff;
  13. .l_left {
  14. font-size: 24rpx;
  15. }
  16. .l_right{
  17. color:#636363;
  18. font-size: 24rpx;
  19. span{
  20. color: #229293;
  21. font-weight: bold;
  22. }
  23. }
  24. }
  25. .swiper {
  26. margin: 30rpx;
  27. height: 400rpx;
  28. .slide-image {
  29. width: 100%;
  30. height: 98%;
  31. margin-bottom: 20rpx;
  32. border-radius: 30rpx;
  33. }
  34. }
  35. .navBar {
  36. display: flex;
  37. justify-content: space-around;
  38. height: 100rpx;
  39. position: relative;
  40. background: #fff;
  41. margin: 30rpx;
  42. border-radius: 30rpx;
  43. .navItem {
  44. display: flex;
  45. align-items: center;
  46. justify-content: center;
  47. border-bottom: 4rpx solid transparent;
  48. .navItemTitle {
  49. font-size: 30rpx;
  50. }
  51. .navItemIcon {
  52. width: 50rpx;
  53. image {
  54. width: 40rpx;
  55. height: 40rpx;
  56. margin-top: 12brpx;
  57. // transform: translate(-25rpx -25rpx 0);
  58. }
  59. }
  60. }
  61. .active {
  62. color: #333;
  63. font-weight: bold;
  64. border-bottom: 4rpx solid #399899;
  65. }
  66. }
  67. .nav_content{
  68. flex: 1;
  69. }
  70. .kind {
  71. width: 687rpx;
  72. // height: 150rpx;
  73. position: relative;
  74. left: 15rpx;
  75. // top: 30rpx;
  76. display: flex;
  77. .item {
  78. width: 219rpx;
  79. height: 150rpx;
  80. margin-left: 17rpx;
  81. image {
  82. width: 219rpx;
  83. height: 150rpx;
  84. border-radius: 6px;
  85. }
  86. }
  87. .item2 {
  88. width: 219rpx;
  89. height: 150rpx;
  90. margin-left: 15rpx;
  91. image {
  92. width: 219rpx;
  93. height: 150rpx;
  94. border-radius: 6px;
  95. }
  96. }
  97. .item3 {
  98. width: 219rpx;
  99. height: 150rpx;
  100. margin-left: 15rpx;
  101. image {
  102. width: 219rpx;
  103. height: 150rpx;
  104. border-radius: 6px;
  105. }
  106. }
  107. .head-text{
  108. width: 219rpx;
  109. height: 50rpx;
  110. position: relative;
  111. z-index: 99;
  112. background-color: #439f9b;
  113. // opacity:0.6;
  114. background-color:rgba(63,156,152,0.9);
  115. line-height: 50rpx;
  116. text-align: center;
  117. font-weight: 550;
  118. font-size: 25rpx;
  119. color: white;
  120. // left:58rpx;
  121. bottom: 55rpx;
  122. border-radius: 10px;
  123. }
  124. }
  125. .tab_title {
  126. flex: none;
  127. width:280rpx ;
  128. }
  129. .tab_page {
  130. width: 100%;
  131. height: 100%;
  132. overflow: hidden;
  133. }