diff --git a/.history/src/views/login/LoginPage_20240422234409.vue b/.history/src/views/login/LoginPage_20240422234409.vue
new file mode 100644
index 0000000..d80e7a5
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234409.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:absolute
+		height:660px;
+    width:850px;
+    top:200px;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234415.vue b/.history/src/views/login/LoginPage_20240422234415.vue
new file mode 100644
index 0000000..9b38d62
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234415.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:absolute;
+		height:660px;
+    width:850px;
+    top:200px;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234443.vue b/.history/src/views/login/LoginPage_20240422234443.vue
new file mode 100644
index 0000000..94a525a
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234443.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:absolute;
+		height:660px;
+    width:850px;
+    top:30%;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234448.vue b/.history/src/views/login/LoginPage_20240422234448.vue
new file mode 100644
index 0000000..7d5af47
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234448.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:absolute;
+		height:660px;
+    width:850px;
+    top:40%;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234452.vue b/.history/src/views/login/LoginPage_20240422234452.vue
new file mode 100644
index 0000000..71d67b1
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234452.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:absolute;
+		height:660px;
+    width:850px;
+    top:50vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234455.vue b/.history/src/views/login/LoginPage_20240422234455.vue
new file mode 100644
index 0000000..fad9b9c
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234455.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:absolute;
+		height:660px;
+    width:850px;
+    top:30vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234501.vue b/.history/src/views/login/LoginPage_20240422234501.vue
new file mode 100644
index 0000000..71d67b1
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234501.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:absolute;
+		height:660px;
+    width:850px;
+    top:50vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234504.vue b/.history/src/views/login/LoginPage_20240422234504.vue
new file mode 100644
index 0000000..38b2292
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234504.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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234621.vue b/.history/src/views/login/LoginPage_20240422234621.vue
new file mode 100644
index 0000000..1b12fc4
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234621.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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 20vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234625.vue b/.history/src/views/login/LoginPage_20240422234625.vue
new file mode 100644
index 0000000..a1691b9
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234625.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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 30vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234630.vue b/.history/src/views/login/LoginPage_20240422234630.vue
new file mode 100644
index 0000000..d532b2b
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234630.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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 25vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234632.vue b/.history/src/views/login/LoginPage_20240422234632.vue
new file mode 100644
index 0000000..9f0c028
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234632.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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 28vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234708.vue b/.history/src/views/login/LoginPage_20240422234708.vue
new file mode 100644
index 0000000..0b66c32
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234708.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: 85%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 28vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234718.vue b/.history/src/views/login/LoginPage_20240422234718.vue
new file mode 100644
index 0000000..8d9f23c
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234718.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: 85%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 28vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234723.vue b/.history/src/views/login/LoginPage_20240422234723.vue
new file mode 100644
index 0000000..9f0c028
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234723.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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 28vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234725.vue b/.history/src/views/login/LoginPage_20240422234725.vue
new file mode 100644
index 0000000..80fa591
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234725.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 28vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234730.vue b/.history/src/views/login/LoginPage_20240422234730.vue
new file mode 100644
index 0000000..5628604
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234730.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left: 28vh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234814.vue b/.history/src/views/login/LoginPage_20240422234814.vue
new file mode 100644
index 0000000..fc1be24
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234814.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:28dvh;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234843.vue b/.history/src/views/login/LoginPage_20240422234843.vue
new file mode 100644
index 0000000..6bdbe31
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234843.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:28vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234856.vue b/.history/src/views/login/LoginPage_20240422234856.vue
new file mode 100644
index 0000000..4470e9d
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234856.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:25vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422234955.vue b/.history/src/views/login/LoginPage_20240422234955.vue
new file mode 100644
index 0000000..e38d234
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422234955.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:24vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235000.vue b/.history/src/views/login/LoginPage_20240422235000.vue
new file mode 100644
index 0000000..51813eb
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235000.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:23	vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235004.vue b/.history/src/views/login/LoginPage_20240422235004.vue
new file mode 100644
index 0000000..e69a9b9
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235004.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:23vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235010.vue b/.history/src/views/login/LoginPage_20240422235010.vue
new file mode 100644
index 0000000..aa56900
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235010.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:22vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235032.vue b/.history/src/views/login/LoginPage_20240422235032.vue
new file mode 100644
index 0000000..e38d234
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235032.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:24vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235040.vue b/.history/src/views/login/LoginPage_20240422235040.vue
new file mode 100644
index 0000000..6bdbe31
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235040.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20vh;
+		left:28vw;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235134.vue b/.history/src/views/login/LoginPage_20240422235134.vue
new file mode 100644
index 0000000..f4d6776
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235134.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:40%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235258.vue b/.history/src/views/login/LoginPage_20240422235258.vue
new file mode 100644
index 0000000..041e1dc
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235258.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:calc(20vh);
+		left:calc(28vh);
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235303.vue b/.history/src/views/login/LoginPage_20240422235303.vue
new file mode 100644
index 0000000..4bf9424
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235303.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:calc(20vh);
+		left:calc(28vw);
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235314.vue b/.history/src/views/login/LoginPage_20240422235314.vue
new file mode 100644
index 0000000..455f914
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235314.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:calc(20vh);
+		left:calc(30vw);
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235532.vue b/.history/src/views/login/LoginPage_20240422235532.vue
new file mode 100644
index 0000000..e0ca0cb
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235532.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:0;
+		left:0;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235545.vue b/.history/src/views/login/LoginPage_20240422235545.vue
new file mode 100644
index 0000000..6e732e6
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235545.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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{
+		display: block;
+    position:absolute;
+		height:660px;
+    width:850px;
+    top:0;
+		left:0;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235602.vue b/.history/src/views/login/LoginPage_20240422235602.vue
new file mode 100644
index 0000000..2bb7cf0
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235602.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:0;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235611.vue b/.history/src/views/login/LoginPage_20240422235611.vue
new file mode 100644
index 0000000..1bc48e3
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235611.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:30%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235617.vue b/.history/src/views/login/LoginPage_20240422235617.vue
new file mode 100644
index 0000000..9cb4e18
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235617.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:40%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235625.vue b/.history/src/views/login/LoginPage_20240422235625.vue
new file mode 100644
index 0000000..6853f99
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235625.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:38%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235634.vue b/.history/src/views/login/LoginPage_20240422235634.vue
new file mode 100644
index 0000000..7f6f1e9
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235634.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:39%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235645.vue b/.history/src/views/login/LoginPage_20240422235645.vue
new file mode 100644
index 0000000..35f8a0c
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235645.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		bottom: 20%;
+		left:39%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235720.vue b/.history/src/views/login/LoginPage_20240422235720.vue
new file mode 100644
index 0000000..4be8391
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235720.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative
+  }
+	.login_form{
+    position:absolute;
+		height:660px;
+    width:850px;
+    top:20%;
+		bottom: 20%;
+		left:39%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235744.vue b/.history/src/views/login/LoginPage_20240422235744.vue
new file mode 100644
index 0000000..a07a8f2
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235744.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed
+		height:660px;
+    width:850px;
+    top:20%;
+		bottom: 20%;
+		left:39%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235752.vue b/.history/src/views/login/LoginPage_20240422235752.vue
new file mode 100644
index 0000000..ab7eadc
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235752.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		bottom: 20%;
+		left:39%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235803.vue b/.history/src/views/login/LoginPage_20240422235803.vue
new file mode 100644
index 0000000..413373f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235803.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:30%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240422235808.vue b/.history/src/views/login/LoginPage_20240422235808.vue
new file mode 100644
index 0000000..ec50058
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240422235808.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423000032.vue b/.history/src/views/login/LoginPage_20240423000032.vue
new file mode 100644
index 0000000..85a02db
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423000032.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:18%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423000057.vue b/.history/src/views/login/LoginPage_20240423000057.vue
new file mode 100644
index 0000000..f6761cc
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423000057.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:20%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423000115.vue b/.history/src/views/login/LoginPage_20240423000115.vue
new file mode 100644
index 0000000..ba87ea8
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423000115.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:15%;
+		left:25%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423000158.vue b/.history/src/views/login/LoginPage_20240423000158.vue
new file mode 100644
index 0000000..ec50058
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423000158.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423000300.vue b/.history/src/views/login/LoginPage_20240423000300.vue
new file mode 100644
index 0000000..615179f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423000300.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:25%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423000313.vue b/.history/src/views/login/LoginPage_20240423000313.vue
new file mode 100644
index 0000000..9364dc2
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423000313.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:23%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001035.vue b/.history/src/views/login/LoginPage_20240423001035.vue
new file mode 100644
index 0000000..615179f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001035.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:25%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001039.vue b/.history/src/views/login/LoginPage_20240423001039.vue
new file mode 100644
index 0000000..ec50058
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001039.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001200.vue b/.history/src/views/login/LoginPage_20240423001200.vue
new file mode 100644
index 0000000..f35bdf6
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001200.vue
@@ -0,0 +1,349 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.login_form{
+    position:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001214.vue b/.history/src/views/login/LoginPage_20240423001214.vue
new file mode 100644
index 0000000..01c666e
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001214.vue
@@ -0,0 +1,352 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+
+	}
+	.login_form{
+    
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001226.vue b/.history/src/views/login/LoginPage_20240423001226.vue
new file mode 100644
index 0000000..34f4e50
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001226.vue
@@ -0,0 +1,356 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:30%;
+    right: 30%;
+    bottom: 30%;
+    left: 30%;
+	}
+	.login_form{
+    
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001244.vue b/.history/src/views/login/LoginPage_20240423001244.vue
new file mode 100644
index 0000000..baaf023
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001244.vue
@@ -0,0 +1,356 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:30%;
+    right: 30%;
+    bottom: 20%;
+    left: 30%;
+	}
+	.login_form{
+    
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001246.vue b/.history/src/views/login/LoginPage_20240423001246.vue
new file mode 100644
index 0000000..97f03be
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001246.vue
@@ -0,0 +1,356 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:30%;
+    right: 30%;
+    bottom: 50%;
+    left: 30%;
+	}
+	.login_form{
+    
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001257.vue b/.history/src/views/login/LoginPage_20240423001257.vue
new file mode 100644
index 0000000..59f3c20
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001257.vue
@@ -0,0 +1,354 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:20%;
+    left: 30%;
+	}
+	.login_form{
+    
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001327.vue b/.history/src/views/login/LoginPage_20240423001327.vue
new file mode 100644
index 0000000..1b7d889
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001327.vue
@@ -0,0 +1,351 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:20%;
+    left: 30%;
+	}
+	.login_form{   
+		height:660px;
+    width:850px;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001342.vue b/.history/src/views/login/LoginPage_20240423001342.vue
new file mode 100644
index 0000000..472afd9
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001342.vue
@@ -0,0 +1,351 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:20%;
+    left: 28%;
+	}
+	.login_form{   
+		height:660px;
+    width:850px;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001346.vue b/.history/src/views/login/LoginPage_20240423001346.vue
new file mode 100644
index 0000000..e94bda6
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001346.vue
@@ -0,0 +1,351 @@
+<template>
+	<div class="login_container">
+		<div class="main">
+				<a-form>
+					<a-row>
+						<a-col :xs="0"></a-col>
+						<a-col :xs="17">
+							<a-form 
+							class="login_form"     
+							ref="loginRef">
+							<a-row>
+								<a-col :flex="11">
+									<!-- 二维码部分 -->
+									<a-form-item>
+										<p id="scanTitle">微信扫码登录</p>
+									</a-form-item>
+									<a-form-item>
+										<a-space direction="vertical" align="center">
+											<a-qrcode :value="text" 
+											icon="src\assets\icons\schisandra.svg"
+											:size="220"
+											/>
+										</a-space>
+									</a-form-item>
+									<!-- 提示部分 -->
+									<a-form-item>
+										<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+											<template #icon>
+												<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+											</template>
+										</a-alert>
+									</a-form-item>
+								</a-col>
+								<a-col  :flex="1">
+									<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+								</a-col>
+								<a-col :flex="12">
+									
+								<!-- 主标题 -->
+									<a-form-item>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+											<svg-icon icon-class="corner_markers" >
+											</svg-icon>				
+										</a>
+										<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+											<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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>
+	</div>
+</template>
+
+<script setup lang="ts">
+ import { ref,h } from 'vue';
+
+const text=ref('')
+
+
+import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
+import { MenuProps } from 'ant-design-vue';
+// 配置切换菜单
+const current = ref<string[]>(['mail']);
+const items = ref<MenuProps['items']>([
+  {
+    key: 'mail',
+    icon: () => h(UserOutlined),
+    label: '账户登录',
+    title: '账户登录',
+  },
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '短信登录',
+    title: '短信登录',
+  },
+])
+
+const currentRegister = ref<string[]>(['app']);
+const itemRegister= ref<MenuProps['items']>([
+  {
+    key: 'app',
+    icon: () => h(MobileOutlined),
+    label: '手机号注册',
+    title: '手机号注册',
+  },
+])
+
+let status=ref(true)
+let checked=ref(false)
+let show=ref(true)
+// 配置切换菜单函数
+let changeWay=ref((items)=>{
+	if(items.item.originItemValue.label==='短信登录') return show.value=false
+	else return show.value=true
+})
+
+//配置登录注册函数
+let taggle=ref(()=>{
+	status.value=!status.value
+})
+</script>
+
+<style scoped lang="less">
+	.login_container{
+  width: 100%;
+  height: 100vh;
+  background: url('src/assets/images/background.png');
+  background-size: cover;
+	overflow: auto;
+  }
+	.main{
+		position: absolute;
+    top:20%;
+    left: 29%;
+	}
+	.login_form{   
+		height:660px;
+    width:850px;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001457.vue b/.history/src/views/login/LoginPage_20240423001457.vue
new file mode 100644
index 0000000..ec50058
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001457.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001541.vue b/.history/src/views/login/LoginPage_20240423001541.vue
new file mode 100644
index 0000000..c630e78
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001541.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: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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: absolute;
+    top: 0; bottom:0; left: 0; right:0;
+    width: 50%; height: 50%;
+    margin: auto;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001550.vue b/.history/src/views/login/LoginPage_20240423001550.vue
new file mode 100644
index 0000000..ec50058
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001550.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001749.vue b/.history/src/views/login/LoginPage_20240423001749.vue
new file mode 100644
index 0000000..04f2bc5
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001749.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:20%;
+		left:28%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001810.vue b/.history/src/views/login/LoginPage_20240423001810.vue
new file mode 100644
index 0000000..f018d45
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001810.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001937.vue b/.history/src/views/login/LoginPage_20240423001937.vue
new file mode 100644
index 0000000..8ad5de2
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001937.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:40vh;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001941.vue b/.history/src/views/login/LoginPage_20240423001941.vue
new file mode 100644
index 0000000..eacdef9
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001941.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:80vh;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001946.vue b/.history/src/views/login/LoginPage_20240423001946.vue
new file mode 100644
index 0000000..4b11a04
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001946.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:70vh;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423001948.vue b/.history/src/views/login/LoginPage_20240423001948.vue
new file mode 100644
index 0000000..eacdef9
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423001948.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:80vh;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002007.vue b/.history/src/views/login/LoginPage_20240423002007.vue
new file mode 100644
index 0000000..f018d45
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002007.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002257.vue b/.history/src/views/login/LoginPage_20240423002257.vue
new file mode 100644
index 0000000..669555f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002257.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+  }
+	.login_form{
+    position:absolute;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002301.vue b/.history/src/views/login/LoginPage_20240423002301.vue
new file mode 100644
index 0000000..eefe03f
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002301.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+  }
+	.login_form{
+    position:absolute;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		// transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002314.vue b/.history/src/views/login/LoginPage_20240423002314.vue
new file mode 100644
index 0000000..43ed747
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002314.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+  }
+	.login_form{
+    position:absolute;
+		height:660px;
+    width:850px;
+    top:0;
+		left:0;
+		// transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002359.vue b/.history/src/views/login/LoginPage_20240423002359.vue
new file mode 100644
index 0000000..8bc2c80
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002359.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+	padding-top: 50%
+  }
+	.login_form{
+    position:absolute;
+		height:660px;
+    width:850px;
+    top:0;
+		left:0;
+		// transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002414.vue b/.history/src/views/login/LoginPage_20240423002414.vue
new file mode 100644
index 0000000..c924348
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002414.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+	padding-top: 50%
+  }
+	.login_form{
+    position:absolute;
+		height:50%;
+    width:50%;
+    top:0;
+		left:0;
+		// transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002430.vue b/.history/src/views/login/LoginPage_20240423002430.vue
new file mode 100644
index 0000000..7f761b3
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002430.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+	padding-top: 50%
+  }
+	.login_form{
+    position:absolute;
+		height:10%;
+    width:100%;
+    top:0;
+		left:0;
+		// transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002446.vue b/.history/src/views/login/LoginPage_20240423002446.vue
new file mode 100644
index 0000000..d4055d8
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002446.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+  }
+	.login_form{
+    position:abso;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002449.vue b/.history/src/views/login/LoginPage_20240423002449.vue
new file mode 100644
index 0000000..d15df29
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002449.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+  }
+	.login_form{
+    position:fixed;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002610.vue b/.history/src/views/login/LoginPage_20240423002610.vue
new file mode 100644
index 0000000..efbcdc1
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002610.vue
@@ -0,0 +1,352 @@
+<template>
+	<div class="login_container">
+		<a-form>
+			<a-row>
+				<a-col :xs="0"></a-col>
+				<a-col :xs="17">
+					<a-form 
+					class="login_form"     
+					ref="loginRef">
+					<a-row>
+						<a-col :flex="11">
+							<!-- 二维码部分 -->
+							<a-form-item>
+								<p id="scanTitle">微信扫码登录</p>
+							</a-form-item>
+							<a-form-item>
+								<a-space direction="vertical" align="center">
+									<a-qrcode :value="text" 
+									icon="src\assets\icons\schisandra.svg"
+									:size="220"
+									/>
+								</a-space>
+							</a-form-item>
+							<!-- 提示部分 -->
+							<a-form-item>
+								<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
+									<template #icon>
+										<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
+									</template>
+								</a-alert>
+							</a-form-item>
+						</a-col>
+						<a-col  :flex="1">
+							<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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;
+	position: relative;
+  }
+	.login_form{
+    position:fixed;
+		height:660px;
+    width:850px;
+    top:0;
+		left:0;
+		right: 0;
+		bottom: 0;
+		// transform: translate(-50%, -50%);
+		// margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/login/LoginPage_20240423002634.vue b/.history/src/views/login/LoginPage_20240423002634.vue
new file mode 100644
index 0000000..f018d45
--- /dev/null
+++ b/.history/src/views/login/LoginPage_20240423002634.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: 600px;" dashed/>
+						</a-col>
+						<a-col :flex="12">
+							
+						<!-- 主标题 -->
+							<a-form-item>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
+									<svg-icon icon-class="corner_markers" >
+									</svg-icon>				
+								</a>
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
+									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&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:fixed;
+		height:660px;
+    width:850px;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
+    background:#fff;
+    background-size: cover;
+    padding: 40px;
+		opacity: 1;
+	}
+  h1{
+      color: white;
+      font-size: 40px;
+  }
+  h2{
+      color: white;
+      font-size: 20px;
+      margin:20px 0 ;
+  }
+	.btn{
+      width: 100%;    
+  }
+	#scanTitle{
+		font-size: 30px;
+		margin-top: 60px;
+		margin-bottom: 5px;
+	}
+	#alert{
+		text-align: left;
+		width: 80%;
+		font-size: 16px;
+		height: 90px;
+		margin-left: 30px;
+		margin-top:5px;
+		padding: 7px;
+	}
+	#title{
+		text-align:left;
+		display: inline-block;
+		font-size: 35px;
+		margin: 0
+	}
+	.title{
+		margin: 0;
+		width:280px
+	}
+	#extra{
+		margin: 0;
+		width: 300px;
+		text-align: center;
+		color:rgb(189, 186, 187);
+		font-size: 15px;
+	}
+	#menu{
+		text-align:center;
+		width: 300px;
+		background-color:#fff;
+		margin: 0 px;
+	}
+	#other{
+		margin-bottom: 0
+	}
+	#icons a{
+		vertical-align:auto;
+		display: inline-block;
+		height: 40px;
+		width: 40px;
+		border-radius: 100%;
+		border:1px solid rgba(228, 226, 223,0.8);
+		margin: 0 10px;
+	}
+
+</style>
\ No newline at end of file
diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
index 4eb537a..11cfc09 100644
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -37,12 +37,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">
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
 									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&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">
+								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
 									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&nbsp录</span>
 									<svg-icon icon-class="corner_markers" ></svg-icon>
 								</a>
@@ -272,11 +272,13 @@ let taggle=ref(()=>{
 	overflow: auto;
   }
 	.login_form{
-    position: relative;
+    position:fixed;
 		height:660px;
     width:850px;
-    top:200px;
-		left: 40%;
+    top:50%;
+		left:50%;
+		transform: translate(-50%, -50%);
+		margin: 0 auto;
     background:#fff;
     background-size: cover;
     padding: 40px;