aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home

Browse Source
This commit is contained in:
李志鹏
2026-04-21 10:46:36 +08:00
parent 135035795d
commit 483b78ada2
1 changed files with 141 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/views/home/section-footer.vue
View File

@@ -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>