No Description

choose_city.css 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. html {
  2. background-color: #f3f3f3;
  3. font-size: 100px;
  4. }
  5. nav {
  6. position: fixed;
  7. top: 0;
  8. left: 0;
  9. z-index: 9999;
  10. font-size: 0rem;
  11. height: 0.44rem;
  12. width: 100%;
  13. background-color: #5d7dff;
  14. }
  15. nav i {
  16. display: inline-block;
  17. width: 0.16rem;
  18. height: 0.16rem;
  19. line-height: 0.44rem;
  20. margin-left: 0.1rem;
  21. background-image: url(../img/back.png);
  22. background-repeat: no-repeat;
  23. background-size: 100% auto;
  24. }
  25. nav p {
  26. display: inline-block;
  27. width: 90%;
  28. text-align: center;
  29. line-height: 0.44rem;
  30. color: #fff;
  31. font-size: 0.17rem;
  32. }
  33. .current-city-wrapper {
  34. margin: 0.54rem 0.10rem 0;
  35. margin-top: 0rem;
  36. }
  37. .current-city-wrapper>p {
  38. color: #444;
  39. font-size: 0.12rem;
  40. margin-top: 0.10rem;
  41. }
  42. .current-city {
  43. margin-top: 0.12rem;
  44. width: 100%;
  45. height: 0.40rem;
  46. background-color: #fff;
  47. position: relative;
  48. font-size: 0;
  49. border-radius: 0.04rem;
  50. }
  51. .current-city span {
  52. margin-left: 0.06rem;
  53. font-size: 0.16rem;
  54. line-height: 0.40rem;
  55. color: #5D7DFF;
  56. font-weight: bold;
  57. vertical-align: middle;
  58. }
  59. .current-city i {
  60. display: inline-block;
  61. background: url(../img/location3.png) no-repeat;
  62. background-size: 100%;
  63. width: 0.17rem;
  64. height: 0.17rem;
  65. vertical-align: middle;
  66. margin-left: 0.09rem;
  67. }
  68. .city-list-wrapper {
  69. position: relative;
  70. }
  71. .city-list-content {
  72. margin: 0.10rem 0.30rem 0 0.1rem;
  73. }
  74. .city-list-hot-wrapper p {
  75. color: #444;
  76. font-size: 0.12rem;
  77. margin-top: 0.12rem;
  78. }
  79. .city-list-hot {
  80. margin-top: 0.12rem;
  81. width: 100%;
  82. /*height: 0.94rem;*/
  83. margin-bottom: 0.12rem;
  84. padding-bottom: 0.1rem;
  85. background-color: #fff;
  86. border-radius: 0.04rem;
  87. }
  88. .city-list-hot:after{
  89. content: ".";
  90. clear: both;
  91. display: block;
  92. overflow: hidden;
  93. font-size: 0;
  94. height: 0;
  95. }
  96. .city-list-hot li {
  97. width: 0.80rem;
  98. height: 0.30rem;
  99. margin: auto;
  100. margin-top: 0.1rem;
  101. /*margin-right: 0.15rem;*/
  102. /*margin-left: 0.15rem;*/
  103. font-size: 0.12rem;
  104. color: #222;
  105. text-align: center;
  106. line-height: 0.30rem;
  107. background-color: #f3f3f3;
  108. }
  109. .city-list-hot div{
  110. width: 33.33%;
  111. float: left;
  112. }
  113. .city-list {
  114. width: 100%;
  115. margin-top: 0.10rem;
  116. border-radius: 4px;
  117. margin-right: 0.30rem;
  118. background-color: #fff;
  119. }
  120. .city-list dl {
  121. padding-top: 0.14rem;
  122. margin-left: 0.18rem;
  123. padding-bottom: 0.14rem;
  124. border-bottom: 0.5px solid #d8d8d8;
  125. }
  126. .city-list dt {
  127. font-size: 0.16rem;
  128. font-weight: bold;
  129. color: #222;
  130. }
  131. .city-list dd {
  132. margin-top: 0.14rem;
  133. font-size: 0.14rem;
  134. color: #222;
  135. }
  136. .navbar {
  137. position: fixed;
  138. right: 0;
  139. top: 1.54rem;
  140. width: 0.20rem;
  141. /*height: 4.10rem;*/
  142. height: 70%;
  143. background-color: #fff;
  144. font-size: 0;
  145. overflow-y:auto ;
  146. }
  147. .navbar a {
  148. margin-top: 0.04rem;
  149. color: #5d7dff;
  150. font-size: 0.10rem;
  151. display: block;
  152. text-align: center;
  153. }
  154. .to-top {
  155. margin-top: 0.06rem;
  156. background-image: url(../img/hide.png);
  157. background-repeat: no-repeat;
  158. background-position: center;
  159. background-size: 50%;
  160. width: 0.20rem;
  161. height: 0.10rem;
  162. margin-bottom: 0.10rem;
  163. }
  164. .prompt {
  165. display: block;
  166. width: 0.40rem;
  167. height: 0.40rem;
  168. line-height: 0.40rem;
  169. font-size: 0.18rem;
  170. border-radius: 50%;
  171. background-color: rgba(0, 0, 0, 0.7);
  172. color: #fff;
  173. text-align: center;
  174. position: fixed;
  175. top: 50%;
  176. left: 50%;
  177. -webkit-transform: translate(-50%, -50%);
  178. transform: translate(-50%, -50%);
  179. }
  180. .alert-info {
  181. position: absolute;
  182. top: 1.74rem;
  183. right: 0.1rem;
  184. left: 0.1rem;
  185. font-size: 0;
  186. text-align: center;
  187. }
  188. .alert-info p {
  189. display: inline-block;
  190. height: 0.38rem;
  191. color: #fff;
  192. font-size: 0.14rem;
  193. line-height: 0.38rem;
  194. padding: 0 0.10rem;
  195. background-color: rgba(0, 0, 0, 0.7);
  196. border-radius: 5px;
  197. }
  198. /*search*/
  199. .search{
  200. height: 0.35rem;
  201. margin: 0 0.1rem;
  202. margin-top: 0.54rem;
  203. background: #FFFFFF;
  204. border-radius: 0.06rem;
  205. display: flex;
  206. align-items: center;
  207. }
  208. .search i{
  209. display: inline-block;
  210. width: 0.17rem;
  211. height: 0.17rem;
  212. background: url(../img/search.png) no-repeat;
  213. background-size:100% ;
  214. margin-left: 0.1rem;
  215. }
  216. .search input{
  217. border: none;
  218. outline: none;
  219. font-size: 0.16rem;
  220. margin-left: 0.08rem;
  221. flex: 1;
  222. }