diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
index c2cf535934..3676149cf2 100644
--- a/packages/devui-vue/docs/components/card/index.md
+++ b/packages/devui-vue/docs/components/card/index.md
@@ -94,7 +94,7 @@
     <template #cardTitle>
       DEVUI Course
     </template>
-    <template #cardSubtitle class="icon">
+    <template #cardSubtitle class="card-demo-icon">
       <d-icon name="company-member"></d-icon><span>DevUI</span>
     </template>
     <template #cardContent>
@@ -241,13 +241,13 @@
 
 <style lang="scss">
 @import '@devui-design/icons/icomoon/devui-icon.css';
-.icon {
+.card-demo-icon {
   cursor: pointer;
   font-size: 16px;
   margin-right: 8px;
   vertical-align: middle;
 }
-.icon + span {
+.card-demo-icon + span {
   vertical-align: middle;
 }
 .card-block {
@@ -292,6 +292,7 @@ img {
 }
 </style>
 
+
 ### 参数
 
 |    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index 9d8571c966..c36b1fbd52 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -181,7 +181,7 @@ const readTipOptions =  {
         <template #cardTitle>
           DEVUI Course
         </template>
-        <template #cardSubtitle class="icon">
+        <template #cardSubtitle class="read-tip-demo-icon">
           <d-icon name="company-member"></d-icon><span>DevUI</span>
         </template>
         <template #cardContent>
@@ -217,14 +217,13 @@ const readTipOptions =  {
 </script>
 
 <style>
-
-.icon {
+.read-tip-demo-icon {
   cursor: pointer;
   font-size: 16px;
   margin-right: 8px;
   vertical-align: middle;
 }
-.icon + span {
+.read-tip-demo-icon + span {
   vertical-align: middle;
 }
 .card-block {
diff --git a/packages/devui-vue/docs/en-US/components/read-tip/index.md b/packages/devui-vue/docs/en-US/components/read-tip/index.md
index a89cfe0e8f..ac47d7d0ec 100644
--- a/packages/devui-vue/docs/en-US/components/read-tip/index.md
+++ b/packages/devui-vue/docs/en-US/components/read-tip/index.md
@@ -181,7 +181,7 @@ You can specify the content to be displayed by importing template. When importin
         <template #cardTitle>
           DEVUI Course
         </template>
-        <template #cardSubtitle class="icon">
+        <template #cardSubtitle class="read-tip-demo-icon">
           <d-icon name="company-member"></d-icon><span>DevUI</span>
         </template>
         <template #cardContent>
@@ -217,14 +217,13 @@ const readTipOptions =  {
 </script>
 
 <style>
-
-.icon {
+.read-tip-demo-icon {
   cursor: pointer;
   font-size: 16px;
   margin-right: 8px;
   vertical-align: middle;
 }
-.icon + span {
+.read-tip-demo-icon + span {
   vertical-align: middle;
 }
 .card-block {