<template>
    <div class="notebookBox">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="notebookTable">
                    <el-table :data="notebookList" height="750"  >
                        <el-table-column prop="projectName" align="center" width="210" label="项目名称">
                        </el-table-column>
                        <el-table-column prop="count" align="center" width="100" label="笔记数量">
                        </el-table-column>
                        <el-table-column align="center" width="80" label="查看">
                            <template slot-scope="scope">
                                    <i @click="checkNotebookItem(scope.row)" style="color:aliceblue;font-size:18px" class="el-icon-s-management"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="notebookBaseBox">
                    <el-card shadow="always">
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    // 笔记本
    data() {
        return {
            notebookList:[
                {projectName:"张江双创", count:9},
                {projectName:"张江双创二期", count:10},
                {projectName:"徐汇教育局", count:12},
                {projectName:"徐汇二期", count:3},
                {projectName:"深圳艺校三期", count:6},
                {projectName:"深圳艺校四期", count:0},
            ]
        }
    },
    components: { },
    methods:{
        checkNotebookItem:function() {

        }
    }    
}
</script>

<style>
.notebookBox {
    width: 100%;   
}
.notebookBox .notebookTable {
    width: 100%;
    height: 750px;
}

.notebookBox .notebookTable {
    width: 100%;
    box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
    background-color: rgb(255 255 255 / 15%);
    border-radius: 6px;
}
/*最外层透明*/
.notebookBox .notebookTable .el-table, .el-table__expanded-cell{
   background-color: transparent;
}
/* 表格内背景颜色 */
.notebookBox .notebookTable .el-table th, .el-table tr, .el-table td {
   background-color: transparent;
   color: aliceblue;
}

.notebookBox .notebookTable .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(247, 247, 247, 0.205);
}

.notebookBox .notebookBaseBox {
    width: 80%;
    height: 750px;
}

.notebookBox .notebookBaseBox .el-card  {
    box-shadow: 0 2px 12px 0 rgba(252, 252, 252, 0.144);
    background-color: rgb(255 255 255 / 15%);
    border-radius: 6px;
    height: 750px;
}

</style>