thoth-frontend-test/src/views/monthlyReport/childrenPage/editReport/components/OverallOverviewOfTheClient/index.vue

<template>
  <div>
    <headTitle
      style="margin-top: 40px; margin-bottom: 10px;"
      :title="title"
    />
    <div class="OverallOverviewOfTheClient">
      <onlineQuestion />
      <qualityProcess />
    </div>
  </div>
</template>
<script>
import headTitle from '@/components/headTitle'
import onlineQuestion from './onlineQuestion'
import qualityProcess from './qualityProcess'

export default {
  components: {
    headTitle,
    onlineQuestion,
    qualityProcess
  },
  props: {
    title: {
      type: String,
      required: false,
      default: '整体概览'
    }
  },
  data() {
    return {
      tabsActive: 'APP',
      tabsList: ['APP', '小程序', 'Webapp', 'H5']
    }
  },
  methods: {
    tabClick(tab, event) {
      this.$emit('change', tab.name)
    }
  }
}
</script>
<style lang="less" scoped>
.OverallOverviewOfTheClient {
  display: flex;
  > * {
    flex: 1;
    &:nth-child(1) {
      margin-right: 5px;
    }
    &:nth-child(2) {
      margin-left: 5px;
    }
  }
  .report-title {
    position: relative;
    padding-bottom: 20px;
    line-height: 20px;
    color: #333;
    &::before {
      position: absolute;
      bottom: 0;
      left: -20px;
      content: '';
      width: calc(100% + 40px);
      border-bottom: 1px solid #e2e2e2;
    }
    .report-title-text {
      position: relative;
      top: -5px;
    }
    .report-icon-title {
      color: #333333;
      font-size: 30px;
      margin-right: 10px;
    }
  }
}
/deep/.el-tabs__active-bar{
  display: none;
}
/deep/.el-tabs__nav-wrap::after{
  display: none;
}
</style>