add.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view class="content-box">
  3. <uni-nav-bar fixed="true" statusBar="true" left-icon="back" @clickLeft="back">
  4. <view class="rx-sc" @click="openSearch">
  5. <uni-easyinput prefixIcon="search" style="width: 420rpx" placeholder="请输入">
  6. </uni-easyinput>
  7. </view>
  8. <block slot="right">
  9. <button @click="openSearch" class="search_btn">搜索</button>
  10. </block>
  11. </uni-nav-bar>
  12. <view class="list_box">
  13. <u-list @scrolltolower="scrolltolower">
  14. <view v-for="(item,index) in 100" :key='index'>
  15. {{item}}
  16. </view>
  17. </u-list>
  18. </view>
  19. <view class="bottom-wrapper">
  20. <view class="btn_box"></view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. show: false,
  29. searchFrom: {
  30. keyWord: ''
  31. }
  32. }
  33. },
  34. methods: {
  35. scrolltolower() {},
  36. openSearch() {},
  37. }
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. .content-box {
  42. height: 100vh;
  43. overflow: hidden;
  44. display: flex;
  45. flex-direction: column;
  46. background-color: $page-bg;
  47. }
  48. .search_btn {
  49. width: 120rpx;
  50. height: 70rpx;
  51. line-height: 70rpx;
  52. padding: 0 24rpx;
  53. background: $theme-color;
  54. font-size: 32rpx;
  55. color: #fff;
  56. margin: 0;
  57. }
  58. .list_box {
  59. flex: 1;
  60. overflow: hidden;
  61. padding: 4rpx 0;
  62. .u-list {
  63. height: 100% !important;
  64. }
  65. }
  66. .btn_box {
  67. width: 750rpx;
  68. height: 112rpx;
  69. background: #fff;
  70. }
  71. </style>