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.
63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<!--
|
|
* @Author: qinzhenpen qzp1807@126.com
|
|
* @Date: 2024-08-20 17:50:08
|
|
* @LastEditors: qinzhenpen qzp1807@126.com
|
|
* @LastEditTime: 2024-08-22 17:12:34
|
|
* @FilePath: \vue3\src\views\digitalMarketTech\index.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<template>
|
|
<div class="rgzn_top app-container3">
|
|
<div class="top_item">
|
|
<el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">
|
|
<img src="@/assets/images/大数据.png" />
|
|
大数据
|
|
</el-button>
|
|
<el-button :class="{ active: isActive === 2 }" @click="activeIndex(2)">
|
|
<img src="@/assets/images/人工智能.png" />
|
|
人工智能
|
|
</el-button>
|
|
<el-button :class="{ active: isActive === 3 }" @click="activeIndex(3)">
|
|
<img src="@/assets/images/aigc.png" />
|
|
AIGC大模型
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<component v-if="component" :is="component"></component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const pageData = [defineAsyncComponent(() => import("./bigData/index.vue")), defineAsyncComponent(() => import("./artificialIntelligence/index.vue")), defineAsyncComponent(() => import("./AIGCLargeModel/index.vue"))];
|
|
const component = ref(pageData[0]);
|
|
|
|
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 {
|
|
.top_item {
|
|
img {
|
|
margin-right: 5px;
|
|
}
|
|
.el-button {
|
|
width: 180px;
|
|
height: 50px;
|
|
background: url("../../assets/images/常（钮）.png");
|
|
color: #ffffff;
|
|
border-color: #ffffff00;
|
|
}
|
|
.active {
|
|
background: url("../../assets/images/亮（钮）.png");
|
|
}
|
|
}
|
|
}
|
|
</style>
|