From b7e2b6653dfb1fa69dc63e39d677a9df01484014 Mon Sep 17 00:00:00 2001
From: myxsf <1897370@qq.com>
Date: Mon, 22 Apr 2024 23:31:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/login/LoginPage_20240422174936.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175039.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175042.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175044.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175113.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175330.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175416.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175423.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175429.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175513.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175521.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175526.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175701.vue  | 348 +++++++++++++++++
 .../views/login/LoginPage_20240422175722.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175832.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175844.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175850.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175926.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422175930.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422180012.vue  | 348 +++++++++++++++++
 .../views/login/LoginPage_20240422180034.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180051.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180106.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180145.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180159.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180212.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180308.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180334.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180335.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180347.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180400.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180404.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180409.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180412.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180418.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180422.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180511.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180528.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180747.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180830.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180837.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180839.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180841.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422180901.vue  | 351 ++++++++++++++++++
 .../views/login/LoginPage_20240422180907.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422181123.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422181135.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422232040.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422232128.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422232131.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422232154.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422232220.vue  | 350 +++++++++++++++++
 .../views/login/LoginPage_20240422232232.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422232314.vue  | 349 +++++++++++++++++
 .../views/login/LoginPage_20240422232343.vue  | 348 +++++++++++++++++
 .../views/login/LoginPage_20240422232403.vue  | 348 +++++++++++++++++
 .../views/login/LoginPage_20240422232510.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232513.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232517.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232521.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232525.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232530.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232548.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232552.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232557.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232559.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232604.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232645.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232649.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232653.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232655.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232736.vue  | 347 +++++++++++++++++
 .../views/login/LoginPage_20240422232739.vue  | 347 +++++++++++++++++
 src/views/login/LoginPage.vue                 |  14 +-
 74 files changed, 25420 insertions(+), 7 deletions(-)
 create mode 100644 .history/src/views/login/LoginPage_20240422174936.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175039.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175042.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175044.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175113.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175330.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175416.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175423.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175429.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175513.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175521.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175526.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175701.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175722.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175832.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175844.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175850.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175926.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422175930.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180012.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180034.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180051.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180106.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180145.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180159.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180212.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180308.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180334.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180335.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180347.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180400.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180404.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180409.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180412.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180418.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180422.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180511.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180528.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180747.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180830.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180837.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180839.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180841.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180901.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422180907.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422181123.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422181135.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232040.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232128.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232131.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232154.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232220.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232232.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232314.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232343.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232403.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232510.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232513.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232517.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232521.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232525.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232530.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232548.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232552.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232557.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232559.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232604.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232645.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232649.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232653.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232655.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232736.vue
 create mode 100644 .history/src/views/login/LoginPage_20240422232739.vue

