'tj'
方佳 博
2 years ago
commit
d77977adf3
@ -1,111 +1,111 @@
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<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'
|
||||
import associationRuleMining from './components/associationRuleMining.vue'
|
||||
import regressionAnalysis from './components/regressionAnalysis.vue'
|
||||
const component=ref(big)
|
||||
const pageData=[big,descriptiveStatistics,clusterAnalysis,associationRuleMining,regressionAnalysis]
|
||||
const isActive=ref(1)
|
||||
const activeIndex=(index)=>{
|
||||
isActive.value=index
|
||||
component.value=pageData[index-1]
|
||||
}
|
||||
</script>
|
||||
import big from "./components/bigData.vue";
|
||||
import descriptiveStatistics from "./components/descriptiveStatistics.vue";
|
||||
import clusterAnalysis from "./components/clusterAnalysis.vue";
|
||||
import associationRuleMining from "./components/associationRuleMining.vue";
|
||||
import regressionAnalysis from "./components/regressionAnalysis.vue";
|
||||
import emotionAnalysis from "./components/emotion-analysis.vue";
|
||||
const component = ref(emotionAnalysis);
|
||||
const pageData = [big, descriptiveStatistics, clusterAnalysis, associationRuleMining, regressionAnalysis, emotionAnalysis];
|
||||
const isActive = ref(1);
|
||||
const activeIndex = (index) => {
|
||||
isActive.value = index;
|
||||
component.value = pageData[index - 1];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
color: #fff;
|
||||
}
|
||||
.rgzn_top{
|
||||
}
|
||||
.rgzn_top {
|
||||
margin-top: 20px;
|
||||
.top_item{
|
||||
img{
|
||||
.top_item {
|
||||
img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.el-button{
|
||||
.el-button {
|
||||
padding-left: 49px !important;
|
||||
}
|
||||
.el-button:nth-child(1) {
|
||||
width: 170px;
|
||||
height: 50px;
|
||||
background: url('../../assets/images/11.png');
|
||||
color:#FFFFFF;
|
||||
border-color:#FFFFFF00;
|
||||
padding:8px 5px 8px 47px;
|
||||
background: url("../../assets/images/11.png");
|
||||
color: #ffffff;
|
||||
border-color: #ffffff00;
|
||||
padding: 8px 5px 8px 47px;
|
||||
}
|
||||
.el-button:nth-child(2) {
|
||||
width: 170px;
|
||||
height: 50px;
|
||||
background: url('../../assets/images/22.png');
|
||||
color:#FFFFFF;
|
||||
border-color:#FFFFFF00;
|
||||
padding:8px 5px 8px 47px;
|
||||
background: url("../../assets/images/22.png");
|
||||
color: #ffffff;
|
||||
border-color: #ffffff00;
|
||||
padding: 8px 5px 8px 47px;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
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;
|
||||
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 21px 8px 25px;
|
||||
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');
|
||||
background: url("../../assets/images/77.png");
|
||||
color: #ffffff;
|
||||
border-color: #ffffff00;
|
||||
padding: 8px 5px 8px 20px;
|
||||
}
|
||||
.active {
|
||||
transform: scale(1.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue