人民医院前端

errtItem.vue 1.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="item">
  3. <view class="head" @click="expand=!expand">
  4. <text class="expand">{{expand?'▼ ':'▶ '}}</text>
  5. <slot></slot>
  6. <text class="text">{{data.err}}</text>
  7. </view>
  8. <view v-if="expand" class="expand-area">
  9. <text class="text">{{data.stack}}</text>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. props: {
  16. data: {}
  17. },
  18. data() {
  19. return {
  20. expand: false
  21. }
  22. },
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. .item {
  27. display: flex;
  28. flex-direction: column;
  29. flex-wrap: wrap;
  30. justify-content: center;
  31. border-bottom: 1px solid #f6f6f6;
  32. width: 750rpx;
  33. .head {
  34. display: flex;
  35. flex-direction: row;
  36. align-items: center;
  37. flex-wrap: wrap;
  38. padding: 8rpx 15rpx;
  39. background-color: #fff0f0;
  40. border-bottom-color: #ffd6d6;
  41. .text {
  42. color: #f00;
  43. font-size: 25rpx;
  44. margin-right: 6rpx;
  45. word-break: break-all;
  46. }
  47. .expand {
  48. font-size: 20rpx;
  49. margin-right: 6rpx;
  50. }
  51. }
  52. }
  53. .expand-area {
  54. padding: 10rpx 0;
  55. .text {
  56. font-size: 25rpx;
  57. word-break: break-all;
  58. }
  59. }
  60. </style>