kd-aiot-frontend-mes/src/views/mes/workOrder/detail/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div slot="header"><span>工单号</span>5555555555555555</div>
      <el-form label-width="90px">
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="产品编码"> 1111 </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产品编码"> 1111 </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产品编码"> 1111 </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="下单时间"> 1111 </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="创建时间"> 1111 </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs
        v-model="activeTabName"
        @tab-click="handleClick"
        class="detail_tabs"
      >
        <el-tab-pane label="基本信息" name="basic">
          <dBasic />
        </el-tab-pane>
        <el-tab-pane label="执行跟踪" name="track">
          <dTrack />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import dBasic from '@/views/mes/workOrder/detail/d-basic';
  import dTrack from '@/views/mes/workOrder/detail/d-track';
  export default {
    components: {
      dBasic,
      dTrack
    },
    data() {
      return {
        activeTabName: 'basic'
      };
    },

    methods: {
      handleClick() {
        this.$nextTick(() => {
          const dom = document.querySelector('.detail_tabs .el-tabs__content');
          dom.scrollTop = 0;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    .el-card__header {
      span {
        font-size: 16px;
        font-weight: 700;
        margin-right: 20px;
      }
    }

    .el-tabs {
      :deep(.el-tabs__nav-scroll) {
        padding-left: 20px !important;
        background-color: #f2f1f1;
      }
      :deep(.el-tabs__item) {
        font-size: 16px;
        color: #333;
        font-weight: 700;
      }
      :deep(.el-tabs__content) {
        height: calc(100vh - 320px);
        overflow-y: auto;
      }
      // :deep(.el-tabs__item.is-active) {
      //   background-color: #fff !important;
      // }
      // :deep(.el-tabs__active-bar) {
      //   display: none;
      // }
    }
  }
</style>