lightlimx-website/components/EmailFooter/index.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>