cardPanel.vue 689 B

12345678910111213141516171819202122232425262728293031323334353637383940
  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. const props = defineProps({
  16. noPadding: {
  17. type: Boolean,
  18. default: false,
  19. }
  20. });
  21. </script>
  22. <style>
  23. .panel {
  24. position: relative;
  25. width: 100%;
  26. min-height: 80upx;
  27. height: fit-content;
  28. background-color: #fff;
  29. border-radius: 24upx;
  30. padding: 30upx;
  31. margin: 30upx 0;
  32. }
  33. .no-padding {
  34. padding: 0 !important;
  35. }
  36. </style>