<template>
  <div class="about-page">
    <div class="joshine-about-banner">
      <div class="about-joshine">ABOUT JOSHINE</div>
      <img src="~@/assets/about/03.jpg" />
    </div>
    <div class="joshine-history">
      <img src="~@/assets/about/01.jpg" />
      <div class="joshine-history-wrapper">
        <div class="joshine-history-center">
          <div class="progress">发展历程</div>
          <div class="progress-line"></div>
          <div class="history-wrapper">
            <div
              class="singleHistory"
              v-for="(item, index) in history"
              :key="index"
            >
              <div class="timeLine">{{ item.time }}</div>
              <div class="description">{{ item.des }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="joshine-achivement">
      <div class="joshine-achivement-wrapper">
        <div class="joshine-achivement-title underline-title">发展成果</div>
        <div class="joshine-achivement-slides">
          <Swiper ref="swiper">
            <SwiperSlide>
              <div class="joshine-prize-wrapper">
                <ElRow class="prize-info" :gutter="30">
                  <ElCol class="price-item" :span="8"
                    ><img src="~@/assets/about/04.png"
                  /></ElCol>
                  <ElCol class="price-item" :span="8"
                    ><img src="~@/assets/about/05.png"
                  /></ElCol>
                  <ElCol class="price-item" :span="8"
                    ><img src="~@/assets/about/08.jpg"
                  /></ElCol>
                  <ElCol class="price-item" :span="12"
                    ><img src="~@/assets/about/06.jpg"
                  /></ElCol>
                  <ElCol class="price-item" :span="12"
                    ><img src="~@/assets/about/07.jpg"
                  /></ElCol>
                </ElRow>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div
                class="joshine-prize-wrapper"
                style="filter: grayscale(1) blur(4px)"
              >
                <ElRow class="prize-info" :gutter="30">
                  <ElCol class="price-item" :span="8"
                    ><img src="~@/assets/about/04.png"
                  /></ElCol>
                  <ElCol class="price-item" :span="8"
                    ><img src="~@/assets/about/05.png"
                  /></ElCol>
                  <ElCol class="price-item" :span="8"
                    ><img src="~@/assets/about/08.jpg"
                  /></ElCol>
                  <ElCol class="price-item" :span="12"
                    ><img src="~@/assets/about/06.jpg"
                  /></ElCol>
                  <ElCol class="price-item" :span="12"
                    ><img src="~@/assets/about/07.jpg"
                  /></ElCol>
                </ElRow>
              </div>
            </SwiperSlide>
          </Swiper>
          <a
            class="slides-switcher slides-switcher-prev icon-arrow-left"
            href="javascript:;"
            @click="slideJump(-1)"
          ></a>
          <a
            class="slides-switcher slides-switcher-next icon-arrow-left"
            href="javascript:;"
            @click="slideJump(1)"
          ></a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'AboutPage',
  components: { Swiper, SwiperSlide },
  data() {
    return {
      history: [
        {
          time: 2022,
          des: 'Q3拥有自己的品牌站，获得meta官方授权AA账户，公司主营产品类目进入业内TOP3，公司现有员工150人',
        },
        {
          time: 2021,
          des: '疫情中屹立不倒，自主研发的跨境电商综合服务平台获业内同行高度认可',
        },
        {
          time: 2020,
          des: '公司业绩爆发式增长，公司规模持续扩张',
        },
        {
          time: 2019,
          des: '致力于DTC品牌出海战略，并实现某一单品类业界TOP2',
        },
        {
          time: 2018,
          des: '锁定新市场大力扩张，高峰期日销万件商品',
        },
        {
          time: 2017,
          des: '完成A轮数千万级别融资，定位于“跨境快时尚互联网公司',
        },
        {
          time: 2016,
          des: '融资扩张获得业内机构投资',
        },
        {
          time: 2015,
          des: '晶闪科技（JOSHINE）成立',
        },
      ],
    }
  },
  computed: {
    swiper() {
      return this.$refs.swiper.$swiper
    },
  },
  methods: {
    slideJump(delta) {
      let index = (this.swiper.activeIndex + delta) % this.swiper.slides.length
      if (index < 0) {
        index += this.swiper.slides.length
      }
      this.swiper.slideTo(index, 600)
    },
  },
}
</script>
<style lang="scss" scoped>
.joshine-about-banner {
  font-size: 0px;
  position: relative;
}

.about-joshine {
  position: absolute;
  font-size: 48px;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.joshine-history {
  width: 100%;
  height: 45vw;
  position: relative;
}

.joshine-history img {
  width: 100%;
  height: 100%;
}

.joshine-about-banner img {
  width: 100%;
}

.joshine-history-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  margin: 0 auto;
}

.history-wrapper {
  flex: 1;
  overflow: hidden auto;
  padding-bottom: 40px;
}

.joshine-history-center {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.progress {
  font-size: 38px;
  font-weight: 500;
  color: #e28e39;
  padding-top: 30px;
}

.progress-line {
  width: 70px;
  height: 3px;
  background: #f08917;
  margin: 20px 0;
}

.historyWrapper {
  overflow: auto;
  height: 600px;
}

.singleHistory:not(:first-child) {
  margin-top: 32px;
}

.timeLine {
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}

.description {
  color: #e28e39;
  font-weight: 500;
  font-family: lantingzh;
  line-height: 27px;
  font-size: 18px;
}

.joshine-achivement {
  background: url('../../assets/about/02.jpg') no-repeat 50%;
  background-size: cover;
}

.joshine-achivement-title {
  font-size: 38px;
  padding-top: 30px;
  color: #fff;
  margin-bottom: 20px;
}

.joshine-achivement-wrapper {
  width: 80%;
  margin: 0 auto;
}

.price-item {
  margin-bottom: 30px;

  img {
    width: 100%;
  }
}

.joshine-achivement-slides {
  position: relative;
}

.slides-switcher {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 40px;
  height: 40px;

  &:not(:last-child) {
    margin-right: 8px;
  }
}

.slides-switcher-prev {
  left: -100px;
}

.slides-switcher-next {
  transform: rotate(180deg);
  right: -100px;
}
</style>
