Dialog.vue 757 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <view class="dialog mask">
  3. <view class="d_b">
  4. <view class="header">
  5. </view>
  6. <view class="content">
  7. <slot></slot>
  8. </view>
  9. <view class="footer">
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'Dialog',
  17. }
  18. </script>
  19. <style lang="scss" scoped>
  20. .dialog {
  21. position: absolute;
  22. .d_b {
  23. background-color: rgba(255, 255, 255, 1);
  24. border-radius: 16rpx;
  25. display: flex;
  26. flex-direction: column;
  27. .header {
  28. }
  29. .content {
  30. flex: 1;
  31. }
  32. .footer {
  33. }
  34. }
  35. }
  36. .mask {
  37. width: 100vw;
  38. height: 100vh;
  39. top: 0;
  40. left: 0;
  41. background-color: rgba(0, 0, 0, 0.5);
  42. display: flex;
  43. align-items: center;
  44. justify-content: center;
  45. }
  46. </style>