建材商城系统20241014
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

125 lines
2.1 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <!-- <view class="navbar"
  3. :style="{backgroundColor : bgColor}"> -->
  4. <view class="title"
  5. :style="{backgroundColor : bgColor, color}">
  6. <view class="left">
  7. <uv-icon name="arrow-left"
  8. v-if="leftClick"
  9. @click="$emit('leftClick')"
  10. :color="color" size="46rpx"></uv-icon>
  11. </view>
  12. <view>{{ title }}</view>
  13. <view class="icon">
  14. <uv-icon name="search"
  15. v-if="isSearch"
  16. :color="color" size="58rpx"></uv-icon>
  17. <uv-icon name="plus-circle" :color="color"
  18. v-if="isPlus"
  19. @click="plusCircleShow = true"
  20. size="46rpx" style="margin-left: 30rpx;"></uv-icon>
  21. <view v-if="moreClick" style="margin-left: 30rpx;">
  22. <uv-icon name="more-dot-fill" :color="color"
  23. v-if="!moreText"
  24. @click="moreClick()"
  25. size="46rpx"></uv-icon>
  26. <view v-else @click="moreClick"
  27. style="font-weight: 400;font-size: 30rpx;">
  28. {{ moreText }}
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <!-- </view> -->
  34. </template>
  35. <script>
  36. export default {
  37. name:"navbar",
  38. props : {
  39. title : {
  40. type : String,
  41. default : ''
  42. },
  43. leftClick : {
  44. type : Boolean,
  45. },
  46. moreClick : {
  47. type : Function,
  48. },
  49. isSearch : {
  50. type : Boolean,
  51. default : false,
  52. },
  53. isPlus : {
  54. type : Boolean,
  55. default : false,
  56. },
  57. moreText : {
  58. },
  59. bgColor : {
  60. default : '#fff'
  61. },
  62. color : '#333',
  63. },
  64. created() {
  65. },
  66. beforeDestroy() {
  67. },
  68. data() {
  69. return {
  70. };
  71. },
  72. methods : {
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. // .navbar{
  78. // width: 100%;
  79. // height: 120rpx;
  80. // padding-top: var(--status-bar-height);
  81. // }
  82. .title{
  83. position: sticky;
  84. top: 0;
  85. left: 0;
  86. padding-top: calc(var(--status-bar-height) + 20rpx);
  87. width: 100%;
  88. height: 100rpx;
  89. background-color: #fff;
  90. display: flex;
  91. justify-content: center;
  92. font-size: 32rpx;
  93. align-items: center;
  94. z-index: 99999;
  95. .left{
  96. position: absolute;
  97. left: 40rpx;
  98. display: flex;
  99. justify-content: flex-start;
  100. }
  101. .icon{
  102. position: absolute;
  103. right: 40rpx;
  104. display: flex;
  105. justify-content: flex-end;
  106. }
  107. }
  108. @keyframes fade-in {
  109. 0% {
  110. opacity: 0;
  111. }
  112. 100% {
  113. opacity: 1;
  114. }
  115. }
  116. </style>