[Update] 优化布局

alias.config.js

@@ -0,0 +1,14 @@
+/**
+ * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
+ * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
+ * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
+ * */
+const resolve = dir => require('path').join(__dirname, dir);
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@': resolve('src')
+    }
+  }
+};

src/components/Hamburger/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="">
-    <el-button type="primary" class="hamburger" size="mini"  @click="toggleClick">
+    <el-button type="primary" class="hamburger" size="mini" @click="toggleClick">
-      <i class="fa fa-bars" style="color: white; margin-right: 0"></i>
+      <i class="fa fa-bars" style="color: white; margin-right: 0" />
     </el-button>
   </div>
 </template>

src/i18n/langs/cn.js

@@ -25,6 +25,7 @@ const cn = {
     'Users': '用户管理',
     'UserList': '用户列表',
     'UserGroupList': '用户组',
+    'UserGroupDetail': '用户组详情',
     'Assets': '资产管理',
     'AssetList': '资产列表',
     'DomainList': '网关列表',

src/layout/components/BackPlayground.vue

@@ -1,12 +1,30 @@
 <template>
-  <div class="backplayground">
+<!--  <div class="ibox">-->
-    <div class="title">
+<!--    <div class="ibox-title">-->
-      <div class="title-context">
+<!--      <h5>{{ title }}</h5>-->
-        {{ title }}
+<!--      <div class="ibox-tools">-->
+<!--        <a class="collapse-link">-->
+<!--          <i class="fa fa-chevron-up"></i>-->
+<!--        </a>-->
+<!--        <a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
+<!--          <i class="fa fa-wrench"></i>-->
+<!--        </a>-->
+<!--        <a class="close-link">-->
+<!--          <i class="fa fa-times"></i>-->
+<!--        </a>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    <div class="ibox-content">-->
+<!--      <slot/>-->
+<!--    </div>-->
+<!--  </div>-->
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ title }}</span>
+        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
       </div>
       <slot />
-    </div>
+    </el-card>
-  </div>
 </template>
 
 <script>
@@ -17,31 +35,65 @@ export default {
       default: () => { return 'Title' }
     }
   }
-
 }
 </script>
 
 <style lang="less" scoped>
