nastiNte-Ui/src/views/management/myorder.vue

<template>
  <div style="width: 70%;height: 700px;margin: 0 auto;display:flex;justify-content: space-around">
    <div style="width: 20%;height: 392px; margin-top: 60px;border: 1px solid #e7e7e7">
      <el-menu
        default-active="3"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">订舱须知</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span slot="title">我的模板</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">申请放货</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-setting"></i>
          <span slot="title">我的拆改单</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-setting"></i>
          <span slot="title">在线换单</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-setting"></i>
          <span slot="title">快捷支付</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div style="width: 80%;border: 1px solid #f7f7f7;height: 290px;">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">订单待付</el-menu-item>
        <el-menu-item index="3">已配船</el-menu-item>
        <el-menu-item index="4">待受理</el-menu-item>
        <el-menu-item index="5">已撤销</el-menu-item>
        <el-menu-item index="6">已驳回</el-menu-item>
        <el-menu-item index="7">运单变更</el-menu-item>
      </el-menu>
      <div style="width: 100%;display:flex;justify-content: space-around">
        <div style="width: 20%;">
          <el-input placeholder="订舱单"></el-input>
          <el-input placeholder="船名"></el-input>
          <el-input placeholder="箱号"></el-input>
        </div>
        <div style="width: 20%;">
          <el-input placeholder="收货人"></el-input>
          <el-input placeholder="航次"></el-input>
          <el-input placeholder="条数"></el-input>
        </div>
        <div style="width: 50%;">
          <div style="display:flex;justify-content: space-between">
            <el-input placeholder="始发港" style="width: 45%;"></el-input>
            <span style="margin-top: 20px">至</span>
            <el-input placeholder="目的港" style="width: 45%;"></el-input>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <el-input placeholder="创建开始时间" style="width: 45%;"></el-input>
            <span style="margin-top: 20px">至</span>
            <el-input placeholder="创建结束时间" style="width: 45%;"></el-input>
          </div>
          <div style="display:flex;justify-content: space-between;">
            <el-input placeholder="单据有效期结束" style="width: 45%;"></el-input>
            <span style="margin-top: 20px">&nbsp;&nbsp;&nbsp;</span>
            <el-input placeholder="货名" style="width: 45%;"></el-input>
          </div>
        </div>
      </div>
      <div style="width: 100%;display:flex;justify-content: space-between">
        <div style="display: flex;align-items: center;padding-left: 20px"><el-checkbox v-model="checked">全选</el-checkbox></div>
        <div style="margin-right: 20px">
          <el-button type="success" plain>装箱单下载</el-button>
          <el-dropdown>
            <el-button type="success" plain>
              委托书下载
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>合并PDF</el-dropdown-item>
              <el-dropdown-item>批量PDF</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="success" plain>
              运单下载
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>合并PDF</el-dropdown-item>
              <el-dropdown-item>批量PDF</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button type="success" plain>
              放箱单下载
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>华南片区</el-dropdown-item>
              <el-dropdown-item>虎门提重</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <el-divider>列表数据</el-divider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myorder',
  data() {
    return {
      activeIndex: '1',
      checked:true
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.el-input{
  margin: 10px auto;
}
</style>