index.wxss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. .index{
  2. height: 100vh;
  3. background-image: url(https://www.icelook.cn/exhibition/images/page/bg.jpg);
  4. background-position: center;
  5. background-repeat:repeat-y;
  6. background-size: 100% 100%;
  7. /* overflow: hidden; */
  8. /* overflow-y: scroll; */
  9. }
  10. .title{
  11. background-color: #F5EAD2;
  12. height: 98rpx;
  13. text-align: center;
  14. }
  15. .title image{
  16. width: 312rpx;
  17. height: 67rpx;
  18. }
  19. .middle_box{
  20. /* overflow-y: scroll; */
  21. }
  22. .search{
  23. padding:20rpx 30rpx;
  24. display: flex;
  25. }
  26. .search .weui-cell_input{
  27. flex: 1;
  28. background: #FFFDF7;
  29. height: 64rpx;
  30. border-radius: 40rpx;
  31. font-size: 28rpx;
  32. padding-left: 80rpx;
  33. position: relative;
  34. }
  35. .search .weui-cell_input image{
  36. position: absolute;
  37. top: 7rpx;
  38. right: 16rpx;
  39. width: 50rpx;
  40. height: 50rpx;
  41. z-index: 100;
  42. }
  43. .search .weui-cell_input:before{
  44. content: '';
  45. border:0;
  46. display: inline-block;
  47. width: 46rpx;
  48. height: 46rpx;
  49. margin-top: 0;
  50. background: url(https://www.icelook.cn/exhibition/images/icon/search.svg) no-repeat left 10rpx;
  51. background-size: cover;
  52. }
  53. .search span{
  54. padding:10rpx 30rpx;
  55. background: #954024;
  56. border-radius: 40rpx;
  57. color: #fff;
  58. font-size: 28rpx;
  59. margin-left: 15rpx;
  60. }
  61. .banner{
  62. height:400rpx;
  63. border-radius: 16rpx;
  64. margin:0 30rpx;
  65. overflow: hidden;
  66. }
  67. .banner image{
  68. width: 100%;
  69. /* height: 400rpx; */
  70. }
  71. .exhibits .extitle{
  72. font-size: 40rpx;
  73. padding:30rpx 0;
  74. font-weight: bold;
  75. font-family: Georgia, 'Times New Roman', Times, serif;
  76. padding-left: 50rpx;
  77. background: url(https://www.icelook.cn/exhibition/images/icon/all.png) no-repeat 0 40rpx;
  78. }
  79. .exhibits{
  80. padding:0 30rpx;
  81. padding-bottom: 30rpx;
  82. }
  83. .exhibits ul li{
  84. width: 320rpx;
  85. height: 320rpx;
  86. background: #fff;
  87. box-shadow: 0 0 10px rgba(0,0,0,.1);
  88. border-radius: 20rpx;
  89. margin-bottom: 20rpx;
  90. position: relative;
  91. overflow: hidden;
  92. }
  93. .exhibits ul li .hear{
  94. position: absolute;
  95. top: 144rpx;
  96. right: 20rpx;
  97. width:48rpx;
  98. height: 48rpx;
  99. }
  100. .exhibits ul li .popbox{
  101. position: absolute;
  102. top:0;
  103. left:0;
  104. width: 100%;
  105. height: 224rpx;
  106. background-color: rgba(0,0,0,.5);
  107. }
  108. .exhibits ul li .popbox:after{
  109. content: '';
  110. position: absolute;
  111. top: 80rpx;
  112. left: 140rpx;
  113. width: 64rpx;
  114. height: 64rpx;
  115. background: url(https://www.icelook.cn/exhibition/images/icon/clock.png) no-repeat;
  116. background-size: 100% 100%;
  117. }
  118. .exhibits ul li .hear image{
  119. width:48rpx;
  120. height: 48rpx;
  121. }
  122. .exhibits ul li:nth-child(2n){
  123. float: right;
  124. }
  125. .exhibits ul li .imgs{
  126. height: 192rpx;
  127. padding:16rpx 30rpx;
  128. }
  129. .exhibits ul li .imgs image{
  130. width: 100%;
  131. height: 192rpx;
  132. }
  133. .exhibits ul li .liTitile{
  134. font-size: 28rpx;
  135. padding:0 20rpx;
  136. margin-bottom: 10rpx;
  137. color:#262626;
  138. }
  139. .number{
  140. font-size: 24rpx;
  141. padding:0 20rpx;
  142. }
  143. .exhibits ul li .number span{
  144. background: #af7965;
  145. color: #fff;
  146. border-radius: 40rpx;
  147. padding:2rpx 24rpx;
  148. }
  149. .unlock{
  150. position: fixed;
  151. bottom: 30rpx;
  152. right:30rpx;
  153. width: 120rpx;
  154. height: 120rpx;
  155. background: #954024;
  156. border-radius: 60rpx;
  157. text-align: center;
  158. }
  159. .unlock image{
  160. width: 56rpx;
  161. height: 56rpx;
  162. margin-top: 10rpx;
  163. }
  164. .unlock view{
  165. font-size: 20rpx;
  166. color: #fff;
  167. margin-top: -10rpx;
  168. }
  169. .mask{
  170. position: fixed;
  171. top: 0;
  172. left: 0;
  173. right: 0;
  174. bottom: 0;
  175. background-color: rgba(0, 0, 0, 0.5); /* 背景色设置为半透明黑色 */
  176. z-index: 999999; /* 设置遮罩层的 z-index 值,使其在其他元素之上 */
  177. }