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

brand页面交互调整

Browse Source
This commit is contained in:
X1627315083@163.com
2026-05-11 16:16:59 +08:00
parent 87b071c319
commit b8c844363c
19 changed files with 624 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/views/collectionStory/index.vue
View File

@@ -28,24 +28,15 @@ const {} = toRefs(data);
</div>
<div class="title-content">
<div class="title-box">
<div class="left">
<div class="title">
Windswept Burden
</div>
<div class="info">
Publish Date: 24th Nov 2025
</div>
<div class="title">
We’re Seeking
</div>
<div class="right">
<div class="info">
“We are spiritual nomads carrying what wind cannot take. <br />
Inspired by those who knew home is not a place, but what you wear.”
</div>
<div class="info">
Fashion Voice Worth Featuring.
</div>
</div>
<div class="scrolling-learn-more">
<div>Scrolling Learn More</div>
<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
<div class="button">
<a href="mailto:info@code-create.com.hk">Contact Us if Interested</a>
</div>
</div>
</div>
@@ -73,7 +64,7 @@ const {} = toRefs(data);
display: flex;
align-items: center;
gap: .8rem;
color: #fff;
color: #000;
cursor: pointer;
> .text{
font-size: 2rem;
@@ -83,73 +74,46 @@ const {} = toRefs(data);
}
> .title-content{
width: 100%;
height: 63.2rem;
margin-top: 24.8rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
padding: 0 4rem;
> .title-box{
margin-top: 36.7rem;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
> .left{
font-family: 'KaiseiOpti-Bold';
font-weight: 700;
> .title{
font-size: 6rem;
line-height: 6rem;
}
> .info{
margin-top: 1.7rem;
font-size: 1.8rem;
line-height: 100%;
vertical-align: bottom;
}
}
> .right{
> .info{
font-weight: 500;
font-size: 1.8rem;
line-height: 100%;
text-align: right;
}
}
}
}
.scrolling-learn-more{
position: absolute;
bottom: 2.1rem;
left: 50%;
transform: translateX(-50%);
padding: 0 6.7rem;
margin-top: 11.5rem;
display: flex;
flex-direction: column;
color: #fff;
animation: scroll 3s linear infinite;
@keyframes scroll {
0% {
transform: translateY(0);
align-items: flex-start;
> .title-box{
display: flex;
flex-direction: column;
> .title{
font-size: 6.5rem;
line-height: 100%;
font-weight: 500;
color: #585858;
}
50% {
transform: translateY(-20%);
> .info{
font-size: 3rem;
font-weight: 500;
line-height: 100%;
color: #585858;
}
100% {
transform: translateY(0%);
}
> .button{
padding: 0 4.5rem;
line-height: 5.1rem;
background-color: #1B1B1B;
color: #fff;
margin-top: 4rem;
font-weight: 700;
font-size: 2rem;
letter-spacing: -0.4px;
cursor: pointer;
> a{
color: #fff;
text-decoration: none;
}
}
> div{
font-family: 'KaiseiOpti-Regular';
font-weight: 400;
font-size: 1.4rem;
line-height: 100%;
text-align: center;
margin-bottom: 1.5rem;
white-space: nowrap;
}
}
.banner{
width: 100%;
position: absolute;
z-index: -1;
}
}