From a9545710148126d463b04e15d14771e2ae2d6568 Mon Sep 17 00:00:00 2001
From: ysfscream <894402575@qq.com>
Date: Fri, 26 Mar 2021 17:32:22 +0800
Subject: [PATCH] style(messages): modify messages styles on global

---
 example/App.vue                      | 16 ++++++++++++++++
 packages/Container/src/container.vue |  1 -
 packages/index.ts                    |  1 +
 packages/style/global.scss           | 28 ++++++++++++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/example/App.vue b/example/App.vue
index 78d40b0..caff988 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -170,6 +170,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
 export default defineComponent({
   name: 'App',
@@ -217,6 +218,21 @@ export default defineComponent({
     }
     const onSubmit = () => {
       console.log(testForm.value)
+      ElMessage({
+        type: 'success',
+        message: 'success',
+        duration: 0,
+      })
+      ElMessage({
+        type: 'error',
+        message: 'error',
+        duration: 0,
+      })
+      ElMessage({
+        type: 'warning',
+        message: 'warning',
+        duration: 0,
+      })
     }
     const KeyValueEditorRef = ref()
     const addOneRow = () => {
diff --git a/packages/Container/src/container.vue b/packages/Container/src/container.vue
index e8d86b8..e04fde7 100644
--- a/packages/Container/src/container.vue
+++ b/packages/Container/src/container.vue
@@ -62,7 +62,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../style/global.scss';
 .emqx-container {
   &.is-normal {
     margin-right: auto;
diff --git a/packages/index.ts b/packages/index.ts
index 34a6fb5..0a79c3f 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -27,6 +27,7 @@ import BreadcrumbItem from './BreadcrumbItem'
 import Upload from './Upload'
 import Tags from './Tags'
 import KeyValueEditor from './KeyValueEditor'
+import './style/global.scss'
 
 interface VueWindow extends Window {
   Vue?: App
diff --git a/packages/style/global.scss b/packages/style/global.scss
index 00e995d..5c68f51 100644
--- a/packages/style/global.scss
+++ b/packages/style/global.scss
@@ -1,3 +1,31 @@
+.el-message {
+  border-radius: 8px !important;
+}
+.el-message--success {
+  background: linear-gradient(133deg, #E1F4EE 0%, #DEF0F1 100%) !important;
+  border: none !important;
+  .el-message__content,
+  .el-icon-success {
+    color: #00B173 !important;
+  }
+}
+.el-message--error {
+  background: linear-gradient(133deg, #F9E5EB 0%, #FCE2DC 100%) !important;
+  border: none !important;
+  .el-message__content,
+  .el-icon-error {
+    color: #F16538 !important;
+  }
+}
+.el-message--warning {
+  background: linear-gradient(133deg, #FDF2E2 0%, #FAECD9 100%);
+  border: none !important;
+  .el-message__content,
+  .el-icon-warning {
+    color: #EC8E18 !important;
+  }
+}
+
 @media screen and (max-width: 2560px) {
   .emqx-container.is-normal,
   .emqx-header-container {