优化

src/views/home/index.vue

@@ -28,6 +28,7 @@
 		> section {
 			width: 100%;
 			height: auto;
+			min-height: 50vw;
 		}
 		> section.bgw {
 			position: relative;
@@ -40,5 +41,8 @@
 				position: absolute;
 			}
 		}
+		> .section-footer {
+			min-height: 0;
+		}
 	}
 </style>

src/views/home/section-digital-items1.vue

@@ -78,6 +78,7 @@
 				> div {
 					padding: 1rem;
 					border: 0.1rem solid #979797;
+					background-color: #fff;
 					> img {
 						width: 27.4rem;
 						height: 34.6rem;

src/views/home/section-digital-items2.vue

@@ -1,6 +1,6 @@
 <template>
 	<section class="digital-items2 bgw">
-		<img src="@/assets/images/home/digital-items-1.jpg" class="bg" />
+		<img src="@/assets/images/home/digital-items-2.jpg" class="bg" />
 		<div class="content">
 			<div class="tip" v-html="$t('Home.DigitalItemsTip2')"></div>
 			<div class="list">
@@ -65,6 +65,7 @@
 				> div {
 					padding: 1rem;
 					border: 0.1rem solid #979797;
+					background-color: #fff;
 					> img {
 						width: 27.4rem;
 						height: 34.6rem;

src/views/login/password-tip.vue

@@ -7,13 +7,13 @@
 			</el-icon>
 			<span>{{ $t('Login.passwordLengthError', { min: 6, max: 20 }) }}</span>
 		</div>
-		<div>
+		<!-- <div>
 			<el-icon>
 				<CloseBold v-if="validateSpecial(value)" />
 				<Select v-else />
 			</el-icon>
 			<span>{{ $t('Login.passwordSpecial') }}</span>
-		</div>
+		</div> -->
 		<div>
 			<el-icon>
 				<CloseBold v-if="validateCase(value)" />
@@ -42,7 +42,7 @@
 		color: #fff;
 		font-size: 1.1rem;
 		padding: 1.5rem;
-		border-radius: 1.5rem;
+		// border-radius: 1.5rem;
 		line-height: normal;
 
 		> div {

src/views/login/tools.js

@@ -23,15 +23,15 @@ export const validateEmail = (rule, value, callback) => {
 export const validateLength = (v, min = 6, max = 20) => (v.length < 6 || v.length > 20);
 //检查特殊字符
 export const validateSpecial = (v) => (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(v));
-//检查大小写字母和数字
-export const validateCase = (v) => (!/[a-z]/.test(v) || !/[A-Z]/.test(v) || !/\d/.test(v));
+//检查字母和数字
+export const validateCase = (v) => (!/[A-z]/.test(v) || !/\d/.test(v));
 // 检查密码
 export const validatePass = (rule, value, callback) => {
 	var str = ''
 	if (validateLength(value)) {
 		str = t('Login.passwordLengthError', { min: 6, max: 20 })
-	} else if (validateSpecial(value)) {
-		str = t('Login.passwordSpecial')
+		// } else if (validateSpecial(value)) {
+		// 	str = t('Login.passwordSpecial')
 	} else if (validateCase(value)) {
 		str = t('Login.passwordCase')
 	}

src/views/main-header.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="main-header" id="main-header">
 		<div class="left">
-			<img class="logo" src="@/assets/images/logo.png" @click="onNavItemClick('/')" />
+			<img
+				class="logo"
+				src="@/assets/images/logo.png"
+				@click="onNavItemClick({ path: '/' })"
+			/>
 		</div>
 		<div class="center">
 			<div
@@ -14,7 +18,7 @@
 							? activePath === v.path
 							: new RegExp(`^${v.path}`).test(activePath)
 				}"
-				@click="onNavItemClick(v.path)"
+				@click="onNavItemClick(v)"
 			>
 				<span>{{ $t(v.name) }}</span>
 			</div>
@@ -25,7 +29,7 @@
 				v-for="v in navList2"
 				:key="v.path"
 				:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
-				@click="onNavItemClick(v.path)"
+				@click="onNavItemClick(v)"
 			>
 				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
 			</div>
@@ -129,10 +133,15 @@
 		{
 			icon: 'cart_0',
 			active_icon: 'cart_1',
-			path: '/shoppingCart'
+			path: '/shoppingCart',
+			login: true
 		}
 	])
-	const onNavItemClick = (path: string) => {
+	const onNavItemClick = (v: any) => {
+		const path = v.path
+		if (v.login && !userInfoStore.state.token) {
+			return onLogin()
+		}
 		if (path === activePath.value) return
 		router.push(path)
 	}

src/views/pay/payment.vue

@@ -23,12 +23,12 @@
 			</div>
 			<div class="title">
 				<span class="icon"><svg-icon name="card" size="20" /></span>
-				<span class="text">Pay with Paypal</span>
+				<span class="text">Pay with Stripe</span>
 			</div>
 			<template v-if="!query.paymentId">
 				<div class="tip">
-					You'll be redirected to a Paypal popup to log in and confirm. No card details
-					are shared with Stylish Parade — PayPal handles all payment security.
+					You'll be redirected to a Stripe popup to log in and confirm. No card details
+					are shared with Stylish Parade — Stripe handles all payment security.
 				</div>
 				<div class="buttons">
 					<button custom="black" @click="onPayWith">

src/views/shoppingCart/order-summary.vue

@@ -11,7 +11,7 @@
 			<span class="text">{{ $t('ShoppingCart.brands') }}</span>
 		</div>
 		<div class="brands-item" v-for="v in brandsList" :key="v.brand">
-			<span class="label">{{ v.brand }}</span>
+			<span class="label" @click="handleBrandClick(v.id)">{{ v.brand }}</span>
 			<span class="value"
 				><span>{{ v.children.length }}</span
 				>{{ $t('ShoppingCart.item') }}</span
@@ -51,6 +51,7 @@
 			if (index === -1) {
 				arr.push({
 					brand: v.brand,
+					id: v.sellerId,
 					children: [v]
 				})
 			} else {
@@ -68,6 +69,12 @@
 			query: { list }
 		})
 	}
+	const handleBrandClick = (id) => {
+		router.push({
+			name: 'brandDetail',
+			params: { id }
+		})
+	}
 </script>
 
 <style lang="less" scoped>
@@ -124,6 +131,8 @@
 			> .label {
 				text-decoration: underline;
 				color: #585858;
+				cursor: pointer;
+				user-select: none;
 			}
 			> .value {
 				color: #808080;

src/views/shoppingCart/sc-list.vue

@@ -319,6 +319,7 @@
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
+				margin-bottom: 2rem;
 				> .text {
 					font-family: KaiseiOpti-Bold;
 					font-size: var(--sc-list-title-font-size, 4rem);
@@ -420,7 +421,7 @@
 		}
 	}
 	.sc-list:deep(.el-select) {
-		width: 15rem;
+		width: 18rem;
 		--el-border-radius-base: 0;
 		--el-select-input-color: rgba(0, 0, 0, 0.5);
 		--el-select-input-font-size: 1rem;