<template>
  <div class="aboutUs">
    <div class="section sec1 about-one">
      <div class="banner">
        <img src="../../assets/images/aboutus/about_banner.jpg">
      </div>
      <div class="title">
        <img src="../../assets/images/aboutus/title_01.png">
      </div>
      <div class="block">
        <ul>
          <li class="box">
            <div class="text text1">
              <p>
                品类：
                <span>10000+</span>
              </p>
              <p>
                品牌：
                <span>5000+</span>
              </p>
              <p>
                SKU：
                <span>3000w+</span>
              </p>
              <p>
                合作供应商：
                <span>5500+</span>
              </p>
            </div>
          </li>
          <li class="box">
            <div class="text text2">
              <p>原厂代理</p>
              <p>分销授权</p>
              <p>品质可溯</p>
              <p>售后无忧</p>
            </div>
          </li>
          <li class="box">
            <div class="text text3">
              <p>同类产品</p>
              <p>市价更低</p>
              <p>优选物料</p>
              <p>省钱省力</p>
            </div>
          </li>
          <li class="box">
            <div class="text text4">
              <p>一键下单</p>
              <p>极速采购</p>
              <p>自营现货</p>
              <p>当天即发</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="one-tips" v-if="aboutdata.profile" v-html="aboutdata.profile.content">
  
    </div>
    <div class="section sec2 about-two">
      <img src="../../assets/images/aboutus/title_02.png">
      <img src="../../assets/images/aboutus/jg_02.png">
    </div>
    <div class="section sec3 about-three">
      <div class="title">
        <img src="../../assets/images/aboutus/title_03.png">
      </div>
      <div class="block three-box">
        <van-swipe :loop="false" @change="onChange">
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_03.jpg">
              <p>
                <i :class="current == 0 ?'active-item-i':''"></i>
                <span>深圳市电子商会常务理事单位</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_01.jpg">
              <p>
                <i :class="current == 1 ?'active-item-i':''"></i>
                <span>
                  2017中国农业银行
                  <br>国际业务战略合作伙伴
                </span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_02.jpg">
              <p>
                <i :class="current == 2 ?'active-item-i':''"></i>
                <span>
                  深圳市龙岗区
                  <br>电子行业联合会第一届理事会
                </span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_04.jpg">
              <p>
                <i :class="current == 3 ?'active-item-i':''"></i>
                <span>高新技术企业</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_05.jpg">
              <p>
                <i :class="current == 4 ?'active-item-i':''"></i>
                <span>深圳市高新技术企业</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_06.jpg">
              <p>
                <i :class="current == 5 ?'active-item-i':''"></i>
                <span>
                  2017年度中国
                  <br>电子元器件分销商卓越表现奖
                </span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_07.jpg">
              <p>
                <i :class="current == 6 ?'active-item-i':''"></i>
                <span>2017中国B2B百强企业</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_08.jpg">
              <p>
                <i :class="current == 7 ?'active-item-i':''"></i>
                <span>
                  2016中国电子商务
                  <br>应用发展年会B2B投资风云奖
                </span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_09.jpg">
              <p>
                <i :class="current == 8 ?'active-item-i':''"></i>
                <span>
                  深圳市电子商会
                  <br>第四届理事会常务理事单位
                </span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_10.jpg">
              <p>
                <i :class="current == 9 ?'active-item-i':''"></i>
                <span>深圳市软件行业协会会员单位</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_11.jpg">
              <p>
                <i :class="current == 10 ?'active-item-i':''"></i>
                <span>2016中国B2B百名创业新锐</span>
              </p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swiper-item">
              <img src="../../assets/images/aboutus/three_12.jpg">
              <p>
                <i :class="current == 11 ?'active-item-i':''"></i>
                <span>深圳市软件行业协会会员单位</span>
              </p>
            </div>
          </van-swipe-item>
          <div class="custom-indicator" slot="indicator">
            <div :class="{'indicator-item':true,'indicator-active':current==k}" v-for="(v,k) in 12"></div>
          </div>
        </van-swipe>
      </div>
    </div>
    <div class="section sec4 about-four">
      <div class="title">
        <img src="../../assets/images/aboutus/title_04.png">
      </div>
      <div class="block">
        <dl class="box-01">
          <dd></dd>
        </dl>
        <dl class="box-02"></dl>
        <dl class="box-03"></dl>
        <dl class="box-04"></dl>
      </div>
    </div>
    <div class="section sec5 about-five">
      <div class="title">
        <img src="../../assets/images/aboutus/title_05.png">
      </div>
      <div class="block">
        <dl class="box-1">
          <dt>
            <img src="../../assets/images/aboutus/about_five_01.jpg">
          </dt>
          <dd>
            <img src="../../assets/images/aboutus/about_five_1.png">
          </dd>
        </dl>
        <dl class="box-2">
          <dt>
            <img src="../../assets/images/aboutus/about_five_02.jpg">
          </dt>
          <dd>
            <img src="../../assets/images/aboutus/about_five_2.png">
          </dd>
        </dl>
        <dl class="box-3">
          <dt>
            <img src="../../assets/images/aboutus/about_five_03.jpg">
          </dt>
          <dd>
            <img src="../../assets/images/aboutus/about_five_3.png">
          </dd>
        </dl>
      </div>
    </div>
    <div class="section sec6 about-six">
      <p>随时了解优惠讯息</p>
      <a v-if="aboutdata.page_bottom_link" :href="aboutdata.page_bottom_link?(aboutdata.page_bottom_link.url):'/v3/activity/newreg.html'"  :target="aboutdata.page_bottom_link&&aboutdata.page_bottom_link['window_open']>0?'_blank':'_self'">{{aboutdata.page_bottom_link.content||""}}</a>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";
