<template>
  <el-row style="max-width: 1280px;margin: 0 auto;">
    <el-col v-if="webConfig.siteBanner">
      <el-carousel trigger="click" height="645px">
        <el-carousel-item v-for="(item, index) in webConfig.siteBanner" :key="index">
          <router-link :to="{path: item.target}">
            <img class="TT-banner" :src="item.url" alt="">
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </el-col>
    <el-col class="TT-core-funtion">
      <h2>核心功能</h2>
      <h3>CORE FUNTION</h3>
      <p>核心自定义功能，满足不同的店铺需求，多方式提升打造店铺！</p>
      <ul>
        <li v-for="(item, index) in coreFuntion" :key="index">
          <router-link :to="{name: item.name}">
            <img :src="item.icon" alt="">
            <p>{{ item.label }}</p>
          </router-link>
        </li>
      </ul>
    </el-col>
    <el-col class="TT-superiority">
      <h2>特色功能</h2>
      <h3>SUPERIORITY</h3>
      <p>商家多渠道打造爆款，提升店铺排名，销售才会来不停！</p>
      <ul>
        <li v-for="(item, index) in superiority" :key="index">
          <router-link :to="{name: item.name}">
            <img :src="item.icon" alt="">
            <p>{{ item.label }}</p>
          </router-link>
        </li>
      </ul>
      <router-link class="btn-register" :to="{name: 'register'}">立即注册</router-link>
    </el-col>
    <el-col class="TT-copyright">©2020 {{ webConfig.siteBeian }}</el-col>
  </el-row>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      coreFuntion: [
        {
          icon: require('../../../static/img/home/core_icon_0.png'),
          label: '竞品透析',
          name: 'toolsAnalyze'
        },
        {
          icon: require('../../../static/img/home/core_icon_1.png'),
          label: '旺旺透视',
          name: 'toolsCredit'
        },
        {
          icon: require('../../../static/img/home/core_icon_2.png'),
          label: '指数转换',
          name: 'toolsOnline'
        },
        {
          icon: require('../../../static/img/home/core_icon_3.png'),
          label: '价格走势',
          name: 'toolsPricetrend'
        },
        {
          icon: require('../../../static/img/home/core_icon_4.png'),
          label: '淘宝订单查询',
          name: 'toolsOrdersearch'
        },
        {
          icon: require('../../../static/img/home/core_icon_5.png'),
          label: '淘宝下拉框选词',
          name: 'toolsStarkeysearch'
        }
      ],
      superiority: [
        {
          icon: require('../../../static/img/home/superiority_icon_0.png'),
          label: '店铺信息查询',
          name: 'toolsShopinfo'
        },
        {
          icon: require('../../../static/img/home/superiority_icon_1.png'),
          label: '商品评论查询',
          name: 'toolsFeedback'
        },
        {
          icon: require('../../../static/img/home/superiority_icon_2.png'),
          label: '商品信息查询',
          name: 'toolsProductinfo'
        },
        {
          icon: require('../../../static/img/home/superiority_icon_3.png'),
          label: '商品问大家',
          name: 'toolsProductaskinfo'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      webConfig: state => state.common.webConfig
    })
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-col-24 {
  .el-carousel__indicators--horizontal {
    bottom: 10px;
  }
}

.TT-banner {
  display: block;
  width: 100%;
}

h2,
h3 {
  line-height: 43px;
  font-size: 31px;
}

h2 {
  color: #333;
}

h3 {
  font-weight: 400;
  color: #F0F0F0;
}

h3 + p {
  margin-top: 6px;
  font-size: 17px;
  color: #BBBBBB;
}

.TT-core-funtion {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 60px 0 43px;

  ul {
    display: flex;
    flex-flow: row wrap;
    width: 634px;
    margin-top: 26px;

    li {
      margin-left: 56px;
      margin-bottom: 17px;

      &:nth-of-type(3n+1) {
        margin-left: 0;
      }

      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 174px;
        height: 174px;
        border-radius: 50%;
        background: #F7F7F7;
        text-decoration: none;
      }

      img {
        width: 55px;
        height: 55px;
      }

      p {
        margin-top: 15px;
        line-height: 23px;
        font-size: 17px;
        color: #333;
      }
    }
  }
}

.TT-superiority {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 59px 0 77px;
  background: url("../../../static/img/home/footer.png") center top/100% 100% no-repeat;

  h2 {
    color: #fff;
  }

  ul {
    display: flex;
    margin-top: 74px;

    li {
      margin-left: 140px;

      &:nth-of-type(1) {
        margin-left: 0;
      }

      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
      }

      img {
        display: block;
        width: 74px;
        height: 74px;
      }

      p {
        margin-top: 16px;
        line-height: 23px;
        font-size: 17px;
        color: #fff;
      }
    }
  }

  .btn-register {
    width: 113px;
    height: 41px;
    margin-top: 74px;
    border-radius: 4px;
    line-height: 41px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #332C2B;
    background: #00EEFF;
  }
}

.TT-copyright {
  width: 100%;
  padding: 21px 0;
  line-height: 16px;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  color: #FFFFFF;
  background: #332C2B;
}
</style>

