fix(comp:alert): style update (#1377)

IDuxFE · Dec 26, 2022 · 30d1ab3 · 30d1ab3
1 parent 9163d69
commit 30d1ab3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -137,6 +137,7 @@
     "vite-plugin-static-copy": "^0.9.0",
     "vite-plugin-chunk-split": "^0.4.3",
     "vue": "^3.2.41",
+    "vue3-marquee": "^3.1.2",
     "yaml-front-matter": "^4.1.1"
   },
   "engines": {

diff --git a/packages/components/alert/demo/Banner.md b/packages/components/alert/demo/Banner.md
@@ -6,4 +6,4 @@ title:
 
 ## zh
 
-顶部提示形式，其实就是多了一个 `border-bottom-color`。
+顶部提示形式，其实就是多了点边距和边框。
diff --git a/packages/components/alert/demo/LongString.md b/packages/components/alert/demo/LongString.md
@@ -0,0 +1,9 @@
+---
+order: 9
+title:
+  zh: 超长文本
+---
+
+## zh
+
+可以使用 [Vue3Marquee](https://github.com/megasanjay/vue3-marquee) 来轮播超长的文本。
diff --git a/packages/components/alert/demo/LongString.vue b/packages/components/alert/demo/LongString.vue
@@ -0,0 +1,13 @@
+<template>
+  <IxAlert>
+    <Vue3Marquee>
+      我长话短说，但是说来话长。我长话短说，但是说来话长。我长话短说，但是说来话长。我长话短说，但是说来话长。
+    </Vue3Marquee>
+  </IxAlert>
+</template>
+
+<script setup lang="ts">
+// eslint-disable-next-line import/no-unassigned-import
+import 'vue3-marquee/dist/style.css'
+import { Vue3Marquee } from 'vue3-marquee'
+</script>
diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   min-height: @alert-height;
-  padding: 0 16px;
+  padding: 0 8px;
   border: 1px solid transparent;
   border-radius: @alert-border-radius;
 
@@ -19,6 +19,7 @@
   .alert-status-color(offline, @alert-offline-color, @alert-offline-background-color);
 
   &-banner {
+    padding: 0 16px;
     border-bottom-color: @alert-banner-border-color;
   }