wanyu_frontend/pages/user/login.vue
2025-03-25 23:07:32 +08:00

104 lines
2.4 KiB
Vue

<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>