<template>
    <div class="projectList">
       <!-- <pageNameModel :pageName="pageName"></pageNameModel> -->
       <div class="selectBox">
            <div class="selectInputBox">
                <el-input v-model="selectInput" placeholder="请输入内容"></el-input>
            </div>
            <div class="selectButtonBox">
                <el-button type="primary" @click="checkSelect"><font style="font-size:12px" class="el-icon-search"></font></el-button>
            </div>
       </div>
       <div class="projectListBox">
           <div class="projectListTable">
                <el-table :data="projectList" height="650">
                    <el-table-column prop="projectName" align="center" width="220" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="type" align="center" width="150" label="项目类型">
                    </el-table-column>
                    <el-table-column prop="state" align="center" width="200" label="当前进度">
                    </el-table-column>
                    <el-table-column prop="startTime" align="center" width="200" label="开始时间">
                    </el-table-column>
                    <el-table-column prop="lastNodeTime" align="center" width="200" label="下一节点时间">
                    </el-table-column>
                    <el-table-column align="center" width="100" label="操作">
                        <template slot-scope="scope">
                             <i @click="checkProjectItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-thumb"></i>
                        </template>
                    </el-table-column>
                </el-table>
           </div>
           
        </div>
        <div class="projectInfoDialog">
            <el-dialog width="80%" top="2vh" :visible.sync="projectInfoDialogVisible">
                <projectInfo></projectInfo>
            </el-dialog>
       </div>
    </div>
</template>

<script>
// import pageNameModel from "./../publicModel/pageName.vue"
import projectInfo from "./projectInfo.vue"
export default {
    data() {
        return {
            pageName:"项目列表",
            selectInput:"",
            projectList:[{
                projectName:"11",
                type:"11",
                state:"11",
                startTime:"11",
                lastNodeTime:"11"
            }],
            projectInfoDialogVisible:false,
        }
    },
    components: { projectInfo },
    methods:{
        checkProjectItem:function(projectItem) {//点击详情
            this.projectInfoDialogVisible = true;
        },
        checkSelect:function() {//查询

        }
    }
}
</script>

<style>
.projectList .selectBox{
    width: 100%;
    height: 60px;
}
/* 输入框 */
.projectList .selectBox .selectInputBox {
    width: 400px;
    display: inline-block;
}
.selectInputBox .el-input__inner {
    height: 40px !important;
    background-color: rgb(0 0 0 / 15%);
}

/* 查询按钮 */
.projectList .selectBox .selectButtonBox {
    display: inline-block;
    /* width: 100px; */
    border-radius: 10px;
    height: 40px;
}
.projectList .selectBox .selectButtonBox .el-button {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0px;
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 35%);
}

/* 列表 */
.projectList .projectListBox{
    width: 100%;
}

.projectList .projectListBox .projectListTable {
    width: 66%;
    box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
    background-color: rgb(255 255 255 / 15%);
    border-radius: 6px;
}
/*最外层透明*/
.projectList .projectListBox .projectListTable .el-table, .el-table__expanded-cell{
   background-color: transparent;
}
/* 表格内背景颜色 */
.projectList .projectListBox .projectListTable .el-table th, .el-table tr, .el-table td {
   background-color: transparent;
   color: aliceblue;
}
.projectList .projectListBox .projectListTable .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(247, 247, 247, 0.205);
}

/* 弹出框 */
.projectInfoDialog .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;
}
.projectInfoDialog .el-dialog__header {
    padding:0 0 0 0;
}


</style>