|
@ -1,7 +1,8 @@ |
|
|
<template> |
|
|
<template> |
|
|
<transition name="fade"> |
|
|
<transition name="fade"> |
|
|
<div v-if="visible" :class="['position-message', type, position]" id="qq" :style="positionStyle"> |
|
|
<div v-if="visible" :class="['position-message', type, position]" id="qq" :style="positionStyle"> |
|
|
<i :class="iconClass"></i> |
|
|
<!-- <i :class="iconClass"></i>/ --> |
|
|
|
|
|
<img :src="defaultImages[type]" class="message-image" /> |
|
|
<span>{{ message }}</span> |
|
|
<span>{{ message }}</span> |
|
|
</div> |
|
|
</div> |
|
|
</transition> |
|
|
</transition> |
|
@ -30,7 +31,13 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
visible: false, |
|
|
visible: false, |
|
|
positionStyle: {} |
|
|
positionStyle: {}, |
|
|
|
|
|
defaultImages:{ |
|
|
|
|
|
success: require('@/assets/message_Success.png'), |
|
|
|
|
|
info: require('@/assets/message_Warning.png'), |
|
|
|
|
|
warning: require('@/assets/message_Warning.png'), |
|
|
|
|
|
error: require('@/assets/message_error.png') |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
@ -93,40 +100,49 @@ export default { |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped lang="scss"> |
|
|
.position-message { |
|
|
.position-message { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
min-width: 100px; |
|
|
min-width: 100px; |
|
|
padding: 8px 12px; |
|
|
padding: 14px 21px; |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
|
|
|
|
z-index: 9999; |
|
|
z-index: 9999; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
background: red; |
|
|
background: #FFFFFF; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16); |
|
|
|
|
|
span{ |
|
|
|
|
|
letter-spacing: 0.08em; |
|
|
|
|
|
color: #626573; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.message-image { |
|
|
|
|
|
width: 18px; |
|
|
|
|
|
height: 18px; |
|
|
|
|
|
margin-right: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.position-message i { |
|
|
.position-message i { |
|
|
margin-right: 6px; |
|
|
margin-right: 6px; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.position-message.info { |
|
|
.position-message.info { |
|
|
background-color: #f4f4f5; |
|
|
/* background-color: #f4f4f5; |
|
|
color: #909399; |
|
|
color: #909399; |
|
|
border: 1px solid #e9e9eb; |
|
|
border: 1px solid #e9e9eb; */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.position-message.success { |
|
|
.position-message.success { |
|
|
background-color: #f0f9eb; |
|
|
/* background-color: #f0f9eb; |
|
|
color: #67c23a; |
|
|
color: #67c23a; |
|
|
border: 1px solid #e1f3d8; |
|
|
border: 1px solid #e1f3d8; */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.position-message.error { |
|
|
.position-message.error { |
|
|
background-color: #fef0f0; |
|
|
/* background-color: #fef0f0; |
|
|
color: #f56c6c; |
|
|
color: #f56c6c; |
|
|
border: 1px solid #fde2e2; |
|
|
border: 1px solid #fde2e2; */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.fade-enter-active, |
|
|
.fade-enter-active, |
|
|