city-select.wxss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. @charset "UTF-8";
  2. /* 需要放到文件最上面 */
  3. /* 水平间距 */
  4. /* 水平间距 */
  5. /*
  6. 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值
  7. */
  8. /* 水平间距 */
  9. view {
  10. box-sizing: border-box;
  11. }
  12. .city-serach {
  13. width: 100%;
  14. padding: 0;
  15. background: #fff;
  16. padding: 20rpx 30rpx;
  17. margin-top: 1px;
  18. }
  19. .city-serach-input {
  20. height: 60rpx;
  21. border-radius: 60rpx;
  22. border: 1px solid #d9d9d9;
  23. padding: 0 30rpx;
  24. }
  25. .city-select-main {
  26. position: relative;
  27. width: 100%;
  28. height: 100%;
  29. background: #f2f2f2;
  30. }
  31. .city-select {
  32. position: relative;
  33. width: 100vw;
  34. height: 100vh;
  35. }
  36. .city-select .hot-title {
  37. padding-left: 10rpx;
  38. width: 100vw;
  39. font-size: 12px;
  40. color: #8c8c8c;
  41. font-weight: 300;
  42. padding: 5px 20rpx;
  43. }
  44. .city-select .hot-city {
  45. overflow: hidden;
  46. width: 100vw;
  47. }
  48. .city-select .hot-city .hot-item {
  49. float: left;
  50. overflow: hidden;
  51. font-size: 14px;
  52. text-align: center;
  53. display: -webkit-box;
  54. -webkit-box-orient: vertical;
  55. -webkit-line-clamp: 1;
  56. background: #fff;
  57. border: 1px solid #d9d9d9;
  58. padding: 10rpx 20rpx;
  59. margin-left: 20rpx;
  60. border-radius: 8rpx;
  61. }
  62. .city-select .citys .citys-row {
  63. width: 100%;
  64. font-size: 14px;
  65. }
  66. .city-select .citys .citys-row .citys-item-letter {
  67. width: 100vw;
  68. line-height: 60rpx;
  69. color: #434343;
  70. background: #f2f2f2;
  71. border-top: none;
  72. padding-left: 30rpx;
  73. }
  74. .city-select .citys .citys-row .citys-item {
  75. width: 100%;
  76. line-height: 88rpx;
  77. border-bottom: 1px solid #d9d9d9;
  78. background: #fff;
  79. padding-left: 30rpx;
  80. }
  81. .city-select .citys .citys-row .citys-item:last-child {
  82. border: none;
  83. }
  84. .city-select .city-indexs-view {
  85. position: absolute;
  86. right: 0;
  87. top: 200rpx;
  88. z-index: 999;
  89. display: flex;
  90. bottom: 50rpx;
  91. text-align: center;
  92. }
  93. .city-select .city-indexs-view .city-indexs {
  94. height: 100%;
  95. text-align: center;
  96. vertical-align: middle;
  97. align-self: center;
  98. }
  99. .city-select .city-indexs-view .city-indexs .city-indexs-text {
  100. margin-bottom: 10rpx;
  101. font-size: 20rpx;
  102. color: #08979c;
  103. width: 40rpx;
  104. }
  105. .city-select .city-indexs-view .city-indexs .city-indexs-text:last-child {
  106. margin-bottom: 0;
  107. }