<template>
    <section class="layout-footer">
      <div class="layout-footer-h5-wrap">
        <div class="layout-footer-d">
          <div class="layout-footer-d-l">
            <div class="layout-footer-d-l-l-w">
              <svg-icon icon-class="footerLogo"></svg-icon>
            </div>
            <p>© 2022 LightLimX Ventures Management Co Ltd. All Rights Reserved.</p>
          </div>
          <ul class="layout-footer-d-r">
            <li class="layout-footer-d-r-i" v-for="item in tabs" :key="item.name" @click="handleClick(item)">{{item.title}}</li>
          </ul>
        </div>
      </div>
    </section>
</template>

<script>
  import {footerLink} from "~/assets/js/static";

  export default {
    name: "MyFooter",
    mounted(){

    },
    methods:{
      handleClick(item){
        if(item.name==='innovation'){
          return;
        }
        if(item.type==='href'){
          if(item.link&&this.$route.path!==item.link){
            this.$router.push({path:'/#'+item.name})
            return;
          }
          document.getElementById(item.name).scrollIntoView();
          // console.log(document.getElementById(item.name))
          return
        }
        this.$router.push({path:'/'+item.name})
      }
    },
       data(){
          return {
            tabs:[
              ...footerLink
            ]
          }
       }
    }
</script>

<style scoped lang="less">
.layout-footer{
  background: #292727;
  min-height: 2.33rem;
  &-h5-wrap{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  &-d{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    &-r{
      padding-top: .64rem;
      padding-bottom: .4rem;
      display: flex;
      flex-wrap: wrap;
      &-i{
        font-size: .14rem;
        font-family: Manrope;
        font-weight: bold;
        color: #9B9B9B;
        width: 25%;
        margin-bottom: .24rem;
        cursor: pointer;
        &:active{
          color: #fff;
        }
      }
    }
    &-l{
      &-l-w{
        padding-bottom: .17rem;
        .svg-icon{
          width: 1.54rem;
          height: .26rem;
        }

      }
      >p{
        font-size: .12rem;
        font-family: Manrope;
        font-weight: 400;
        color: #9B9B9B;
      }
    }
  }

}
  @media screen and (max-width: 768px) {
    .layout-footer{
      &-h5-wrap{
      }
      &-d{
        flex-direction: column;
        height: 100%;
        width: 100%;
        &-r{
          align-self: flex-start;
          padding-top: .98rem;
          padding-bottom: .37rem;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          box-sizing: border-box;
          &-i{
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            font-size: .24rem;
            font-weight: bold;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: .3rem;
            height: .33rem;
            line-height: .33rem;
            padding-left: .15rem;
            &:active{
              color: #fff;
            }
          }
        }
        &-l{
          padding-top: .5rem;
          &-l-w{
            padding-bottom: .3rem;
            text-align: center;
            .svg-icon{
              width: 3rem;
              height: .5rem;
            }

          }
          >p{
            text-align: center;
            max-width: 4.5rem;
            font-size: .24rem;
          }
        }
      }

    }
  }
</style>
