179 lines
3.9 KiB
Vue
179 lines
3.9 KiB
Vue
<template>
|
|
<div class="section-limit" >
|
|
<div class="section-limit-h5-wrap">
|
|
<!-- <ball class="b-ball"></ball>-->
|
|
<!-- <svg-icon icon-class="hstart" ></svg-icon>-->
|
|
<img v-lazy="'/images/hstart.png'" class="section-limit-start b-ball" alt="">
|
|
<div class="section-limit-div">
|
|
<h1 class="section-limit-title wow fadeInDown" >
|
|
<span>We are LightLimX</span>
|
|
<!-- <svg-icon icon-class="start" class="section-limit-title-img"></svg-icon>-->
|
|
</h1>
|
|
<div class="section-limit-c">
|
|
<p class="section-limit-title-desc wow fadeInDownBig">
|
|
We Make The
|
|
<br/>Impossible Possible.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="section-limit-flower-wrap wow fadeInDownBig">
|
|
<svg-icon icon-class="hstart" class="section-limit-start c-ball"></svg-icon>
|
|
</div>
|
|
<!-- <div class="section-limit-flower-wrap wow fadeInDown">-->
|
|
<!-- <svg-icon icon-class="flower"></svg-icon>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {assetsUri} from '~/utils/index.js'
|
|
export default {
|
|
name: "SectionLimitX",
|
|
data(){
|
|
return {
|
|
assetsUri
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.section-limit{
|
|
width: 100%;
|
|
height: 100%;
|
|
/*min-height: 100vh;*/
|
|
box-sizing: border-box;
|
|
padding-top: .96rem;
|
|
&-div{
|
|
margin-right: .16rem;
|
|
}
|
|
&-start{
|
|
}
|
|
&-flower-wrap{
|
|
margin-top: 1rem;
|
|
.svg-icon{
|
|
width: 8.95rem;
|
|
height: 6.59rem;
|
|
}
|
|
}
|
|
.b-ball{
|
|
display: none;
|
|
}
|
|
.c-ball{
|
|
/*transform: scale(2.2);*/
|
|
}
|
|
&-c{
|
|
padding-top: 1.1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
&-h5-wrap{
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
/*overflow: hidden;*/
|
|
}
|
|
&-title{
|
|
padding-top: 1.05rem;
|
|
font-size: 1.10rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
&-img{
|
|
display: block;
|
|
width: 3.29rem;
|
|
height: 2.42rem;
|
|
margin-left: -.88rem;
|
|
}
|
|
>span{
|
|
font-size: .68rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: 1.31rem;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
word-break: keep-all;
|
|
}
|
|
&-desc{
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
margin-top: 0;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
font-size: .44rem;
|
|
font-family: Manrope;
|
|
line-height: .72rem;
|
|
}
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px){
|
|
.section-limit{
|
|
padding-top: .88rem;
|
|
&-c{
|
|
padding-top: .57rem;
|
|
justify-content: center;
|
|
}
|
|
.b-ball{
|
|
display: block;
|
|
}
|
|
&-flower-wrap{
|
|
.c-ball{
|
|
display: none;
|
|
}
|
|
}
|
|
&-h5-wrap{
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
padding-top: .78rem;
|
|
flex-direction: column;
|
|
.b-ball{
|
|
width: calc( 7.49rem - .3rem);
|
|
height: 5.51rem;
|
|
margin: 0 auto;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
&-flower-wrap{
|
|
margin-top: .77rem;
|
|
.svg-icon{
|
|
width: 1.57rem;
|
|
height: .2rem;
|
|
}
|
|
}
|
|
&-title{
|
|
padding-top: 1.03rem;
|
|
font-size: .62rem;
|
|
color: #FFFFFF;
|
|
&-img{
|
|
width: 2.32rem;
|
|
height: 1.64rem;
|
|
margin-left: -.6rem;
|
|
}
|
|
>span{
|
|
font-size: .6rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: 1.31rem;
|
|
color: #FFFFFF;
|
|
}
|
|
&-desc{
|
|
margin-top: 0;
|
|
text-align: center;
|
|
font-size: .42rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .68rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|