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.
81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<!--
|
|
* @Author: qinzhenpen qzp1807@126.com
|
|
* @Date: 2024-08-20 18:09:46
|
|
* @LastEditors: qinzhenpen qzp1807@126.com
|
|
* @LastEditTime: 2024-08-21 09:13:12
|
|
* @FilePath: \vue3\src\views\digitalMarketTech\AIGCLargeModel\index.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<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 v-if="page" :is="page"></component>
|
|
</template>
|
|
<script setup>
|
|
const pageData = [defineAsyncComponent(() => import("./components/AIVenisonDiagram.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))];
|
|
const page = ref(pageData[0]);
|
|
const clickIndx = (index) => {
|
|
page.value = pageData[index];
|
|
};
|
|
const imgData = [
|
|
{
|
|
text: "AI文生图",
|
|
img: "wst",
|
|
},
|
|
{
|
|
text: "AI写作",
|
|
img: "wz",
|
|
},
|
|
{
|
|
text: "AI修图",
|
|
img: "xt",
|
|
},
|
|
{
|
|
text: "AI视频",
|
|
img: "sp",
|
|
},
|
|
{
|
|
text: "第三方AIGC大模型",
|
|
img: "dmx",
|
|
},
|
|
];
|
|
</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>
|