调整PROJECTITEm和taskItem错位的问题

src/components/Mine.vue

@@ -52,9 +52,10 @@
     <!--</el-row>-->
     <!--</div>-->
     <div class="mine-body" style="text-align: center;">
-      <el-tabs  v-loading="loading" style="width: 90%;margin-left: 5%">
+      <el-tabs v-loading="loading" style="width: 90%;margin-left: 5%">
         <el-tab-pane label="未完成任务">
-          <el-row v-if="unFinishedTaskList != null && unFinishedTaskList.length != 0" type="flex" align="middle" justify="center"  style="font-size: 14px;">
+          <el-row v-if="unFinishedTaskList != null && unFinishedTaskList.length != 0" type="flex" align="middle"
+                  justify="center" style="font-size: 14px;">
             <el-col :span="6">任务封面</el-col>
             <el-col :span="5">任务名称</el-col>
             <el-col :span="5">任务类型</el-col>
@@ -66,7 +67,8 @@
                      v-for="(item,index1) in unFinishedTaskList" :key="index1" :task="item"/>
         </el-tab-pane>
         <el-tab-pane label="已完成任务">
-          <el-row v-if="finishedTaskList != null && finishedTaskList.length != 0" type="flex" align="middle" justify="center"  style="font-size: 14px;">
+          <el-row v-if="finishedTaskList != null && finishedTaskList.length != 0" type="flex" align="middle"
+                  justify="center" style="font-size: 14px;">
 
             <el-col :span="6">任务封面</el-col>
             <el-col :span="5">任务名称</el-col>
@@ -81,18 +83,20 @@
 
         <el-tab-pane label="我的项目">
           <span v-if="myProjects == null || myProjects.length == 0"> 暂无项目 </span>
-          <el-row v-if="myProjects != null && myProjects.length != 0" type="flex" align="middle" justify="center"  style="font-size: 14px;">
-            <el-col :span="6">项目图片</el-col>
-            <el-col :span="6">项目名称</el-col>
-            <el-col :span="6">项目平台</el-col>
-            <el-col :span="2">项目预算</el-col>
-            <el-col :span="4">操作</el-col>
+          <el-row v-if="myProjects != null && myProjects.length != 0" type="flex" align="middle" justify="center"
+                  style="font-size: 14px;">
+            <el-col :span="6" type="flex" align="middle" justify="center">项目图片</el-col>
+            <el-col :span="6" type="flex" align="middle" justify="center">项目名称</el-col>
+            <el-col :span="6" type="flex" align="middle" justify="center">项目平台</el-col>
+            <el-col :span="2" type="flex" align="middle" justify="center">项目预算</el-col>
+            <el-col :span="4" type="flex" align="middle" justify="center">操作</el-col>
           </el-row>
           <project-item v-if="myProjects != null || myProjects.length > 0"
                         v-for="(item,index3) in myProjects" :key="index3" :projectItem="item"/>
         </el-tab-pane>
         <el-tab-pane label="处理中项目">
-          <el-row v-if="handlingProjects != null && handlingProjects.length != 0" type="flex" align="middle" justify="center"  style="font-size: 14px;">
+          <el-row v-if="handlingProjects != null && handlingProjects.length != 0" type="flex" align="middle"
+                  justify="center" style="font-size: 14px;">
             <el-col :span="6">项目图片</el-col>
             <el-col :span="6">项目名称</el-col>
             <el-col :span="6">项目平台</el-col>
@@ -104,7 +108,8 @@
                         v-for="(item,index4) in handlingProjects" :key="index4" :projectItem="item"/>
         </el-tab-pane>
         <el-tab-pane label="可接收项目">
-          <el-row v-if="acceptableProjects != null && acceptableProjects.length != 0" type="flex" align="middle" justify="center"  style="font-size: 14px;">
+          <el-row v-if="acceptableProjects != null && acceptableProjects.length != 0" type="flex" align="middle"
+                  justify="center" style="font-size: 14px;">
             <el-col :span="6">项目图片</el-col>
             <el-col :span="6">项目名称</el-col>
             <el-col :span="6">项目平台</el-col>
