123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <template>
- <div :class="['p-modal-main', 'p-modal-main-small', type&&'p-modal-main-small-svg']">
- <section class="p-modal-info-svg" v-if="type">
- <InfoBlurSvg v-if="type==='info'" />
- <ErrorRedSvg v-else />
- </section>
- <div class="p-modal-title" v-if="title">
- <section class="p-title-text">{{title}}</section>
- </div>
- <div class="p-modal-content">
- <div class="p-modal-content-main" ref="modalContentMain">
- <slot name="content" />
- </div>
- </div>
- <slot name="handle" />
- </div>
- </template>
- <script>
- import InfoBlurSvg from "../../static/iconSvg/info_blue.svg";
- import ErrorRedSvg from "../../static/iconSvg/error_red.svg";
- export default {
- name: "Small",
- components: { InfoBlurSvg, ErrorRedSvg },
- props: {
- title: {
- type: String,
- default: ""
- },
- type: {
- type: String,
- default: ""
- }
- }
- };
- </script>
- <style lang="less" scoped>
- .p-modal-main-small {
- top: 120px;
- left: 50%;
- margin-left: -210px;
- border-radius: 4px;
- width: 420px;
- .p-modal-info-svg {
- width: 24px;
- height: 24px;
- svg {
- width: 24px;
- height: 24px;
- }
- }
- .p-modal-title {
- border: 0;
- height: 40px;
- }
- .p-modal-content {
- min-height: auto;
- }
- }
- .p-modal-main-small-svg {
- position: relative;
- .p-modal-info-svg {
- position: absolute;
- top: 24px;
- left: 32px;
- }
- .p-modal-title {
- padding-top: 8px;
- padding-left: 72px;
- }
- .p-modal-content {
- padding-left: 72px;
- }
- }
- </style>
|