174 lines
4.0 KiB
Vue
174 lines
4.0 KiB
Vue
<template>
|
|
<div class="email-footer">
|
|
<h1 class="situation-h1">info@lightlimx.com</h1>
|
|
<span class="situation-tips">Email us to connect</span>
|
|
<ul class="situation-ul">
|
|
<li class="situation-li wow fadeInUp" data-wow-delay=".5s" @click="handleLink('https://t.me/lightlimx')">
|
|
<div class="situation-li-d">
|
|
<img class="situation-li-img" v-lazy="assetsUri('images/tw.png')" alt="">
|
|
<span class="situation-li-s">Twitter</span>
|
|
</div>
|
|
<p class="situation-li-p">Follow our latest news on Twitter</p>
|
|
</li> <li class="situation-li wow fadeInUp" data-wow-delay=".5s" @click="handleLink('https://twitter.com/LimXCapital')">
|
|
<div class="situation-li-d">
|
|
<img class="situation-li-img" v-lazy="assetsUri('images/te.png')" alt="">
|
|
<span class="situation-li-s">Telegram</span>
|
|
</div>
|
|
<p class="situation-li-p">Subscribe to our Telegram Channel</p>
|
|
</li> <li class="situation-li wow fadeInUp" data-wow-delay=".5s" @click="handleLink('https://medium.com/@lightlimx')">
|
|
<div class="situation-li-d">
|
|
<img class="situation-li-img" v-lazy="assetsUri('images/me.png')" alt="">
|
|
<span class="situation-li-s">Medium</span>
|
|
</div>
|
|
<p class="situation-li-p">Browse our content on Medium</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
assetsUri
|
|
} from "../../utils";
|
|
|
|
export default {
|
|
name: "EmailFooter",
|
|
data(){
|
|
return {
|
|
assetsUri
|
|
}
|
|
},
|
|
methods:{
|
|
handleLink(link){
|
|
if(!link){
|
|
return
|
|
}
|
|
window.location.href=link
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.situation{
|
|
&-h1,&-tips{
|
|
text-align: center;
|
|
}
|
|
&-h1{
|
|
margin-top: 1.28rem;
|
|
font-size: .68rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #302D2C;
|
|
cursor: pointer;
|
|
&:hover{
|
|
/*text-shadow: 0 0 .05rem #FF0000, 0 0 .05rem #6bf403;*/
|
|
text-stroke:1px #F49F00;
|
|
-webkit-text-stroke:1px #F49F00;
|
|
color: #Fff;
|
|
}
|
|
}
|
|
&-ul{
|
|
margin-top: 1rem;
|
|
padding-bottom: 1.48rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
&-li{
|
|
margin-bottom: .3rem;
|
|
cursor: pointer;
|
|
width: 3.46rem;
|
|
height: 1.86rem;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: .56rem;
|
|
box-sizing: border-box;
|
|
transition: all .3s ease-in;
|
|
&-d{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
&-img{
|
|
display: block;
|
|
width: .36rem;
|
|
height: .36rem;
|
|
margin-right: .12rem;
|
|
}
|
|
&-s{
|
|
font-size: .18rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
color: #302D2C;
|
|
}
|
|
&-p{
|
|
margin-top: .1rem;
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
color: #302D2C;
|
|
}
|
|
&:hover{
|
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
|
border-radius:.1rem;
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
&-tips{
|
|
display: block;
|
|
margin-top: .35rem;
|
|
font-size: .24rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .48rem;
|
|
color: #302D2C;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.situation{
|
|
&-h1{
|
|
margin-top: 1.49rem;
|
|
font-size: .6rem;
|
|
line-height: .62rem;
|
|
}
|
|
&-ul{
|
|
margin-top: .49rem;
|
|
padding-bottom: 1.01rem;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
&-li{
|
|
margin-bottom: .3rem;
|
|
width: 6.90rem;
|
|
height: 2.60rem;
|
|
padding-left: .6rem;
|
|
&-img{
|
|
width: .86rem;
|
|
height: .86rem;
|
|
margin-right: .29rem;
|
|
}
|
|
&-s{
|
|
font-size: .43rem;
|
|
}
|
|
&-p{
|
|
margin-top: .21rem;
|
|
font-size: .3rem;
|
|
}
|
|
&:hover{
|
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
|
border-radius:.1rem;
|
|
}
|
|
}
|
|
&-tips{
|
|
margin-top: .2rem;
|
|
font-size: .3rem;
|
|
line-height: .48rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|