index.wxss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. /**index.wxss**/
  2. /* 轮播图 */
  3. .swiper-container{
  4. width: 90%;
  5. margin: 0rpx auto;
  6. position: relative;
  7. }
  8. .swiper{
  9. width: 100%;
  10. }
  11. .swiperItem{
  12. width: 100%;
  13. /* height: auto; */
  14. border-radius: 15rpx;
  15. }
  16. .swiperItem>image{
  17. width: 100%;
  18. border-radius: 15rpx;
  19. }
  20. .dots{
  21. width: auto;
  22. height: 10rpx;
  23. position: absolute;
  24. bottom: 20rpx;
  25. border-radius: 50rpx;
  26. left: 240rpx;
  27. display: flex;
  28. justify-content: space-between;
  29. align-items: center;
  30. padding: 3rpx 10rpx;
  31. }
  32. .dotsItem{
  33. width: 8rpx;
  34. height: 8rpx;
  35. margin: 0rpx 8rpx;
  36. border-radius: 50%;
  37. background-color: #cdcdcd;
  38. transition: all .3s;
  39. }
  40. .active{
  41. width: 10rpx;
  42. height: 10rpx;
  43. background-color: #fff;
  44. }
  45. /* 宫格导航 */
  46. .nav{
  47. width: 90%;
  48. height: 132rpx;
  49. margin: 0rpx auto;
  50. margin-top: 40rpx;
  51. /* background-color: red; */
  52. display: flex;
  53. justify-content: space-between;
  54. align-items: center;
  55. align-content: center;
  56. }
  57. .navItem{
  58. width: 94rpx;
  59. font-size: 20rpx;
  60. text-align: center;
  61. line-height: 35rpx;
  62. color: #aaa;
  63. }
  64. .navIcon{
  65. width: 84rpx;
  66. height: 84rpx;
  67. }
  68. /* 猜你喜欢 */
  69. .like{
  70. width: 90%;
  71. margin: 0rpx auto;
  72. margin-top: 40rpx;
  73. }
  74. .likeItemBox{
  75. width: 100%;
  76. display: flex;
  77. justify-content: space-between;
  78. overflow: hidden;
  79. }
  80. .likeItem{
  81. width: 210rpx;
  82. height: 310rpx;
  83. }
  84. .likeimg{
  85. width: 210rpx;
  86. height: 210rpx;
  87. border-radius: 10rpx;
  88. position: relative;
  89. }
  90. .likeItemIcon{
  91. width: 100%;
  92. height: 100%;
  93. border-radius: 10rpx;
  94. }
  95. .likeText{
  96. font-size: 28rpx;
  97. color: #333;
  98. padding: 20rpx 0rpx;
  99. display: -webkit-box;
  100. -webkit-line-clamp: 2;/*行数n*/
  101. -webkit-box-orient: vertical;
  102. overflow: hidden;
  103. text-overflow: ellipsis;
  104. }
  105. .cover{
  106. width: 190rpx;
  107. height: 40rpx;
  108. /* 透明背景层 */
  109. background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
  110. /* opacity: 0.3; */
  111. position: absolute;
  112. bottom: 0rpx;
  113. color: #fff;
  114. font-size: 25rpx;
  115. padding: 5rpx 10rpx;
  116. }
  117. /* 主要内容 */
  118. .contentList{
  119. width:90%;
  120. margin: 0rpx auto;
  121. margin-top: 10rpx;
  122. }
  123. .content{
  124. width: 100%;
  125. height: auto;
  126. padding: 20rpx 0rpx;
  127. display: flex;
  128. justify-content: space-between;
  129. border-bottom: 1rpx solid #cdcdcd;
  130. }
  131. .contentImg{
  132. width: 232rpx;
  133. height: 232rpx;
  134. border-radius: 15rpx;
  135. }
  136. .contentImg>image{
  137. width: 100%;
  138. height: 100%;
  139. border-radius: 15rpx;
  140. }
  141. .content-right{
  142. width: 530rpx;
  143. height: 100%;
  144. margin-left: 20rpx;
  145. }
  146. .title{
  147. width: 100%;
  148. height: 138rpx;
  149. overflow: hidden;
  150. }
  151. .titleText{
  152. font-size: 35rpx;
  153. color: #333;
  154. text-align: left;
  155. display: -webkit-box;
  156. -webkit-line-clamp: 1;/*行数n*/
  157. -webkit-box-orient: vertical;
  158. overflow: hidden;
  159. text-overflow: ellipsis;
  160. }
  161. .introduction{
  162. font-size: 28rpx;
  163. color: #cdcdcd;
  164. text-align: left;
  165. padding: 15rpx 0rpx;
  166. display: -webkit-box;
  167. -webkit-line-clamp: 2;/*行数n*/
  168. -webkit-box-orient: vertical;
  169. overflow: hidden;
  170. text-overflow: ellipsis;
  171. }
  172. .count{
  173. width: 100%;
  174. height: 50rpx;
  175. display: flex;
  176. justify-content: start;
  177. }
  178. .playcount{
  179. font-size: 25rpx;
  180. color: #cdcdcd;
  181. margin-right: 30rpx;
  182. }
  183. .jicount{
  184. font-size: 25rpx;
  185. color: #cdcdcd;
  186. }