<template>
  <view class="login-bg">
    <view class="login-welcome">
      <image
        class="login-bg-img"
        src="../../static/img/login-top.png"
        mode="aspectFill"
      ></image>
      <view class="login-welcome-content">
        <text class="login-title">您好！</text>
        <text class="login-title">欢迎使用</text>
      </view>
    </view>
    <view class="login-form-box">
      <view class="login-form-item">
        <text class="login-label">手机号</text>
        <u-input
          v-model="form.phone"
          placeholder="请输入手机号"
          type="number"
          border="none"
          shape="circle"
          custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
        />
      </view>
      <view class="login-form-item">
        <text class="login-label">密码</text>
        <u-input
          v-model="form.password"
          placeholder="请输入密码"
          type="password"
          border="none"
          shape="circle"
          custom-style="background:#f6f6f6;padding:16rpx 0;padding-left:16px;"
        />
      </view>
    </view>
    <view class="login-btn-box">
      <u-button
        hairline="false"
        shape="circle"
        :custom-style="btnStyle"
        @click="handleLogin"
        color="#fff"
        >登录</u-button
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: "",
        password: "",
      },
      btnStyle: {
        width: "60%",
        height: "44px",
        fontSize: "18px",
        margin: "50px",
        marginTop: "200rpx",
        background: "linear-gradient(90deg, #3ec6c6 0%, #4edfa7 100%)",
      },
    };
  },
  methods: {
    handleLogin() {
      uni.showToast({ title: "登录", icon: "none" });
      uni.switchTab({ url: "/pages/tabBar/work/index" });
    },
  },
};
</script>

<style scoped>
.login-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7fafd;
	height: 100vh;
}
.login-welcome {
  position: relative;
  width: 100vw;
  padding-top: 244rpx;
  overflow: hidden;
}
.login-bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 526px;
  z-index: 1;
}
.login-welcome-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 60rpx;
  margin-bottom: 70rpx;
}
.login-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 10rpx;
}

.login-form-box {
  width: 85%;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 40rpx 30rpx 30rpx 30rpx;
  margin-bottom: 60rpx;
}
.login-form-item {
  margin-bottom: 36rpx;
}
.login-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
  display: block;
}
.login-btn-box {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
