126 lines
2.3 KiB
Vue
126 lines
2.3 KiB
Vue
<!--
|
||
@name: 登录引导页
|
||
@author: kahu4
|
||
@date: 2023-11-08 16:20
|
||
@description：index
|
||
@update: 2023-11-08 16:20
|
||
-->
|
||
<script setup>
|
||
import { useRouter } from "@/hooks/useRouter";
|
||
import { loginMethods } from "@/pages/login/index.data";
|
||
|
||
const {goBack, push} = useRouter()
|
||
|
||
function toLogin(loginMethod) {
|
||
if (loginMethod.type === 0) {
|
||
// 微信登录
|
||
console.log('微信登录')
|
||
} else {
|
||
push({url: '/pages/login/index', animationType: 'slide-in-right'}, {data: {...loginMethod}})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="login-guid">
|
||
<uv-navbar
|
||
:fixed="false"
|
||
title="登录"
|
||
left-arrow
|
||
@leftClick="goBack"
|
||
/>
|
||
<view class="main-box flex flex-jc__center">
|
||
<image
|
||
class="logo"
|
||
src="@/static/icon/logo.png"
|
||
/>
|
||
</view>
|
||
|
||
<view class="button-group">
|
||
<template
|
||
v-for="(loginMethod) in loginMethods"
|
||
:key="loginMethod.type"
|
||
>
|
||
<view
|
||
:class="`button animation-button ${loginMethod.classNames.join(' ')}`"
|
||
@click="toLogin(loginMethod)"
|
||
>
|
||
<image
|
||
class="icon"
|
||
:src="loginMethod.icon"
|
||
/>
|
||
{{ loginMethod.label }}
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
|
||
<view class="tips-row">
|
||
为了给您提供更好的服务 我们需要您的授权哦~
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<style
|
||
scoped
|
||
lang="scss"
|
||
>
|
||
.login-guid {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: $white-color;
|
||
|
||
.main-box {
|
||
width: 100%;
|
||
top: 300rpx;
|
||
position: absolute;
|
||
|
||
.logo {
|
||
width: 255rpx;
|
||
height: 96rpx;
|
||
}
|
||
}
|
||
|
||
.button-group {
|
||
@include usePadding(50, 0);
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
position: absolute;
|
||
bottom: 20%;
|
||
|
||
.button {
|
||
width: 100%;
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 88rpx;
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 20rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.white-button {
|
||
background: $white-color;
|
||
border: 1rpx solid #333;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.tips-row {
|
||
position: absolute;
|
||
bottom: 5%;
|
||
left: 0;
|
||
width: 100%;
|
||
color: $tips-color;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|