zq
1 month ago
6 changed files with 257 additions and 10 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,97 @@ |
|||
<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; |
|||
text-align: justify; |
|||
} |
|||
.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> |
|||
Loading…
Reference in new issue