移动端适配

src/pages/my-account/account-info.vue

@@ -111,5 +111,16 @@
 		> .content {
 			flex: 1;
 		}
+		@media (max-width: 800px) {
+			flex-direction: column;
+			> .left {
+				width: 100%;
+				border: none;
+				margin-bottom: 20px;
+				>.info{
+					text-align: center;
+				}
+			}
+		}
 	}
 </style>

src/pages/my-account/css/style.css

@@ -16,11 +16,19 @@
 .register > form > * {
   margin-bottom: 20px;
 }
+.login > form .link,
+.register > form .link {
+  color: #222;
+}
 .login > form > .form-item,
 .register > form > .form-item {
   display: flex;
   flex-direction: column;
 }
+.login > form > .form-item.center,
+.register > form > .form-item.center {
+  align-items: center;
+}
 .login > form > .form-item > label,
 .register > form > .form-item > label {
   margin-bottom: 5px;
@@ -87,7 +95,6 @@
 .login > form > .remember > .link,
 .register > form > .remember > .link {
   margin-left: auto;
-  color: #222;
 }
 .login > form > .subscribe,
 .register > form > .subscribe {

src/pages/my-account/index.vue

@@ -48,7 +48,7 @@
 		> .content {
 			max-width: 1200px;
 			margin: 0 auto;
-			padding-bottom: 80px;
+			padding: 0 15px 80px;
 			display: flex;
 			align-items: flex-start;
 			gap: 60px;
@@ -57,5 +57,14 @@
 			}
 			animation: opacity-in 0.3s linear both;
 		}
+		@media (max-width: 800px) {
+			> .content {
+				flex-direction: column;
+				gap: 30px;
+				> * {
+					width: 100%;
+				}
+			}
+		}
 	}
 </style>

src/pages/my-account/less/style.less

@@ -17,10 +17,19 @@
 			margin-bottom: 20px;
 		}
 
+		.link {
+			color: #222;
+
+		}
+
 		>.form-item {
 			display: flex;
 			flex-direction: column;
 
+			&.center {
+				align-items: center;
+			}
+
 			>label {
 				margin-bottom: 5px;
 				font-size: 16px;
@@ -83,7 +92,6 @@
 
 			>.link {
 				margin-left: auto;
-				color: #222;
 			}
 
 		}

src/pages/my-account/login.vue

@@ -26,20 +26,26 @@
 			<div class="remember">
 				<input type="checkbox" id="remember" name="remember" v-model="remember" />
 				<label for="remember">Remember me</label>
-				<router-link class="link" to="/my-account/lost-password"
+				<router-link class="link" to="/my-account/lost-password" v-show="windowWidth > 800"
 					>Lost your password?</router-link
 				>
 			</div>
 			<button type="submit" custom>LOG IN</button>
+			<div class="form-item center">
+				<router-link class="link" to="/my-account/lost-password" v-show="windowWidth <= 800"
+					>Lost your password?</router-link
+				>
+			</div>
 		</form>
 	</div>
 </template>
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, computed } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	const globalStore = useGlobalStore()
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
+	const windowWidth = computed(() => globalStore.state.windowWidth)
 	const passShow = ref(false)
 	const remember = ref(false)
 	const fromData = ref({