@@ -143,7 +148,7 @@ export default {
   },
   data () {
     return {
-      loading:false,
+      loading: false,
       unFinishedTaskList: [],
       finishedTaskList: [],
       appliedProjectList: [],
@@ -208,9 +213,9 @@ export default {
         // if (res.userVO != null && res.userVO.length > 0) {
         //   this.user = res.userVO
         // }
-      }).catch((error)=>{
+      }).catch((error) => {
         this.hideLoading()
-        notify('error','加载失败:'+error.data)
+        notify('error', '加载失败:' + error.data)
       })
     },
     setUserInfo () {
@@ -231,71 +236,71 @@ export default {
           //trigger: 'axis'
         },
         legend: {
-          data:['接收项目数量','完成项目数量','接收任务数量','完成任务数量','发布项目数量']
+          data: ['接收项目数量', '完成项目数量', '接收任务数量', '完成任务数量', '发布项目数量']
         },
         grid: {
           left: '5%',
           right: '8%',
           bottom: '3%',
-          top:'10%',
+          top: '10%',
           containLabel: true
         },
         toolbox: {
           feature: {
             saveAsImage: {
-              title:'保存为图片',
-              name:'我的众测'
+              title: '保存为图片',
+              name: '我的众测'
             }
           },
-          right:'20px'
+          right: '20px'
         },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['2019年5月','2019年6月','2019年7月','2019年8月','2019年9月','2019年10月','2019年11月']
+          data: ['2019年5月', '2019年6月', '2019年7月', '2019年8月', '2019年9月', '2019年10月', '2019年11月']
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
-            name:'接收项目数量',
-            type:'line',
+            name: '接收项目数量',
+            type: 'line',
             stack: '总量',
-            data:[120, 132, 101, 134, 90, 230, 210]
+            data: [120, 132, 101, 134, 90, 230, 210]
           },
           {
-            name:'完成项目数量',
-            type:'line',
+            name: '完成项目数量',
+            type: 'line',
             stack: '总量',
-            data:[220, 182, 191, 234, 290, 330, 310]
+            data: [220, 182, 191, 234, 290, 330, 310]
           },
           {
-            name:'接收任务数量',
-            type:'line',
+            name: '接收任务数量',
+            type: 'line',
             stack: '总量',
-            data:[150, 232, 201, 154, 190, 330, 410]
+            data: [150, 232, 201, 154, 190, 330, 410]
           },
           {
-            name:'完成任务数量',
-            type:'line',
+            name: '完成任务数量',
+            type: 'line',
             stack: '总量',
-            data:[320, 332, 301, 334, 390, 330, 320]
+            data: [320, 332, 301, 334, 390, 330, 320]
           },
           {
-            name:'发布项目数量',
-            type:'line',
+            name: '发布项目数量',
+            type: 'line',
             stack: '总量',
-            data:[820, 932, 901, 934, 1290, 1330, 1320]
+            data: [820, 932, 901, 934, 1290, 1330, 1320]
           }
         ]
-      };
+      }
       myChart.setOption(option)
     },
