<template>
    <div class="testBox">
        <el-row :gutter="20">
            <el-col :span="6">
                 <div class="notebookBaseBox">
                    <el-card shadow="always">
                        <div class="pscChartBox"></div>
                        <div class="calendarChartBox"></div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="notebookTable">
                    <el-table :data="notebookList" height="750"  >
                        <el-table-column prop="projectName" align="center" label="项目名称">
                        </el-table-column>
                        <el-table-column prop="count" align="center" 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-row>
    </div>
</template>

<script>
import echarts from "echarts";
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() {

        },
        initPscChart() {
            
        }
    }    
}
</script>

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

.testBox .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;
}
/*最外层透明*/
.testBox .notebookTable .el-table, .el-table__expanded-cell{
   background-color: transparent;
}
/* 表格内背景颜色 */
.testBox .notebookTable .el-table th, .el-table tr, .el-table td {
   background-color: transparent;
   color: rgb(3, 3, 3);
}

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

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

.testBox .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;
}

.testBox .notebookBaseBox .pscChartBox {
    width: 100%;
    height: 300px;
    background: rgb(224, 179, 179);
}


.testBox .notebookBaseBox .calendarChartBox {
     width: 100%;
    height: 300px;
    background: rgb(231, 131, 131);
}
</style>