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.
78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div class="app-top">
|
|
<el-button v-for="(item, index) in imgData" :key="index" :class="item.img" @click="clickIndx(index)">{{ item.text }}</el-button>
|
|
</div>
|
|
<component :is="page"></component>
|
|
</template>
|
|
<script setup>
|
|
import AIVenison from "./components/AIVenisonDiagram.vue";
|
|
import AIWriting from "./components/AIWriting.vue";
|
|
import AIPicture from "./components/AIPicture.vue"
|
|
import AIVideo from "./components/AIVideo.vue"
|
|
import AIGC from "./components/thirdPartyAIGC.vue";
|
|
const pageData = [AIVenison, AIWriting, null, AIPicture, AIVideo, AIGC];
|
|
const page = ref(AIVenison);
|
|
const clickIndx = (index) => {
|
|
page.value = pageData[index];
|
|
};
|
|
const imgData = [
|
|
{
|
|
text: "AI文生图",
|
|
img: "wst",
|
|
},
|
|
{
|
|
text: "AI写作",
|
|
img: "wz",
|
|
},
|
|
{
|
|
text: "AI标题",
|
|
img: "bt",
|
|
},
|
|
{
|
|
text: "AI修图",
|
|
img: "xt",
|
|
},
|
|
{
|
|
text: "AI视频",
|
|
img: "sp",
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
color: #fff;
|
|
}
|
|
.app-top {
|
|
background: #041c49;
|
|
padding: 10px;
|
|
margin: 10px 0px -9px 10px;
|
|
}
|
|
.el-button {
|
|
width: 160px;
|
|
height: 36px;
|
|
color: #ffffff;
|
|
border-color: #ffffff00;
|
|
padding: 8px 0px 8px 32px;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
.wst {
|
|
background: url("@/assets/images/1.png");
|
|
}
|
|
.wz {
|
|
background: url("@/assets/images/2.png");
|
|
}
|
|
.bt {
|
|
background: url("@/assets/images/3.png");
|
|
}
|
|
.xt {
|
|
background: url("@/assets/images/4.png");
|
|
}
|
|
.sp {
|
|
background: url("@/assets/images/5.png");
|
|
}
|
|
.dmx {
|
|
background: url("@/assets/images/6.png");
|
|
}
|
|
</style>
|