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

页面调整

Browse Source
This commit is contained in:
X1627315083
2025-07-19 14:04:48 +08:00
parent 22ee9c6cf1
commit 4b694236ee
161 changed files with 2934 additions and 3979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/views/HomeRecommend.vue
View File

@@ -1,43 +1,6 @@
<template>
<div class="homeRecommend_max">
<div class="left">
<img src="@/assets/images/homePage/squareLeftImg.png" alt="">
<!-- <div class="comment">
<div class="item">
123123123123123123123123123123123123
<div>2312321</div>
</div>
<div class="item right">
1231231231231231231231231231231231233123123123
<div>2312321</div>
</div>
<div class="item">
1231231231231231231231231231231231233123123123
<div>2312321</div>
</div>
<div class="item right">
123123123123123123123123123123123123
<div>2312321</div>
</div>
<div class="item">
1231231231231231231231231231231231233123123123
<div>2312321</div>
</div>
<div class="item right">
123123123123123123123123123123123123
<div>2312321</div>
</div>
<div class="item">
1231231231231231231231231231231231233123123123
<div>2312321</div>
</div>
<div class="item right">
123123123123123123123123123123123123
<div>2312321</div>
</div>
</div> -->
</div>
<div class="right">
<div class="logoBox">
<img
class="aiDalogo"
@@ -48,18 +11,22 @@
</div>
<div class="text">
<div class="title">
Welcome to AiDA<br />
Bloom Your Creativity
<p style="font-weight: 700;">Welcome to AiDA</p>
<p style="font-weight: 500;">Bloom Your Creativity</p>
</div>
<div class="info">
Don't have an account? <span @click="signUp">Sign up</span> for free
</div>
<div class="continue gallery_btn gallery_btn_radius" @click="setLogin" style="min-width: 33rem;">
<div class="continue gallery_btn gallery_btn_radius" @click="setLogin" style="min-width: 14rem;">
Login
<!-- <i class="fi fi-rr-arrow-right"></i> -->
</div>
</div>
</div>
<div class="right">
<img class="model" src="@/assets/images/homePage/squareLeftImgModel.png" alt="">
<img class="text" src="@/assets/images/homePage/squareLeftImgText.png" alt="">
</div>
</div>
</template>
<script >
@@ -197,68 +164,23 @@ export default defineComponent({
width: 100%;
height: 100%;
display: flex;
font-family: Satoshi;
> .left,> .right{
height: 100%;
display: flex;
}
> .left{
width: 60%;
background: #232323;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
> .comment{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> .item{
padding: 2rem;
border-radius: 4rem;
font-size: 2rem;
background: #fff;
text-align: center;
width: auto;
position: relative;
margin: 1rem 0;
font-weight: 600;
&:nth-child(1){left: -10rem;}
&:nth-child(2){left: 15rem;}
&:nth-child(3){left: -15rem;}
&:nth-child(4){left: 10rem;}
> div{
position: absolute;
padding: 1.5rem;
border-radius: 4rem;
left: 1rem;
top: 0;
transform: translateY(-60%);
background: rgba(175, 175, 175,.6);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
&.right{
position: relative;
> div{
left: auto;
right: 1rem;
}
}
}
}
}
> .right{
width: 40%;
// width: 79rem;
width: 45%;
// position: absolute;
// right: 0;
align-items: center;
justify-content: center;
position: relative;
> .logoBox{
height: 4rem;
position: absolute;
right: 2rem;
left: 2rem;
top: 2rem;
img{
height: 100%;
@@ -269,16 +191,21 @@ export default defineComponent({
}
}
> .text{
width: 60rem;
width: 68rem;
> .title{
font-size: 4rem;
// font-size: 4rem;
font-size: 6.4rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 2rem;
margin-bottom: 3.2rem;
p{
margin-bottom: 0;
}
}
> .info{
font-size: 2rem;
margin-bottom: 4rem;
font-size: 2.4rem;
// margin-bottom: 4rem;
margin-bottom: 1.6rem;
line-height: 1.2;
> span{
color: #0070c9;
@@ -289,11 +216,33 @@ export default defineComponent({
}
}
> .continue{
font-size: 2.4rem;
> i{
margin-left: 1rem;
}
}
}
}
> .right{
// width: 58%;
position: relative;
width: 55%;
background: #d7d6d5;
display: flex;
align-items: center;
justify-content: flex-end;
> img{
object-fit: cover;
}
> .model{
height: 100%;
position: absolute;
left: 0;
}
> .text{
height: 45rem;
text-align: right;
}
}
}
</style>