<template>
  <div class="recall-login w-full min-h-screen relative overflow-hidden flex flex-col items-center">
    <!-- <VideoBackground /> -->
    <StarryBackground />

    <!-- 标题区域 -->
    <div class="mt-10 flex flex-col items-center z-10 w-full px-8">
      <img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="title" />

      <div class="text-white text-center space-y-1 tracking-wider text-shadow-md">
        <p class="text-sm">请验证身份</p>
        <p class="text-sm">开启专属您的「时光机」</p>
        <p class="text-sm">见证每一段成长故事</p>
      </div>
    </div>

    <!-- Login Form Module -->
    <div class="w-full px-6 mt-6 z-10">
      <!-- Using existing FrostedGlass component for semi-transparent effect -->
      <FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
        <h2 class="text-white text-center text-xl font-bold mb-8 tracking-widest drop-shadow-md">手机号验证</h2>

        <div class="space-y-5">
          <!-- Phone Input -->
          <van-field v-model="phone" placeholder="请输入手机号" class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)]"
            :border="false" type="tel" maxlength="11" />

          <!-- Verification Code Input -->
          <div class="flex gap-3">
            <van-field v-model="code" placeholder="请输入验证码"
              class="custom-input rounded-lg !bg-white/10 !text-white flex-1 !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)]" :border="false" type="digit"
              maxlength="6" />
            <van-button plain
              class="verify-btn !bg-transparent !text-white !border-[#FFDD01] !rounded-lg !px-4 !h-[44px] !font-normal"
              @click="handleSendCode" :disabled="counting">
              {{ counting ? `${count}s` : '获取验证码' }}
            </van-button>
          </div>

          <!-- Next Step Button -->
          <van-button block
            class="submit-btn !mt-8 !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
            @click="handleLogin">
            下一步
          </van-button>
        </div>

        <!-- Footer Agreement Text -->
        <div class="mt-6 text-center text-xs text-white/90 leading-relaxed">
          点击“下一步”，即表示您同意我们的
          <br />
          <span class="text-[#FFDD01] cursor-pointer hover:opacity-80 transition-opacity"
            @click="showAgreement = true">《美乐爱觉宇宙用户协议》</span>
        </div>
      </FrostedGlass>
    </div>

    <!-- Agreement Popup -->
    <van-popup v-model:show="showAgreement" round position="bottom" :style="{ height: '70%' }" closeable
      class="agreement-popup">
      <div class="flex flex-col h-full bg-white">
        <div class="p-4 text-center border-b border-gray-100 bg-white sticky top-0 z-10">
          <h3 class="font-bold text-lg text-gray-800">美乐爱觉宇宙用户协议</h3>
        </div>
        <div class="flex-1 overflow-y-auto p-5 scroll-smooth">
          <div class="text-sm text-gray-600 leading-relaxed text-justify space-y-4">
            <div v-for="(section, index) in agreementSections" :key="index">
              <h4 v-if="section.title" class="font-bold text-gray-800 mb-2 mt-4 text-base">{{ section.title }}</h4>
              <p v-for="(para, pIndex) in section.content" :key="pIndex" class="mb-2 indent-2">
                {{ para }}
              </p>
            </div>
          </div>
        </div>
        <div class="p-4 border-t border-gray-100 bg-white safe-area-bottom">
          <van-button block round type="primary" color="linear-gradient(to right, #FFDD01, #E5C600)"
            class="!text-white !font-bold !h-[44px]" @click="showAgreement = false">
            我已阅读并同意
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import { useTitle } from '@vueuse/core'
import { setAuthHeaders } from "@/utils/axios";
import VideoBackground from '@/components/ui/VideoBackground.vue'

// 导入接口
import { smsAPI } from '@/api/common'
import { loginAPI, userInfoAPI } from '@/api/recall_users'

// 导入图片
const titleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/title01@2x.png'

// 路由相关
const $route = useRoute()
const $router = useRouter()
useTitle('登陆')

onMounted(() => {
})

