diff --git a/docs/components/ripple/index.md b/docs/components/ripple/index.md
index 0f7cf408c004e0cf1f7fb4f0fa1343cdfb5dc4f5..3b64a92a2d0437ce26f98b73e34e4634a38e0e11 100644
--- a/docs/components/ripple/index.md
+++ b/docs/components/ripple/index.md
@@ -1,7 +1,6 @@
 # Ripple 水波纹指令
 
 <span color="#409EFF">`v-ripple`</span> 指令 用于用户动作交互场景, 可以应用于任何块级元素
-
 ### 使用
 
 用户 可以在组件 或者 HTML 元素上任意使用 <span color="#409EFF">`v-ripple`</span> 指令 使用基本的 <span color="#409EFF">`v-ripple`</span> 指令， `v-ripple` 接收 一个对象
@@ -26,7 +25,6 @@
 ```
 
 :::
-
 ### 自定义色彩
 
 ### 通过修改文本颜色来动态改变
@@ -55,7 +53,6 @@
 ```
 
 :::
-
 ### 自定义颜色
 
 :::demo
@@ -85,7 +82,6 @@
 ```
 
 :::
-
 ### 应用于其他组件
 
 Button
@@ -129,7 +125,6 @@ Button
 ```
 
 :::
-
 Icon
 
 :::demo
@@ -149,28 +144,17 @@ Icon
     ></d-icon>
   </div>
 </template>
-
-```
-
-:::
-
 <style scoped>
-.ripple-htmlElement {
-    width: 600px;
-    height: 150px; 
-    background-color: #eee; 
-    text-align: center; 
-    line-height: 150px;
-    border: 1px solid #eee50;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
-    user-select: none;
+.ripple-button {
+    display: flex;
 }
-.ripple-changeTextColor {
-    display: block;
-    padding: 10px 15px;
-    user-select: none;
+.ripple-icon {
+    padding： 25px;
 }
-</style>
+<style>
+```
+
+:::
 
 ### API