<template>
  <div class="app-container nationalEconomies">
    <div class="header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全国经济大全" name="first"></el-tab-pane>
        <el-tab-pane label="全国商机项目分析" name="second"></el-tab-pane>
        <el-tab-pane label="全国中标市场分析" name="third"></el-tab-pane>
        <el-tab-pane label="全国建筑企业分析" name="fourth"></el-tab-pane>
      </el-tabs>
    </div>

    <Economic v-if="activeName === 'first'"></Economic>
    <Sjxmfx v-if="activeName === 'second'"></Sjxmfx>
    <Zhongbiao v-if="activeName === 'third'"></Zhongbiao>
    <Jzqyfx v-if="activeName === 'fourth'"></Jzqyfx>
  </div>
</template>

<script>
  import Economic from './component/qgjjdq'
  import Sjxmfx from './component/sjxmfx'
  import Jzqyfx from './component/jzqyfx'
  import Zhongbiao from './component/zhongbiao'
export default {
  name: 'NationalEconomies',
  components: {
    Economic,Sjxmfx,Jzqyfx,Zhongbiao
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  created() {

  },
  methods: {

    handleClick() {

    }
  }
}
</script>
<style lang="scss">
  .tips.is-light{
    padding: 12px;
    width: 318px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08);
    .popper__arrow {
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
      border-top-color: rgba(0, 0, 0, 0.08) !important;
    }
  }
</style>
<style lang="scss" scoped>
  .app-container{
    padding: 0;
  }

  .icon-detailed{
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .nationalEconomies{
    border-radius: 4px;
    .header{
      justify-content: space-between;
      height: 48px;
      background: #FFFFFF;
      border-radius: 4px;
      color: #232323;
      ::v-deep .el-tabs{
        height: 48px;
        line-height: 48px;
        .el-tabs__nav-wrap::after {
          position: static !important;
        }
        .el-tabs__header{
          margin: 0;
          .el-tabs__item{
            padding: 0 16px;
            font-size: 16px;
          }
          .is-active{
            font-weight: bold;
          }
        }
        .el-tabs__content{
          width: 100%;
        }
      }
      .location{
        font-size: 14px;
        color: #0081FF;
        i{
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }

  }
</style>
