<template>
  <!-- <Load></Load> -->
  <ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail>

  <Head>
    <Title>Aerwen工具箱 - 提供专业的研发效能工具和解决方案 | Aerwen官网</Title>
    <Meta name="keywords" content="Aerwen工具箱，研发效能平台，研发工具，解决方案，自动化，智能化" />
    <Meta name="description"
      content="欢迎访问Aerwen工具箱官网！我们致力于为研发团队提供一站式的研发效能平台。通过我们的工具和解决方案，您可以提高开发效率、优化团队协作，并实现高质量的软件交付。" />
    <Meta name="baidu-site-verification" content="" />
  </Head>
  <Header></Header>

  <main class="home-main-box">
    <section>


      <div class="home-box container">

        <!-- 顶部内容 -->
        <div class="top-content animate__animated animate__fadeIn">

          <!-- 标题 -->
          <div class="home-top-title-box">
            <h1 class="home-top-title">智能化开发助手，Aerwen工具箱</h1>
            <h3 class="home-sub-title">做项目轻轻松松的！</h3>
          </div>

          <!-- 下载按钮盒子 -->
          <div class="home-download-box">
            <a class="home-download-button" target="_blank"
              href="http://tool.aerwen.net/prod-api/cdn/tool/AerwenTool.msi">
              <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="windows"
                class="svg-inline--fa fa-windows svg-content" role="img" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512">
                <path fill="currentColor"
                  d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z">
                </path>
              </svg>
              Download for Windows
            </a>

            <div class="mt-5">
              <a class="home-download-button" target="_blank"
                href="https://space.bilibili.com/270021386/channel/seriesdetail?sid=3334327">
                使用教程
              </a>
            </div>

          </div>

          <!-- 顶部展示图片 -->
          <div class="top-show-box">
            <img @click="handleImg(0)" :src=openImg1 alt="">
          </div>

        </div>

        <!-- 中间内容 -->
        <div class="middle-box">

          <!-- 一键打开盒子 -->
          <div class="middle-content-big-box">
            <!-- 标题 -->
            <div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp ">
              <h2 class="middle-content-title">一键打开</h2>
              <h3 class="middle-content-sub-title">一个按钮，打开多个项目文件，高效便捷，让工作更轻松，提升生产力，体验全新的工作方式。</h3>
            </div>

            <!-- 内容 -->
            <div class="middle-img-box  op0" data-animation="animate__animated animate__fadeInLeft">
              <img @click="handleImg(1)" :src=openImg alt="">
            </div>
          </div>


          <!-- 一键建表盒子 -->
          <div class="middle-content-big-box">
            <!-- 标题 -->
            <div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp">
              <h2 class="middle-content-title">一键建表</h2>
              <h3 class="middle-content-sub-title">可视化操作，快速创建和执行数据库表格，轻松一键翻译字段，助力高效数据库管理。</h3>
            </div>

            <!-- 内容 -->
            <div class="middle-img-box op0" data-animation="animate__animated animate__fadeInRight">
              <div class="create-table-navicat-img-box">
                <img src="https://navicat.com/images/02.Product_00_AllProducts_Premium16.svg" alt="">
              </div>
              <img @click="handleImg(2)" :src=createTableImg alt="">
            </div>
          </div>


          <!-- 资源中心 -->
          <div class="middle-content-big-box">
            <!-- 标题 -->
            <div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp">
              <h2 class="middle-content-title">资源中心</h2>
              <h3 class="middle-content-sub-title">聚合常用资源，快速导航，节省开发时间。一站式资源中心，助你高效开发。</h3>
            </div>

            <!-- 内容 -->
            <div class="middle-img-box op0" data-animation="animate__animated animate__fadeInLeft">
              <img @click="handleImg(3)" :src=resourcesImg alt="">
            </div>
          </div>


          <!-- 数据库转思维导图 -->
          <div class="middle-content-big-box">
            <!-- 标题 -->
            <div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp">
              <h2 class="middle-content-title">数据库转思维导图</h2>
              <h3 class="middle-content-sub-title">数据库表与字段一键转换为Ximd思维导图格式。助力数据结构梳理，轻松可视化，提升工作效率。</h3>
            </div>

            <!-- 内容 -->
            <div class="middle-img-box op0" data-animation="animate__animated animate__fadeInRight">
              <img @click="handleImg(4)" :src=dataBaseImg alt="">
            </div>
          </div>


        </div>


        <!-- 底部内容 -->
        <div class="bottom-box">

          <!-- gitee源码盒子 -->
          <div class="gitee-box op0" data-animation="animate__animated animate__lightSpeedInLeft">
            <div class="gitee-img-box">
              <img src="https://gitee.com/static/images/logo.svg?t=158106664" alt="">
            </div>
            <div class="gitee-content-box">
              <div class="gitee-content-title">Gitee 源码地址</div>
              <div class="gitee-content-link">
                <a class="home-download-button" target="_blank" href="https://gitee.com/zhi-lan_0/aerowen-toolbox">
                  下载源码
                </a>
              </div>
            </div>
          </div>

          <div class="gitee-box op0" data-animation="animate__animated animate__lightSpeedInRight">
            <div class="gitee-content-box">
              <div class="gitee-content-title">GitHub 源码地址</div>
              <div class="gitee-content-link">
                <a class="home-download-button" target="_blank" href="https://github.com/Abbh1/AerwenTool">
                  下载源码
                </a>
              </div>
            </div>
            <div class="gitee-img-box">
              <img src="/img/home/icons8-github.gif" alt="">
            </div>
          </div>


        </div>


      </div>

    </section>
  </main>

  <!-- <Final></Final> -->
</template>

<script setup>


/**  基础变量  **/
let imgList = ref([])
let imgIdx = ref(0)
let ImgDetailRef = ref(null)


/**预对接的数据**/
let openImg1 = ref("/img/home/open/open1.png")
let openImg = ref("/img/home/open/open2.png")
let createTableImg = ref("/img/home/createTable/createTable1.png")
let resourcesImg = ref("/img/home/resources/resources1.png")
let dataBaseImg = ref("/img/home/mind/mind1.png")


/**js常量的定义**/




/**js操控的逻辑变量**/




/**方法函数**/
function handleImg(v) {
  ImgDetailRef.value.showImgDetail()
  imgIdx.value = v
}



/**onMounted**/
onMounted(() => {
  imgList.value.push(openImg1.value)
  imgList.value.push(openImg.value)
  imgList.value.push(createTableImg.value)
  imgList.value.push(resourcesImg.value)
  imgList.value.push(dataBaseImg.value)

  htmlAddAnimations({ tagDom: 'home-main-box' })
})
/**export**/
defineExpose({
  middleware: 'auth'
})

</script>

<style scoped src="~/assets/css/index/index.scss"></style>
<style scoped src="~/assets/css/index/media.scss"></style>