-.backplayground{
+  .ibox {
     height: 100%;
+    clear: both;
+    padding: 0;
     background-color: #ffffff;
-    margin-left:8px;
+    margin: 10px 20px;
-    margin-right:8px;
+  }
-    margin-top:1%;
+
-    margin-bottom:1%;
+  .ibox-title {
-}
+    background-color: #ffffff;
-.title{
+    border-color: #e7eaec;
-  margin-top:1%;
+    border-image: none;
-  margin-bottom:calc(1% + 35px);
+    border-style: solid solid none;
-  background-color: #fff;
+    border-width: 3px 0 0;
-  .title-context{
+    color: rgb(103, 106, 108);
-    text-align: left;
+    margin-bottom: 0;
-    font-size: 14px;
+    padding: 14px 15px 7px;
-    padding-top:15px;
+    min-height: 48px;
-    padding-left:12px;
+  }
-    padding-bottom: 15px;
+
-    font-weight: 600;
+  .ibox-title h5 {
-    border-bottom: 1px solid #e7eaec !important;
+    display: inline-block;
+    font-size: 14px;
+    margin: 0 0 7px;
+    padding: 0;
+    text-overflow: ellipsis;
+    float: left;
+  }
+
+  .ibox-tools a {
+    cursor: pointer;
+    margin-left: 5px;
+    color: #c4c4c4;
+  }
+
+  .ibox-tools {
+    display: block;
+    float: none;
+    margin-top: 0;
+    position: relative;
+    padding: 0;
+    text-align: right;
+  }
+
+  .fa {
+    font-size: 14px;
+  }
+
+  .ibox-content {
+    background-color: #ffffff;
+    color: inherit;
+    padding: 15px 20px 20px 20px;
+    border-color: #e7eaec;
+    border-image: none;
+    border-style: solid solid none;
+    border-width: 1px 0;
   }
-}
 </style>

src/layout/components/IBox.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card class="ibox" shadow="never">
+    <div slot="header" class="clearfix ibox-title">
+      <h5>{{ title }}</h5>
+      <div class="ibox-tools">
+        <a class="collapse-link">
+          <i class="fa fa-chevron-up" />
+        </a>
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+          <i class="fa fa-wrench" />
+        </a>
+        <a class="close-link">
+          <i class="fa fa-times" />
+        </a>
+      </div>
+    </div>
+    <slot />
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'IBox',
+  props: {
+    title: {
+      type: String,
+      default: () => { return 'Title' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .ibox {
+    height: 100%;
+    clear: both;
+    padding: 0;
+    background-color: #ffffff;
+  }
+
+  .ibox >>> .el-card__header{
+    background-color: #ffffff;
+    border-color: #e7eaec;
+    border-image: none;
+    /*border-style: solid solid none;*/
+    color: rgb(103, 106, 108);
+    margin-bottom: 0;
+    padding: 14px 15px 7px;
+    min-height: 48px;
+  }
+
+  .ibox-title h5 {
+    display: inline-block;
+    font-size: 14px;
+    margin: 0 0 7px;
+    padding: 0;
+    text-overflow: ellipsis;
+    float: left;
+  }
+
+  .ibox-tools a {
+    cursor: pointer;
+    margin-left: 5px;
+    color: #c4c4c4;
+  }
+
+  .ibox-tools {
+    display: block;
+    float: none;
+    margin-top: 0;
+    position: relative;
+    padding: 0;
+    text-align: right;
+  }
+
+  .fa {
+    font-size: 14px;
+  }
+
+  .ibox >>> .el-card__body {
+    background-color: #ffffff;
+    padding: 15px 20px 20px 20px;
+    color: inherit;
+  }
+</style>

src/layout/components/Sidebar/Organization.vue

@@ -1,16 +1,25 @@
 <template>
   <transition name="sidebarLogoFade">
-    <div v-if="!isCollapse && orglist.length>1" style="display: block; background-color: transparent; padding: 14px 20px 14px 20px">
+    <el-select
-      <el-dropdown size="medium">
+      class="org-didi"
-        <span class="el-dropdown-link" style="color: rgb(167, 177, 194);">
+      v-if="!isCollapse && userAdminOrgList.length>1"
-          <i class="fa fa-bookmark" style="width: 14px;margin-right: 12px; " />
+      :value="currentOrg.id"
-          {{ currentorg.name }}<i class="el-icon-arrow-down el-icon--right" />
+      filterable
-        </span>
+      placeholder="请选择"
-        <el-dropdown-menu slot="dropdown">
+      @change="changeOrg">
-          <el-dropdown-item v-for="(option) in orglist" :key="option.id" @click.native="changeOrg(option.name, option.id)">{{ option.name }}</el-dropdown-item>
+
-        </el-dropdown-menu>
+      <template slot="prefix">
-      </el-dropdown>
+        <i class="fa fa-bookmark"></i>
-    </div>
+      </template>
+
+      <el-option
+        v-for="item in userAdminOrgList"
+        :key="item.id"
+        selected="item.id == currentOrg.id"
+        :label="item.name"
+        :value="item.id">
+      </el-option>
+    </el-select>
   </transition>
 </template>
 
@@ -25,17 +34,15 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'currentorg',
+      'currentOrg',
-      'orglist'
+      'userAdminOrgList'
     ])
   },
   methods: {
-    changeOrg(x, y) {
+    changeOrg(orgId) {
-      console.log(x, y)
+      console.log('Change to org: ', orgId)
-
       this.$store.dispatch('user/setCurrentOrg', {
-        name: x,
+        id: orgId
-        id: y
       })
     }
   }
@@ -43,27 +50,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
+  .org-didi {
-  transition: opacity 1.5s;
+    padding: 0 10px 0 18px;
-}
+    transition: opacity 0s;
+  }
 
-.sidebarLogoFade-enter,
+  .org-didi >>> input.el-input__inner {
-.sidebarLogoFade-leave-to {
+    background: none;
-  opacity: 0;
+    border: none;
-}
+    color: #8095a8;
-  .el-dropdown-menu{
-  width: 200px;
   }
-  .el-dropdown-menu >>> .popper__arrow{
+
-  display: none;
+  .org-didi >>> input.el-input__inner::placeholder {
+    opacity: 0.2;
   }
-  .el-dropdown{
+
-  width: 100%;
+  .org-didi >>> .el-input__prefix {
+    line-height: 40px;
+    /*margin: auto 5px;*/
   }
-  .el-icon-arrow-down{
+
-  position: absolute;
+  .sidebarLogoFade-enter,
-  top: 50%;
+  .sidebarLogoFade-leave-to {
-  right: 0px;
+    opacity: 0;
-  margin-top: -7px;
   }
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <div class="nav-header">
+      <logo v-if="showLogo" :collapse="isCollapse" />
+      <Organization :is-collapse="isCollapse" />
+    </div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -13,7 +16,6 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <Organization :is-collapse="isCollapse" />
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
@@ -39,10 +41,8 @@ export default {
       const { meta, path } = route
       // if set path, the sidebar will highlight the path you set
       if (meta.activeMenu) {
-        console.log(meta.activeMenu)
         return meta.activeMenu
       }
-      console.log(path)
       return path
     },
     showLogo() {
@@ -57,3 +57,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+  .nav-header {
+    background-image: url('~@/assets/img/header-profile.png');
+  }
+</style>

src/layout/components/TagsView/index.vue

@@ -12,7 +12,7 @@
         @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
         @contextmenu.prevent.native="openMenu(tag,$event)"
       >
-        {{ tag.title }}
+        {{ $t('route.' + tag.title) }}
         <span
           v-if="!isAffix(tag)"
           class="el-icon-close"
@@ -203,6 +203,7 @@ export default {
 .tags-view-container {
   height: 34px;
   width: 100%;
+  margin-top: 5px;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

src/layout/components/WrapperContent.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="wrapper-content">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WrapperContent'
+}
+</script>
+
+<style scoped>
+  .wrapper-content {
+    padding: 10px 20px 10px;
+  }
+</style>

src/layout/components/index.js

@@ -5,3 +5,5 @@ export { default as BackPlayground } from './BackPlayground'
 export { default as ListTables } from './ListTables'
 export { default as TagsView } from './TagsView'
 export { default as Footer } from './Footer'
+export { default as WrapperContent } from './WrapperContent'
+export { default as IBox } from './IBox'

src/layout/index.vue

@@ -38,6 +38,7 @@ export default {
       return this.$store.state.settings.fixedHeader
     },
     needTagsView() {
+      return false
       return this.$store.state.settings.tagsView
     },
     classObj() {

src/main.js

@@ -16,7 +16,6 @@ import i18n from './i18n/i18n'
 import '@/icons' // icon
 import '@/permission' // permission control
 
-
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -43,7 +42,7 @@ import {
   Message,
   MessageBox
 } from 'element-ui'
-import service from '@/utils/request';
+import service from '@/utils/request'
 
 import {
   Button,
@@ -52,7 +51,7 @@ import {
   FormItem,
   Pagination,
   Table,
-  TableColumn,
+  TableColumn
 } from 'element-ui'
 
 Vue.use(Button)

src/store/getters.js

@@ -5,8 +5,8 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   roles: state => state.user.roles,
-  currentorg: state => state.user.currentOrg,
+  currentOrg: state => state.user.currentOrg,
-  orglist: state => state.user.orgs,
+  userAdminOrgList: state => state.user.orgs,
   permission_routes: state => state.permission.routes,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews

src/styles/index.scss

@@ -10,7 +10,7 @@
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: auto;
+  //-webkit-font-smoothing: auto;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
@@ -71,3 +71,14 @@ td .el-button.el-button--mini {
   padding: 1px 5px;
   line-height: 1.5;
 }
+
+.el-tabs__item.is-active, .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  color: #555555;
+}
+
+.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  color: #555555;
+}
+.main-container {
+  background-color: #f3f3f4;
+}

src/styles/menu.scss

@@ -14,7 +14,7 @@
 
 .el-submenu .el-menu-item {
   height: 35px;
-  line-height: 35px;
+  line-height: 2.1;
   padding: 0 52px;
   min-width: 200px;
 }

src/styles/variables.scss

@@ -4,6 +4,7 @@ $menuActiveText: white;
 $menuTextWeight: 600;
 $subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
+//$menuBg: red;
 $menuBg: #2f4050;
 $menuHover: #293846;
 

src/utils/auth.js

@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'csrftoken'
-const CurrentOrg = 'currentorg'
+const CurrentOrg = 'currentOrg'
 
 export function getToken() {
   return Cookies.get(TokenKey)

src/views/users/UserGroupDetail.vue

@@ -1,21 +1,21 @@
 <template>
   <el-row class="content-main">
-    <el-col :span="16">
+    <el-col :span="24">
       <tab :group="data" />
     </el-col>
-    <el-col :span="8" style="background-color: #f3f3f4;">
+<!--    <el-col :span="8" style="background-color: #f3f3f4;">-->
-      <card />
+<!--      <card />-->
-    </el-col>
+<!--    </el-col>-->
   </el-row>
 </template>
 
 <script>
-import { Card, Tab } from './components'
+import { Tab } from './components'
 import { getUserGroup } from '@/api/user'
 export default {
   components: {
-    Tab,
+    Tab
-    Card
+    // Card
   },
   data() {
     return {

src/views/users/UserGroupList.vue

@@ -1,84 +1,88 @@
 <template>
-  <BackPlayground :title="$t('users.usergrouplist')">
+  <WrapperContent>
-    <ListTables
+    <IBox :title="$t('users.usergrouplist')">
-      :tablebutton="$t('users.createusergroup')"
+      <ListTables
-      tableroute="UserGroupEdit"
+        :tablebutton="$t('users.createusergroup')"
-      @SizeChange="handleSizeChange"
+        tableroute="UserGroupEdit"
-      @CurrentChange="handleCurrentChange"
+        @SizeChange="handleSizeChange"
-    >
+        @CurrentChange="handleCurrentChange"
-      <el-table
-        v-loading="listLoading"
-        :data="tableData"
-        stripe
-        border
-        class="userTable"
       >
-        <el-table-column
+        <el-table
-          type="selection"
+          v-loading="listLoading"
-          width="55"
+          :data="tableData"
-          align="center"
+          stripe
-          header-align="center"
+          border
-        />
+          class="userTable"
-        <el-table-column
-          :label="this.$t('usergroup.name')"
-          sortable
-          align="center"
-          header-align="center"
         >
-          <template slot-scope="scope">
+          <el-table-column
-            <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
+            type="selection"
-          </template>
+            width="55"
-        </el-table-column>
+            align="center"
-        <el-table-column
+            header-align="center"
-          :label="this.$t('usergroup.user')"
+          />
-          align="center"
+          <el-table-column
-          header-align="center"
+            :label="this.$t('usergroup.name')"
-        >
+            sortable
-          <template slot-scope="scope">
+            align="center"
-            <span>{{ scope.row.users_amount }}</span>
+            header-align="center"
-          </template>
+          >
-        </el-table-column>
+            <template slot-scope="scope">
-        <el-table-column
+              <el-button type="text" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-button>
-          :label="this.$t('usergroup.comment')"
+            </template>
-          align="center"
+          </el-table-column>
-          sortable
+          <el-table-column
-          header-align="center"
+            :label="this.$t('usergroup.user')"
-        >
+            align="center"
-          <template slot-scope="scope">
+            header-align="center"
-            <span>{{ scope.row.comment }}</span>
+          >
-          </template>
+            <template slot-scope="scope">
-        </el-table-column>
+              <span>{{ scope.row.users_amount }}</span>
-        <el-table-column
+            </template>
-          :label="this.$t('usergroup.action')"
+          </el-table-column>
-          align="center"
+          <el-table-column
-          header-align="center"
+            :label="this.$t('usergroup.comment')"
-        >
+            align="center"
-          <template slot-scope="scope">
+            sortable
-            <el-button
+            header-align="center"
-              size="mini"
+          >
-              type="primary"
+            <template slot-scope="scope">
-              @click="handleEdit(scope.$index, scope.row)"
+              <span>{{ scope.row.comment }}</span>
-            >{{ $t('usergroup.update') }}</el-button>
+            </template>
-            <el-button
+          </el-table-column>
-              size="mini"
+          <el-table-column
-              type="danger"
+            :label="this.$t('usergroup.action')"
-              @click="handleDelete(scope.$index, scope.row)"
+            align="center"
-            >{{ $t('usergroup.delete') }}</el-button>
+            header-align="center"
-          </template>
+          >
-        </el-table-column>
+            <template slot-scope="scope">
-      </el-table>
+              <el-button
-    </ListTables>
+                size="mini"
-  </BackPlayground>
+                type="primary"
+                @click="handleEdit(scope.$index, scope.row)"
+              >{{ $t('usergroup.update') }}</el-button>
+              <el-button
+                size="mini"
+                type="danger"
+                @click="handleDelete(scope.$index, scope.row)"
+              >{{ $t('usergroup.delete') }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </ListTables>
+    </IBox>
+  </WrapperContent>
 </template>
 
 <script>
-import { ListTables, BackPlayground } from '@/layout/components'
+import { ListTables, BackPlayground, WrapperContent, IBox } from '@/layout/components'
 import { getUserGroupList } from '@/api/user'
 import Tables from '@/layout/mixin/ListTables'
 export default {
   components: {
     BackPlayground,
-    ListTables
+    ListTables,
+    WrapperContent,
+    IBox
   },
   mixins: [Tables],
   data() {

src/views/users/UserList.vue

@@ -1,84 +1,16 @@
 <template>
   <BackPlayground :title="$t('route.UserList')">
-<!--    <ListTables-->
+    <el-data-table v-bind="tableConfig" />
-<!--      :tablebutton="$t('users.createUser')"-->
-<!--      tableroute="UserEdit"-->
-<!--      @SizeChange="handleSizeChange"-->
-<!--      @CurrentChange="handleCurrentChange"-->
-<!--      @MutiSelectChange="handleMutiSelectChange"-->
-<!--    >-->
-<!--      <el-table-->
-<!--        v-loading="listLoading"-->
-<!--        :data="tableData"-->
-<!--        stripe-->
-<!--        border-->
-<!--        fit-->
-<!--        class="userTable"-->
-<!--      >-->
-<!--        <el-table-column-->
-<!--          type="selection"-->
-<!--          width="55"-->
-<!--          align="center"-->
-<!--          header-align="center"-->
-<!--        />-->
-<!--        <el-table-column-->
-<!--          :label="this.$t('common.name')"-->
-<!--          sortable-->
-<!--          align="center"-->
-<!--          header-align="center"-->
-<!--        >-->
-<!--          <template slot-scope="scope">-->
-<!--            <el-link type="success" size="small" style="font-size:14px" @click="handleDetail(scope.$index, scope.row)">{{ scope.row.name }}</el-link>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--        <el-table-column-->
-<!--          :label="this.$t('common.username')"-->
-<!--          prop="username"-->
-<!--          align="center"-->
-<!--          sortable-->
-<!--          header-align="center"-->
-<!--        />-->
-<!--        <el-table-column-->
-<!--          :label="this.$t('common.role')"-->
-<!--          prop="role_display"-->
-<!--          sortable-->
-<!--          align="center"-->
-<!--          header-align="center"-->
-<!--        />-->
-<!--        <el-table-column-->
-<!--          :label="this.$t('common.action')"-->
-<!--          align="center"-->
-<!--          width="150px"-->
-<!--          class="table-action"-->
-<!--          header-align="center"-->
-<!--        >-->
-<!--          <template slot-scope="scope">-->
-<!--            <el-button-->
-<!--              size="mini"-->
-<!--              type="primary"-->
-<!--              @click="handleEdit(scope.$index, scope.row)"-->
-<!--            >{{ $t('action.update') }}</el-button>-->
-<!--            <el-button-->
-<!--              size="mini"-->
-<!--              type="danger"-->
-<!--              @click="handleDelete(scope.$index, scope.row)"-->
-<!--            >{{ $t('action.delete') }}</el-button>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--      </el-table>-->
-      <el-data-table v-bind="tableConfig"></el-data-table>
-<!--    </ListTables>-->
   </BackPlayground>
 </template>
 
 <script>
-import { ListTables, BackPlayground } from '@/layout/components'
+import { BackPlayground } from '@/layout/components'
 import { getUserList } from '@/api/user'
 import Tables from '@/layout/mixin/ListTables'
 export default {
   components: {
-    BackPlayground,
+    BackPlayground
-    ListTables
   },
   mixins: [Tables],
   data() {
@@ -99,14 +31,14 @@ export default {
                 transform: v => v && v.trim()
               }
             ],
-            el: {placeholder: '请输入用户名'}
+            el: { placeholder: '请输入用户名' }
           },
           {
             type: 'select',
             id: 'type',
             label: '账户类型',
-            rules: [{required: true, message: '请选择账户类型', trigger: 'blur'}],
+            rules: [{ required: true, message: '请选择账户类型', trigger: 'blur' }],
-            options: ['Organization', 'User'].map(f => ({label: f, value: f})),
+            options: ['Organization', 'User'].map(f => ({ label: f, value: f })),
             el: {
               placeholder: '请选择'
             }
@@ -131,7 +63,7 @@ export default {
           },
           {
             prop: 'username',
-            label: 'Username',
+            label: 'Username'
           },
           {
             prop: 'role',

src/views/users/components/Tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+  <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
     <el-tab-pane :label="$t('usergroup.user_group_detail')" name="first">
       <div class="ibox-title"><el-tag type="info">{{ group.name }}</el-tag></div>
       <div class="ibox-content">
@@ -25,7 +25,9 @@
         </table>
       </div>
     </el-tab-pane>
-    <el-tab-pane :label="$t('usergroup.asset_granted')" name="second">{{ $t('usergroup.asset_granted') }}</el-tab-pane>
+    <el-tab-pane :label="$t('usergroup.asset_granted')" name="second">
+      {{ $t('usergroup.asset_granted') }}
+    </el-tab-pane>
   </el-tabs>
 </template>
 
@@ -46,49 +48,52 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
+  .el-tabs /deep/ .el-tabs__item {
-  .ibox-content {
+    /*margin: 0 20px;*/
-    clear: both;
+    /*background: red;*/
-    background-color: #ffffff;
-    color: inherit;
-    padding: 15px 20px 20px 20px;
-    border-color: #e7eaec;
-    border-image: none;
-    border-style: solid solid none;
-    border-width: 1px 0;
-    margin-right: 20px;
-  }
-  .table > tbody > tr > td, .table > tfoot > tr > td {
-    border-top: 1px solid #e7eaec;
-    line-height: 1.42857;
-    padding: 8px;
-    vertical-align: top;
-  }
-  .no-borders-tr td {
-    border-top: none !important;
-  }
-  .no-borders {
-    border: none !important;
-  }
-  .ibox-title {
-    -moz-border-bottom-colors: none;
-    -moz-border-left-colors: none;
-    -moz-border-right-colors: none;
-    -moz-border-top-colors: none;
-    background-color: #ffffff;
-    border-color: #e7eaec;
-    border-image: none;
-    color: inherit;
-    margin-bottom: 0;
-    margin-right: 20px;
-    padding: 10px 15px 7px;
-    min-height: 38px;
-  }
-  // ElEMENT 样式重置
-  .el-tabs /deep/ .el-tabs__header{
-    margin:0 !important;
-  }
-  .el-tabs /deep/ .el-tabs__item.is-active{
-    background-color:#ffffff  !important;
   }
+  /*.ibox-content {*/
+  /*  clear: both;*/
+  /*  background-color: #ffffff;*/
+  /*  color: inherit;*/
+  /*  padding: 15px 20px 20px 20px;*/
+  /*  border-color: #e7eaec;*/
+  /*  border-image: none;*/
+  /*  border-style: solid solid none;*/
+  /*  border-width: 1px 0;*/
+  /*  margin-right: 20px;*/
+  /*}*/
+  /*.table > tbody > tr > td, .table > tfoot > tr > td {*/
+  /*  border-top: 1px solid #e7eaec;*/
+  /*  line-height: 1.42857;*/
+  /*  padding: 8px;*/
+  /*  vertical-align: top;*/
+  /*}*/
+  /*.no-borders-tr td {*/
+  /*  border-top: none !important;*/
+  /*}*/
+  /*.no-borders {*/
+  /*  border: none !important;*/
+  /*}*/
+  /*.ibox-title {*/
+  /*  -moz-border-bottom-colors: none;*/
+  /*  -moz-border-left-colors: none;*/
+  /*  -moz-border-right-colors: none;*/
+  /*  -moz-border-top-colors: none;*/
+  /*  background-color: #ffffff;*/
+  /*  border-color: #e7eaec;*/
+  /*  border-image: none;*/
+  /*  color: inherit;*/
+  /*  margin-bottom: 0;*/
+  /*  margin-right: 20px;*/
+  /*  padding: 10px 15px 7px;*/
+  /*  min-height: 38px;*/
+  /*}*/
+  /*// ElEMENT 样式重置*/
+  /*.el-tabs /deep/ .el-tabs__header{*/
+  /*  margin:0 !important;*/
+  /*}*/
+  /*.el-tabs /deep/ .el-tabs__item.is-active{*/
+  /*  background-color:#ffffff  !important;*/
+  /*}*/
 </style>