import { mapState } from "vuex";
export default {
  name: "aboutUs",
  components: {
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem
  },
  data() {
    return {
      current: 0
    };
  },
  created() {
    this.$store.dispatch({
      type: "getAboutUsData"
    });
  },
  computed: {
    ...mapState({
      loading: state => state.aboutus.loading,
      aboutdata: state => state.aboutus.aboutdata
    })
  },
  methods: {
    onChange(index) {
      let self = this;
      setTimeout(() => {
        self.current = index;
      }, 300);
    }
  }
};
</script>
<style lang="scss">
@function remFun($rem) {
  @return $rem * 50/37.5;
}
.aboutUs {
  .about-one {
    background: url(../../assets/images/aboutus/about_one_01.png) no-repeat
      remFun(3.75rem) remFun(7.2rem);
    padding-bottom: remFun(1.2rem);
    background-size: remFun(3.15rem) remFun(4.15rem);
    .banner {
      width: 100%;
      img {
        width: 100%;
        display: block;
      }
    }
    .title {
      height: remFun(1.71rem);
      padding: 0 remFun(0.2rem);
      img {
        height: 100%;
        margin-top: remFun(-0.82rem);
      }
    }
    .block {
      height: remFun(4.97rem);
      background: url(../../assets/images/aboutus/about_one.jpg) no-repeat;
      background-size: 100% 100%;
      ul {
        width: remFun(5.94rem);
        height: remFun(3.66rem);
        padding-top: remFun(0.1rem);
        padding-left: remFun(0.48rem);
        position: relative;
        left: 50%;
        top: 16.9%;
        margin-left: remFun(-2.97rem);
        background: url(../../assets/images/aboutus/about_one_bg.png) no-repeat;
        background-size: 100% 100%;
        li {
          width: remFun(2.7rem);
          height: remFun(1.64rem);
          float: left;
          position: relative;
          .text {
            position: absolute;
            z-index: 2;
            margin-top: remFun(0.2rem);
            &.text1 {
              right: remFun(0.15rem);
              bottom: remFun(0.1rem);
              text-align: right;
            }
            &.text2 {
              left: remFun(0.15rem);
              bottom: remFun(0.1rem);
            }
            &.text3 {
              right: remFun(0.2rem);
              top: 0;
            }
            &.text4 {
              left: remFun(0.2rem);
              top: 0;
            }
            p {
              font-size: remFun(0.2rem);
              line-height: remFun(0.34rem);
              font-family: "微软雅黑";
              color: #fff;
            }
          }
        }
      }
    }
  }
  .one-tips{
    color:#333;
    font-size: 16px;
    line-height: 24px;
    padding:20px;
    margin-bottom: 20px;
    p,div,span,font,strong,b,strong{font-size: 16px!important;}
  }
  .about-two {
    padding-top: remFun(0.2rem);
    img {
      width: 100%;
    }
  }
  .about-three {
    padding-top: 44px;
    background: url(../../assets/images/aboutus/about_three.png) no-repeat left
      remFun(2.07rem);
    background-size: remFun(5.07rem) remFun(8.28rem);
    padding-bottom: remFun(2.2rem);
    .title {
      height: remFun(1.72rem);
      padding-left: remFun(1.88rem);
      img {
        height: 100%;
        display: block;
      }
    }
    .block {
      margin-top: remFun(-0.43rem);
      .van-swipe {
        padding: remFun(1.39rem) 0 remFun(0.8rem) 0;
        .van-swipe-item {
          .swiper-item {
            background: #333333;
            padding: 0 remFun(0.94rem);
            height: remFun(4.2rem);
            position: relative;
            img {
              height: 100%;
              width: 100%;
            }
            p {
              text-align: right;
              padding: remFun(0.52rem) remFun(0.2rem) 0 remFun(0.2rem);
              top: remFun(-1.38rem);
              left: remFun(2.22rem);
              position: absolute;
              color: #fff;
              font-weight: bold;
              font-size: remFun(0.22rem);
              z-index: 60;
              width: remFun(4.8rem);
              height: remFun(1.3rem);
              background: #107cca;
              box-sizing: border-box;
              i {
                opacity: 0;
                transition: 0.3s ease-out;
                position: absolute;
                left: 0;
                top: 0;
                display: block;
                width: remFun(1.12rem);
                height: remFun(0.42rem);
                background: url(../../assets/images/aboutus/title_033.jpg)
                  no-repeat 0 bottom;
                background-size: 100% 100%;
                &.active-item-i {
                  opacity: 1;
                }
              }
              span {
                font-size: remFun(0.26rem);
              }
            }
          }
        }
      }
      .custom-indicator {
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
        background: none;
        .indicator-item {
          display: inline-block;
          width: 6px;
          height: 6px;
          margin: 1px 6px;
          cursor: pointer;
          border-radius: 50%;
          background: #999999;
          &.indicator-active {
            background: #1080d0;
            width: remFun(0.24rem);
            border-radius: remFun(0.12rem);
          }
        }
      }
    }
  }
  .about-four {
    background: url(../../assets/images/aboutus/about_four.png) no-repeat
      remFun(2.68rem) remFun(6.5rem);
    background-size: remFun(4.57rem) remFun(9rem);
    padding-bottom: remFun(2.97rem);
    .title {
      height: remFun(1.72rem);
      padding-left: remFun(0.3rem);
      img {
        height: 100%;
        display: block;
      }
    }
    .block {
      margin-top: remFun(-0.63rem);
      position: relative;
      z-index: 2;
      dl {
        height: remFun(2.8rem);
        margin-bottom: remFun(0.2rem);
        background: #107cca;
        dd {
          height: remFun(2.8rem);
        }
        &.box-01 {
          background: url(../../assets/images/aboutus/a.jpg) no-repeat;
          background-size: cover;
          width: 100%;
          dd {
            text-align: left;
            padding-left: remFun(0.15rem);
            padding-top: remFun(1.2rem);
            background: url(../../assets/images/aboutus/title_044.png) no-repeat
              remFun(0.3rem) 0;
            background-size: remFun(1.37rem);
          }
        }
        &.box-02 {
          background: url(../../assets/images/aboutus/b.jpg) no-repeat;
          background-size: cover;
          width: 100%;
        }
        &.box-03 {
          background: url(../../assets/images/aboutus/c.jpg) no-repeat;
          background-size: cover;
          width: 100%;
        }
        &.box-04 {
          background: url(../../assets/images/aboutus/d.jpg) no-repeat;
          background-size: cover;
          width: 100%;
        }
      }
    }
  }
  .about-five {
    .title {
      height: remFun(2.04rem);
      padding-left: remFun(0.3rem);
      position: relative;
      z-index: 2;
      img {
        height: 100%;
        display: block;
      }
    }
    .block {
      margin-top: remFun(-0.83rem);
      dl {
        position: relative;
        &.box-1 {
          height: remFun(3.29rem);
          margin-bottom: remFun(0.88rem);
          dt {
            img {
              width: 100%;
            }
          }
          dd {
            width: remFun(5.78rem);
            position: absolute;
            right: 0;
            bottom: remFun(-0.58rem);
            img {
              width: remFun(5.78rem);
            }
          }
        }
        &.box-2 {
          height: remFun(3.31rem);
          margin-bottom: remFun(1.41rem);
          dt {
            img {
              width: remFun(3.86rem);
            }
          }
          dd {
            width: remFun(3.86rem);
            position: absolute;
            right: remFun(0.5rem);
            top: remFun(0.44rem);
            img {
              width: remFun(3.86rem);
            }
          }
        }
        &.box-3 {
          height: remFun(5.68rem);
          dt {
            img {
              width: 100%;
            }
          }
          dd {
            width: remFun(6.7rem);
            position: absolute;
            left: 0;
            top: remFun(-1.1rem);
            img {
              width: remFun(6.7rem);
            }
          }
        }
      }
    }
  }
  .about-six {
    text-align: center;
    padding: remFun(1rem) 0;
    p {
      font-size: remFun(0.34rem);
      color: #666666;
      padding-bottom: remFun(0.8rem);
    }
    a {
      font-size: remFun(0.44rem);
      color: #1080d0;
      text-decoration: underline;
    }
  }
}
</style>