74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<!--
|
|
* @Author: szy
|
|
* @Date: 2022-03-02 17:07:40
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2022-04-26 11:41:27
|
|
* @FilePath: \web-pc\src\pages\big-screen\components\message\message.vue
|
|
-->
|
|
<template>
|
|
<div class="messages" v-if="visible">
|
|
<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="message-icon">
|
|
<path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
|
|
fill-opacity="0.9" v-if="'warning'==type"></path>
|
|
</svg>
|
|
{{ text }}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
text: "",
|
|
type:'warning'
|
|
};
|
|
},
|
|
props: {},
|
|
created() { },
|
|
|
|
mounted() { },
|
|
methods: {
|
|
init(param) {
|
|
clearTimeout(this.timer);
|
|
this.visible = true;
|
|
this.text = param.text || "";
|
|
this.type = param.type || "success";
|
|
this.timer = setTimeout(() => {
|
|
this.visible = false;
|
|
clearTimeout(this.timer);
|
|
}, 2000);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.messages {
|
|
position: fixed;
|
|
min-width: 200px;
|
|
top: 160px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
border: solid 1px #4b4b4b;
|
|
// box-shadow: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
|
|
// 0 8px 10px rgba(0, 0, 0, 20%), inset 0 0.5px 0 #5e5e5e,
|
|
// inset 0.5px 0 0 #5e5e5e, inset 0 -0.5px 0 #5e5e5e, inset -0.5px 0 0 #5e5e5e;
|
|
width: fit-content;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 999;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
background-color: #242424;
|
|
line-height: 22px;
|
|
font-size: 14px;
|
|
padding: 13px 16px;
|
|
|
|
.message-icon {
|
|
color: #cf6e2d;
|
|
font-size: 20px;
|
|
margin-right: 8px;
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
</style> |