修复了分辨率自适应问题
This commit is contained in:
347
.history/src/views/login/LoginPage_20240422234409.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234409.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:200px;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234415.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234415.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:200px;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234443.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234443.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:30%;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234448.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234448.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:40%;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234452.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234452.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50vh;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234455.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234455.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:30vh;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234501.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234501.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50vh;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234504.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234504.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234621.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234621.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 20vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234625.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234625.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 30vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234630.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234630.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 25vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234632.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234632.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 28vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234708.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234708.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 28vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234718.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234718.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 28vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234723.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234723.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 28vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234725.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234725.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 28vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234730.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234730.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left: 28vh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234814.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234814.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:28dvh;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234843.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234843.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:28vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234856.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234856.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:25vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422234955.vue
Normal file
347
.history/src/views/login/LoginPage_20240422234955.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:24vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235000.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235000.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:23 vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235004.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235004.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:23vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235010.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235010.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:22vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235032.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235032.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:24vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235040.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235040.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20vh;
|
||||||
|
left:28vw;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235134.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235134.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:40%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235258.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235258.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:calc(20vh);
|
||||||
|
left:calc(28vh);
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235303.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235303.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:calc(20vh);
|
||||||
|
left:calc(28vw);
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240422235314.vue
Normal file
347
.history/src/views/login/LoginPage_20240422235314.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:calc(20vh);
|
||||||
|
left:calc(30vw);
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235532.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235532.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240422235545.vue
Normal file
349
.history/src/views/login/LoginPage_20240422235545.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
display: block;
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235602.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235602.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:0;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235611.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235611.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:30%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235617.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235617.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:40%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235625.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235625.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:38%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235634.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235634.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:39%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240422235645.vue
Normal file
349
.history/src/views/login/LoginPage_20240422235645.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
bottom: 20%;
|
||||||
|
left:39%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
350
.history/src/views/login/LoginPage_20240422235720.vue
Normal file
350
.history/src/views/login/LoginPage_20240422235720.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
bottom: 20%;
|
||||||
|
left:39%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240422235744.vue
Normal file
349
.history/src/views/login/LoginPage_20240422235744.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
bottom: 20%;
|
||||||
|
left:39%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240422235752.vue
Normal file
349
.history/src/views/login/LoginPage_20240422235752.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
bottom: 20%;
|
||||||
|
left:39%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235803.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235803.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:30%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240422235808.vue
Normal file
348
.history/src/views/login/LoginPage_20240422235808.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423000032.vue
Normal file
348
.history/src/views/login/LoginPage_20240423000032.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:18%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423000057.vue
Normal file
348
.history/src/views/login/LoginPage_20240423000057.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423000115.vue
Normal file
348
.history/src/views/login/LoginPage_20240423000115.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:15%;
|
||||||
|
left:25%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423000158.vue
Normal file
348
.history/src/views/login/LoginPage_20240423000158.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423000300.vue
Normal file
348
.history/src/views/login/LoginPage_20240423000300.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:25%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423000313.vue
Normal file
348
.history/src/views/login/LoginPage_20240423000313.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:23%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423001035.vue
Normal file
348
.history/src/views/login/LoginPage_20240423001035.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:25%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423001039.vue
Normal file
348
.history/src/views/login/LoginPage_20240423001039.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001200.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001200.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
352
.history/src/views/login/LoginPage_20240423001214.vue
Normal file
352
.history/src/views/login/LoginPage_20240423001214.vue
Normal file
@@ -0,0 +1,352 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
356
.history/src/views/login/LoginPage_20240423001226.vue
Normal file
356
.history/src/views/login/LoginPage_20240423001226.vue
Normal file
@@ -0,0 +1,356 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:30%;
|
||||||
|
right: 30%;
|
||||||
|
bottom: 30%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
356
.history/src/views/login/LoginPage_20240423001244.vue
Normal file
356
.history/src/views/login/LoginPage_20240423001244.vue
Normal file
@@ -0,0 +1,356 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:30%;
|
||||||
|
right: 30%;
|
||||||
|
bottom: 20%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
356
.history/src/views/login/LoginPage_20240423001246.vue
Normal file
356
.history/src/views/login/LoginPage_20240423001246.vue
Normal file
@@ -0,0 +1,356 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:30%;
|
||||||
|
right: 30%;
|
||||||
|
bottom: 50%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
354
.history/src/views/login/LoginPage_20240423001257.vue
Normal file
354
.history/src/views/login/LoginPage_20240423001257.vue
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:20%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
351
.history/src/views/login/LoginPage_20240423001327.vue
Normal file
351
.history/src/views/login/LoginPage_20240423001327.vue
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:20%;
|
||||||
|
left: 30%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
351
.history/src/views/login/LoginPage_20240423001342.vue
Normal file
351
.history/src/views/login/LoginPage_20240423001342.vue
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:20%;
|
||||||
|
left: 28%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
351
.history/src/views/login/LoginPage_20240423001346.vue
Normal file
351
.history/src/views/login/LoginPage_20240423001346.vue
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<div class="main">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
position: absolute;
|
||||||
|
top:20%;
|
||||||
|
left: 29%;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423001457.vue
Normal file
348
.history/src/views/login/LoginPage_20240423001457.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
347
.history/src/views/login/LoginPage_20240423001541.vue
Normal file
347
.history/src/views/login/LoginPage_20240423001541.vue
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position: absolute;
|
||||||
|
top: 0; bottom:0; left: 0; right:0;
|
||||||
|
width: 50%; height: 50%;
|
||||||
|
margin: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
348
.history/src/views/login/LoginPage_20240423001550.vue
Normal file
348
.history/src/views/login/LoginPage_20240423001550.vue
Normal file
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001749.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001749.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:20%;
|
||||||
|
left:28%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001810.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001810.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001937.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001937.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:40vh;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001941.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001941.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:80vh;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001946.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001946.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:70vh;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423001948.vue
Normal file
349
.history/src/views/login/LoginPage_20240423001948.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:80vh;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423002007.vue
Normal file
349
.history/src/views/login/LoginPage_20240423002007.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
350
.history/src/views/login/LoginPage_20240423002257.vue
Normal file
350
.history/src/views/login/LoginPage_20240423002257.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
350
.history/src/views/login/LoginPage_20240423002301.vue
Normal file
350
.history/src/views/login/LoginPage_20240423002301.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
350
.history/src/views/login/LoginPage_20240423002314.vue
Normal file
350
.history/src/views/login/LoginPage_20240423002314.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
351
.history/src/views/login/LoginPage_20240423002359.vue
Normal file
351
.history/src/views/login/LoginPage_20240423002359.vue
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 50%
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
351
.history/src/views/login/LoginPage_20240423002414.vue
Normal file
351
.history/src/views/login/LoginPage_20240423002414.vue
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 50%
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:50%;
|
||||||
|
width:50%;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
351
.history/src/views/login/LoginPage_20240423002430.vue
Normal file
351
.history/src/views/login/LoginPage_20240423002430.vue
Normal file
@@ -0,0 +1,351 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 50%
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:absolute;
|
||||||
|
height:10%;
|
||||||
|
width:100%;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
350
.history/src/views/login/LoginPage_20240423002446.vue
Normal file
350
.history/src/views/login/LoginPage_20240423002446.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:abso;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
350
.history/src/views/login/LoginPage_20240423002449.vue
Normal file
350
.history/src/views/login/LoginPage_20240423002449.vue
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
352
.history/src/views/login/LoginPage_20240423002610.vue
Normal file
352
.history/src/views/login/LoginPage_20240423002610.vue
Normal file
@@ -0,0 +1,352 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
// transform: translate(-50%, -50%);
|
||||||
|
// margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
349
.history/src/views/login/LoginPage_20240423002634.vue
Normal file
349
.history/src/views/login/LoginPage_20240423002634.vue
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<a-form>
|
||||||
|
<a-row>
|
||||||
|
<a-col :xs="0"></a-col>
|
||||||
|
<a-col :xs="17">
|
||||||
|
<a-form
|
||||||
|
class="login_form"
|
||||||
|
ref="loginRef">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="11">
|
||||||
|
<!-- 二维码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<p id="scanTitle">微信扫码登录</p>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-space direction="vertical" align="center">
|
||||||
|
<a-qrcode :value="text"
|
||||||
|
icon="src\assets\icons\schisandra.svg"
|
||||||
|
:size="220"
|
||||||
|
/>
|
||||||
|
</a-space>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 提示部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
|
||||||
|
<template #icon>
|
||||||
|
<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
|
||||||
|
</template>
|
||||||
|
</a-alert>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
|
||||||
|
</a-col>
|
||||||
|
<a-col :flex="12">
|
||||||
|
|
||||||
|
<!-- 主标题 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
|
<svg-icon icon-class="corner_markers" >
|
||||||
|
</svg-icon>
|
||||||
|
</a>
|
||||||
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
|
||||||
|
</svg-icon>
|
||||||
|
<p id="title">五味子云相册</p>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 副标题 -->
|
||||||
|
<a-form-item >
|
||||||
|
<p id="extra">随时随地分享你的美好瞬间</p>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单切换 -->
|
||||||
|
<div v-if="status">
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 菜单内容主体 -->
|
||||||
|
<!-- 账户登录 -->
|
||||||
|
<div v-if="show" id="username" >
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入账号/邮箱/电话号码">
|
||||||
|
<template #prefix>
|
||||||
|
<user-outlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else id="phoneNum">
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border:0">获取验证码</a-button>
|
||||||
|
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<!-- 自动登录忘记密码部分 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
|
||||||
|
<a href="" style="float: right;">忘记密码</a>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >登录</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- 其他登录方式 -->
|
||||||
|
<a-form-item>
|
||||||
|
<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item id="icons">
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
|
||||||
|
</a>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<a-form-item>
|
||||||
|
<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder="请输入手机号">
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请输入密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input-password
|
||||||
|
show-password placeholder="请再次确认密码"
|
||||||
|
>
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
<template #iconRender="v">
|
||||||
|
<EyeTwoTone v-if="v"></EyeTwoTone>
|
||||||
|
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item >
|
||||||
|
<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
|
||||||
|
<template #prefix>
|
||||||
|
<BarcodeOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
|
||||||
|
<template #prefix >
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button style="float: right;border: 0;">获取验证码</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button class='btn' type='primary' >注册</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref,h } from 'vue';
|
||||||
|
|
||||||
|
const text=ref('')
|
||||||
|
|
||||||
|
|
||||||
|
import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
|
||||||
|
import { MenuProps } from 'ant-design-vue';
|
||||||
|
// 配置切换菜单
|
||||||
|
const current = ref<string[]>(['mail']);
|
||||||
|
const items = ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'mail',
|
||||||
|
icon: () => h(UserOutlined),
|
||||||
|
label: '账户登录',
|
||||||
|
title: '账户登录',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '短信登录',
|
||||||
|
title: '短信登录',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentRegister = ref<string[]>(['app']);
|
||||||
|
const itemRegister= ref<MenuProps['items']>([
|
||||||
|
{
|
||||||
|
key: 'app',
|
||||||
|
icon: () => h(MobileOutlined),
|
||||||
|
label: '手机号注册',
|
||||||
|
title: '手机号注册',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
let status=ref(true)
|
||||||
|
let checked=ref(false)
|
||||||
|
let show=ref(true)
|
||||||
|
// 配置切换菜单函数
|
||||||
|
let changeWay=ref((items)=>{
|
||||||
|
if(items.item.originItemValue.label==='短信登录') return show.value=false
|
||||||
|
else return show.value=true
|
||||||
|
})
|
||||||
|
|
||||||
|
//配置登录注册函数
|
||||||
|
let taggle=ref(()=>{
|
||||||
|
status.value=!status.value
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.login_container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('src/assets/images/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.login_form{
|
||||||
|
position:fixed;
|
||||||
|
height:660px;
|
||||||
|
width:850px;
|
||||||
|
top:50%;
|
||||||
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
|
background:#fff;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin:20px 0 ;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#scanTitle{
|
||||||
|
font-size: 30px;
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#alert{
|
||||||
|
text-align: left;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 16px;
|
||||||
|
height: 90px;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top:5px;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
text-align:left;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 35px;
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
margin: 0;
|
||||||
|
width:280px
|
||||||
|
}
|
||||||
|
#extra{
|
||||||
|
margin: 0;
|
||||||
|
width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
color:rgb(189, 186, 187);
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
#menu{
|
||||||
|
text-align:center;
|
||||||
|
width: 300px;
|
||||||
|
background-color:#fff;
|
||||||
|
margin: 0 px;
|
||||||
|
}
|
||||||
|
#other{
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
#icons a{
|
||||||
|
vertical-align:auto;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
border-radius: 100%;
|
||||||
|
border:1px solid rgba(228, 226, 223,0.8);
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -37,12 +37,12 @@
|
|||||||
|
|
||||||
<!-- 主标题 -->
|
<!-- 主标题 -->
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
|
||||||
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注 册</span>
|
||||||
<svg-icon icon-class="corner_markers" >
|
<svg-icon icon-class="corner_markers" >
|
||||||
</svg-icon>
|
</svg-icon>
|
||||||
</a>
|
</a>
|
||||||
<a style="height: 100px;width: 100px;position: absolute;left: 86%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
|
||||||
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登 录</span>
|
||||||
<svg-icon icon-class="corner_markers" ></svg-icon>
|
<svg-icon icon-class="corner_markers" ></svg-icon>
|
||||||
</a>
|
</a>
|
||||||
@@ -272,11 +272,13 @@ let taggle=ref(()=>{
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
.login_form{
|
.login_form{
|
||||||
position: relative;
|
position:fixed;
|
||||||
height:660px;
|
height:660px;
|
||||||
width:850px;
|
width:850px;
|
||||||
top:200px;
|
top:50%;
|
||||||
left: 40%;
|
left:50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
margin: 0 auto;
|
||||||
background:#fff;
|
background:#fff;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
|
|||||||
Reference in New Issue
Block a user