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

123123

Browse Source
This commit is contained in:
李志鹏
2025-10-10 17:01:13 +08:00
parent 1c359ca057
commit 31cf5ad135
6 changed files with 123 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/views/Workshop/customize/home.vue
View File

@@ -5,7 +5,24 @@
<div class="home">
<div class="title">Customize your Look!</div>
<p class="tip">Refine your Look</p>
<div class="input-box">
<div class="help">?</div>
<input type="text" placeholder="Try: “Change background to Tokyo City”" />
<div class="send"><SvgIcon name="send" size="48" /></div>
</div>
<div class="card">
<img src="@/assets/images/workshop/posture/posture_1.png" />
<div class="select-box">
<div class="icon"><SvgIcon name="history" size="35" /></div>
<div class="label">History</div>
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
</div>
<div class="icons">
<div><SvgIcon name="noLike" size="35" /></div>
<div></div>
<div><SvgIcon name="download" size="35" /></div>
</div>
</div>
</div>
</template>
@@ -29,5 +46,96 @@
font-size: 3.74rem;
line-height: 124%;
}
> .input-box {
margin-top: 7.3rem;
width: 87.5rem;
height: 8.3rem;
border-radius: 0.5rem;
border: 0.4rem solid #000000;
box-sizing: content-box;
display: flex;
align-items: center;
> .help {
margin: 0 2.5rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
border: 0.3rem solid #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
> input {
width: 0;
flex: 1;
height: 100%;
font-family: satoshiRegular;
font-size: 3.4rem;
color: #000;
border: none;
&::placeholder {
color: #777;
}
}
> .send {
margin: 0 2.5rem;
--svg-icon-color: #000;
}
}
> .card {
margin-top: 6.9rem;
width: 79.8rem;
height: 107.4rem;
border-radius: 2rem;
box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
overflow: hidden;
> * {
position: absolute;
}
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
> .select-box {
top: 1.8rem;
left: 1.8rem;
width: 30.2rem;
height: 6.52rem;
border-radius: 0.91rem;
border: 0.24rem solid #000;
display: flex;
align-items: center;
>.icon{
margin: 0 1.8rem;
}
>.label{
flex: 1;
font-family: satoshiRegular;
font-size: 2.97rem;
color: #000;
}
}
> .icons {
bottom: 0.27rem;
right: 0;
height: 10rem;
display: flex;
align-items: center;
justify-content: center;
> div {
margin-right: 1.5rem;
width: 6.2rem;
height: 6.2rem;
border-radius: 1rem;
border: 0.2rem solid #000;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
</style>