<template>
    <div>
        <div class="headClass" style="">
            <h3>动态轨迹</h3>
            <!-- <el-button type="primary" :disabled="disabled" @click="AddPore">选择</el-button> -->
        </div>
        <div class="headSelect">
            <el-select v-model="value" placeholder="身份证号码" style="width: 100px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="value" placeholder="请输入内容" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div class="demo-datetime-picker">
                <div class="block">
                    <el-date-picker v-model="value2" type="datetimerange" start-placeholder="Start date"
                        end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </div>
            </div>
            <el-button type="primary" @click="check">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
          <div class="mapBox">地图</div>
         
    </div>

</template>

<script setup>
import { ref } from 'vue'

const value = ref('')

const options = [
    {
        value: '1',
        label: '身份证号码',
    },
    {
        value: '2',
        label: '港澳台通行证',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
]
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.backinfo-container {
    padding: 10px;
}

::v-deep(.el-form) {
    display: flex;
    justify-content: space-between;
}

.left_box {
    width: 200px;
    border: 1px solid #c8c8c89a;
    border-radius: 5px;
    padding: 5px;
}

.right_box {
    width: calc(100% - 230px);
    overflow-y: auto;
    padding: 5px;
}

::v-deep .el-form-item__content {
    display: block !important;
}

.headClass {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
    position: relative;

}

.headSelect {
    width: 100%;
    margin: 20px 0;
    padding:0 16px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
   
}
 .mapBox{
    
        width: 100%;
        height: 300px;
         background-color: rgba(0, 123, 255, 0.5);
    }
h3 {
    margin: 0;
}
</style>