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; }