<script setup>
  import { navigateTo } from '@/utils/router'
</script>

<template>
  <view class="forgot-password">
    <nav-bar>
      <template #back>
        <image
          src="/static/images/login/back.png"
          mode="heightFix"
          class="left-icon"
        ></image>
      </template>
    </nav-bar>
    <view class="top-name">
      <text>忘记密码</text>
      <text>忘记密码需要联系客服更改</text>
    </view>
    <view class="btn-box">
      <view class="icon-box">
        <image
          src="/static/images/customer-service.svg"
          mode="heightFix"
          class="icon"
        ></image>
      </view>
      <cb-button
        @click="
          navigateTo('/pages/my-index/customer-service/third-party')
        "
      >
        联系客服
      </cb-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .left-icon {
    height: 36rpx;
  }

  .btn-box {
    padding: 0 24rpx;
    margin-top: 140rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .icon-box {
      display: flex;
      justify-content: center;
      margin-bottom: 36rpx;
      .icon {
        height: 180rpx;
      }
    }
  }

  .top-name {
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    padding: 0 24rpx;
    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 40rpx;
      color: #333333;
      font-style: normal;
      text-transform: none;
      // 最后一个
      &:last-child {
        font-size: 32rpx;
        color: #999999;
      }
    }
  }
</style>
