style: 文案&样式修改
This commit is contained in:
@@ -3,7 +3,7 @@
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
title: { type: String, default: 'AI STYLING ASSISTANT' }
|
title: { type: String, default: 'STYLING ASSISTANT' }
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['clickReturn', 'clickProfile'])
|
const emit = defineEmits(['clickReturn', 'clickProfile'])
|
||||||
|
|||||||
@@ -300,7 +300,8 @@ const handleContinue = () => {
|
|||||||
border-radius: 0.7rem;
|
border-radius: 0.7rem;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
width: 24.6rem;
|
width: 24.6rem;
|
||||||
height: 5.9rem;
|
height: 6.7rem;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -213,6 +213,7 @@ const handleBack = (e?: Event) => {
|
|||||||
line-height: 8.3rem;
|
line-height: 8.3rem;
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
border: 0.2rem solid #fff;
|
border: 0.2rem solid #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -39,6 +39,7 @@
|
|||||||
<div class="tag-list short flex flex-justify-center">
|
<div class="tag-list short flex flex-justify-center">
|
||||||
<div
|
<div
|
||||||
class="tag-item"
|
class="tag-item"
|
||||||
|
:class="{ active: item === inputValue }"
|
||||||
v-for="item in tagListShort"
|
v-for="item in tagListShort"
|
||||||
:key="item"
|
:key="item"
|
||||||
@click="handleClickTag(item)"
|
@click="handleClickTag(item)"
|
||||||
@@ -50,6 +51,7 @@
|
|||||||
<div
|
<div
|
||||||
class="tag-item"
|
class="tag-item"
|
||||||
v-for="item in tagListLong"
|
v-for="item in tagListLong"
|
||||||
|
:class="{ active: item === inputValue }"
|
||||||
:key="item"
|
:key="item"
|
||||||
@click="handleClickTag(item)"
|
@click="handleClickTag(item)"
|
||||||
>
|
>
|
||||||
@@ -323,6 +325,9 @@ onUnmounted(() => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 4.6rem;
|
border-radius: 4.6rem;
|
||||||
padding: 0 2.15rem;
|
padding: 0 2.15rem;
|
||||||
|
&.active{
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,8 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">CHOOSE YOUR STYLIST</div>
|
<div class="title">Choose Stylist.</div>
|
||||||
|
<div class="sub-title">What style are you looking for? </div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="carousel-container" v-show="!showVideo">
|
<div class="carousel-container" v-show="!showVideo">
|
||||||
@@ -172,11 +173,15 @@ const handleContinue = () => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
.title {
|
.title {
|
||||||
font-size: 15rem;
|
font-size: 11rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'boskaRegular';
|
|
||||||
line-height: 96%;
|
line-height: 96%;
|
||||||
|
font-family: 'satoshiBold';
|
||||||
|
}
|
||||||
|
.sub-title{
|
||||||
|
font-family: 'satoshiRegular';
|
||||||
|
font-size: 4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -288,7 +293,7 @@ const handleContinue = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.continue-button {
|
.continue-button {
|
||||||
height: 5.9rem;
|
height: 6.7rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 6.4rem;
|
bottom: 6.4rem;
|
||||||
|
|||||||
@@ -55,13 +55,14 @@ const handleSelect = (value: string) => {
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
padding: 6rem 12.4rem 0 8.5rem;
|
padding: 6rem 12.4rem 0 8.5rem;
|
||||||
.text {
|
.text {
|
||||||
font-family: 'robotoBold';
|
font-family: 'satoshiBold';
|
||||||
font-size: 13rem;
|
font-weight: 700;
|
||||||
|
font-size: 11rem;
|
||||||
line-height: 106%;
|
line-height: 106%;
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
font-family: 'satoshiRegular';
|
font-family: 'satoshiRegular';
|
||||||
font-size: 6.4rem;
|
font-size: 4rem;
|
||||||
line-height: 132%;
|
line-height: 132%;
|
||||||
}
|
}
|
||||||
.select-list {
|
.select-list {
|
||||||
@@ -76,7 +77,7 @@ const handleSelect = (value: string) => {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: 'satoshiRegular';
|
font-family: 'satoshiRegular';
|
||||||
font-size: 4.8rem;
|
font-size: 4.8rem;
|
||||||
width: 29.7rem;
|
width: 35rem;
|
||||||
height: 8.3rem;
|
height: 8.3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user