page-top-bar.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view>
  3. <view class="top-bar" >
  4. <view class="row">
  5. <view class="column column1" @click="navTo(1,'/pages/home/home')"><image src="../../static/images/backhome.png" style="width: 24px; height: 24px;"></image></view>
  6. <view class="column column2"><input class="input-box" type="text" placeholder="搜索内容" style="width: 100%;"/></view>
  7. <view class="column column3"><image src="../../static/images/fangdajing.png" style="width: 21px; height: 21px;"></image></view>
  8. <view class="column column4" ></view>
  9. </view>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. active: {
  17. type: Number,
  18. default: 1
  19. }
  20. },
  21. data() {
  22. return {
  23. // diy:2
  24. };
  25. },
  26. computed: {
  27. diy() {
  28. return this.$store.state.systemInfo.is_vip;
  29. },
  30. setColor() {
  31. return this.$store.state.setColor;
  32. }
  33. },
  34. methods: {
  35. navTo(index, url) {
  36. if (index != this.active) {
  37. uni.switchTab({
  38. url: url
  39. })
  40. }
  41. },
  42. onViewBind(e){
  43. uni.navigateTo({
  44. url:'/pages/user-detail/user-detail'
  45. })
  46. },
  47. }
  48. }
  49. </script>
  50. <style scoped>
  51. .top-bar {
  52. /* background-color: #745A42; */
  53. background-color: #593320;
  54. width: 100vw;
  55. /*兼容 IOS<11.2*/
  56. padding-bottom: constant(safe-area-inset-bottom);
  57. /*兼容 IOS>11.2*/
  58. padding-bottom: env(safe-area-inset-bottom);
  59. height: 120px;
  60. display: flex;
  61. flex-flow: row nowrap;
  62. justify-tab-bar: space-around;
  63. align-items: center;
  64. padding-top: 30px;
  65. position: fixed;
  66. left: 0;
  67. top: 0;
  68. z-index: 900;
  69. }
  70. .row {
  71. padding-top: 40px;
  72. display: flex;
  73. justify-content: space-between;
  74. width: 100%;
  75. }
  76. .column {
  77. padding: 10px 0px 0px 0px;
  78. text-align: left; /* 文本居中 */
  79. width: 100%;
  80. }
  81. .column1 { width: 24%; padding-left: 30px; }
  82. .column2 { width: 48%;padding-left:20px }
  83. .column3 { width: 20px; padding-left:10px; padding-top: 12px;}
  84. .column4 { width: 20%;margin-right: 30px; }
  85. .input-box {
  86. border: 1px solid #CCC; /* 白色边框 */
  87. border-radius: 10px; /* 边框弧形角度 */
  88. padding: 0px 5px; /* 内边距 */
  89. height: 24px;
  90. color: #FFF;
  91. }
  92. .input-box::placeholder {
  93. color: #FFF; /* 占位符文字颜色 */
  94. }
  95. </style>