fs-panel.vue 728 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <view class="fs-panel">
  3. <view class="fs-panel-title">
  4. <view v-if="title">{{title}}</view>
  5. <view v-else><slot name="title"></slot></view>
  6. </view>
  7. <view
  8. class="fs-panel-content"
  9. :class="{'fs-panel-padding': padding}"
  10. :style="{'background-color':bgColor}"
  11. >
  12. <slot name="content"></slot>
  13. </view>
  14. </view>
  15. </template>
  16. <script setup>
  17. const props = defineProps({
  18. title: String,
  19. padding: Boolean,
  20. bgColor: {
  21. type: String,
  22. default: '#fff'
  23. }
  24. })
  25. </script>
  26. <style lang="scss">
  27. .fs-panel-title{
  28. padding: 20rpx var(--gutter);
  29. color: var(--title);
  30. text-align: left;
  31. background-color: var(--bg-color);
  32. }
  33. .fs-panel-padding{
  34. padding: var(--gutter);
  35. }
  36. </style>