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

View File

@@ -0,0 +1,3 @@
<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.78125 26.7244V30.6884C1.78125 31.7398 2.19964 32.748 2.94437 33.4914C3.6891 34.2348 4.69917 34.6525 5.75239 34.6525H29.5792C30.6324 34.6525 31.6425 34.2348 32.3872 33.4914C33.1319 32.748 33.5503 31.7398 33.5503 30.6884V26.7244M7.73795 14.8322L17.6658 24.7423M17.6658 24.7423L27.5936 14.8322M17.6658 24.7423V0.958008" stroke="black" stroke-width="1.9254" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 518 B

View File

@@ -0,0 +1,4 @@
<svg width="34" height="33" viewBox="0 0 34 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96387 16.8115C1.96387 19.7782 2.8436 22.6783 4.49182 25.1451C6.14004 27.6118 8.48272 29.5344 11.2236 30.6697C13.9645 31.805 16.9805 32.1021 19.8902 31.5233C22.7999 30.9445 25.4727 29.5159 27.5705 27.4181C29.6682 25.3203 31.0969 22.6476 31.6756 19.7379C32.2544 16.8282 31.9574 13.8122 30.8221 11.0713C29.6867 8.33038 27.7641 5.9877 25.2974 4.33948C22.8307 2.69126 19.9306 1.81152 16.9639 1.81152C12.7705 1.8273 8.74548 3.46356 5.73053 6.37819L1.96387 10.1449" stroke="black" stroke-width="2.28788" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.96387 1.81152V10.1449H10.2972M16.9639 8.47819V16.8115L23.6305 20.1448" stroke="black" stroke-width="2.28788" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 831 B

View File

@@ -0,0 +1,3 @@
<svg width="50" height="43" viewBox="0 0 50 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.0137 16.3477C48.4427 18.0966 48.4427 24.3653 44.0137 26.1143L9.67871 39.6719C5.26568 41.4142 0.98905 36.8733 2.99219 32.5723L8.12695 21.5478C8.22042 21.3471 8.22043 21.1148 8.12695 20.9141L2.99219 9.88965C0.989068 5.58859 5.26567 1.04766 9.67871 2.79004L44.0137 16.3477Z" stroke="black" stroke-width="4.5" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 448 B

View File

@@ -0,0 +1,3 @@
<svg width="25" height="14" viewBox="0 0 25 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.386 0.658606L24.3721 2.48086L13.7985 12.6729C13.6291 12.8372 13.4268 12.9684 13.2034 13.059C12.9799 13.1496 12.7396 13.1978 12.4964 13.2008C12.2532 13.2039 12.0118 13.1617 11.7862 13.0766C11.5605 12.9916 11.3551 12.8655 11.1816 12.7055L0.351626 2.7803L2.29175 0.910847L12.4566 10.2263L22.386 0.658606Z" fill="#737373"/>
</svg>

After

Width:  |  Height:  |  Size: 436 B

View File

@@ -17,7 +17,7 @@
<template>
<div class="header-title">
<div class="return" @click="handleClickReturn"><SvgIcon name="Return" size="34" /></div>
<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
<span class="title">{{ title }}</span>
</div>
</template>

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>