<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
        <div style="display: flex; justify-content: space-between;align-items: flex-end;">
          <h2>海运出货操作</h2>
        </div>
        <el-card style="margin-top: 15px">
          <el-descriptions :column="5" border>
            <el-descriptions-item label="自编号"></el-descriptions-item>
            <el-descriptions-item label="运输方式"></el-descriptions-item>
            <el-descriptions-item label="始发地"></el-descriptions-item>
            <el-descriptions-item label="目的地"></el-descriptions-item>
            <el-descriptions-item label="状态"></el-descriptions-item>
          </el-descriptions>
        </el-card>

        <div class="shipping-flow">
          <shippingChart :boxId="boxId" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import shippingChart from "./shippingChart";

export default {
  name: "shippingSea",
  components: {
    shippingChart,
  },
  props: {
    boxId: String,
  },
};
</script>

<style lang="scss">
.shipping-flow {
  margin-top: 5px;
  // 页面内元素弹框form控件宽度设置
  .el-form-item__content {
    > div {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
}
</style>
