From 483b78ada20298b968c82312e085f458159a5627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Tue, 21 Apr 2026 10:46:36 +0800
Subject: [PATCH] home

---
 src/views/home/section-footer.vue | 147 ++++++++++++++++++++++++++++--
 1 file changed, 141 insertions(+), 6 deletions(-)

diff --git a/src/views/home/section-footer.vue b/src/views/home/section-footer.vue
index b15b15d..6605cc8 100644
--- a/src/views/home/section-footer.vue
+++ b/src/views/home/section-footer.vue
@@ -1,8 +1,54 @@
 <template>
 	<section class="section-footer">
-		<img class="logo" src="@/assets/images/logos/code-create-black.png" />
-		<img class="logo" src="@/assets/images/logos/stylish-arade-black.png" />
-		<img class="logo" src="@/assets/images/logos/aida-black.png" />
+		<div class="content">
+			<div class="mate">
+				<div class="logos">
+					<img src="@/assets/images/logos/code-create-black.png" />
+					<img src="@/assets/images/logos/stylish-arade-black.png" />
+					<img src="@/assets/images/logos/aida-black.png" />
+				</div>
+				<div class="tip">
+					Stylish Parade is a commerce platform for designers, serving as AiDA's commercial
+					extension.
+				</div>
+				<div class="link">
+					<span class="text">Bloom your Creativity with AiDA!</span>
+					<span class="icon"><svg-icon name="arrow_right" size="12" /></span>
+				</div>
+			</div>
+			<div class="help">
+				<div class="title">HELP</div>
+				<div class="item">FAQ</div>
+				<div class="item">My Account</div>
+				<div class="item">My Orders</div>
+				<div class="item">Payment and Invoices</div>
+				<div class="item">Copyright Licence</div>
+			</div>
+			<div class="polices">
+				<div class="title">POLICES</div>
+				<div class="item">Legal</div>
+				<div class="item">Privacy Policy</div>
+				<div class="item">Cookies Settings</div>
+				<div class="item">Purchase Conditions</div>
+			</div>
+			<div class="company">
+				<div class="title">COMPANY</div>
+				<div class="item">About us</div>
+				<div class="item">Offices</div>
+				<div class="item">Join with us</div>
+			</div>
+		</div>
+		<div class="footer">
+			<div class="left">© Code-Create 2026</div>
+			<div class="right">
+				<img src="@/assets/images/icons/xiaohongshu.png" />
+				<img src="@/assets/images/icons/linkedin.png" />
+				<img src="@/assets/images/icons/instagram.png" />
+				<img src="@/assets/images/icons/facebook.png" />
+				<img src="@/assets/images/icons/douyin.png" />
+				<img src="@/assets/images/icons/wechat.png" />
+			</div>
+		</div>
 	</section>
 </template>
 
@@ -14,9 +60,98 @@
 	.section-footer {
 		background-color: #f6f6f6;
 		border-top: 0.1rem solid #232323;
-		> .logo {
-			width: auto;
-			height: 3rem;
+		> .content {
+			display: flex;
+			min-height: 37rem;
+			padding: 0 8rem;
+			border-bottom: 0.1rem solid #c4c4c4;
+			> div {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				padding: 3rem 2rem;
+				flex: 1;
+				border-right: 0.1rem solid #c4c4c4;
+				&:last-child {
+					border-right: none;
+				}
+			}
+			> .mate {
+				> .logos {
+					margin-bottom: 3rem;
+					display: flex;
+					gap: 2.9rem;
+					> img {
+						width: auto;
+						height: 3rem;
+					}
+				}
+				> .tip {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					line-height: 140%;
+					color: #585858;
+					margin-bottom: 4.4rem;
+				}
+				> .link {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					border-bottom: 0.1rem solid #232323;
+					user-select: none;
+					cursor: pointer;
+					> .text {
+						font-size: 1.4rem;
+						line-height: 120%;
+						color: #232323;
+						margin-right: 1rem;
+					}
+					> .icon {
+						width: 2.4rem;
+						height: 2.4rem;
+						transform: rotate(-45deg);
+					}
+				}
+			}
+			> .help,
+			> .polices,
+			> .company {
+				> .title {
+					font-family: KaiseiOpti-Bold;
+					font-size: 1.8rem;
+					color: #232323;
+					margin-bottom: 2.3rem;
+				}
+				> .item {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #585858;
+					margin-bottom: 0.6rem;
+					line-height: 2rem;
+					user-select: none;
+					cursor: pointer;
+				}
+			}
+		}
+		> .footer {
+			padding: 0 8rem;
+			height: 7rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			> .left {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.2rem;
+				color: #585858;
+			}
+			> .right {
+				display: flex;
+				> img {
+					width: 2rem;
+					height: 2rem;
+					margin-left: 1.6rem;
+				}
+			}
 		}
 	}
 </style>