我的任务组件样式优化

src/assets/global.css

@@ -119,7 +119,7 @@
   box-sizing: border-box;
 }
 .el-dialog__title,.el-message-box__title {
-  color: #00aaff;
+  color: #FFFFFF;
 }
 .el-form-item__label,
 .el-message-box__message {
@@ -162,4 +162,7 @@
 }
 .el-table thead{
   color: #FFFFFF;
+}
+.el-table__fixed{
+  height: 0;
 }

src/components/common/BottomForm/MyMission.vue

@@ -25,14 +25,19 @@
       </el-form-item>
     </el-form>
     <el-table :data="tableData" style="width: 100%" height="50vh" stripe>
-      <el-table-column fixed prop="taskId" label="任务编号"> </el-table-column>
+      <el-table-column type="index" width="50"> </el-table-column>
+      <el-table-column prop="taskId" label="任务编号"> </el-table-column>
       <el-table-column prop="taskName" label="任务名称"> </el-table-column>
       <el-table-column prop="createDate" label="创建时间"> </el-table-column>
-      <el-table-column prop="state" label="状态"> </el-table-column>
+      <el-table-column prop="state" label="状态">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.state === '已审核' ? 'success' : 'info'" disable-transitions>{{ scope.row.state }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column prop="taskType" label="任务类型"> </el-table-column>
       <el-table-column fixed="right" label="操作">
         <template slot-scope="scope">
-          <el-button @click.native.prevent="ToView(scope.$index, tableData)" type="text" size="small"> 查看 </el-button>
+          <el-button size="mini" icon="el-icon-search" @click="ToView(scope.$index, tableData)">查看</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -144,14 +149,7 @@ export default {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
-          state: "已审核",
-          taskType: "土地资源"
-        },
-        {
-          createDate: "2016-05-03",
-          taskName: "任务名称",
-          taskId: "任务编号",
-          state: "已审核",
+          state: "未审核",
           taskType: "土地资源"
         },
         {
@@ -254,7 +252,7 @@ export default {
     },
     // 查看
     ToView(index, rows) {
-      console.log(rows,index);
+      console.log(rows, index);
     },
     // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {