<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>
