matterPop.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <view>
  3. <u-popup :show="show" duration='300' :mode='mode' :closeOnClickOverlay='false'>
  4. <view class="content-box">
  5. <view class="list_box">
  6. <u-list @scrolltolower="scrolltolower">
  7. </u-list>
  8. </view>
  9. <view class="operate_box rx-sc">
  10. <u-button size="small" class="u-reset-button" @click="handleClose">取消</u-button>
  11. <u-button size="small" class="u-reset-button" type="success" @click="save">确认 </u-button>
  12. </view>
  13. </view>
  14. </u-popup>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. show: true,
  22. mode: 'right'
  23. }
  24. },
  25. methods: {
  26. scrolltolower() {},
  27. save() {
  28. },
  29. handleClose() {
  30. this.$emit('close')
  31. },
  32. }
  33. }
  34. </script>
  35. <style lang="scss" scoped>
  36. .content-box {
  37. width: 80vw;
  38. height: 100vh;
  39. overflow: hidden;
  40. display: flex;
  41. flex-direction: column;
  42. background-color: $page-bg;
  43. }
  44. .list_box {
  45. flex: 1;
  46. overflow: hidden;
  47. padding: 4rpx 0;
  48. .u-list {
  49. height: 100% !important;
  50. }
  51. }
  52. .operate_box {
  53. background-color: #fff;
  54. padding: 10rpx 100rpx;
  55. /deep/ .u-button {
  56. width: 160rpx;
  57. }
  58. }
  59. </style>