Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

pickerMultiSelect.css 2.5 KiB

3 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /* components/pickerMultiSelect.wxss */
  2. page {
  3. height: 100%;
  4. width: 100%;
  5. }
  6. .showPicker {
  7. width: 100%;
  8. height: 80rpx;
  9. line-height: 80rpx;
  10. font-size: 30rpx;
  11. background-color: paleturquoise;
  12. text-align: center;
  13. }
  14. .shade-container {
  15. position: fixed;
  16. height: 100%;
  17. width: 100%;
  18. top: 0;
  19. right: 0;
  20. display: flex;
  21. justify-content: space-around;
  22. background-color: rgba(0, 0, 0, 0.5);
  23. /* transform: translateX(-200%);
  24. transition: all 0.5s ease; */
  25. /* display: block; */
  26. z-index: 9999;
  27. }
  28. .hide-container {
  29. /* position: fixed;
  30. height: 100%;
  31. width: 100%;
  32. top: 0;
  33. right: -200%;
  34. z-index: 9999;
  35. display: flex;
  36. justify-content: space-between;
  37. transform: translateX(100%);
  38. transition: all 0.5s ease-in; */
  39. display: none
  40. }
  41. .left-shade {
  42. width: 30vw;
  43. height: 100%;
  44. }
  45. .right-choose {
  46. width: 70vw;
  47. height: 100%;
  48. background-color: #fff;
  49. padding: 40rpx;
  50. z-index: 12313;
  51. }
  52. .picker-container {
  53. height: calc(100% - 200rpx);
  54. overflow-x: hidden;
  55. overflow-y: scroll;
  56. margin-top: 40rpx;
  57. }
  58. .picker-container::-webkit-scrollbar {
  59. display: none;
  60. }
  61. .picker-item {
  62. width: calc(100% - 8rpx);
  63. height: 50rpx;
  64. line-height: 50rpx;
  65. font-size: 24rpx;
  66. text-align: center;
  67. margin-top: 20rpx;
  68. border: 2rpx solid #eaeaea;
  69. border-radius: 8rpx;
  70. }
  71. .picker-item-choose {
  72. border: 2rpx solid rgb(110, 216, 84);
  73. }
  74. .picker-item:nth-of-type(1) {
  75. margin: 0;
  76. }
  77. .button-container {
  78. width: 100%;
  79. height: 80rpx;
  80. display: flex;
  81. justify-content: space-between;
  82. font-size: 24rpx;
  83. text-align: center;
  84. border-bottom: 2rpx solid #eaeaea;
  85. }
  86. .cancal {
  87. width: 100rpx;
  88. height: 40rpx;
  89. line-height: 40rpx;
  90. border: 2rpx solid #ddd;
  91. border-radius: 8rpx;
  92. }
  93. .sure {
  94. width: 100rpx;
  95. height: 40rpx;
  96. line-height: 40rpx;
  97. border: 2rpx solid rgb(132, 235, 132);
  98. border-radius: 8rpx;
  99. }
  100. .list{
  101. width: 100%;
  102. padding: 25rpx 0;
  103. display: flex;
  104. align-items: center;
  105. justify-content: space-between;
  106. border-bottom: 1px solid #EAF1FF;
  107. box-sizing: border-box
  108. }
  109. .listName{
  110. font-size:28rpx;
  111. color:rgba(87,99,117,1);
  112. max-width: 500rpx;
  113. overflow: hidden;
  114. text-overflow: ellipsis;
  115. white-space: nowrap;
  116. }
  117. .listName2{
  118. font-size:28rpx;
  119. color:#BCC0C8;
  120. max-width: 500rpx;
  121. overflow: hidden;
  122. text-overflow: ellipsis;
  123. white-space: nowrap;
  124. margin-right: -360rpx;
  125. }
  126. .listImg{
  127. width: 14rpx;
  128. height: 26rpx
  129. }