mini页面
This commit is contained in:
李志鹏
@@ -13,17 +13,10 @@
|
||||
</section>
|
||||
<section class="introduce">
|
||||
<div class="box" v-custom-animation.once="{ duration: '1.25s' }">
|
||||
<h2 class="title">
|
||||
Best-in-class Precise Fashion Attribute and Colour Recognition System
|
||||
</h2>
|
||||
<p class="tip" translate-y-s="100%" opacity-s="0">
|
||||
Mixi is an AI-based fine-grained fashion attribute and colour recognition tool
|
||||
that can be used for both online shopping platforms and bricks and mortar
|
||||
stores. Mixi allows the customer to easily find fashion items that possess
|
||||
his/her preferred fashion attributes and colours.
|
||||
</p>
|
||||
<h2 class="title">{{ $t('Mixi.IntroduceTitle') }}</h2>
|
||||
<p class="tip" translate-y-s="100%" opacity-s="0">{{ $t('Mixi.IntroduceDesc') }}</p>
|
||||
<button custom @click="scrollToJoin" translate-y-s="100%" opacity-s="0">
|
||||
CONTACT US
|
||||
{{ $t('MainHeader.ContactUs') }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@@ -36,11 +29,66 @@
|
||||
<span class="iconfont icon-bofang"></span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="key-features">
|
||||
<div class="left" v-custom-animation.scroll="{ duration: '1s' }">
|
||||
<img
|
||||
src="@/assets/images/mixi/mixi_intro_01_bg.png"
|
||||
alt=""
|
||||
class="bg"
|
||||
translate-x="-60"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/mixi/mixi_intro_01_panel.png"
|
||||
alt=""
|
||||
class="panel"
|
||||
translate-y-s="30"
|
||||
translate-y="-30"
|
||||
/>
|
||||
</div>
|
||||
<div class="right" v-custom-animation.once="{ duration: '1.5s' }">
|
||||
<h2 class="title" translate-y-s="30" opacity-s="0">{{ $t('Mixi.KeyFeatures') }}</h2>
|
||||
<ul translate-y-s="50" opacity-s="0">
|
||||
<li>{{ $t('Mixi.KeyFeaturesDesc1') }}</li>
|
||||
<li>{{ $t('Mixi.KeyFeaturesDesc2') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="industry">
|
||||
<div class="content">
|
||||
<h2
|
||||
class="title"
|
||||
v-custom-animation.once="{ duration: '1s' }"
|
||||
translate-y-s="30"
|
||||
opacity-s="0"
|
||||
>
|
||||
{{ $t('Mixi.BenefitsToIndustry') }}
|
||||
</h2>
|
||||
<div class="box" v-custom-animation.once="{ duration: '1s' }">
|
||||
<div opacity-s="0" translate-x-s="150%">
|
||||
<img src="@/assets/images/mixi/feature-1.png" alt="" />
|
||||
<div class="text">{{ $t('Mixi.Industry1Text') }}</div>
|
||||
</div>
|
||||
<div opacity-s="0" translate-x-s="50%">
|
||||
<img src="@/assets/images/mixi/feature-2.png" alt="" />
|
||||
<div class="text">{{ $t('Mixi.Industry2Text') }}</div>
|
||||
</div>
|
||||
<div opacity-s="0" translate-x-s="-50%">
|
||||
<img src="@/assets/images/mixi/feature-3.png" alt="" />
|
||||
<div class="text">{{ $t('Mixi.Industry3Text') }}</div>
|
||||
</div>
|
||||
<div opacity-s="0" translate-x-s="-150%">
|
||||
<img src="@/assets/images/mixi/feature-4.png" alt="" />
|
||||
<div class="text">{{ $t('Mixi.Industry4Text') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="email-input" ref="joinRef">
|
||||
<img src="@/assets/images/mixi/intro-bg.jpg" alt="" />
|
||||
<EmailBox
|
||||
@submit="submit"
|
||||
:title="$t('Interested in Mixi?')"
|
||||
:tip="$t('We will contact you for customized plan.')"
|
||||
:title="$t('Mixi.EmailInputTitle')"
|
||||
:tip="$t('Mixi.EmailInputTip')"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
@@ -169,10 +217,107 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .key-features {
|
||||
padding: 100px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> div {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
max-width: 720px;
|
||||
}
|
||||
> .left {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .bg {
|
||||
max-width: 500px;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
}
|
||||
> .panel {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 100px;
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
> .title {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
line-height: 48px;
|
||||
color: #222222;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
> ul {
|
||||
> li {
|
||||
text-align: start;
|
||||
font-family: 'Poppins', Sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .industry {
|
||||
padding: 100px 0;
|
||||
> .content {
|
||||
max-width: 1230px;
|
||||
margin: 0 auto;
|
||||
> .title {
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
color: #222222;
|
||||
font-size: 44px;
|
||||
font-weight: 600;
|
||||
line-height: 56px;
|
||||
}
|
||||
> .box {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
> div {
|
||||
flex: 1;
|
||||
padding: 25px 30px;
|
||||
max-width: 720px;
|
||||
text-align: center;
|
||||
> img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
> .text {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 24px;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .email-input {
|
||||
padding: 100px;
|
||||
position: relative;
|
||||
padding-bottom: 250px;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 500px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
> .email-box {
|
||||
max-width: 860px;
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user