small.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div :class="['p-modal-main', 'p-modal-main-small', type&&'p-modal-main-small-svg']">
  3. <section class="p-modal-info-svg" v-if="type">
  4. <InfoBlurSvg v-if="type==='info'" />
  5. <ErrorRedSvg v-else />
  6. </section>
  7. <div class="p-modal-title" v-if="title">
  8. <section class="p-title-text">{{title}}</section>
  9. </div>
  10. <div class="p-modal-content">
  11. <div class="p-modal-content-main" ref="modalContentMain">
  12. <slot name="content" />
  13. </div>
  14. </div>
  15. <slot name="handle" />
  16. </div>
  17. </template>
  18. <script>
  19. import InfoBlurSvg from "../../static/iconSvg/info_blue.svg";
  20. import ErrorRedSvg from "../../static/iconSvg/error_red.svg";
  21. export default {
  22. name: "Small",
  23. components: { InfoBlurSvg, ErrorRedSvg },
  24. props: {
  25. title: {
  26. type: String,
  27. default: ""
  28. },
  29. type: {
  30. type: String,
  31. default: ""
  32. }
  33. }
  34. };
  35. </script>
  36. <style lang="less" scoped>
  37. .p-modal-main-small {
  38. top: 120px;
  39. left: 50%;
  40. margin-left: -210px;
  41. border-radius: 4px;
  42. width: 420px;
  43. .p-modal-info-svg {
  44. width: 24px;
  45. height: 24px;
  46. svg {
  47. width: 24px;
  48. height: 24px;
  49. }
  50. }
  51. .p-modal-title {
  52. border: 0;
  53. height: 40px;
  54. }
  55. .p-modal-content {
  56. min-height: auto;
  57. }
  58. }
  59. .p-modal-main-small-svg {
  60. position: relative;
  61. .p-modal-info-svg {
  62. position: absolute;
  63. top: 24px;
  64. left: 32px;
  65. }
  66. .p-modal-title {
  67. padding-top: 8px;
  68. padding-left: 72px;
  69. }
  70. .p-modal-content {
  71. padding-left: 72px;
  72. }
  73. }
  74. </style>