diff --git a/src/components/d2-page-cover/index.vue b/src/components/d2-page-cover/index.vue
index d7ca9dfe..4cb595b1 100644
--- a/src/components/d2-page-cover/index.vue
+++ b/src/components/d2-page-cover/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="page-cover">
-    <div class="page-cover__logo">
+  <div class="d2-page-cover">
+    <div class="d2-page-cover__logo">
       <slot/>
     </div>
-    <p class="page-cover__title">{{title}}</p>
-    <p class="page-cover__sub-title d2-mt-0">{{subTitle}}</p>
+    <p class="d2-page-cover__title">{{title}}</p>
+    <p class="d2-page-cover__sub-title d2-mt-0">{{subTitle}}</p>
     <slot name="footer"/>
     <a target="blank" href="https://github.com/d2-projects/d2-admin">
       <img
@@ -34,29 +34,22 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.page-index-article-header {
-  overflow: hidden;
-  .page-index-article-header__title {
-    display: inline-block;
-    padding: 12px 20px;
-  }
-}
-.page-cover {
+.d2-page-cover {
   @extend %full;
   @extend %unable-select;
   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  .page-cover__logo {
+  .d2-page-cover__logo {
     img {
       width: 200px;
     }
   }
-  .page-cover__title {
+  .d2-page-cover__title {
     color: $color-text-main;
   }
-  .page-cover__sub-title {
+  .d2-page-cover__sub-title {
     color: $color-text-sub;
   }
 }
diff --git a/src/pages/demo/components/countup/index.vue b/src/pages/demo/components/countup/index.vue
index 72457916..abc2a506 100644
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container type="card" class="page-demo-components-countup">
+  <d2-container type="card" class="page">
     <template slot="header">数字动画组件</template>
     <el-row :gutter="20">
       <el-col :span="6">
@@ -76,21 +76,18 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.page-demo-components-countup {
-  .el-card {
-    @extend %unable-select;
-    .group {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      span {
-        font-size: 60px;
-        &.end {
-          padding: 0px 20px;
-          border-radius: 4px;
-          background-color: $color-success;
-          color: #FFF;
-        }
+.page {
+  .group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span {
+      font-size: 60px;
+      &.end {
+        padding: 0px 20px;
+        border-radius: 4px;
+        background-color: $color-success;
+        color: #FFF;
       }
     }
   }
diff --git a/src/pages/demo/components/layout/grid.vue b/src/pages/demo/components/layout/grid.vue
index f156e0f4..05467b86 100644
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -11,7 +11,7 @@
         @move="moveHandler"
         @resized="resizedHandler"
         @moved="movedHandler">
-        <el-card shadow="never">
+        <el-card shadow="never" class="page_card">
           <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
           <template v-if="item.i === '0'">
             <div class="d2-mb">拖拽卡片调整位置</div>
@@ -104,7 +104,7 @@ export default {
     background-color: $color-bg;
     border-radius: 4px;
     margin: -10px;
-    .el-card {
+    .page_card {
       height: 100%;
       @extend %unable-select;
     }
diff --git a/src/pages/demo/playground/store/gray/index.vue b/src/pages/demo/playground/store/gray/index.vue
index 00b66824..006984b1 100644
--- a/src/pages/demo/playground/store/gray/index.vue
+++ b/src/pages/demo/playground/store/gray/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container type="card" class="page-demo-playground-gray">
+  <d2-container type="card" class="page">
     <template slot="header">
       <div class="colorful">{{grayActive ? 'GRAY' : 'COLORFUL'}}</div>
     </template>
@@ -68,7 +68,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.page-demo-playground-gray {
+.page {
   .colorful {
     @extend %unable-select;
     line-height: 300px;
diff --git a/src/pages/error-page-404/page.vue b/src/pages/error-page-404/page.vue
index a1c7843a..00b50ae4 100644
--- a/src/pages/error-page-404/page.vue
+++ b/src/pages/error-page-404/page.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="page-404">
-    <p class="page-404_title">page not found</p>
+  <div class="page">
+    <p class="page_title">page not found</p>
     <el-button class="d2-mt" @click="$router.replace({ path: '/' })">
       返回首页
     </el-button>
@@ -9,7 +9,7 @@
 
 <style lang="scss" scoped>
 @import '~@/assets/style/public.scss';
-.page-404 {
+.page {
   background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
   background-blend-mode: multiply,multiply;
   height: 100%;
@@ -17,7 +17,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  .page-404_title {
+  .page_title {
     font-size: 20px;
     color: #FFF;
   }