ucard-person-app-front/src/views/pay-password.vue

<template>
    <div class="page pay-password-page">
      <div class="option-list">
        <div class="option-item" @click="goTo('change')">
          <span>{{ t('pay-password.change') }}</span>
          <div class="arrow-btn"><van-icon name="arrow" /></div>
        </div>
        <div class="option-item" @click="goTo('forget')">
          <span>{{ t('pay-password.forget') }}</span>
          <div class="arrow-btn"><van-icon name="arrow" /></div>
        </div>
      </div>
    </div>
  </template>

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

  function goTo(type: string) {
    if (type === 'change') {
      router.push('/change/pay/password')
    } else if (type === 'forget') {
      router.push('/forget/pay/password')
    }
  }
  </script>

  <style scoped lang="scss">
  .pay-password-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #232323 0%, #2a2a2a 100%);
    padding: 0;
  }
  .header {
    display: flex;
    align-items: center;
    padding: 24px 0 18px 12px;
    .back-icon {
      font-size: 22px;
      color: var(--main-yellow);
      margin-right: 10px;
      cursor: pointer;
    }
    .title {
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }
  }
  .option-list {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 18px;
  }
  .option-item {
    background: var(--action-bg, #181818);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px;
    color: #fff;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(214, 255, 0, 0.04);
  }
  .arrow-btn {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>