<template>
  <footer id="footer" class="header middle_before box-shadow top">
    <router-link class="middle_before " v-for="(item,index) in menus" :key="index" :to="item.to">
      <zgh-touch-ripple>
        <div class="middle" :class="index==2?type:''">
          <i v-if="!item.icon" class="iconfont color3" v-html="item.iconfont"></i>
          <img v-else :src="item.icon" alt=""/>
          <span class="m-fs20 color3" v-if="item.name">{{item.name}}</span>
        </div>
      </zgh-touch-ripple>
    </router-link>
  </footer>
</template>


<script>
  import TouchRipple from '../TouchRipple/index'

  export default {
    name: "ZghFooter",
    components: {
      'zgh-touch-ripple': TouchRipple
    },
    props: {
      type: {
        type: String,
        default: ''
      },
      menus: {
        default() {
          return [{
            to: '/',
            name: '人脉圈',
            iconfont: '&#xe61f;',
          }, {
            to: '/',
            name: '活动',
            iconfont: '&#xe607;',

          }, {
            to: '',
            name: '活动',
            iconfont: '&#xe607;',
            icon: 'static/img/logo.png'
          }, {
            to: '/',
            name: '任务',
            iconfont: '&#xe645;',

          }, {
            to: '/',
            name: '我的',
            iconfont: '&#xe8f8;',
          }]
        }
      }
    },
    data() {
      return {}
    },
    mouted() {

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import url("../../assets/config.less");

  #footer .router-link-active.router-link-exact-active,
  .active {
    span, i {
      color: @common_cl !important;
    }
    i {
      font-size: 24px !important;
    }

  }

  #footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: @m-bottom;
    text-align: center;
    .m-fs(30);
    /*background: #fff;*/
    z-index: 999;
    &:before {
      z-index: 1;
    }
    a {
      background: #fff;
      display: block;
      width: 20%;
      float: left;
      height: @m-bottom;
      position: relative;
      .type1 {
        position: absolute;
        left: 50%;
        bottom: 0;
        @L: 50px;
        width: @L;
        height: @L;
        line-height: @L;
        margin-left: -@L/2;
        border-radius: 100%;
        background: #fff;
        text-align: center;
        img {
          @L: 34px;
          position: absolute;
          top: 50%;
          left: 50%;
          width: @L;
          height: @L;
          margin: -@L/2 0 0 -@L/2;
          z-index: 1;
        }
        &:before {
          content: '';
          display: block;
          width: 80%;
          height: 80%;
          background: @common_cl;
          position: absolute;
          top: 10%;
          left: 10%;
          border-radius: 100%;
          z-index: 0;
        }

      }
      .type2 {
        position: absolute;
        border-top: 1px solid #eee;
        box-shadow: 0 -1px 3px #ccc;
        left: 50%;
        bottom: 6px;
        @L: 62px;
        width: @L;
        height: @L;
        line-height: @L;
        margin-left: -@L/2;
        border-radius: 100%;
        background: #fff;
        text-align: center;
        z-index: 1;
        img {
          @L: 34px;
          position: absolute;
          top: 50%;
          left: 50%;
          width: @L;
          height: @L;
          margin: -@L/2 0 0 -@L/2;
          z-index: 1;
        }
        &:before {
          @w: 86%;
          content: '';
          display: block;
          width: @w;
          height: @w;
          background: @common_cl;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 100%;
          z-index: 0;
        }
      }
    }
    img {
      @L: 40;
      display: block;
      .m-w(@L);
      .m-h(@L);
      margin: 5px auto;
    }
    i {
      display: block;
      margin: 5px auto;
      font-size: 22px;
    }
    span {
      display: block;
      color: #000;
    }
  }
</style>
