kuailelunwen_new_houtai/src/components/PromptText.vue

<template>
    <div class="prompt-text" :class="typeClass">
        <div class="flex-text">
            <div class="flex">
                <img class="prompt-icon" :src="typeIcon" alt="">
                <span class="prompt-desc">{{text}}</span>
            </div>
            <div class="flex">
                <slot name="next_desc" />
            </div>
        </div>
        <div class="prompt-extra">
            <slot name="desc" />
        </div>
    </div>
</template>
<script>

export default {
    name: 'PromptText',
    props: {
        text: {
            type: String,
            required: true
        },
        type: {
            type: [Number, String],
            default: 2
        },
    },
    components: {
    },
    data(){
        return{}
    },
    computed: {
        typeClass() {
            switch (parseInt(this.type)) {
                case 1: return 'info';
                case 2: return 'notice';
                case 3: return 'warning';
                default: return 'notice';
            }
        },
        typeIcon() {
            switch (parseInt(this.type)) {
                case 1: return require('@/assets/site/prompt-icon-1.svg');
                case 2: return require('@/assets/site/prompt-icon-2.svg');
                case 3: return require('@/assets/site/prompt-icon-3.svg');
                default: return require('@/assets/site/prompt-icon-2.svg');
            }
        }
    },
    methods:{

    }
}
</script>
<style scoped lang="scss">
.prompt-text{
  padding: 8px 13px;
  border-radius: 4px;
}
.flex-text{
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  z-index: 1;
}
.info{
  background: #F2F7FF;
  border: 1px solid #BFDAFF;
}
.notice{
  background: #FEFCE8;
  border: 1px solid rgba(255, 140, 0, 0.3);
}
.warning{
  background: #FFF1F0;
  border: 1px solid #FFA39E;
}
.prompt-icon{
  width: 16px;
  height: 16px;;
  margin-right: 8px;
}

.prompt-desc{
  color: #1E2226;
  letter-spacing: 0.08em;
}
.prompt-extra{

}
</style>