You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<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>
|
|
|
|
|