CKQ/src/views/particulars/goaf_info.vue

<template>
    <div class="check-page">
        <header></header>
        <div class="tab">
            <div :class="activetab===item.id?'active item':'item'" v-for="item in tabs" :key="item.id" @click="changeTab(item)">{{ item.name }}</div>  
        </div>
        <div class="container">
            <div class="lf">
                <div class="search-container">
                    <el-input v-model="search.code"  class="input" placeholder="请输入采空区编号" />
                    <div class="bt search" @click="searchSubmit">查询</div>
                    <div class="bt" @click="resetSubmit">重置</div>
                </div>
                <div class="lf-container"> 
                    <table>
                        <tr>
                            <td>矿带</td>
                            <td>中段</td>
                            <td>采空编号</td>
                            <td>水平断面均暴露面积(㎡)</td>
                            <td>平均倾向宽度(m)</td>
                            <td>平均暴露高度(m)</td>
                            <td>体积(m³)</td>
                            <td>倾向°</td>
                            <td>倾角°</td>
                            <td>顶板矿柱厚度(m)</td>
                            <td>保安间柱平均厚度(m)</td>
                            <td>勘探位置</td>
                            <td>位于矿体编号</td>
                            <td>围岩岩性</td>
                            <td>围岩稳定性</td>
                            <td>形成时间</td>
                        </tr>
                        <tr v-for="(item,index) in 11" :key="index">
                            <td v-if="index<1" rowspan="11" >Ⅲ</td>
                            <td v-if="index<1" rowspan="11">770</td>
                            <td>32003</td>
                            <td>444</td>
                            <td>5.1</td>
                            <td>5.1</td>
                            <td>245</td>
                            <td>45</td>
                            <td>36</td>
                            <td>82.1</td>
                            <td>8.3</td>
                            <td>0-1</td>
                            <td>Ⅲ3</td>
                            <td>岩屑晶屑凝灰岩</td>
                            <td>稳定</td>
                            <td>2023-04-12</td>
                        </tr>
                    </table>
                    <div class="el-pagination-wrap">
                        <el-pagination small layout="prev, pager, next" :total="50" />
                     </div>                                   
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AlertChart from './components/AlertChart.vue'
import WarnChart from './components/WarnChart.vue'
 export default {
    name:"goaf_info",
    components:{
        AlertChart,
        WarnChart
    },
    data(){
        return{
            activeId:'1',
            activetab:'1',
            tabs:[
                {name:"Ⅲ号",id:"1"},
                {name:"770",id:"2"},
                {name:"32001",id:"3"},
            ],
            search:{
                code:""
            }                     
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){

        },
        changeHead(item){
            this.activeId=item.id
        },
        changeTab(item){
            this.activetab=item.id
        },
        searchSubmit(){

        },
        resetSubmit(){
            this.search={
                code:""           
            }
        },
    }
 }
</script>
<style lang="scss" scoped>
.check-page{
    header{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0.5vh;
        padding-top:36px;
    }
    .tab{
        padding-top: 1.5vh;
        .item{
            display: inline-block;
            padding: 5px 10px;
            color: #fff;
            font-size: 16px;
            background: #003B7A;
            border: 1px solid #004EA2;
            letter-spacing: 0.6px;
            margin-right: 24px;
            border-radius: 4px 15px 8px 4px;
            cursor: pointer;
            &.active{
                background: #0083CF;
                border: 1px solid #0097DD;
            }
        }
    }
    .container{
        display: flex;
        .lf{
            width: 100%;
            padding-left: 100px;
            .search-container{
                padding:4.4vh 0 5vh 0;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                .input,.select,.el-date-editor{
                    width: 220px;
                    height: 36px;
                    margin-right:16px;
                    color: #fff;
                }
                ::v-deep{
                    .el-input__wrapper{
                        background-color:  rgba(8, 128, 255, 0.2);
                        border: 0;
                        box-shadow: none;               
                    }
                    .el-input__inner{
                        color: #fff;
                    }
                } 
                .bt{
                    width: 100px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    color: #fff;
                    font-size: 14px;
                    background: rgba(8, 128, 255, 0.2);
                    border-radius: 4px;   
                    cursor: pointer;              
                    &.search{
                        background: linear-gradient(rgba(94, 226, 255, 1),rgba(79, 175, 255, 1));
                        margin-right:14px;
                    }
                }       
            }
            .lf-container{
                table{
                    width: 100%;
                    color: #fff;
                    font-family: 'Microsoft YaHei UI';
                    tr:nth-child(1){
                        td{
                            color: #BFE7F9;
                            font-size: 16px;
                        }
                    }
                    td{
                        font-size: 16px;
                        color: #D9E1EC;
                        padding: 8px;
                        line-height: 1;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
                    }
                }
                .el-pagination-wrap{
                    float: right;
                    margin-top: 5vh;
                    ::v-deep{
                        .el-pager li,button{
                            background-color: #00539F;
                            margin-left: 10px;
                            color: rgba(255, 255, 255, 0.75);
                            &.is-active{
                                background-color: rgba(0, 131, 207, 1);
                            }
                        }
                    }
                }
            }         
        }
    }
}

</style>