<template>
  <div class="card about-project art-custom-card">
    <div>
      <h2 class="box-title">关于项目</h2>
      <p>{{ systemName }} 是一款专注于用户体验和视觉设计的后台管理系统模版</p>
      <p>使用了 Vue3、TypeScript、Vite、Element Plus 等前沿技术</p>

      <div class="button-wrap">
        <div class="btn art-custom-card" @click="goPage(WEB_LINKS.DOCS)">
          <span>项目官网</span>
          <i class="iconfont-sys">&#xe703;</i>
        </div>
        <div class="btn art-custom-card" @click="goPage(WEB_LINKS.INTRODUCE)">
          <span>文档</span>
          <i class="iconfont-sys">&#xe703;</i>
        </div>
        <div class="btn art-custom-card" @click="goPage(WEB_LINKS.GITHUB_HOME)">
          <span>Github</span>
          <i class="iconfont-sys">&#xe703;</i>
        </div>
        <div class="btn art-custom-card" @click="goPage(WEB_LINKS.BLOG)">
          <span>博客</span>
          <i class="iconfont-sys">&#xe703;</i>
        </div>
      </div>
    </div>
    <img class="right-img" src="@imgs/draw/draw1.png" />
  </div>
</template>

<script setup lang="ts">
  import AppConfig from '@/config'
  import { WEB_LINKS } from '@/utils/constants'

  const systemName = AppConfig.systemInfo.name

  const goPage = (url: string) => {
    window.open(url)
  }
</script>

<style lang="scss" scoped>
  .about-project {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 300px;
    padding: 20px;

    h2 {
      margin-top: 10px;
      font-size: 20px;
      font-weight: 500;
      color: var(--art-gray-900) !important;
    }

    p {
      margin-top: 5px;
      font-size: 14px;
      color: var(--art-gray-600);
    }
  }

  .button-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    margin-top: 35px;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 240px;
    height: 50px;
    padding: 0 15px;
    margin: 0 15px 15px 0;
    font-size: 14px;
    color: var(--art-gray-800);
    cursor: pointer;
    background: var(--art-bg-color);
    border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 5px 10px rgb(0 0 0 / 5%);
      transform: translateY(-4px);
    }
  }

  // 响应式设计 - iPad Pro及以下
  @media screen and (max-width: $device-ipad-pro) {
    .about-project {
      height: auto;
    }

    .button-wrap {
      width: 470px;
      margin-top: 20px;
    }

    .btn {
      width: 180px;
    }

    .right-img {
      width: 300px;
      height: 230px;
    }
  }

  // 响应式设计 - iPad垂直及以下
  @media screen and (max-width: $device-ipad-vertical) {
    .button-wrap {
      width: 100%;
    }

    .btn {
      width: 190px;
    }

    .right-img {
      display: none;
    }
  }

  // 响应式设计 - 手机端
  @media screen and (max-width: $device-phone) {
    .about-project {
      padding: 0 15px;
    }

    .btn {
      width: 100%;
      margin-right: 0;
    }
  }
</style>
