<template>
    <div  style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
        <div class="entrance">
            <div class="entrance-l">
                <div class="entrance-l-t">
                    <div class="ent-l ent">
                        <span>人员出入</span>
                        <div class="ent-div"></div>
                        <div class="ent-ruchang">
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/Shape.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>入场</span>
                                    <div style="color: #0fb980;">0</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/11.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>入场</span>
                                    <div style="color: #f95f5f;">0</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/user.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>入场</span>
                                    <div style="color: #3a65ed">0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ent-r ent">
                        <span>车辆出入</span>
                        <div class="ent-div"></div>
                        <div class="ent-r-car">
                            <div class="r-car-in">
                                <img src="../../assets/img/Group 1.png" alt="">
                                <div>车辆进场</div>
                                <p style="color: #07b9b9;">0</p>
                            </div>
                            <div class="r-car-in">
                                <img src="../../assets/img/Gr.png" alt="">
                                <div>车辆进场</div>
                                <p style="color: rgb(250 81 81);">0</p>
                            </div>
                            <div class="r-car-in">
                                <img src="../../assets/img/Group.png" alt="">
                                <div>车辆进场</div>
                                <p style="color: rgb(54 98 236);">0</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="entrance-l-b">
                    <div class="ent-b-car1">
                        <span>车辆进场</span>
                        <div class="ent-div"></div>
                        <div class="ent-b-in">
                            <img src="../../assets/img/car.png" alt="">
                            <div>车辆类型：<span></span> </div>
                            <div>车辆好牌：<span></span> </div>
                            <div>进场时间：<span></span> </div>
                        </div>
                    </div>
                    <div class="ent-b-car1">
                        <span>车辆出场</span>
                        <div class="ent-div"></div>
                        <div class="ent-b-in">
                            <img src="../../assets/img/car.png" alt="">
                            <div>车辆类型：<span></span> </div>
                            <div>车辆好牌：<span></span> </div>
                            <div>进场时间：<span></span> </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="entrance-r">
                <span>园区内车辆</span>
                <div class="ent-div"></div>
                <div class="ent-yuanqu">
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="车牌号"
                        width="170">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="类型">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="进场时间"
                        width="200">
                    </el-table-column>
                    </el-table>
                    <!-- <el-pagination
                        layout="prev, pager, next"
                        :total="1000">
                    </el-pagination> -->
                </div>
            </div>
          
        </div>
    </div>
    
  </template>
  
  <script>
  export default {
    name: "App",
    data() {
        return {
          tableData: [
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
            // { date: '冀A66666',name: '小轿车',address: '2022-10-15 12:00:00'},
        ]
        }
      }
  };
  </script>
  <style lang="scss" scoped>
    .entrance{
        width: 85%;
        height: calc(100vh - 50px);;
        padding: 30px;
        display: flex;
        justify-content: space-between;
        .entrance-l{
            width: 60%;
            height: 100%;
            /* padding: 20px; */
            .entrance-l-t{
                width: 100%;
                height: 49%;
                display: flex;
                justify-content: space-between;
                .ent{
                    width: 48%;
                    height: 100%;
                    border-radius: 7px;
                    background: #fff;
                    padding: 20px;
                }
                .ent-l{
                    .ent-ruchang{
                        width: 100%;
                        height: 100%;
                        padding: 30px;
                        .ent-ru-in{
                            width: 100%;
                            height: 30%;
                            display: flex;
                            margin-top: 4%;
                            .ru-in-l{
                                width: 70px;
                                height: 70px;
                                border-radius: 50px;
                                background: rgb(247, 247, 247);
                                line-height: 80px;
                                text-align: center;
                                img{
                                    width: 35%;
                                }
                            }
                            .ru-in-r{
                                padding: 7px 0 0 10px;
                                div{
                                    font-size: 30px;
                                    margin-top: 7px;
                                }
                            }
                        }
                    }
                }
                .ent-r{
                    .ent-r-car{
                        width: 100%;
                        height: 95%;
                        display: flex;
                        justify-content: space-around;
                        .r-car-in{
                            width: 25%;
                            height: 60%;
                            margin-top: 20%;
                            background-color: rgb(247, 247, 247);
                            border-radius: 15px;
                            text-align: center;
                            img{
                                margin-top: 40%;
                            }
                            p{
                                margin-top: 40%;
                                font-size: 30px;
                            }
                        }
                    }
                }
            }
            .entrance-l-b{
                width: 100%;
                height: 49%;
                margin-top: 2%;
                border-radius: 7px;
                background: #fff;
                display: flex;
                justify-content: space-between;
                .ent-b-car1{
                    width: 47%;
                    height: 90%;
                    padding: 20px;
                    .ent-b-in{
                        padding: 30px 20px;
                        img{
                            width: 100%;
                        }
                        div{
                            margin-top: 20px;
                            span{
                                color: #a39e9e;
                            }
                        }
                    }
                }
            }
        }
        .entrance-r{
            width: 38%;
            height: 100%;
            background: #fff;
            border-radius: 7px;
            padding: 20px;
            .ent-yuanqu{
                width: 100%;
                height: 95%;
                padding: 10px;
                text-align: center;
            }
        }
    }
    
.ent-div{
   width: 100%;
   height: 1px;
   background-color: rgb(205, 207, 209); 
   margin-top: 7px;                    
}
::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table tr td .cell {
    text-align: center;
}
  </style>