<template>
  <view class="container">
    <view class="info">
      <view class="top flex-c">
        <view class="icon-container flex-c">
          <image class="img" mode="aspectFill" src="https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20250325/77e65857af564c0dda57e1a195da19c3.png"></image>
        </view>
      </view>
      <view class="bottom">超邦手工单系统</view>
    </view>

    <view class="login-area">
      <view class="agreement flex-c">
        <view class="clickable-area flex-r">
          <me-icon class="icon" type="icon-checkbox-blank-circle" size="40rpx" color="var(--summaryColor)"></me-icon>
          阅读并同意
        </view>
        <view class="text">&nbsp<text>用户协议</text>、<text>隐私协议</text></view>
      </view>
      <view class="btn-area flex-c">
        <me-button @click="phoneLogin()" text="手机号一键登录" width="590rpx"></me-button>
      </view>
    </view>
  </view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
import MeButton from "../../components/me-button/me-button.vue";
</script>
<style>
page {
  height: 100vh;
  background-color: var(--navbarBgColor) !important;
}
</style>

<style lang="scss" scoped>
.container {
  padding: 0 32rpx;
  box-sizing: border-box;
  .info {
    margin-top: 40rpx;
    width: 100%;
    .top {
      width: 100%;
      height: 160rpx;
      .icon-container {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        border: 1px solid #E9F1FE;
        .img {
          width: 140rpx;
          height: 140rpx;
          border-radius: 70rpx;
        }
      }
    }
    .bottom {
      width: 100%;
      height: 50rpx;
      font-weight: 500;
      font-size: 34rpx;
      color: var(--titleColor);
      line-height: 50rpx;
      text-align: center;
      margin-top: 36rpx;
    }
  }
  .login-area {
    width: 100%;
    margin-top: 264rpx;
    .agreement {
      width: 100%;
      height: 80rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: var(--titleColor);
      line-height: 80rpx;
      .clickable-area {
        height: 80rpx;
        .icon {
          margin-left: 8rpx;
          margin-right: 8rpx;
        }
      }
      .text {
        height: 80rpx;
        text {
          color: var(--themeColor);
        }
      }
    }
    .btn-area {
      width: 100%;
      height: 96rpx;
      margin-top: 32rpx;
    }
  }
}
</style>
