init

src/components/message/message.vue

@@ -0,0 +1,74 @@
+<!--
+ * @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>