refactor: 修改样式

jsxiaosi · Jan 22, 2022 · 0cc6968 · 0cc6968
1 parent 12d40f3
commit 0cc6968
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 127 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,8 @@
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.12",
     "vue-types": "^4.1.1",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "wangeditor": "^4.7.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",

diff --git a/src/components/Form/index.vue b/src/components/Form/index.vue
@@ -76,9 +76,4 @@
   });
 </script>
 
-<style scoped lang="scss">
-  .page-container {
-    padding: 20px;
-    background-color: #{$main-bg-color};
-  }
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/locales/en/modules/route.ts b/src/locales/en/modules/route.ts
@@ -11,6 +11,7 @@ const route = {
     echarts_map: 'Map',
     editor: 'Editor',
     editor_logicFlow: 'LogicFlow',
+    editor_richText: 'RichText Editor',
     userInfo: 'UserInfo',
     userList: 'UserList',
     userDateil: 'UserDateil',

diff --git a/src/locales/zh-ch/modules/route.ts b/src/locales/zh-ch/modules/route.ts
@@ -11,6 +11,7 @@ const route = {
     echarts_map: '地图',
     editor: '编辑器',
     editor_logicFlow: '流程图',
+    editor_richText: '富文本编辑器',
     userInfo: '用户管理',
     userList: '用户列表',
     userDateil: '用户详情',

diff --git a/src/router/modules/otherRoute/otherRoute.ts b/src/router/modules/otherRoute/otherRoute.ts
@@ -88,6 +88,12 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
     alwaysShow: true,
     meta: { title: t('route.pathName.editor'), icon: 'editor' },
     children: [
+      {
+        path: 'rich-text',
+        name: 'RtRichText',
+        component: () => import('@/views/editor/richText/index.vue'),
+        meta: { title: t('route.pathName.editor_richText') },
+      },
       {
         path: 'logic-flow',
         name: 'RtLogicFlow',

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -75,6 +75,8 @@ div:focus {
   width: 100%;
   min-height: 100%;
   border-radius: 10px;
+  background-color: #{$main-bg-color};
+  padding: 20px;
 }
 
 ul {

diff --git a/src/views/components/count-to/index.vue b/src/views/components/count-to/index.vue
@@ -9,9 +9,4 @@
   import CountTo from '@/components/CountTo/index.vue';
 </script>
 
-<style scoped lang="scss">
-  .page-container {
-    padding: 20px;
-    background-color: #{$main-bg-color};
-  }
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/components/drag/index.vue b/src/views/components/drag/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div>
     <el-row :gutter="30" class="enter-y">
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-card class="box-card">
@@ -75,41 +75,36 @@
 </script>
 
 <style scoped lang="scss">
-  .page-container {
-    // width: 100%;
-    // height: 100%;
-    // background-color: #{$main-bg-color};
-    .card-content {
-      height: 300px;
-      overflow: auto;
-    }
-    .list {
+  .card-content {
+    height: 300px;
+    overflow: auto;
+  }
+  .list {
+    width: 100%;
+    .list-item {
       width: 100%;
-      .list-item {
-        width: 100%;
-        padding: 20px;
-        // line-height: 50px;
-        border: 1px solid #{$text-color-placeholder};
-        .handle {
-          margin-right: 20px;
-          cursor: move;
-        }
-      }
-      .sortable-chosen {
-        border: 1px solid red;
-      }
-    }
-    .listgrid {
-      display: grid;
-      grid-template-columns: 33.3% 33.3% 33.3%;
-      grid-template-rows: 100px 100px 100px;
-      .list-item {
+      padding: 20px;
+      // line-height: 50px;
+      border: 1px solid #{$text-color-placeholder};
+      .handle {
+        margin-right: 20px;
         cursor: move;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: 1px solid #{$text-color-placeholder};
       }
     }
+    .sortable-chosen {
+      border: 1px solid red;
+    }
+  }
+  .listgrid {
+    display: grid;
+    grid-template-columns: 33.3% 33.3% 33.3%;
+    grid-template-rows: 100px 100px 100px;
+    .list-item {
+      cursor: move;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #{$text-color-placeholder};
+    }
   }
 </style>
diff --git a/src/views/components/form/index.vue b/src/views/components/form/index.vue
@@ -425,10 +425,3 @@
     // console.log(form.value);
   };
 </script>
-
-<style scoped lang="scss">
-  .page-container {
-    padding: 20px;
-    background-color: #{$main-bg-color};
-  }
-</style>
diff --git a/src/views/echarts/bar/index.vue b/src/views/echarts/bar/index.vue
@@ -8,9 +8,4 @@
   import BarRace from './components/BarRace.vue';
 </script>
 
-<style scoped lang="scss">
-  .page-container {
-    padding: 20px;
-    background-color: #{$main-bg-color};
-  }
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/echarts/map/index.vue b/src/views/echarts/map/index.vue
@@ -118,9 +118,7 @@
     height: 100%;
   }
   .page-container {
-    padding: 20px;
     width: 100%;
     height: 100%;
-    background-color: #{$main-bg-color};
   }
 </style>
diff --git a/src/views/editor/richText/index.vue b/src/views/editor/richText/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="page-container"></div>
+</template>
+<script lang="ts" setup>
+  // import wangeditor from 'wangeditor';
+</script>
+
+<style lang="scss"></style>
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
@@ -13,9 +13,4 @@
   };
 </script>
 
-<style scoped lang="scss">
-  .page-container {
-    padding: 20px;
-    background-color: #{$main-bg-color};
-  }
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div>
     <el-row :gutter="30" class="enter-y">
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-card class="box-card">
@@ -148,80 +148,78 @@
 </script>
 
 <style lang="scss" scoped>
-  .page-container {
-    .el-col {
-      margin-bottom: 30px;
+  .el-col {
+    margin-bottom: 30px;
+  }
+  .box-card {
+    // width: 480px;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // color: #{$text-color-primary};
     }
-    .box-card {
-      // width: 480px;
-      .card-header {
+
+    .infinite {
+      border: 1px solid #{$text-color-placeholder};
+      .top {
+        // width: 95%;
+        height: 40px;
+        line-height: 40px;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        // color: #{$text-color-primary};
+        margin: 0 auto;
+        font-size: 14px;
+        // color: #909399;
+        font-weight: 400;
+        background: #{$sub-main-bg-content};
+        border-bottom: 1px solid #{$text-color-placeholder};
+
+        li {
+          width: 34%;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
-      .infinite {
-        border: 1px solid #{$text-color-placeholder};
-        .top {
-          // width: 95%;
-          height: 40px;
-          line-height: 40px;
-          display: flex;
-          margin: 0 auto;
-          font-size: 14px;
-          // color: #909399;
-          font-weight: 400;
-          background: #{$sub-main-bg-content};
-          border-bottom: 1px solid #{$text-color-placeholder};
+      .warp {
+        width: 95%;
+        height: 215px;
+        margin: 0 auto;
+        overflow: hidden;
 
+        ul {
+          margin: 0;
           li {
-            width: 34%;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            height: 30px;
+            line-height: 30px;
+            display: flex;
+            font-size: 15px;
           }
         }
 
-        .warp {
-          width: 95%;
-          height: 215px;
-          margin: 0 auto;
+        span {
+          width: 34%;
+          text-align: center;
           overflow: hidden;
-
-          ul {
-            margin: 0;
-            li {
-              height: 30px;
-              line-height: 30px;
-              display: flex;
-              font-size: 15px;
-            }
-          }
-
-          span {
-            width: 34%;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
+    }
 
-      .text {
-        font-size: 14px;
-      }
-
-      .item {
-        margin-bottom: 18px;
-      }
+    .text {
+      font-size: 14px;
     }
 
-    .line {
-      width: 100%;
-      height: 100%;
+    .item {
+      margin-bottom: 18px;
     }
   }
+
+  .line {
+    width: 100%;
+    height: 100%;
+  }
 </style>