<template>
    <div class="rgzn_top app-container">
      <div class="top_item">
        <el-button :class="{'active':isActive===1}" @click="activeIndex(1)">用户数据库</el-button>
        <el-button :class="{'active':isActive===2}" @click="activeIndex(2)">描述性统计</el-button>
        <el-button :class="{'active':isActive===3}" @click="activeIndex(3)">聚类分析</el-button>
        <el-button :class="{'active':isActive===4}" @click="activeIndex(4)">关联规则挖掘</el-button>
        <el-button :class="{'active':isActive===5}" @click="activeIndex(5)">回归分析</el-button>
        <el-button :class="{'active':isActive===6}" @click="activeIndex(6)">情感分析/文本挖掘</el-button>
        <el-button :class="{'active':isActive===7}" @click="activeIndex(7)">决策树分析</el-button>
      </div>
      <div>
        <component :is="component"></component>
      </div>
    </div>
  </template>
  
  <script setup>
//   import AIGC from './AIGCLargeModel/index.vue'
  import big from './components/bigData.vue'
  import descriptiveStatistics from './components/descriptiveStatistics.vue'
  import clusterAnalysis from './components/clusterAnalysis.vue'
  const component=ref(big)
  const pageData=[big,descriptiveStatistics,clusterAnalysis]
  const isActive=ref(1)
  const activeIndex=(index)=>{
    isActive.value=index
    component.value=pageData[index-1]
  }
  </script>
  
  <style lang="scss" scoped>
  .content{
      color: #fff;
  }
  .rgzn_top{
    margin-top: 20px;
    .top_item{
      img{
        margin-right: 5px;
      }
      .el-button:nth-child(1) {
        width: 170px;
        height: 50px;
        background: url('../../assets/images/11.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
      }
      .el-button:nth-child(2) {
        width: 170px;
        height: 50px;
        background: url('../../assets/images/22.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
      }
      .el-button:nth-child(3) {
        width: 170px;
        height: 50px;
        background: url('../../assets/images/33.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
        padding:8px 5px 8px 47px;
      }
      .el-button:nth-child(4) {
        width: 170px;
        height: 50px;
        background: url('../../assets/images/44.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
        padding:8px 5px 8px 30px;
      }
      .el-button:nth-child(5) {
        width: 170px;
        height: 50px;
        background: url('../../assets/images/55.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
        padding:8px 5px 8px 25px;
      }
      .el-button:nth-child(6) {
        width: 190px;
        height: 50px;
        background: url('../../assets/images/66.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
        padding:8px 5px 8px 30px;
        background-size: 100% 100%;
      }
      .el-button:nth-child(7) {
        width: 170px;
        height: 50px;
        background: url('../../assets/images/77.png');
        color:#FFFFFF;
        border-color:#FFFFFF00;
        padding:8px 5px 8px 20px;
      }
    //   .active{
    //     background: url('../../assets/images/亮（钮）.png');
    //   }
    }
  }
  </style>
  
  