-    showLoading(){
+    showLoading () {
       this.loading = true
     },
-    hideLoading(){
+    hideLoading () {
       this.loading = false
     }
   },

src/components/commons/ProjectItem.vue

@@ -1,34 +1,41 @@
 <template>
   <div class="project-item-container">
     <!--<span class="col-xl-2 col-lg-3 col-md-4 col-sm-1" style="width: 150px">-->
-      <!--<img class="project-cover" src="@/assets/img/home_ban1.jpg">-->
+    <!--<img class="project-cover" src="@/assets/img/home_ban1.jpg">-->
     <!--</span>-->
     <!--<span class="project-title col-md-2 col-sm-10" style="width: 150px;font-size: 12px">{{project.name}}</span>-->
     <!--<span class="project-title col-md-2 col-sm-10" style="width: 10%;font-size: 12px">{{project.id}}</span>-->
     <!--<span class="col-md-2 col-sm-10" style="width: 10%">-->
-      <!--<span-->
-        <!--style="font-size: 10px;"-->
-        <!--v-bind:class="['badge',{ 'ios-platform': item=='IOS','android-platform': item=='ANDROID','web-platform': item=='WEB'}]"-->
-        <!--v-for="item in project.platform"-->
-      <!--&gt;{{item}}</span>-->
+    <!--<span-->
+    <!--style="font-size: 10px;"-->
+    <!--v-bind:class="['badge',{ 'ios-platform': item=='IOS','android-platform': item=='ANDROID','web-platform': item=='WEB'}]"-->
+    <!--v-for="item in project.platform"-->
+    <!--&gt;{{item}}</span>-->
     <!--</span>-->
     <!--<span class="col-md-1 col-sm-5" style="width: 10%;font-size: 12px"><div class="badge">¥{{project.budget}}</div></span>-->
     <!--<span class="project-td" style="width: 15%">-->
-      <!--<span class="btn btn-small btn-info" @click="goToProjectDetail(project.id)">查看详情</span>-->
+    <!--<span class="btn btn-small btn-info" @click="goToProjectDetail(project.id)">查看详情</span>-->
     <!--</span>-->
-    <el-row type="flex" align="middle" justify="center"  style="font-size: 14px;">
-      <el-badge :value="project.statusVO.text" class="item" :type="project.statusVO.style">
-        <el-col :span="6"><img class="project-cover" src="@/assets/img/home_ban1.jpg"></el-col>
-      </el-badge>
-      <el-col :span="6">{{project.name}}</el-col>
+    <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
+      <el-col :span="6" type="flex" align="middle" justify="center">
+        <el-badge :value="project.statusVO.text" class="item" :type="project.statusVO.style">
+          <img class="project-cover" src="@/assets/img/home_ban1.jpg">
+        </el-badge>
+      </el-col>
+      <el-col :span="6" type="flex" align="middle" justify="center">{{project.name}}</el-col>
       <!--<el-col :span="4">{{project.id}}</el-col>-->
-      <el-col :span="6">
-        <span style="font-size: 10px;" v-bind:class="['badge',{ 'ios-platform': item=='IOS','android-platform': item=='ANDROID','web-platform': item=='WEB'}]"
+      <el-col :span="6" type="flex" align="middle" justify="center">
+        <span style="font-size: 10px;"
+              v-bind:class="['badge',{ 'ios-platform': item=='IOS','android-platform': item=='ANDROID','web-platform': item=='WEB'}]"
               v-for="item in project.platform"
         >{{item}}</span>
       </el-col>
-      <el-col :span="2"><div class="badge">¥{{project.budget}}</div></el-col>
-      <el-col :span="4"><span class="btn btn-small btn-info" @click="goToProjectDetail(project.id)">查看详情</span></el-col>
+      <el-col :span="2" type="flex" align="middle" justify="center">
+        <div class="badge">¥{{project.budget}}</div>
+      </el-col>
+      <el-col :span="4" type="flex" align="middle" justify="center"><span class="btn btn-small btn-info"
+                                                                          @click="goToProjectDetail(project.id)">查看详情</span>
+      </el-col>
     </el-row>
 
 
@@ -88,7 +95,7 @@ export default {
   }
 
   .project-td {
-    padding: 15px;
+    //padding: 15px;
   }
 
   .el-row {
@@ -97,24 +104,30 @@ export default {
       margin-bottom: 0;
     }
   }
+
   .el-col {
     border-radius: 4px;
   }
+
   .bg-purple-dark {
     background: #99a9bf;
   }
+
   .bg-purple {
     background: #d3dce6;
   }
+
   .bg-purple-light {
     background: #e5e9f2;
   }
+
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
+
   .row-bg {
-    padding: 10px 0;
+    //padding: 10px 0;
     background-color: #f9fafc;
   }
 </style>

src/components/commons/TaskItem.vue

@@ -1,17 +1,21 @@
 <template>
   <div class="task-item-container">
     <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
-      <el-badge :value="taskTable.statusVO.text" class="item" :type="taskTable.statusVO.style">
-        <el-col :span="6"><img class="task-cover" src="@/assets/img/home_ban1.jpg"></el-col>
-      </el-badge>
-
-      <el-col :span="5">{{taskTable.title}}</el-col>
+      <el-col :span="6" type="flex" align="middle" justify="center">
+        <el-badge :value="taskTable.statusVO.text" class="item" :type="taskTable.statusVO.style">
+          <img class="task-cover" src="@/assets/img/home_ban1.jpg">
+        </el-badge>
+      </el-col>
+      <el-col :span="5" type="flex" align="middle" justify="center">{{taskTable.title}}</el-col>
       <!--<el-col :span="4">{{project.id}}</el-col>-->
-      <el-col :span="5">{{taskTable.serviceType}}</el-col>
-      <el-col :span="4">
-        <div class="badge">¥{{taskTable.quotePrice==null?0:taskTable.quotePrice}}</div>
+      <el-col :span="5" type="flex" align="middle" justify="center">{{taskTable.serviceType}}</el-col>
+      <el-col :span="4" type="flex" align="middle" justify="center">
+        <div class="badge" type="flex" align="middle" justify="center">
+          ¥{{taskTable.quotePrice==null?0:taskTable.quotePrice}}
+        </div>
       </el-col>
-      <el-col :span="4"><span class="btn btn-medium btn-info" @click="goToTaskDetail(taskTable.projectId,taskTable.id)">查看详情</span>
+      <el-col :span="4" type="flex" align="middle" justify="center"><span class="btn btn-medium btn-info"
+                                                                          @click="goToTaskDetail(taskTable.projectId,taskTable.id)">查看详情</span>
       </el-col>
     </el-row>
   </div>