339 lines
6.7 KiB
Vue
339 lines
6.7 KiB
Vue
<template>
|
||
<view class="login-container">
|
||
<view class="title">
|
||
<image class="title-imge" src="/static/index/nu.png" @click="ceshi" />
|
||
<view class="title-font">
|
||
<view class="">您好，</view>
|
||
<view class="">欢迎使用护理单元~</view>
|
||
</view>
|
||
</view>
|
||
<image class="photo-imge" src="/static/index/bgc.png" />
|
||
<image class="old-imge" src="/static/index/old.png" @click="ceshiscan" />
|
||
<view class="under-container">
|
||
<view class="under-container-title">
|
||
<view :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
|
||
<view style="margin-left: 17rpx;" class="radio-circle-font" @click="isTarget = !isTarget">同意</view>
|
||
<view class="radio-circle-blue" @click="jumpToPro">
|
||
《护理单元使用条款》
|
||
</view>
|
||
<view class="radio-circle-font" @click="isTarget = !isTarget">并授权NU获取本机号码</view>
|
||
</view>
|
||
<view class="button-blue" @click="loginIt">
|
||
一键登录
|
||
</view>
|
||
|
||
</view>
|
||
<!-- 遮罩 -->
|
||
<transition name="fade">
|
||
<view v-if="isFadingOut" class="overlay" @click="closeModal" :style="{ backgroundColor: maskColor }" />
|
||
</transition>
|
||
|
||
<!-- 底部弹窗 -->
|
||
<transition name="slide-up">
|
||
<view v-if="isFadingOut" class="modal">
|
||
<view class="modal-title">服务协议及隐私保护</view>
|
||
<view class="model-p">
|
||
<text>　　为了更好地保障您的合法权益，请阅读并同意以下协议</text>
|
||
<text style="color: rgb(0,141,255);" @click="jumpToPro" >《护理单元使用条款》</text>
|
||
<text>，同意后将自动登录。</text>
|
||
</view>
|
||
<view class="model-down">
|
||
<view class="model-white" @click="closeModal">
|
||
不同意
|
||
</view>
|
||
<view class="model-blue" @click="closeModal();isTarget=true">
|
||
同意
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</transition>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
import {
|
||
useWeChatAuth
|
||
} from '@/compontent/useWeChatAuth.js';
|
||
|
||
const isTarget = ref(false);
|
||
const isFadingOut = ref(false);
|
||
const {
|
||
login
|
||
} = useWeChatAuth();
|
||
|
||
// 遮罩色，rgba 可调透明度
|
||
const maskColor = ref('rgba(0, 0, 0, 0.5)')
|
||
|
||
function closeModal() {
|
||
isFadingOut.value = false
|
||
}
|
||
|
||
const loginIt = () => {
|
||
if (!isTarget.value) {
|
||
isFadingOut.value = true;
|
||
} else {
|
||
login();
|
||
}
|
||
};
|
||
const jumpToPro = () =>{
|
||
uni.navigateTo({
|
||
url: "/pages/login/protocol"
|
||
});
|
||
}
|
||
const ceshi = () =>{
|
||
uni.navigateTo({
|
||
url: "/pages/addjigou/where"
|
||
});
|
||
|
||
}
|
||
const ceshiscan = () =>{
|
||
uni.navigateTo({
|
||
url: "/pages/selectunit/map"
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
background-color: rgb(239, 241, 252);
|
||
position: relative;
|
||
|
||
.title {
|
||
margin-top: 70rpx;
|
||
align-items: center;
|
||
|
||
.title-imge {
|
||
width: 100rpx;
|
||
height: 105rpx;
|
||
margin-left: 100rpx;
|
||
}
|
||
|
||
.title-font {
|
||
font-size: 35rpx;
|
||
font-weight: 600;
|
||
margin-left: 105rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.photo-imge {
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1100rpx;
|
||
}
|
||
|
||
.old-imge {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 400rpx;
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
}
|
||
|
||
.under-container {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 45vh;
|
||
background-color: #fff;
|
||
border-top-left-radius: 50rpx;
|
||
border-top-right-radius: 50rpx;
|
||
box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.radio-circle {
|
||
position: relative;
|
||
margin-top: 2rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #C0C5D9;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.radio-circle-target {
|
||
position: relative;
|
||
margin-top: 2rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #C0C5D9;
|
||
background-color: transparent;
|
||
}
|
||
|
||
.radio-circle-target::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-color: #00C9FF;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.under-container-title {
|
||
display: flex;
|
||
margin-top: 60rpx;
|
||
margin-bottom: 40rpx;
|
||
align-items: center;
|
||
font-size: 25rpx;
|
||
font-weight: 500;
|
||
|
||
.radio-circle-blue {
|
||
color: #0083FF;
|
||
margin-top: 3rpx;
|
||
}
|
||
|
||
.radio-circle-font {
|
||
color: #5A607F;
|
||
// margin-left: 18rpx;
|
||
margin-top: 3rpx;
|
||
}
|
||
}
|
||
|
||
.button-blue {
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
border-radius: 43rpx;
|
||
background: linear-gradient(to right, #00C9FF, #0076FF);
|
||
color: #fff;
|
||
font-size: 33rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
// .button-white {
|
||
// width: 80%;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// height: 100rpx;
|
||
// border-radius: 43rpx;
|
||
// color: #5A607F;
|
||
// font-size: 33rpx;
|
||
// margin-bottom: 30rpx;
|
||
// border: 2rpx solid #C0C5D9;
|
||
// }
|
||
|
||
/* 遮罩 */
|
||
.overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 998;
|
||
}
|
||
|
||
/* 弹窗 */
|
||
.modal {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
border-top-left-radius: 50rpx;
|
||
border-top-right-radius: 50rpx;
|
||
width: 100%;
|
||
height: 500rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
margin: 50rpx 0;
|
||
}
|
||
|
||
.model-p {
|
||
padding: 0 50rpx;
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.model-down {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
padding: 0 50rpx;
|
||
margin-top: 40rpx;
|
||
|
||
.model-white {
|
||
border-radius: 50rpx;
|
||
width: 300rpx;
|
||
height: 95rpx;
|
||
border: 5rpx solid rgb(0, 141, 255);
|
||
color: rgb(0, 141, 255);
|
||
font-size: 35rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.model-blue {
|
||
border-radius: 50rpx;
|
||
width: 300rpx;
|
||
height: 95rpx;
|
||
background: linear-gradient(to right, #00C9FF, #0076FF);
|
||
color: #fff;
|
||
font-size: 35rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 动画：遮罩淡入淡出 */
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
.fade-enter-to,
|
||
.fade-leave-from {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 动画：弹窗上滑 */
|
||
.slide-up-enter-active,
|
||
.slide-up-leave-active {
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.slide-up-enter-from,
|
||
.slide-up-leave-to {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
.slide-up-enter-to,
|
||
.slide-up-leave-from {
|
||
transform: translateY(0);
|
||
}
|
||
</style> |