<template>
  <div class="jdindentlist">
    <div class="jdindentList-top">
      <span></span>
      <div>订单列表</div>
    </div>
    <div class="jdindentList-container">
      <el-tabs type="border-card">
        <el-tab-pane label="商标订单">
          <!-- from表单查询 -->
          <From />
          <!-- tab表格 -->
          <TabList />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import From from "./from";
import TabList from "./tabList";
export default {
  components: {
    From,
    TabList
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="scss">
.jdindentlist {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  overflow: auto;
}
.jdindentList-top {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: rgb(255, 255, 255);
    border: 3px solid rgb(48, 113, 254);
    border-radius: 100%;
  }
  div {
    flex: 1;
    font-size: 16px;
    margin-left: 10px;
    display: flex;
    align-items: center;
  }
}
.jdindentList-container {
  width: 100%;
  .el-tabs {
    box-shadow: none;
    border: none;
    .el-tabs__nav-scroll {
      border-bottom: none;
      background-color: #eef2fb;
      .el-tabs__item {
        padding: 0 40px !important;
        border: 2px solid transparent;
        margin-top: 0;
      }
      .is-active {
        border-top: 2px solid #3071fe;
        border-right-color: #fff !important;
        border-left-color: #fff !important;
      }
    }
    .el-tabs__content {
      padding: 0;
    }
  }
}
</style>
