cardPanel.vue 724 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view class="panel" :class="{ 'no-padding': noPadding }">
  3. <view class="panel-header">
  4. <slot name="header"></slot>
  5. </view>
  6. <view class="panel-main">
  7. <slot name="main"></slot>
  8. </view>
  9. <view class="panel-footer">
  10. <slot name="footer"></slot>
  11. </view>
  12. </view>
  13. </template>
  14. <script setup lang="ts">
  15. import { defineProps } from 'vue';
  16. const props = defineProps({
  17. noPadding: {
  18. type: Boolean,
  19. default: false,
  20. }
  21. });
  22. </script>
  23. <style>
  24. .panel {
  25. position: relative;
  26. width: 100%;
  27. min-height: 80upx;
  28. height: fit-content;
  29. background-color: #fff;
  30. border-radius: 24upx;
  31. padding: 30upx;
  32. margin: 30upx 0;
  33. }
  34. .no-padding {
  35. padding: 0 !important;
  36. }
  37. </style>