<template>
  <div class="container">
    <div class="top">
      <!-- 第一行 -->
      <div class="flex">
        <div class="col">
          <span class="title">订单号：</span>
          <el-input placeholder="请输入订单号" style="width:65%;"></el-input>
        </div>
        <div class="col">
          <span class="title">手机号：</span>
          <el-input placeholder="请输入手机号" style="width:65%;"></el-input>
        </div>
        <div class="col">
          <span class="title">通道名称：</span>
          <el-input placeholder="请输入通道名称" style="width:65%;"></el-input>
        </div>
      
      <!-- 第二行 -->
        <div class="col">
          <span class="title">订单状态：</span>
            <el-select v-model="select" slot="prepend" placeholder="请输入订单状态" style="width:65%;">
              <el-option label="已发" value="1"></el-option>
              <el-option label="成功" value="2"></el-option>
              <el-option label="失败" value="3"></el-option>
            </el-select>
        </div>
        <div class="col">
          <span class="title">面额：</span>
          <el-input placeholder="请输入订单号" style="width:65%;"></el-input>
        </div>
        <div class="col">
          <span class="title">归属地：</span>
            <el-cascader
             placeholder="请选择归属地"
             style="width:65%;"
              v-model="value"
              :options="options"
              @change="handleChange"
            ></el-cascader>
        </div>
        <!-- 第三行 -->
        <div class="col">
          <span class="title">通道名称：</span>
          <el-input placeholder="请输入通道名称" style="width:65%;"></el-input>
        </div>
        <div class="col">
          <span class="title">分发ID号：</span>
            <el-select v-model="select" slot="prepend" placeholder="请输入订单号" style="width:65%;">
              <el-option label="移动" value="1"></el-option>
              <el-option label="联通" value="2"></el-option>
              <el-option label="电信" value="3"></el-option>
            </el-select>
        </div>
        <div class="col senddate" >
          <span class="title">发送时间：</span>
          <el-input placeholder="请输入通道名称" style="width:65%;"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {

        options: [
          {value: 1,
          label: '上海',
            children: [
              { value: 2, label: '普陀' },
              { value: 3, label: '黄埔' },
              { value: 4, label: '徐汇' }
            ]
          }, {
            value: 5,
            label: '江苏',
            children: [
              { value: 6, label: '南京' },
              { value: 7, label: '苏州' },
              { value: 8, label: '无锡' }
            ]
          }, {
            value: 9,
            label: '浙江',
            children: [
              { value: 10, label: '杭州' },
              { value: 11, label: '宁波' },
              { value: 12, label: '嘉兴' }
            ]
          },{
            value: 13,
            label: '陕西',
            children: [
              { value: 14, label: '西安' },
              { value: 15, label: '延安' }
            ]
          }, {
            value: 16,
            label: '新疆维吾尔族自治区',
            children: [
              { value: 17, label: '乌鲁木齐' },
              { value: 18, label: '克拉玛依' }
            ]
          }
          ]
}
    }
  }
</script>
<style scoped>
.top {
  margin: 13px;
}
.flex {
  width: 100%;
  display: flex;
  margin: 6px;
  flex-wrap: wrap;
}
.title {
  display: inline-block;
}
.col {
  width: 33.33%;
  margin-bottom: 3px;
}
</style>
