index.vue 1006 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <demo-section>
  3. <demo-block :title="$t('basicUsage')">
  4. <van-panel
  5. :title="$t('title')"
  6. :desc="$t('desc')"
  7. :status="$t('status')"
  8. >
  9. <div>{{ $t('content') }}</div>
  10. </van-panel>
  11. </demo-block>
  12. <demo-block :title="$t('advancedUsage')">
  13. <van-panel
  14. :title="$t('title')"
  15. :desc="$t('desc')"
  16. :status="$t('status')"
  17. >
  18. <div>{{ $t('content') }}</div>
  19. <div slot="footer">
  20. <van-button size="small">{{ $t('button') }}</van-button>
  21. <van-button
  22. size="small"
  23. type="danger"
  24. >
  25. {{ $t('button') }}
  26. </van-button>
  27. </div>
  28. </van-panel>
  29. </demo-block>
  30. </demo-section>
  31. </template>
  32. <script>
  33. export default {};
  34. </script>
  35. <style lang="less">
  36. .demo-panel {
  37. .van-panel__footer {
  38. text-align: right;
  39. .van-button {
  40. margin-left: 5px;
  41. }
  42. }
  43. .van-panel__content {
  44. padding: 20px;
  45. }
  46. }
  47. </style>