任务看板样式调整完成

fhKeeper/formulahousekeeper/timesheet/src/views/project/projectInside.vue

@@ -122,15 +122,18 @@
                                                     </el-dropdown-menu>
                                             </el-dropdown>
                                         </div>
-                                        <div v-for="element in stage.taskList" :id="element.id" :key="element.id" class="taskCard" @click="editTask(element)" :style="element.taskStatus==0?'':'background:#eFeFeF;'">
+                                        <div v-for="element in stage.taskList" :id="element.id" :key="element.id" class="taskCard" ref="tasks" @click="editTask(element)" :style="element.taskStatus==0?'':'background:#eFeFeF;'">
                                             <!--任务卡片内容显示 -->
                                             <div>
+                                                <div v-if="element.taskLevel == 2" class="taskImg hong"><img src="../../assets/image/hong.png" alt=""></div>
+                                                <div v-if="element.taskLevel == 1" class="taskImg huang"><img src="../../assets/image/huang.png" alt=""></div>
+                                                <div v-if="element.taskLevel == 0" class="taskImg hui"><img src="../../assets/image/hui.png" alt=""></div>
                                                 <el-checkbox :disabled="element.taskStatus==2 || element.subTaskList.length > element.subTaskFinishNum" :checked="element.taskStatus==1?true:false" size="large" class="cb"  
                                                 @change="finishTask(element)"
                                                 @click.stop.native=""
                                                 ></el-checkbox>
                                                 <el-tooltip class="item" effect="dark" :content="element.name" placement="top">
-                                                <label class="task_name" :style="'background:'+(element.taskStatus==0?'#ffffff;':'#eFeFeF;')">{{element.name}}</label>
+                                                <label class="task_name" :style="'background:'+(element.taskStatus==0?'#ffffff;':'#eFeFeF;')"><span>{{element.name}}</span></label>
                                                 </el-tooltip>
                                                 <span v-if="element.executorName != null" :style="'background:'+element.executorColor" class="user_name_icon">{{element.executorName.length>2?element.executorName.substring(element.executorName.length-2, element.executorName.length):element.executorName}}</span>
                                                 <el-button v-if="element.executorName == null" type="primary" @click.stop.native="addAsMyTask(element)" size="mini" style="float:right;width:38px;padding:5px;">认领</el-button>
@@ -969,14 +972,10 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 this.title = "编辑任务";
                 this.getTaskDetail(task.id);
                 this.gain(task); // 获取评论列表
-                // this.gengx()
             },  
-            // gengx() {
-            //     var ok = document.getElementById('player');
-            //     console.log(ok,1234);
-            // },
             // 获取评论列表
             gain (task) {
+                console.log(this.stageList, '卡片视图的数据');
                 this.taskId = task.id
                 this.http.post('/task-comment/getList', {taskId: task.id},
                 res => {
@@ -1044,6 +1043,7 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 this.http.post('/task/getTask',{id: id},
                 res => {
                     if (res.code == "ok") {
+                        console.log(res, '点击卡片视图的数据');
                         this.addForm = res.data;
                         this.addForm.createDate = null;
                         this.addForm.indate = null;
@@ -1103,6 +1103,7 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 res => {
                     if (res.code == "ok") {
                         this.stageList = res.data;
+                        // console.log(this.stageList[0].taskList, '嘀嘀嘀');
                     } else {
                         this.$message({
                         message: res.msg,
@@ -1675,7 +1676,35 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
     border-radius: 3px;
     box-shadow: 3px 3px 3px #e6e6e6;
     min-height:60px;
+    position: relative;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.taskImg {
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
 }
+.taskImg img{
+    position: absolute;
+    top: -1px;
+}
+
+.hong:hover {
+    border-top: 1px solid #ff0000;
+}
+
+.huang:hover {
+    border-top: 1px solid #ff9600;
+}
+.hui:hover {
+    border-top: 1px solid #c9c9c9;
+}
+
 .taskCard:hover {
                 cursor: move;
 }
@@ -1719,10 +1748,19 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
     color:#262626;
     display:inline-block;
     max-width: 235px;
+    height: 25px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+.task_name span{
+    position: relative;
+    top: 8px;
+}
+.cb {
+    position: relative;
+    top: -2px;
+}
 .group_style {
     border-radius: 5px;margin:2px 0px 2px 0px;height:40px;line-height:40px;
 }
@@ -1795,6 +1833,7 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
 }
 .jm {
     margin-left: -500px;
+    
 }
 
 .bj {