UI for optimizing team management / 优化团队管理的UI

web_src/src/components/team/Index.vue

@@ -4,12 +4,12 @@
 
     <el-container>
       <el-card class="center-card">
-        <el-button type="text" class="add-cat" @click="addTeam">{{
-          $t('add_team')
-        }}</el-button>
-        <el-button type="text" class="goback-btn" @click="goback">{{
-          $t('goback')
-        }}</el-button>
+        <el-button type="text" class="goback-btn" @click="goback"
+          ><i class="el-icon-back"></i>&nbsp;{{ $t('goback') }}</el-button
+        >
+        <el-button type="text" class="add-cat" @click="addTeam"
+          ><i class="el-icon-plus"></i>&nbsp;{{ $t('add_team') }}</el-button
+        >
         <el-table
           align="left"
           :empty-text="$t('empty_team_tips')"
@@ -21,14 +21,22 @@
             prop="team_name"
             :label="$t('team_name')"
           ></el-table-column>
-          <el-table-column prop="memberCount" :label="$t('memberCount')">
+          <el-table-column
+            prop="memberCount"
+            width="100"
+            :label="$t('memberCount')"
+          >
             <template slot-scope="scope">
               <router-link :to="'/team/member/' + scope.row.id">{{
                 scope.row.memberCount
               }}</router-link>
             </template>
           </el-table-column>
-          <el-table-column prop="itemCount" :label="$t('itemCount')">
+          <el-table-column
+            prop="itemCount"
+            width="100"
+            :label="$t('itemCount')"
+          >
             <template slot-scope="scope">
               <router-link :to="'/team/item/' + scope.row.id">{{
                 scope.row.itemCount
@@ -52,7 +60,6 @@
               <el-button @click="edit(scope.row)" type="text" size="small">{{
                 $t('edit')
               }}</el-button>
-              <br />
               <el-button
                 @click="attornDialog(scope.row)"
                 type="text"
@@ -113,7 +120,9 @@
             ></el-input>
           </el-form-item>
         </el-form>
-        <p class="tips">{{ $t('attornTeamTips') }}</p>
+        <p class="tips">
+          <small>{{ $t('attornTeamTips') }}</small>
+        </p>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogAttornVisible = false">{{
             $t('cancel')
@@ -259,18 +268,20 @@ export default {
 }
 
 .add-cat {
-  margin-left: 10px;
+  float: right;
+  margin-right: 15px;
+  font-size: 14px;
 }
 
 .center-card {
   text-align: left;
-  width: 800px;
+  width: 750px;
   height: 600px;
 }
 
 .goback-btn {
   z-index: 999;
-  margin-left: 600px;
+  font-size: 14px;
 }
 </style>
 

web_src/src/components/team/Item.vue

@@ -4,12 +4,12 @@
 
     <el-container>
       <el-card class="center-card">
-        <el-button type="text" class="add-cat" @click="addTeamItem">{{
-          $t('distribution_to_team')
-        }}</el-button>
-        <el-button type="text" class="goback-btn" @click="goback">{{
-          $t('back_to_team')
-        }}</el-button>
+        <el-button type="text" class="goback-btn" @click="goback"
+          ><i class="el-icon-back"></i>&nbsp;{{ $t('goback') }}</el-button
+        >
+        <el-button type="text" class="add-cat" @click="addTeamItem"
+          ><i class="el-icon-plus"></i>&nbsp;{{ $t('binding_item') }}</el-button
+        >
         <el-table align="left" :data="list" height="400" style="width: 100%">
           <el-table-column
             prop="item_name"
@@ -330,7 +330,9 @@ export default {
 }
 
 .add-cat {
-  margin-left: 10px;
+  float: right;
+  margin-right: 15px;
+  font-size: 14px;
 }
 
 .center-card {
@@ -341,7 +343,7 @@ export default {
 
 .goback-btn {
   z-index: 999;
-  margin-left: 500px;
+  font-size: 14px;
 }
 </style>
 

web_src/src/components/team/Member.vue

@@ -4,12 +4,12 @@
 
     <el-container>
       <el-card class="center-card">
-        <el-button type="text" class="add-cat" @click="addTeamMember">{{
-          $t('add_member')
-        }}</el-button>
-        <el-button type="text" class="goback-btn" @click="goback">{{
-          $t('back_to_team')
-        }}</el-button>
+        <el-button type="text" class="goback-btn" @click="goback"
+          ><i class="el-icon-back"></i>&nbsp;{{ $t('goback') }}</el-button
+        >
+        <el-button type="text" class="add-cat" @click="addTeamMember"
+          ><i class="el-icon-plus"></i>&nbsp;{{ $t('add_member') }}</el-button
+        >
         <el-table align="left" :data="list" height="400" style="width: 100%">
           <el-table-column
             prop="member_username"
@@ -18,6 +18,7 @@
           <el-table-column prop="name" :label="$t('name')"></el-table-column>
           <el-table-column
             prop="addtime"
+            width="160"
             :label="$t('addtime')"
           ></el-table-column>
 
@@ -210,18 +211,20 @@ export default {
 }
 
 .add-cat {
-  margin-left: 10px;
+  float: right;
+  margin-right: 15px;
+  font-size: 14px;
 }
 
 .center-card {
   text-align: left;
-  width: 800px;
+  width: 700px;
   height: 600px;
 }
 
 .goback-btn {
   z-index: 999;
-  margin-left: 550px;
+  font-size: 14px;
 }
 </style>
 

web_src/static/lang/en.js

@@ -423,6 +423,8 @@ exports.default = {
   move_to: 'Move To',
   remark: 'remark',
 
-  qcloud: 'qcloud'
+  qcloud: 'qcloud',
+  binding_item: 'Binding item',
+  addtime: 'addtime'
 
 }

web_src/static/lang/zh-CN.js

@@ -413,5 +413,7 @@ exports.default = {
   move_to: '移动到',
   remark: '备注',
 
-  qcloud: '腾讯云'
+  qcloud: '腾讯云',
+  binding_item: '绑定项目',
+  addtime: '添加时间'
 }