<template>
  <div class="page-container">
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <van-icon size="20" name="arrow-left"></van-icon>      </div>
      <div class="nav-title">关于我们</div>
      <div class="nav-right"></div>
    </div>

    <div class="logo-section">
      <div class="app-logo">LOGO</div>
      <h1 class="app-name">BitWiseWorld</h1>
    </div>

    <div class="menu-list">
      <div class="menu-item">
        <span class="item-label">版本更新</span>
        <span class="item-value">当前已是最高版本</span>
      </div>

      <div class="menu-item is-link" @click="goTo('UserAgreement')">
        <span class="item-label">用户协议</span>
        <div class="item-right">
          <svg viewBox="0 0 1024 1024" width="14" height="14"><path d="M340.864 149.312a29.12 29.12 0 0 1 41.728 0L737.28 504.256a29.12 29.12 0 0 1 0 41.728L382.592 900.928a29.12 29.12 0 0 1-41.728 0 29.12 29.12 0 0 1 0-41.728L674.688 525.12 340.864 191.04a29.12 29.12 0 0 1 0-41.728z" fill="#999"/></svg>
        </div>
      </div>

      <div class="menu-item is-link" @click="goTo('PrivacyPolicy')">
        <span class="item-label">隐私政策</span>
        <div class="item-right">
          <svg viewBox="0 0 1024 1024" width="14" height="14"><path d="M340.864 149.312a29.12 29.12 0 0 1 41.728 0L737.28 504.256a29.12 29.12 0 0 1 0 41.728L382.592 900.928a29.12 29.12 0 0 1-41.728 0 29.12 29.12 0 0 1 0-41.728L674.688 525.12 340.864 191.04a29.12 29.12 0 0 1 0-41.728z" fill="#999"/></svg>
        </div>
      </div>
    </div>
  </div>
</template>

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

const goTo = (routeName) => {
  router.push({ name: routeName });
};
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #fff;
  color: #333;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  background: #fff;
}
.nav-title { font-size: 18px; font-weight: 600; }
.nav-left, .nav-right { width: 40px; }

/* Logo 区域 */
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0 40px;
}
.app-logo {
  width: 80px;
  height: 80px;
  background-color: #DE3545; /* 提取自图片的红色 */
  color: #fff;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(222, 53, 69, 0.2);
}
.app-name {
  font-size: 24px;
  font-weight: 800; /* 这里的字体非常粗 */
  color: #333;
  letter-spacing: 0.5px;
}

/* 列表区域 */
.menu-list {
  padding: 0 20px;
  margin-top: 30px;
}
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  font-size: 14px;
}
.menu-item.is-link:active {
  opacity: 0.6; /* 点击反馈 */
}
.item-label {
  color: #333;
}
.item-value {
  color: #999;
  font-size: 12px;
}
.item-right {
  display: flex;
  align-items: center;
}
</style>