// Form Data
const phone = ref('')
const code = ref('')
const showAgreement = ref(false)
const entry = ref($route.query.entry || '')
const referrer_user_id = ref($route.query.referrer_user_id || '')

// Countdown Logic
const counting = ref(false)
const count = ref(60)
let timer = null

/**
 * @description 发送验证码
 */
const handleSendCode = async () => {
  if (!phone.value) {
    showToast('请输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    showToast('请输入正确的手机号')
    return
  }

  try {
    const { code } = await smsAPI({ mobile: phone.value })
    if (code) {
      showToast('验证码已发送')

      // Start countdown
      counting.value = true
      count.value = 60

      timer = setInterval(() => {
        if (count.value > 0) {
          count.value--
        } else {
          clearInterval(timer)
          counting.value = false
          timer = null
        }
      }, 1000)
    }
  } catch (error) {
    console.error('发送验证码失败:', error)
    showToast('发送验证码失败，请稍后重试')
  }
}

/**
 * @description 登录/下一步
 */
const handleLogin = async () => {
  if (!phone.value) {
    showToast('请输入手机号')
    return
  }
  if (!code.value) {
    showToast('请输入验证码')
    return
  }

  try {
    const res = await loginAPI({ mobile: phone.value, sms_code: code.value, entry: entry.value, referrer_user_id: referrer_user_id.value })
    if (res.code) {
      // 获取data里面的 user_id, HTTP_USER_TOKEN, 并设置到后面所有的请求头里面,headers.User-Id, headers.User-Token
      const { user_id, HTTP_USER_TOKEN } = res?.data?.user_info || {};
      if (user_id && HTTP_USER_TOKEN) {
        // 设置认证请求头
        setAuthHeaders(user_id, HTTP_USER_TOKEN);
        // 缓存user_info
        localStorage.setItem('user_info', JSON.stringify(res?.data?.user_info || {}));
      }
      const userInfo = await userInfoAPI()
      // 登录之后需要判断是否有完善个人信息
      if (userInfo.code) {
        const info = userInfo.data.user || '';
        if (!info.has_idcard) { // 如果【查询我的信息】没有填写过身份证（has_idcard 为 false），则进入完善个人信息页
          $router.push('/recall/boot')
        } else { // 如果【查询我的信息】填写过身份证（has_idcard 为 true）
          if (!info.has_activity_registration) { // 如果【查询我的信息】中没有兑换过星球币（has_activity_registration 为 false），则进入二次查询历史活动页
            $router.push('/recall/id-query')
          } else { // 如果【查询我的信息】中兑换过星球币（has_activity_registration 为 true），则进入时光机页面
            $router.push('/recall/timeline')
          }
        }
      }
    }
  }
  catch (error) {
    console.error('登录失败:', error)
    showToast('登录失败，请稍后重试')
  }
}

// Agreement Content Structure
const agreementSections = [
  {
    title: '一、总则',
    content: [
      '1、“美乐爱觉”软件及相关服务，系指杭州南风教育科技有限公司（以下简称“南方教育”）合法拥有并运营的、标注名称为“美乐爱觉”的客户端、网站（https://wxm.behalo.cc）、WAP、小程序、公众号等及相关网站向您提供的产品与服务（以下统称“美乐爱觉平台”）。《“ 美乐爱觉平台”用户服务协议》（以下称“本协议”）是您与公司就您下载、安装、注册、登录、使用（以下统称“使用”）美乐爱觉互联网平台终端，并获得美乐爱觉平台提供的相关服务所订立的协议。',
      '2、在此特别提醒您（以下或称“用户”）在注册成为美乐爱觉平台用户之前，应当认真阅读本《用户服务协议》（以下简称“协议”），确保您充分理解本协议中各条款，并选择接受或不接受本协议。其中，对于免除或限制责任条款等内容将以加粗形式提醒您注意，您应重点阅读。除非您接受本协议所有条款，否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为即视为您已充分阅读、理解并同意完全接受本协议的全部内容，用户应当受本协议的约束。如您未满18周岁，请您应在法定监护人的陪同下仔细阅读本协议并充分理解本协议，并征得法定监护人的同意后方可注册成为美乐爱觉平台用户。',
      '3、本协议约定美乐爱觉平台与用户之间关于“美乐爱觉平台”服务（以下简称“服务”）的权利义务。“用户”是指注册、登录、使用本服务的个人。本协议可由美乐爱觉平台随时更新，更新后的协议条款一旦公布即代替原来的协议条款，并将以弹窗或其他形式提醒用户。用户可在本APP中查阅最新版协议条款。在修改协议条款后，如您不接受修改后的条款，您也可以选择停止使用，美乐爱觉平台亦有权因此终止您的注册进程及服务使用。您继续使用美乐爱觉平台提供的服务，则视为您已充分理解最新协议，并同意作为本协议的一方当事人接受本协议以及其他与“美乐爱觉平台”软件及相关服务相关的协议和规则（包括但不限于《“美乐爱觉平台”隐私政策》）的约束。'
    ]
  },
  {
    title: '二、账号注册',
    content: [
      '1、"美乐爱觉平台"公众号、小程序、APP、网站等基础功能使用无需注册登录，部分涉及用户数据的功能在使用前需要注册一个“美乐爱觉平台”账号，经“美乐爱觉平台”注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本协议规定用户应当享有的一切权限；未经身份认证用户不享有任何使用权限。',
      '2、“美乐爱觉平台”账号可使用手机号码或第三方平台账户（微信、QQ、Appleid）绑定注册，请用户使用尚未与“美乐爱觉平台”账号绑定的账户，以及未被美乐爱觉平台根据本协议封禁的账户注册“美乐爱觉平台”账号。美乐爱觉平台可以根据用户需求或产品需要对账号注册和绑定的方式进行变更，而无须事先通知用户。',
      '3、如果注册申请者有被美乐爱觉平台封禁的先例或涉嫌虚假注册及滥用他人名义注册，及其他不能得到许可的理由，美乐爱觉平台将拒绝其注册申请。',
      '4、在用户注册及使用本服务时，美乐爱觉平台需要搜集能识别用户身份的个人信息以便美乐爱觉平台可以在必要时联系用户，或为用户提供更好的使用体验。您同意美乐爱觉平台为向您提供服务而收集您的个人信息，美乐爱觉平台搜集的信息包括但不限于用户手机号码、第三方平台账户、昵称等用户同意授权的信息。美乐爱觉平台对这些信息的使用将受限于用户个人隐私信息保护的约束。'
    ]
  },
  {
    title: '三、用户使用规则',
    content: [
      '1、您理解并承诺，您所设置的帐号不得违反国家法律法规及“美乐爱觉平台”的相关规则，您的帐号名称、头像和简介等注册信息及其他个人信息中不得出现违法和不良信息，未经他人许可不得用他人名义（包括但不限于冒用他人姓名、名称、字号、头像等或采取其他足以让人引起混淆的方式）开设帐号，不得恶意注册“美乐爱觉平台”帐号（包括但不限于频繁注册、批量注册帐号等行为）。您在帐号注册及使用过程中需遵守相关法律法规，不得实施任何侵害国家利益、损害其他公民合法权益，有害社会道德风尚的行为。公司有权对您提交的注册信息进行审核。',
      '2、您有责任维护个人帐号、密码的安全性与保密性，并对您以注册帐号名义所从事的活动承担全部法律责任，包括但不限于您在“美乐爱觉平台”软件及相关服务上进行的任何数据修改、言论发表、款项支付等操作行为可能引起的一切法律责任。您应高度重视对帐号与密码的保密，在任何情况下不向他人透露帐号及密码。若发现他人未经许可使用您的帐号或发生其他任何安全漏洞问题时，您应当立即通知公司。',
      '3、用户同意：美乐爱觉在提供服务的过程中以各种方式投放推广信息（包括但不限于：电子邮件、网站联络方式、在美乐爱觉平台的任何位置上投放），用户同意接受美乐爱觉以上述方式向用户发送推广信息。'
    ]
  },
  {
    title: '四、账户安全',
    content: [
      '1、用户一旦注册成功，成为美乐爱觉平台的用户，将有权利使用自己的用户名及密码随时登陆美乐爱觉平台。',
      '2、用户对用户名和密码的安全负责，同时对以其账户进行的所有活动和事件负全部责任。',
      '3、用户不得以任何形式擅自转让或授权他人使用自己的美乐爱觉平台账户。',
      '4、如果用户泄漏了账户密码，或用户发现任何人未经授权使用您的账号和密码的情况，应当立即修改密码并与美乐爱觉平台客服人员取得联系，并授权美乐爱觉平台暂停提供服务及展开调查，根据调查结果作出相应处理。用户理解美乐爱觉平台根据用户请求采取行动需要合理时间，美乐爱觉平台对采取行动前已经产生的后果和损失不承担任何责任。',
      '5、用户若发现任何非法使用用户账号或存在安全漏洞的情况，请立即通知美乐爱觉平台工作人员。',
      '6、因黑客行为或用户的保管疏忽导致账号非法使用，“美乐爱觉平台”不承担任何责任。'
    ]
  },
  {
    title: '五、用户声明与保证',
    content: [
      '1、用户承诺其为具有完全民事行为能力的民事主体，且具有履行本协议约定义务的能力。',
      '2、用户保证其为履行本协议而向美乐爱觉平台提供的全部资料均真实、有效。用户有义务在注册时提供自己的真实身份信息，并保证诸如手机号码、姓名等必要身份信息的有效性及安全性，保证美乐爱觉平台工作人员可以通过上述联系方式与用户取得联系。同时，用户也有义务在相关身份信息实际变更时及时更新有关注册资料。',
      '3、用户在使用美乐爱觉平台账号或本服务的过程中所制作、上载、复制、发布、传播的任何内容，不得违反国家相关法律制度，包括但不限于：',
      '（1）反对宪法所确定的基本原则的；',
      '（2）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；',
      '（3）损害国家荣誉和利益的；',
      '（4）煽动民族仇恨、民族歧视，破坏民族团结的；',
      '（5）破坏国家宗教政策，宣扬邪教和封建迷信的；',
      '（6）散布谣言，扰乱社会秩序，破坏社会稳定的；',
      '（7）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；',
      '（8）侮辱或者诽谤他人，侵害他人合法权益的；',
      '（9）煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；',
      '（10）以非法民间组织名义活动的；',
      '（11）含有法律、行政法规禁止的其他内容的。',
      '4、用户不得利用美乐爱觉平台账号或本服务制作、上载、复制、发布、传播任何干扰美乐爱觉平台正常运营，以及侵犯其他用户或第三方合法权益的内容，包括但不限于：',
      '（1）含有任何性或性暗示的；',
      '（2）含有辱骂、恐吓、威胁内容的；',
      '（3）含有骚扰、垃圾广告、恶意信息、诱骗信息的；',
      '（4）涉及他人隐私、个人信息或资料的；',
      '（5）侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的；',
      '（6）含有其他干扰本服务正常运营和侵犯其他用户或第三方合法权益内容的信息。',
      '5、用户承若对其发表或者上传美乐爱觉平台的所有信息均享有完整的知识产权，或者已经得到相关权利人的合法授权，如用户违反本条规定造成美乐爱觉平台被第三人索赔的，用户应全额赔偿美乐爱觉平台一切损失费用（包括但不限于各种赔偿费、律师代理费、诉讼费及为此支出的其他合理费用）。',
      '6、当第三人认为用户发表或上传美乐爱觉平台的信息侵犯其权利，并根据相关法律法规向美乐爱觉平台发送权利通知书时，用户同意美乐爱觉平台可以自行判断决定删除涉嫌侵权信息，除非用户提交书面证据材料排除侵权的可能性，美乐爱觉平台不会自动回复上述删除信息。'
    ]
  },
  {
    title: '六、服务内容',
    content: [
      '1、美乐爱觉平台具体服务内容由美乐爱觉平台根据实际情况提供，包括但不限于：知识文章、视频课程等。具体以美乐爱觉平台实际提供的功能或服务为准。',
      '2、用户认可，美乐爱觉平台发给用户的所有通知、公告及其他消息都可通过用户所提供的联系方式向用户送达或通知。'
    ]
  },
  {
    title: '七、付费课程相关',
    content: [
      '美乐爱觉平台提供中华传统国学相关付费视频课程，视频课程属于虚拟计算机软件类商品。根据《消费者权益保护法》第二十五条规定，计算机软件等数字化商品不支持7天无理由退款，故当你购买付费服务成功后，不支持无条件退款。',
      '视频课程知识产权归本公司所有，用户付费购买的视频，用户仅享有播放权，不具备视频下载、视频剪辑等、视频传播等其他权利，若未经“杭州南风教育科技有限公司”许可，进行视频下载、视频剪辑等行为，本公司将依法追究其违法行为。'
    ]
  },
  {
    title: '八、服务的暂停或终止',
    content: [
      '1、在下列情况下，美乐爱觉平台有权视具体情况自主决定暂停或终止向用户提供服务：',
      '（1）在用户违反本服务协议相关规定时，美乐爱觉平台有权视具体情况自主决定暂停或终止向该用户提供服务。',
      '（2）如美乐爱觉平台通过用户提供的信息与用户联系时，发现用户在注册时绑定的联系方式已不存在或无法与用户取得联系的，美乐爱觉平台将以系统通知的方式告知用户更改，如用户在三个工作日内仍未能提供新的联系方式，美乐爱觉平台有权终止向该用户提供服务。',
      '（3）本服务条款终止或更新时，用户明示不愿接受新的服务条款的。',
      '（4）用户主动注销账户或用户向美乐爱觉平台申请注销其账户，经美乐爱觉平台审核同意的。',
      '（5）其他美乐爱觉平台认为需终止服务的情况。',
      '2、用户理解并同意：',
      '（1）服务终止后，美乐爱觉平台没有义务为用户保留原账号中或与之相关的任何信息，或转发任何未曾阅读或发送的信息给用户或第三方。',
      '（2）用户在使用本服务期间存在违法行为或违反本协议行为的，美乐爱觉平台仍可依据本协议想用户主张权利或依法依规向行政、司法等机关进行披露。',
      '（3）用户在使用本服务期间与其他第三方（如有）之间发生的关系，不因本服务或本协议的终止而终止，第三方仍有权向用户主张权利，用户应继续向第三方履行相关义务。',
      '3、美乐爱觉平台保有删除APP内各类不符合法律政策或者不实信息内容而无须通知用户的权利。',
      '4、若用户未遵守本协议规定的或其他服务条件的行为，美乐爱觉平台有权作出独立判断并采取暂停或关闭用户账号等措施，对于因此而造成用户无法正常使用账号及相关服务、无法正常获取用户账号内权益的等，美乐爱觉平台不承担任何责任。用户须对自己在网上的言论和行为承担法律责任。对于涉嫌违反法律法规、涉嫌违法犯罪的行为、美乐爱觉平台将保存有关记录，并有权依法向有关主管部门报告、配合有关主管部门调查、向公安机关报案等。'
    ]
  },
  {
    title: '九、服务的变更、中断',
    content: [
      '1、用户理解并同意，美乐爱觉平台提供的服务是按照现有技术和条件所能达到的现状提供的。用户亦明确知道使用服务存在一定信息风险，美乐爱觉平台将尽力维护用户使用服务的合法权益，但不担保服务一定能满足用户要求，也不担保服务的及时性、安全性、真实性、稳定性、正确性，对用户使用服务中出现的信息（包括但不限于用户发布的信息删除或存储失败），美乐爱觉平台为此不承担任何责任。',
      '2、用户理解并同意，美乐爱觉平台为了整体服务运营安全需要或定期或不定期地检测或者更新需要，有权视具体情况决定服务变更、中断、中止或终止服务，但美乐爱觉平台将尽可能事先进行通告。',
      '3、用户理解并同意，鉴于网络服务的特殊性，服务可能会受到多种因素（包括但不限于境内外基础运营商的网络故障、技术缺陷、覆盖范围限制、不可抗力、计算机病毒、黑客攻击或其他非美乐爱觉平台技术能力范围内的事因等）的影响或干扰，美乐爱觉平台不能随时或始终预见和防范上述因素造成的服务中断、用户存储信息丢失、未保存、出现乱码、错误接收、无法接收、延迟接收等，美乐爱觉平台无需为此对任何用户或任何第三方承担责任。若发生上述因此，美乐爱觉平台将尽可能及时通过公告、系统通知等其他合理方式通知受到影响的用户。'
    ]
  },
  {
    title: '十、知识产权条款',
    content: [
      '1、北京美乐爱觉有限公司对本服务中所有内容，包括但不限于设计、画面安排、软件架构、图片、文章、视频等均由北京美乐爱觉有限公司依法拥有其知识产权（包括但不限于商标权、专利权、著作权、商业秘密等）。',
      '2、非经北京美乐爱觉有限公司书面同意，任何人不得擅自使用、修改、复制、公开传播、改变、散布、发行或公开发表美乐爱觉平台程序或内容。',
      '3、尊重知识产权是用户应尽的义务，如有违反，应承担相应赔偿责任。'
    ]
  },
  {
    title: '十一、服务条款修改',
    content: [
      '1、美乐爱觉平台有权随时修改本服务条款的任何内容，一旦本服务条款的任何内容发生变动，美乐爱觉平台将会通过适当方式（包括但不限于弹窗）向用户提示修改内容。',
      '2、如果不同意美乐爱觉平台对本服务条款所做的修改，用户有权停止使用本服务。',
      '3、如果用户继续使用网络服务，则视为用户接受美乐爱觉平台对本服务条款所做的修改。'
    ]
  },
  {
    title: '十二、隐私保护',
    content: [
      '请阅读《隐私保护政策》。'
    ]
  },
  {
    title: '十三、其他',
    content: [
      '1、若美乐爱觉平台已经明示其服务提供方式发生变更并提醒用户应当注意事项，用户未按要求操作所产生的一切后果由用户自行承担。',
      '2、用户同意保障和维护美乐爱觉平台及其他用户的利益，由于用户在使用美乐爱觉平台有违法、不真实、不正当、侵犯第三方合法权益的行为，或用户违反本协议项下的任何条款而给美乐爱觉平台及任何其他第三方造成损失，用户同意承担由此造成的损害赔偿责任。',
      '3、本协议的效力、解释及纠纷的解决，适用于中华人民共和国法律。若用户和美乐爱觉平台之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，任何一方均有权向杭州南风教育科技有限公司住所地人民法院提起诉讼。',
      '4、本协议的任何条款被司法部门认定为无效或不具可执行性，或违反所须适用的法律的，则该条款将被视为无效，其余条款仍然有效，对双方具有约束力。',
      '5、本协议最终解释权归杭州南风教育科技有限公司所有。'
    ]
  },
  {
    title: '十四、免责声明',
    content: [
      '1、用户明确同意其使用美乐爱觉平台服务，以及对美乐爱觉平台服务加以依赖所存在的全部责任和风险将完全有其自己承担，因其使用美乐爱觉平台服务过程的行为，以及因此而产生的一切后果也由其自己承担，美乐爱觉平台对用户不承担任何责任。',
      '2、美乐爱觉平台不担保服务一定能满足用户要求，也不担保服务不会中断，对服务的及时性、安全性、准确性也都不作担保。',
      '3、用户因使用本服务而产生的任何间接的、附带的、特殊的、结果性的或惩戒性的损害，美乐爱觉平台概不负责，均由用户自行承担。'
    ]
  }
]
</script>

<style lang="less" scoped>
.recall-login {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .text-shadow-md {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  // Override Vant Field Styles for Transparency
  :deep(.custom-input) {
    .van-field__control {
      color: white;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}
</style>