<template>
  <div class="about-us-page">
    <el-page-header @back="goBack" content="关于我们">
      <template #title>
        <span>返回</span>
      </template>
    </el-page-header>
    <el-card class="about-content-card">
      <div class="company-info">
        <h4>彩票猪手</h4>
        <div class="intro-content">
          <p>《彩票猪手》的宗旨，是脚踏实地做一个对用户有价值的专属彩票数据助理；</p>
          <p>《彩票猪手》的靓点，是其独有的彩票数据活跃性、组合性、接续性分析和开奖辅助推测，简称为"三性一推"；</p>
          <p>《彩票猪手》摒弃现行的彩票数据"和值"、"区比"、"奇偶"等观察统计方法，开创数据姿态逻辑研究新领域；</p>
          <p>《彩票猪手》以个人用户为目标，努力探索"数据戏彩"的新途径，开启"数据变现"的新典范；</p>
          <p>《彩票猪手》契合AI智能体，犹如镶嵌了时代的印记，目的和意义不仅仅是渲染和炫耀；</p>
          <p>《彩票猪手》只专注于对号球"交叉现隐"规律的研究，有关具体投注的方法与技巧不在其列；</p>
          <p>《彩票猪手》的三项基本服务可以归纳为：开奖信息查询、开奖数据分析、开奖号码推测；</p>
          <p>《彩票猪手》可以同时满足用户自行研判选号和程序辅助推号的需求。</p>
        </div>
      </div>
      <div class="contact-section">
        <h4>联系我们</h4>
        <div class="contact-item">
          <div class="contact-icon">
            <el-icon :size="20"><Phone /></el-icon>
          </div>
          <div class="contact-info">
            <span class="contact-label">客服热线</span>
            <span class="contact-value">400-888-9999</span>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">
            <el-icon :size="20"><Message /></el-icon>
          </div>
          <div class="contact-info">
            <span class="contact-label">邮箱地址</span>
            <span class="contact-value">service@lottery-ai.com</span>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">
            <el-icon :size="20"><ChatDotRound /></el-icon>
          </div>
          <div class="contact-info">
            <span class="contact-label">在线客服</span>
            <span class="contact-value">右上角悬浮弹窗</span>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-icon">
            <el-icon :size="20"><Clock /></el-icon>
          </div>
          <div class="contact-info">
            <span class="contact-label">服务时间</span>
            <span class="contact-value">周一至周日 9:00-21:00</span>
          </div>
        </div>
      </div>
      <div class="version-info">
        <div class="version-row">
          <span>版本号：v1.0.0</span>
          <div class="user-agreement-link" @click="$router.push('/user-agreement')">
            用户协议
          </div>
        </div>
        <p>© 2025 彩票智能推测系统. 保留所有权利.</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElPageHeader, ElCard, ElIcon } from 'element-plus'
import { Phone, Message, ChatDotRound, Clock } from '@element-plus/icons-vue'

export default {
  name: 'AboutUs',
  components: {
    ElPageHeader,
    ElCard,
    ElIcon,
    Phone,
    Message,
    ChatDotRound,
    Clock
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.about-us-page {
  padding: 20px;
  background-color: #f0f2f5;
}

/* 自定义返回按钮样式 */
:deep(.el-page-header__header) {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

:deep(.el-page-header__back) {
  color: #409EFF !important;
  font-weight: 600;
  font-size: 16px;
}

:deep(.el-page-header__back:hover) {
  color: #66b1ff !important;
}

:deep(.el-page-header__content) {
  color: #333 !important;
  font-weight: 600;
  font-size: 18px;
}

.about-content-card {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.company-info {
  margin-bottom: 25px;
  text-align: center;
}

.company-info h4 {
  color: #e53e3e;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.intro-content {
  text-align: left;
  margin-top: 15px;
}

.intro-content p {
  color: #666;
  line-height: 1.8;
  margin: 0 0 12px 0;
  font-size: 14px;
  text-align: justify;
}

.intro-content p:last-child {
  margin-bottom: 0;
}

.contact-section h4 {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

.contact-icon {
  font-size: 20px;
  margin-right: 12px;
  width: 32px;
  height: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409EFF;
}

.contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 2px;
  font-weight: 500;
}

.contact-value {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.version-info {
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.version-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  gap: 20px;
}

.version-row span {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

.version-info p {
  font-size: 12px;
  color: #999;
  margin: 4px 0;
  line-height: 1.4;
}

.user-agreement-link {
  color: #409EFF;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.user-agreement-link:hover {
  color: #66b1ff;
}
</style> 