76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<template>
|
|
<section class="section-index bgw">
|
|
<img src="@/assets/images/home/bg.jpg" class="bg" />
|
|
<div class="shade-1"></div>
|
|
<div class="shade-2"></div>
|
|
<div class="content">
|
|
<div class="title">Windswept Burden</div>
|
|
<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
|
|
<button custom>View More</button>
|
|
<div class="aida-logo"><img src="@/assets/images/aida-logo.png" /></div>
|
|
<p class="tip">
|
|
What you wear is how you present yourself to the world, especially today, when human
|
|
contacts are so quick. Fashion is instant language
|
|
</p>
|
|
<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.section-index {
|
|
> .shade-1 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 96rem;
|
|
height: 100%;
|
|
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
|
|
}
|
|
> .shade-2 {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 30rem;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
|
|
}
|
|
> .content {
|
|
top: 16rem;
|
|
left: 9rem;
|
|
color: #fff;
|
|
> .title {
|
|
font-family: KaiseiOpti-Bold;
|
|
font-size: 6rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
> div.tip {
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 3.2rem;
|
|
line-height: 4.3rem;
|
|
}
|
|
> button {
|
|
margin-top: 11.6rem;
|
|
margin-bottom: 13.9rem;
|
|
}
|
|
> .aida-logo {
|
|
margin-bottom: 3rem;
|
|
> img {
|
|
width: auto;
|
|
height: 5rem;
|
|
}
|
|
}
|
|
> p.tip {
|
|
font-family: KaiseiOpti-Regular;
|
|
font-size: 1.2rem;
|
|
line-height: 2rem;
|
|
color: #ededed;
|
|
}
|
|
}
|
|
}
|
|
</style>
|