<template>
  <div class="about-page-container">
    <div class="about-content-wrapper">
      <!-- 页面头部 -->
      <div class="about-page-header">
        <h1 class="about-page-title">关于我</h1>
        <div class="about-page-subtitle">一个热爱技术的全栈开发者</div>
      </div>
      
      <!-- 关于内容 -->
      <div class="about-main-content">
        <div class="about-personal-intro">
          <p>你好！欢迎来到我的个人博客。我是一名热爱技术的全栈开发者，热衷于探索新技术和解决复杂问题。</p>
          <p>这个博客是我分享技术见解、学习心得和生活感悟的地方。希望通过这个平台，能够与更多志同道合的朋友交流和学习。</p>
        </div>
        
        <div class="about-skill-section">
          <h3>前端技术栈</h3>
          <div class="skills-display-list">
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank" class="skill-tag-link"><el-tag type="primary">HTML5</el-tag></a>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS" target="_blank" class="skill-tag-link"><el-tag type="primary">CSS3</el-tag></a>
            <a href="https://tailwindcss.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Tailwind CSS</el-tag></a>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" class="skill-tag-link"><el-tag type="primary">JavaScript (ES6+)</el-tag></a>
            <a href="https://www.typescriptlang.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">TypeScript</el-tag></a>
            <a href="https://vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vue.js 3</el-tag></a>
            <a href="https://pinia.vuejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Pinia</el-tag></a>
            <a href="https://react.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">React 18</el-tag></a>
            <a href="https://nodejs.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Node.js</el-tag></a>
            <a href="https://vite.dev/" target="_blank" class="skill-tag-link"><el-tag type="primary">Vite</el-tag></a>
            <a href="https://webpack.js.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Webpack</el-tag></a>
            <a href="https://element-plus.org/" target="_blank" class="skill-tag-link"><el-tag type="primary">Element Plus</el-tag></a>
            <a href="https://git-scm.com/" target="_blank" class="skill-tag-link"><el-tag type="primary">Git</el-tag></a>
          </div>
        </div>
        
        <div class="about-skill-section">
          <h3>后端技术栈</h3>
          <div class="skills-display-list">
            <a href="https://spring.io/projects/spring-boot" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Boot 3.x</el-tag></a>
            <a href="https://spring.io/projects/spring-security" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Security</el-tag></a>
            <a href="https://spring.io/projects/spring-data-jpa" target="_blank" class="skill-tag-link"><el-tag type="success">Spring Data JPA</el-tag></a>
            <a href="https://mybatis.org/mybatis-3/" target="_blank" class="skill-tag-link"><el-tag type="success">MyBatis-Plus</el-tag></a>
            <a href="https://www.mysql.com/" target="_blank" class="skill-tag-link"><el-tag type="success">MySQL 8</el-tag></a>
            <a href="https://www.postgresql.org/" target="_blank" class="skill-tag-link"><el-tag type="success">PostgreSQL</el-tag></a>
            <a href="https://redis.io/" target="_blank" class="skill-tag-link"><el-tag type="success">Redis</el-tag></a>
            <a href="https://projectlombok.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Lombok</el-tag></a>
            <a href="https://mapstruct.org/" target="_blank" class="skill-tag-link"><el-tag type="success">MapStruct</el-tag></a>
            <a href="https://maven.apache.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Maven</el-tag></a>
            <a href="https://gradle.org/" target="_blank" class="skill-tag-link"><el-tag type="success">Gradle</el-tag></a>
            <a href="https://www.oracle.com/java/technologies/java17.html" target="_blank" class="skill-tag-link"><el-tag type="success">Java 17+</el-tag></a>
          </div>
        </div>
        
        <div class="about-hobbies-section">
          <h3>兴趣爱好</h3>
          <ul class="hobbies-list">
            <li>阅读技术书籍和博客</li>
            <li>参与开源项目</li>
            <li>学习新技术和框架</li>
          </ul>
        </div>
        
        <div class="about-contact-section">
          <h3>联系方式</h3>
          <p>如果你有任何问题或建议，欢迎随时联系我！</p>
          <div class="contact-options">
            <el-button type="primary" plain @click="goToMessageBoard">留言板</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

/**
 * 跳转到留言板页面
 * 当用户点击留言板按钮时触发
 */
const goToMessageBoard = () => {
  router.push('/message')
}
</script>

<style scoped>
/* 主容器样式 */
.about-page-container {
  width: 80%;
}

/* 内容包装器样式 */
.about-content-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background-color: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

/* 内容包装器悬浮效果 */
.about-content-wrapper:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 页面头部样式 */
.about-page-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid #ecf0f1;
}

/* 页面标题样式 */
.about-page-title {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 12px;
  font-weight: 600;
}

/* 页面副标题样式 */
.about-page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
}

/* 主要内容区域样式 */
.about-main-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #34495e;
}

/* 个人介绍样式 */
.about-personal-intro {
  margin-bottom: 32px;
}

.about-personal-intro p {
  margin-bottom: 16px;
  text-align: justify;
}

/* 技能部分样式 */
.about-skill-section {
  margin-bottom: 32px;
}

.about-skill-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 16px;
  font-weight: 600;
}

/* 技能列表样式 */
.skills-display-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 技能标签链接样式 */
.skill-tag-link {
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

/* 技能标签链接悬浮效果 */
.skill-tag-link:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.skill-tag-link:hover .el-tag {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 兴趣爱好部分样式 */
.about-hobbies-section {
  margin-bottom: 32px;
}

.about-hobbies-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 16px;
  font-weight: 600;
}

/* 兴趣爱好列表样式 */
.hobbies-list {
  list-style: none;
  padding: 0;
}

.hobbies-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.hobbies-list li:hover {
  color: #3498db;
}

.hobbies-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #3498db;
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

.hobbies-list li:hover::before {
  transform: scale(1.2);
}

/* 联系方式部分样式 */
.about-contact-section {
  margin-bottom: 20px;
}

.about-contact-section h3 {
  color: #2c3e50;
  font-size: 1.3rem;
  margin-bottom: 16px;
  font-weight: 600;
}

.about-contact-section p {
  margin-bottom: 16px;
  text-align: justify;
}

/* 联系方式选项样式 */
.contact-options {
  display: flex;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-page-container {
    padding: 20px 0;
  }
  
  .about-content-wrapper {
    padding: 20px;
    margin: 0 15px;
  }
  
  .about-page-title {
    font-size: 1.8rem;
  }
  
  .about-page-subtitle {
    font-size: 1rem;
  }
  
  .about-main-content {
    font-size: 1rem;
  }
  
  .about-page-header {
    margin-bottom: 32px;
  }
  
  .contact-options {
    flex-direction: column;
  }
  
  .skills-display-list {
    gap: 8px;
  }
}
</style>