153 lines
3.5 KiB
Vue
153 lines
3.5 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="[isShake ? 'animation-shake' : '', 'agreement flex-c']">
|
|
<view class="clickable-area flex-r" @click="select()">
|
|
<me-icon v-if="checked" class="icon" type="icon-checkbox-circle" size="40rpx" color="var(--themeColor)"></me-icon>
|
|
<me-icon v-else class="icon" type="icon-checkbox-blank-circle" size="40rpx" color="var(--summaryColor)"></me-icon>
|
|
阅读并同意
|
|
</view>
|
|
<view class="text"> <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";
|
|
import { ref, reactive, computed, watch } from 'vue'
|
|
import helpers from "../../utils/helpers";
|
|
|
|
//是否勾选协议
|
|
const checked = ref(false)
|
|
|
|
//是否抖动
|
|
const isShake = ref(false)
|
|
|
|
//手机号登录
|
|
const phoneLogin = () => {
|
|
if (checked.value === false) {
|
|
helpers.showToast("请阅读并勾选用户协议")
|
|
isShake.value = true
|
|
setTimeout(() => {
|
|
isShake.value = false
|
|
}, 1000)
|
|
|
|
return false
|
|
}
|
|
}
|
|
|
|
//勾选协议
|
|
const select = () => {
|
|
checked.value = !checked.value
|
|
}
|
|
</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);
|
|
}
|
|
}
|
|
}
|
|
.animation-shake{
|
|
animation: shake 800ms ease-in-out;
|
|
}
|
|
|
|
/* 水平抖动特效*/
|
|
@keyframes shake {
|
|
10%, 90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
20%, 80% {
|
|
transform: translate3d(+2px, 0, 0);
|
|
}
|
|
30%, 70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
40%, 60% {
|
|
transform: translate3d(+4px, 0, 0);
|
|
}
|
|
50% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
}
|
|
.btn-area {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|