yx-navbar.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .narBarCon {
  2. width: 100%;
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. height: 176rpx;
  7. .topBarCon {
  8. width: 100%;
  9. height: 176rpx;
  10. background-image: url('../../static/img/bg.png');
  11. background-size: 100% 100%;
  12. background-repeat: no-repeat;
  13. position: relative;
  14. .itemCon {
  15. color: #fff;
  16. width: 100%;
  17. height: 60rpx;
  18. display: flex;
  19. flex-direction: row;
  20. align-items: center;
  21. padding: 0 40rpx;
  22. box-sizing: border-box;
  23. position: absolute;
  24. left: 0;
  25. bottom: 20rpx;
  26. .leftIcon {
  27. width: 10%;
  28. }
  29. .title {
  30. width: 78%;
  31. text-align: center;
  32. font-size: 36rpx;
  33. overflow: hidden;
  34. white-space: nowrap;
  35. text-overflow: ellipsis;
  36. }
  37. .rightIcon {
  38. width: 12%;
  39. .yuan {
  40. margin-left: 20rpx;
  41. width: 52rpx;
  42. height: 52rpx;
  43. background-color: #fff;
  44. border-radius: 50%;
  45. display: flex;
  46. flex-direction: row;
  47. align-items: center;
  48. justify-content: center;
  49. }
  50. }
  51. }
  52. }
  53. .searchOptions {
  54. width: 100%;
  55. height: auto;
  56. position: absolute;
  57. margin-top: 0;
  58. z-index: 999;
  59. display: flex;
  60. flex-direction: column;
  61. background-color: #fff;
  62. .myList {
  63. width: 100%;
  64. height: 100rpx;
  65. display: flex;
  66. flex-direction: row;
  67. align-items: center;
  68. justify-content: space-around;
  69. border-bottom: 1px solid #ccc;
  70. .name {
  71. width: 70%;
  72. font-size: 28rpx;
  73. }
  74. }
  75. }
  76. .addMenuCon {
  77. position: absolute;
  78. z-index: 99;
  79. right: 20rpx;
  80. top: 175rpx;
  81. width: 210rpx;
  82. height: 310rpx;
  83. background-color: #444;
  84. border-radius: 12rpx;
  85. color: white;
  86. font-size: 28rpx;
  87. }
  88. .addMenuCon::after {
  89. content: '';
  90. position: absolute;
  91. top: -10rpx;
  92. left: 60%;
  93. width: 0;
  94. height: 0;
  95. border-left: 10rpx solid transparent;
  96. border-right: 10rpx solid transparent;
  97. border-bottom: 10rpx solid #444;
  98. }
  99. .addMenuConZhe {
  100. position: absolute;
  101. z-index: 90;
  102. width: 100vw;
  103. height: 100vh;
  104. top: 0;
  105. left: 0;
  106. }
  107. .close-icon {
  108. position: absolute;
  109. right: 28rpx;
  110. bottom: 28rpx;
  111. }
  112. }