<template>
  <div class="rules-page">
    <!-- 导航栏 -->
    <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">VIP规则说明</div>
      <div class="nav-right"></div>
    </div>

    <!-- 文本内容 -->
    <div class="content">
      <p class="text-block">
        会员成长体系设有V1青铜会员、V2白银会员、V3黄金会员、V4铂金会员、V5钻石会员、V6星耀会员、V7王者会员与星光会员等8个等级（以下简称“会员等级”）。
      </p>

      <p class="text-block">
        5. 会员等级名称及所对应的V力值基础点数列示如下：
      </p>

      <!-- 表格数据区 -->
      <div class="rules-table">
        <!-- 表头 -->
        <div class="table-row header-row">
          <div class="col col-left">等级会员名称</div>
          <div class="col col-center">基础V力值</div>
          <div class="col col-right">点数</div>
        </div>

        <!-- 表格内容 -->
        <div class="table-row" v-for="(item, index) in rulesData" :key="index">
          <div class="col col-left">{{ item.name }}</div>
          <div class="col col-center">{{ item.level }}</div>
          <div class="col col-right">{{ item.points }}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const rulesData = ref([
  { name: '青铜会员', level: 'V1', points: '10000' },
  { name: '白银会员', level: 'V2', points: '20000' },
  { name: '黄金会员', level: 'V3', points: '50000' },
  { name: '铂金会员', level: 'V4', points: '80000' },
  { name: '钻石会员', level: 'V5', points: '100000' },
  { name: '星耀会员', level: 'V6', points: '150000' },
  { name: '王者会员', level: 'V7', points: '200000' },
  { name: '星光会员', level: 'V8', points: '300000' },
]);
</script>

<style scoped>
.rules-page {
  min-height: 100vh;
  background: #fff;
  color: #333;
}
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 44px; padding: 0 16px; border-bottom: 1px solid #f5f5f5;
}
.nav-title { font-size: 18px; font-weight: 500; }
.nav-left, .nav-right { width: 40px; }

.content {
  padding: 20px;
}
.text-block {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 16px;
  text-align: justify;
}

/* 简单的 Flex 表格布局 */
.rules-table {
  margin-top: 10px;
}
.table-row {
  display: flex;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
}
.header-row {
  font-weight: 600; /* 加粗表头 */
  color: #333;
  padding-bottom: 12px;
}

/* 列宽控制 */
.col { flex: 1; }
.col-left { text-align: left; flex: 1.2; } /* 左对齐 */
.col-center { text-align: center; } /* 居中 */
.col-right { text-align: right; }   /* 右对齐 */
</style>