Schisandra-Cloud-Storage/schisandra-cloud-storage-front-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复了界面显示异常的问题

Browse Source
This commit is contained in:
myxsf
2024-04-22 23:31:54 +08:00
parent b74467e2bd
commit b7e2b6653d
74 changed files with 25420 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
.history/src/views/login/LoginPage_20240422175844.vue Normal file
View 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: 50vh;" 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;">注&nbsp册</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;">登&nbsp录</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: 100dvh;
background: url('src/assets/images/background.png');
background-size: cover;
}
.login_form{
position: relative;
height: 60vh;
width:82vh;
top:20vh;
left: 40%;
background:#fff;
background-size: cover;
padding: 40px;
opacity: 1;
overflow:initial;
}
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: 6vh;
margin-left: 30px;
margin-top:5px;
padding: 2px;
}
#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>