门类管理样式修改

src/assets/styles/yxk-admin.scss

@@ -227,11 +227,6 @@
 .el-button--mini{
   padding: 7px 10px;
 }
-.crud-opts-right{
-  .el-button{
-    padding: 7px 15px;
-  }
-}
 .el-message-box{
   .el-button{
     border-color: #dcdfe6;

src/components/Crud/CRUD.operation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="crud-opts">
-    <span class="crud-opts-left">
+    <div class="crud-opts-left">
       <!--左侧插槽-->
       <slot name="left" />
       <!-- type="primary" -->
@@ -19,7 +19,7 @@
       <el-button v-if="crud.optShow.download" :loading="crud.downloadLoading" :disabled="!crud.data.length" size="mini" icon="el-icon-download" @click="crud.doExport">导出</el-button>
       <!--右侧-->
       <slot name="right" />
-    </span>
+    </div>
     <el-button-group v-if="crud.optShow.group" class="crud-opts-right">
       <el-button size="mini" plain type="info" icon="el-icon-search" @click="toggleSearch()" />
       <el-button size="mini" icon="el-icon-refresh" @click="crud.refresh()" />
@@ -194,9 +194,15 @@ export default {
   display: flex;
   align-items: center;
 }
-.crud-opts .crud-opts-right {
+.crud-opts-left{
+  display: flex;
+}
+.crud-opts-right {
   margin-left: auto;
 }
+.crud-opts-right .el-button{
+  padding: 7px 15px;
+}
 .crud-opts .crud-opts-right span {
   float: left;
 }

src/views/category/index.vue

@@ -53,7 +53,7 @@
     </el-dialog>
     <!-- 字典列表 -->
     <el-row class="container-main" :gutter="20">
-      <el-col class="container-left" :xs="10" :sm="8" :md="5" :lg="6" :xl="6">
+      <el-col class="container-left curd-in-out" :xs="10" :sm="8" :md="5" :lg="6" :xl="5">
         <span class="right-top-line" />
         <span class="left-bottom-line" />
         <crudOperation :permission="permission">
@@ -66,9 +66,15 @@
         <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
       </el-col>
       <!-- 门类管理tab -->
-      <el-col class="container-right" :xs="14" :sm="16" :md="19" :lg="18" :xl="18">
+      <el-col class="container-right tab-content" :xs="14" :sm="18" :md="19" :lg="18" :xl="19">
         <span class="right-top-line" />
         <span class="left-bottom-line" />
+        <ul class="tab-nav">
+          <li :class="{'active-tab-nav': activeIndex == 0}">用户资料<i /></li>
+          <li :class="{'active-tab-nav': activeIndex == 1}">操作日志<i /></li>
+          <!-- 最右侧装饰img -->
+          <span class="tab-right-img" />
+        </ul>
       </el-col>
     </el-row>
   </div>
@@ -173,7 +179,8 @@ export default {
       // activeAddBtn: false,
       deleteVisible: false,
       reconfirmDeleteVisible: false,
-      deleteData: {}
+      deleteData: {},
+      activeIndex: 0
     }
   },
   methods: {
@@ -223,5 +230,13 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
+.curd-in-out {
+  margin-top: 50px;
+  .crud-opts{
+    padding: 0 !important;
+    margin-top: -50px;
+    border-bottom: none;
+  }
+}
 </style>