refactor(custom): fix header\content\footer\aside\components style an…

src/components/BreadCrumb/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bread-crumb-container">
+  <div class="ov-layout-breadcrumb" :style="breadcrumbStyle">
     <el-breadcrumb spellcheck="/" class="breadcrumb-inner">
       <transition-group name="breadcrumb">
         <el-breadcrumb-item v-for="(item, index) in breadCrumbList" :key="index">
@@ -17,6 +17,13 @@
 
 <script>
 export default {
+  props: {
+    breadcrumbStyle: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
   data() {
     return {
       breadCrumbList: [],
@@ -62,7 +69,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.bread-crumb-container {
+.ov-layout-breadcrumb {
   padding: 12px 0;
 }
 </style>

src/components/PageHeader/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-header-container">
+  <div class="ov-page-header">
     <slot name="content"></slot>
   </div>
 </template>

src/layouts/aside/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="aside-container">
+  <div class="ov-layout-aside">
     <menu-comp :menu-list="menuData" />
   </div>
 </template>
@@ -29,7 +29,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.aside-container {
+.ov-layout-aside {
   height: 100%;
 
   ::v-deep .el-menu {

src/layouts/content/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="main-container">
-    <div class="tab-page-container">
+  <div class="ov-layout-main">
+    <div class="ov-layout-main__tab">
       <span>这里是标签页</span>
     </div>
-    <div class="main-content">
+    <div class="ov-layout-main__content">
       <router-view />
       <footer-comp />
     </div>
@@ -30,10 +30,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.main-container {
+.ov-layout-main {
   position: relative;
 
-  .tab-page-container {
+  &__tab {
     padding: 0 5px;
     height: 0.375rem;
     text-align: left;
@@ -42,7 +42,7 @@ export default {
     line-height: 0.375rem;
   }
 
-  .main-content {
+  &__content {
     overflow: auto;
     max-height: 10.25rem;
     border-radius: 5px;

src/layouts/footer/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="footer-container">
+  <div class="ov-layout-footer">
     <slot name="content">
-      <div class="footer-content-description">备案号：蜀ICP备2022027428号-1</div>
+      <div class="ov-layout-footer__description">备案号：蜀ICP备2022027428号-1</div>
     </slot>
   </div>
 </template>
@@ -15,15 +15,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer-container {
+.ov-layout-footer {
   margin: 0.6rem 0 0.3rem;
   text-align: center;
 
-  .footer-content-link {
-    margin-bottom: 0.125rem;
-  }
-
-  .footer-content-description {
+  &__description {
     font-size: 0.175rem;
     color: rgba(0, 0, 0, 45%);
   }

src/layouts/header/index.vue

@@ -1,21 +1,19 @@
 <template>
-  <div class="header-container">
-    <div class="header-title-left">
-      <div class="header-title">
+  <div class="ov-layout-header">
+    <div class="ov-layout-header-body ov-layout-header-left">
+      <div class="ov-layout-header-left__title">
         <span>vue2-admin-template</span>
       </div>
-      <div class="collapse-icon">
+      <div class="ov-layout-header-left__icon">
         <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="handleChangeCollapse"></i>
       </div>
-      <div class="bread-crumb-content">
-        <bread-crumb />
-      </div>
+      <bread-crumb :breadcrumb-style="{ 'margin-left': '15px' }" />
     </div>
-    <div class="header-title-right">
+    <div class="ov-layout-header-body ov-layout-header-action">
       <!-- i18n -->
-      <i18n-comp class="header-title-right__item" />
+      <i18n-comp class="ov-layout-header-action__item i18n-item" />
       <el-divider direction="vertical"></el-divider>
-      <div class="header-logout header-title-right__item">
+      <div class="ov-layout-header-action__item ov-layout-header-action__user-dropdown">
         <el-dropdown>
           <span class="el-dropdown-link">
             <svg-icon icon-class="user" class="user-icon" />
@@ -77,24 +75,26 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.header-container {
+.ov-layout-header {
   display: flex;
   justify-content: space-between;
   width: 100%;
   height: 100%;
 
-  .header-title-left {
+  &-body {
     display: flex;
     align-items: center;
+  }
 
-    .header-title {
+  &-left {
+    &__title {
       width: 200px;
       text-align: center;
       color: #0960bd;
       font-weight: 700;
     }
 
-    .collapse-icon {
+    &_icon {
       padding-left: 5px;
 
       i {
@@ -104,33 +104,27 @@ export default {
         cursor: pointer;
       }
     }
-
-    .bread-crumb-content {
-      margin-left: 15px;
-    }
   }
 
-  .header-title-right {
-    display: flex;
-
+  &-action {
     /deep/.el-divider {
       align-self: center;
     }
 
-    .header-title-right__item {
+    &__item {
       padding: 0 8px;
       cursor: pointer;
 
       &:hover {
         background-color: #f6f6f6;
       }
     }
-  }
 
-  .header-logout {
-    display: flex;
-    justify-content: right;
-    align-items: center;
+    &__user-dropdown {
+      display: flex;
+      justify-content: right;
+      align-items: center;
+    }
   }
 
   .el-dropdown-link {
@@ -142,13 +136,5 @@ export default {
       margin-right: 12px;
     }
   }
-
-  .el-col {
-    border: 1px solid transparent;
-  }
-}
-
-.el-dropdown-menu {
-  top: 0.5rem !important;
 }
 </style>