diff --git a/.history/src/views/login/LoginPage_20240422174936.vue b/.history/src/views/login/LoginPage_20240422174936.vue
new file mode 100644
index 0000000..34c0f89
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422174936.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 64.5%;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175039.vue b/.history/src/views/login/LoginPage_20240422175039.vue
new file mode 100644
index 0000000..778cba8
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175039.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 70%;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175042.vue b/.history/src/views/login/LoginPage_20240422175042.vue
new file mode 100644
index 0000000..bf7f23b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175042.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 80%;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175044.vue b/.history/src/views/login/LoginPage_20240422175044.vue
new file mode 100644
index 0000000..aa8f98d
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175044.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 100%;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175113.vue b/.history/src/views/login/LoginPage_20240422175113.vue
new file mode 100644
index 0000000..3997b0b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175113.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: ;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175330.vue b/.history/src/views/login/LoginPage_20240422175330.vue
new file mode 100644
index 0000000..5600498
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175330.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: auto;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175416.vue b/.history/src/views/login/LoginPage_20240422175416.vue
new file mode 100644
index 0000000..510fa5f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175416.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 80px;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175423.vue b/.history/src/views/login/LoginPage_20240422175423.vue
new file mode 100644
index 0000000..aa8f98d
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175423.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 100%;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175429.vue b/.history/src/views/login/LoginPage_20240422175429.vue
new file mode 100644
index 0000000..741e6c2
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175429.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 100%;
+    width:82vh;
+    top:20vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:hidden;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175513.vue b/.history/src/views/login/LoginPage_20240422175513.vue
new file mode 100644
index 0000000..fc9174e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175513.vue
@@ -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: 100vh;
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175521.vue b/.history/src/views/login/LoginPage_20240422175521.vue
new file mode 100644
index 0000000..6d8b63a
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175521.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height: 60px;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175526.vue b/.history/src/views/login/LoginPage_20240422175526.vue
new file mode 100644
index 0000000..fc9174e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175526.vue
@@ -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: 100vh;
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175701.vue b/.history/src/views/login/LoginPage_20240422175701.vue
new file mode 100644
index 0000000..c3be8f5
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175701.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+		display: flex;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175722.vue b/.history/src/views/login/LoginPage_20240422175722.vue
new file mode 100644
index 0000000..fc9174e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175722.vue
@@ -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: 100vh;
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175832.vue b/.history/src/views/login/LoginPage_20240422175832.vue
new file mode 100644
index 0000000..55e2806
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175832.vue
@@ -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: 100%;
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175844.vue b/.history/src/views/login/LoginPage_20240422175844.vue
new file mode 100644
index 0000000..ec9ba12
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175844.vue
@@ -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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175850.vue b/.history/src/views/login/LoginPage_20240422175850.vue
new file mode 100644
index 0000000..b86dfee
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175850.vue
@@ -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: 60dvh;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175926.vue b/.history/src/views/login/LoginPage_20240422175926.vue
new file mode 100644
index 0000000..037dcb2
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175926.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height:min-content
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422175930.vue b/.history/src/views/login/LoginPage_20240422175930.vue
new file mode 100644
index 0000000..89e8211
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422175930.vue
@@ -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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height:min-content;
+    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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180012.vue b/.history/src/views/login/LoginPage_20240422180012.vue
new file mode 100644
index 0000000..c28bf7c
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180012.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180034.vue b/.history/src/views/login/LoginPage_20240422180034.vue
new file mode 100644
index 0000000..e158f68
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180034.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: hidden
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180051.vue b/.history/src/views/login/LoginPage_20240422180051.vue
new file mode 100644
index 0000000..b457144
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180051.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: hidden;
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180106.vue b/.history/src/views/login/LoginPage_20240422180106.vue
new file mode 100644
index 0000000..617dae0
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180106.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	max-height: 100vh;
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180145.vue b/.history/src/views/login/LoginPage_20240422180145.vue
new file mode 100644
index 0000000..61927f3
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180145.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	max-height: 100%;
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180159.vue b/.history/src/views/login/LoginPage_20240422180159.vue
new file mode 100644
index 0000000..842169f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180159.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	max-height: 1078px;
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180212.vue b/.history/src/views/login/LoginPage_20240422180212.vue
new file mode 100644
index 0000000..76f7359
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180212.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180308.vue b/.history/src/views/login/LoginPage_20240422180308.vue
new file mode 100644
index 0000000..a943977
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180308.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:60vh;
+		min-height: 60vh;
+    width:82vh;
+    top:20vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180334.vue b/.history/src/views/login/LoginPage_20240422180334.vue
new file mode 100644
index 0000000..28b5776
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180334.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:61vh;
+		min-height: 60vh;
+    width:82vh;
+    top:20vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180335.vue b/.history/src/views/login/LoginPage_20240422180335.vue
new file mode 100644
index 0000000..57cf259
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180335.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:65vh;
+		min-height: 60vh;
+    width:82vh;
+    top:20vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180347.vue b/.history/src/views/login/LoginPage_20240422180347.vue
new file mode 100644
index 0000000..cb55c09
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180347.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:65vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180400.vue b/.history/src/views/login/LoginPage_20240422180400.vue
new file mode 100644
index 0000000..de2b604
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180400.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180404.vue b/.history/src/views/login/LoginPage_20240422180404.vue
new file mode 100644
index 0000000..3dcef6f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180404.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:63vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180409.vue b/.history/src/views/login/LoginPage_20240422180409.vue
new file mode 100644
index 0000000..3e526e6
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180409.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:63vh;
+		min-height: 60vh;
+    width:82vh;
+    top:14vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180412.vue b/.history/src/views/login/LoginPage_20240422180412.vue
new file mode 100644
index 0000000..62f3e03
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180412.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:63vh;
+		min-height: 60vh;
+    width:82vh;
+    top:13vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180418.vue b/.history/src/views/login/LoginPage_20240422180418.vue
new file mode 100644
index 0000000..3dcef6f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180418.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:63vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180422.vue b/.history/src/views/login/LoginPage_20240422180422.vue
new file mode 100644
index 0000000..de2b604
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180422.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180511.vue b/.history/src/views/login/LoginPage_20240422180511.vue
new file mode 100644
index 0000000..cb55c09
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180511.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:65vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180528.vue b/.history/src/views/login/LoginPage_20240422180528.vue
new file mode 100644
index 0000000..e90f429
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180528.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180747.vue b/.history/src/views/login/LoginPage_20240422180747.vue
new file mode 100644
index 0000000..db24d9b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180747.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180830.vue b/.history/src/views/login/LoginPage_20240422180830.vue
new file mode 100644
index 0000000..c50b7b6
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180830.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 0px;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180837.vue b/.history/src/views/login/LoginPage_20240422180837.vue
new file mode 100644
index 0000000..b770721
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180837.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 4px;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180839.vue b/.history/src/views/login/LoginPage_20240422180839.vue
new file mode 100644
index 0000000..d5a0e03
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180839.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 6px;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180841.vue b/.history/src/views/login/LoginPage_20240422180841.vue
new file mode 100644
index 0000000..9f8bf4b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180841.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180901.vue b/.history/src/views/login/LoginPage_20240422180901.vue
new file mode 100644
index 0000000..16cb30b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180901.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: \
+		;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422180907.vue b/.history/src/views/login/LoginPage_20240422180907.vue
new file mode 100644
index 0000000..e2c4c7b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422180907.vue
@@ -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: 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: hidden;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422181123.vue b/.history/src/views/login/LoginPage_20240422181123.vue
new file mode 100644
index 0000000..ea60e3e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422181123.vue
@@ -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: 60vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: hidden;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422181135.vue b/.history/src/views/login/LoginPage_20240422181135.vue
new file mode 100644
index 0000000..9cd3809
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422181135.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 8vh;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: hidden;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232040.vue b/.history/src/views/login/LoginPage_20240422232040.vue
new file mode 100644
index 0000000..fd3baad
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232040.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 20px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: hidden;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232128.vue b/.history/src/views/login/LoginPage_20240422232128.vue
new file mode 100644
index 0000000..c5218be
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232128.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 50px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: hidden;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232131.vue b/.history/src/views/login/LoginPage_20240422232131.vue
new file mode 100644
index 0000000..a23d818
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232131.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 80px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: hidden;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232154.vue b/.history/src/views/login/LoginPage_20240422232154.vue
new file mode 100644
index 0000000..fef5caa
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232154.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 80px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: initial;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232220.vue b/.history/src/views/login/LoginPage_20240422232220.vue
new file mode 100644
index 0000000..10315b7
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232220.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 80px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: auto;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232232.vue b/.history/src/views/login/LoginPage_20240422232232.vue
new file mode 100644
index 0000000..f1ab2ec
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232232.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+		overflow:auto;
+	}
+  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: 80px;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232314.vue b/.history/src/views/login/LoginPage_20240422232314.vue
new file mode 100644
index 0000000..75c663d
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232314.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		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: 80px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+		overflow: auto;
+	}
+	#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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232343.vue b/.history/src/views/login/LoginPage_20240422232343.vue
new file mode 100644
index 0000000..184e84b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232343.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		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: 80px;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232403.vue b/.history/src/views/login/LoginPage_20240422232403.vue
new file mode 100644
index 0000000..47db14a
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232403.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:64.5vh;
+		min-height: 60vh;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232510.vue b/.history/src/views/login/LoginPage_20240422232510.vue
new file mode 100644
index 0000000..e8ad1d3
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232510.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:400px;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232513.vue b/.history/src/views/login/LoginPage_20240422232513.vue
new file mode 100644
index 0000000..41063f5
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232513.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:800px;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232517.vue b/.history/src/views/login/LoginPage_20240422232517.vue
new file mode 100644
index 0000000..2e5e4b2
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232517.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:700px;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232521.vue b/.history/src/views/login/LoginPage_20240422232521.vue
new file mode 100644
index 0000000..d36068d
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232521.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:600px;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232525.vue b/.history/src/views/login/LoginPage_20240422232525.vue
new file mode 100644
index 0000000..64114ad
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232525.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:680px;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232530.vue b/.history/src/views/login/LoginPage_20240422232530.vue
new file mode 100644
index 0000000..2ac0b4b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232530.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:82vh;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232548.vue b/.history/src/views/login/LoginPage_20240422232548.vue
new file mode 100644
index 0000000..679a87e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232548.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:700px
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232552.vue b/.history/src/views/login/LoginPage_20240422232552.vue
new file mode 100644
index 0000000..c8b7df8
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232552.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:700px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232557.vue b/.history/src/views/login/LoginPage_20240422232557.vue
new file mode 100644
index 0000000..3ccd9d3
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232557.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:800px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232559.vue b/.history/src/views/login/LoginPage_20240422232559.vue
new file mode 100644
index 0000000..748a5ff
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232559.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:85	0px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232604.vue b/.history/src/views/login/LoginPage_20240422232604.vue
new file mode 100644
index 0000000..542559a
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232604.vue
@@ -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: 55vh;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:850px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232645.vue b/.history/src/views/login/LoginPage_20240422232645.vue
new file mode 100644
index 0000000..a28ec5b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232645.vue
@@ -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: 400px;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:850px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232649.vue b/.history/src/views/login/LoginPage_20240422232649.vue
new file mode 100644
index 0000000..84a282c
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232649.vue
@@ -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: 800px;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:850px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232653.vue b/.history/src/views/login/LoginPage_20240422232653.vue
new file mode 100644
index 0000000..a3fbd4e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232653.vue
@@ -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: 700px;" 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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:850px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232655.vue b/.history/src/views/login/LoginPage_20240422232655.vue
new file mode 100644
index 0000000..e49a15e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232655.vue
@@ -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;">注&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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:850px;
+    top:15vh;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232736.vue b/.history/src/views/login/LoginPage_20240422232736.vue
new file mode 100644
index 0000000..8720212
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232736.vue
@@ -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;">注&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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		height:660px;
+    width:850px;
+    top:400px;
+		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>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422232739.vue b/.history/src/views/login/LoginPage_20240422232739.vue
new file mode 100644
index 0000000..9799fbd
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422232739.vue
@@ -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;">注&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: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position: relative;
+		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>
\ No newline at end of file
diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
index 8ba88c5..4eb537a 100644
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -31,7 +31,7 @@
 							</a-form-item>
 						</a-col>
 						<a-col  :flex="1">
-							<a-divider type="vertical" style="border-color: blue;height: 50vh;" dashed/>
+							<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
 						</a-col>
 						<a-col :flex="12">
 							
@@ -269,18 +269,18 @@ let taggle=ref(()=>{
   height: 100vh;
   background: url('src/assets/images/background.png');
   background-size: cover;
+	overflow: auto;
   }
 	.login_form{
     position: relative;
-		height: 64.5vh;
-    width:82vh;
-    top:20vh;
+		height:660px;
+    width:850px;
+    top:200px;
 		left: 40%;
     background:#fff;
     background-size: cover;
     padding: 40px;
 		opacity: 1;
-		overflow:initial;
 	}
   h1{
       color: white;
@@ -303,10 +303,10 @@ let taggle=ref(()=>{
 		text-align: left;
 		width: 80%;
 		font-size: 16px;
-		height: 6vh;
+		height: 90px;
 		margin-left: 30px;
 		margin-top:5px;
-		padding: 2px;
+		padding: 7px;
 	}
 	#title{
 		text-align:left;