<template>
    <div class="taskListBox">
        <div class="taskListTable">
            <el-table :data="myTaskList" height="750">
                <el-table-column prop="projectName" align="center" width="220" label="项目名称">
                </el-table-column>
                <el-table-column prop="initiateUserTime" align="center" width="180" label="发起时间">
                </el-table-column>
                <el-table-column prop="initiateUserName" align="center" width="80" label="发起人">
                </el-table-column>
                <el-table-column prop="type" align="center" width="80" label="类型">
                </el-table-column>
                <el-table-column prop="des" align="center" width="430" label="问题描述">
                </el-table-column>
                <el-table-column align="center" width="100" label="操作">
                    <template slot-scope="scope">
                            <i @click="checkTaskItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-edit"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="taskInfoDialog">
            <el-dialog width="60%" top="5vh" :visible.sync="taskInfoDialogVisible">
                <taskInfo></taskInfo>
            </el-dialog>
       </div>
    </div>
</template>

<script>
import taskInfo from "./editTask.vue"
export default {
    data() {
        return {
            taskInfoDialogVisible:false,
            myTaskList:[
                {projectName:"张江双创二期", initiateUserTime:'2022-06-31 00:00:00', initiateUserName:'李四',type:'投诉', des:"啊撒旦发生范德萨发空间是辣的开发技术飞洒防守反击萨拉"}
            ]
        }
    },
    components: { taskInfo },
    methods:{
        checkTaskItem:function(projectItem) {//点击详情
            this.taskInfoDialogVisible = true;
        },
    }
}
</script>

<style>
.taskListBox{
    width: 100%;
}

.taskListBox .taskListTable {
    width: 66%;
    box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
    background-color: rgb(255 255 255 / 15%);
    border-radius: 6px;
}
/*最外层透明*/
.taskListBox .taskListTable .el-table, .el-table__expanded-cell{
   background-color: transparent;
}
/* 表格内背景颜色 */
.taskListBox .taskListTable .el-table th, .el-table tr, .el-table td {
   background-color: transparent;
   color: aliceblue;
}
.taskListBox .taskListTable .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(247, 247, 247, 0.205);
}
.taskInfoDialog .el-dialog, .el-pager li {
    /* background-color: rgba(206, 206, 206, 0.486); */
    border-radius: 40px;
    box-shadow: 0 2px 50px 0 rgba(255, 255, 255, 0.699);
    background: url('../../assets/login/logbackground.png') no-repeat;
}
.taskInfoDialog .el-dialog__header {
    padding:0 0 0 0;
}

</style>