diff --git a/package.json b/package.json
index 965ff4e6f..e045aeb93 100644
--- 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
index 73caee93e..ae184bf8f 100644
--- 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
new file mode 100644
index 000000000..356858843
--- /dev/null
+++ 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
new file mode 100644
index 000000000..086b0823b
--- /dev/null
+++ b/packages/components/alert/demo/LongString.vue
@@ -0,0 +1,13 @@
+
+
+
+ 我长话短说,但是说来话长。我长话短说,但是说来话长。我长话短说,但是说来话长。我长话短说,但是说来话长。
+
+
+
+
+
diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
index e2ba6a25f..24f7a9b17 100644
--- 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;
}