<template>
  <div class="index-page">
    <div class="slides">
      <Swiper ref="swiper" :options="swiperOptions">
        <SwiperSlide v-for="(s, i) in slides" :key="i">
          <component
            :is="s.route ? 'router-link' : 'div'"
            class="slide-item"
            :title="s.title"
            :to="s.route"
          >
            <img class="slide-item-img" :src="s.img" :alt="s.title" />
          </component>
        </SwiperSlide>
      </Swiper>
      <div class="slides-switchers">
        <a
          class="slides-switcher slides-switcher-prev icon-arrow-left-gold"
          href="javascript:;"
          @click="slideJump(-1)"
        ></a>
        <a
          class="slides-switcher slides-switcher-next icon-arrow-left-gold"
          href="javascript:;"
          @click="slideJump(1)"
        ></a>
      </div>
    </div>

    <div class="intro-video-wrapper">
      <div class="intro-wrapper">
        <div class="intro-text">
          <h3 class="intro-title underline-title">晶闪介绍</h3>
          <h4 class="intro-sub-title">成为全球领先的跨境电商品牌集团</h4>
          <div class="intro-content">
            <p>
              西安晶闪网络科技有限公司成立于2015年，公司总部位于西安，主要致力于跨境电子商务领域，取名晶闪，晶致时尚，闪耀光芒。目前主要业务涵盖时装、美体、鞋装、泳衣等，并有自己的工厂和上百家合作的供应商。
            </p>
            <p>
              公司运营及客服部门设在西安市高新区，工厂和仓库设在广州番禺，涉及的外贸平台有速卖通，亚马逊，Facebook以及自建站等多个平台，晶闪聚集了一群有梦想、有朝气、有理想、有抱负的80、90敢拼敢打的精英团队，公司领导层多为80后，和员工有更多共同语言，公司气氛和谐、积极向上。公司秉承“上善若水，德以佑人”的经营理念，坚持“客户至上、诚实守信、团队协作、拼搏进取”的价值观，坚持“传递真诚”的服务理念，为客户提供优质的产品批发及生产服务。
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="services-intro">
      <div class="left-image">
        <img src="~@/assets/index/clothing.jpg" alt="Clothing" />
      </div>
      <div class="services-intro-text">
        <h3 class="services-intro-title underline-title">让时尚更普惠</h3>
        <h4 class="services-intro-sub-title">让中国制造覆盖更多国家与地区</h4>
        <div class="services-intro-content">
          公司目前主要业务涵盖时装、美体、鞋装、泳衣等，并有自己的工厂和上百家合作的供应商。公司运营及客服部门设在西安市高新区，工厂和仓库设在广州番禺，涉及的外贸平台有速卖通，亚马逊，Facebook
          以及自建站等多个平台，公司秉承“上善若水，德以佑人”的经营理念，坚持“客户至上、诚实守信、团队协作、拼搏进取”的价值观，坚持“传递真诚”的服务理念，为客户提供优质的产品批发及生产服务。
        </div>
      </div>
      <div class="right-image">
        <img src="~@/assets/index/shoes.jpg" alt="Shoes" />
      </div>
    </div>
    <div class="image-wrapper-1"></div>
    <div class="image-wrapper-2"></div>

    <div class="business-prospect">
      <div class="business-prospect-content">
        <h3 class="business-prospect-title underline-title">行业前景</h3>
        <div class="business-prospect-text">
          互联网行业席卷全球，带来新的产业革命。我们从事的跨境电商行业着眼全球市场，比纯粹的国内电商更有格局、更有潜力。也许你还在为错过国内电商黄金时代而后悔不迭，但我们希望多年后你不要再为错过跨境电商时代而捶胸顿足！每个时代都有自己的机会，而跨境电商就是全球电商行业未来的方向。时代赐予我们机会，行业赋予我们力量！只要你有梦想，晶闪就是你的平台！让我们共同成长见证未来!
        </div>
      </div>
    </div>

    <!-- <div class="news-report">
      <h2 class="underline-title news-report-title">新闻报道</h2>
      <div class="news-wrapper">
        <div v-for="(n, i) in news" :key="i" class="news-item">
          <div class="news-item-content cover-parent">
            <img class="news-img" :src="n.img" :alt="n.title" />
            <div class="news-summary cover-parent hover-hl">
              <div class="hover-hl-content fill-parent">
                <div class="underline-title"></div>
                <h4 class="news-title">{{ n.title }}</h4>
                <div class="news-brief hover-hl-hidden">{{ n.brief }}</div>

                <router-link
                  class="news-link hover-hl-hidden"
                  href="javascript:;"
                  :to="`/article/123?from=IndexPage`"
                  >查看全文 +</router-link
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

import ImgSlide1 from '@/assets/index/slide-1.jpg'
import ImgSlide2 from '@/assets/index/slide-2.jpg'

import ImgNews1 from '@/assets/index/news-1.png'
import ImgNews2 from '@/assets/index/news-2.jpg'

export default {
  name: 'IndexPage',
  components: { Swiper, SwiperSlide },
  data() {
    return {
      swiperOptions: {},

      slides: [
        { img: ImgSlide1, title: '关于晶闪', route: '/about' },
        {
          img: ImgSlide2,
          title: '加入我们，点击图片查看岗位',
          route: '/join-us',
        },
      ],

      news: [
        {
          img: ImgNews1,
          title: '2023晶闪科技春季校园招聘正式启动',
          brief: '2023晶闪科技春季校园招聘正式启动！',
        },
        {
          img: ImgNews2,
          title: '携手并进·筑梦未来丨2023年晶闪科技供应商大会',
          brief:
            '2022年，我们回归初心；2023年，我们展望未来。让我们在这新的一年里，携手共进，筑梦未来！',
        },
      ],
    }
  },
  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>
.slides {
  position: relative;
}

.slide-item {
  display: block;
  width: 100%;
  font-size: 0;
}

.slide-item-img {
  width: 100%;
}

.slides-switchers {
  position: absolute;
  bottom: 30px;
  left: 200px;
  z-index: 1;
  display: flex;
}

.slides-switcher {
  display: block;
  width: 40px;
  height: 40px;

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

.slides-switcher-next {
  width: 40px;
  height: 40px;
  transform: rotate(180deg);
}

.intro-video-wrapper {
  background-image: url(~@/assets/index/second-bg.jpg);
  background-size: 100%;
  padding-top: 47.69%;
  position: relative;
}

.intro-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 0 10%;
  display: flex;
  align-items: center;
}

.intro-title {
  font-size: 36px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

.intro-sub-title {
  font-size: 18px;
  font-weight: normal;
  margin: 10px 0 0;
  padding: 0;
}

.intro-content {
  width: 60%;
  font-size: 16px;
  color: #fff;
  line-height: 30px;
  margin-top: 10px;
}

.services-intro {
  display: flex;
  font-size: 0;

  .left-image,
  .services-intro-text,
  .right-image {
    flex: 1;
    overflow: hidden;
  }

  img {
    width: 100%;
  }
}

.image-wrapper-1 {
  background-image: url(~@/assets/index/image-wrapper-1.jpg);
  background-size: 100%;
  padding-top: 47.8%;
}

.image-wrapper-2 {
  background-image: url(~@/assets/index/image-wrapper-2.jpg);
  background-size: 100%;
  padding-top: 47.8%;
}

.services-intro-text {
  background-color: var(--primary-color);
  color: #fff;
  padding: 60px 30px 0 30px;

  .underline-title::after {
    background-color: #fff;
  }
}

.services-intro-title {
  font-size: 36px;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.services-intro-sub-title {
  font-size: 18px;
  margin: 18px 0 18px;
  padding: 0;
  font-weight: normal;
}

.services-intro-content {
  line-height: 30px;
  font-size: 16px;
}

.business-prospect {
  background-image: url(~@/assets/index/business-prospect.jpg);
  background-size: cover;
  color: #fff;
}

.business-prospect-content {
  padding: 40px 10%;
}

.business-prospect-title {
  margin: 0;
  margin-bottom: 40px;
  font-size: 36px;
}

.business-prospect-text {
  line-height: 30px;
  width: 400px;
}

.news-report {
  background-image: url(~@/assets/index/news-bg.jpg);
  color: #fff;
  padding: 50px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.news-report-title {
  margin: 0;
  padding: 0;
  font-size: 36px;
  font-weight: normal;
  width: 70%;
  max-width: 1400px;
}

.news-wrapper {
  width: 70%;
  max-width: 1400px;
  display: flex;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.news-item {
  flex: 1;
  padding-top: 36%;
  position: relative;
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-summary {
  .underline-title {
    margin-bottom: 20px;
    &::after {
      background-color: #fff;
    }
  }

  .hover-hl-content {
    padding: 8%;
  }
}

.news-title {
  font-size: 18px;
  margin: 0;
  font-weight: normal;
  margin-bottom: 30px;
}

.news-link {
  position: absolute;
  right: 30px;
  bottom: 30px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 1000px) {
  .slides-switchers {
    left: 30px;
    bottom: 30px;
  }

  .slides-switcher {
    width: 30px;
    height: 30px;
  }

  .intro-video-wrapper {
    background-image: none;
    padding-top: 20px;
  }

  .intro-wrapper {
    position: static;
    color: #000;
    padding: 0 5%;
  }

  .intro-content {
    color: #787878;
    width: unset;
  }

  .news-report {
    padding: 30px 5%;
    align-items: stretch;
  }

  .news-item {
    flex: unset;
    width: 100%;
    padding-top: 72%;
  }

  .news-report-title,
  .news-wrapper {
    width: unset;
  }

  .news-wrapper {
    gap: 10px;
  }

  .news-title {
    font-size: 14px;
  }

  .news-brief {
    display: block !important;
    opacity: 1 !important;
    font-size: 12px;
  }

  .news-summary::before {
    display: none;
  }

  .business-prospect-content {
    padding: 20px 10%;
  }

  .business-prospect-text {
    width: unset;
    font-size: 14px;
    line-height: 24px;
  }
}

@media screen and (max-width: 1400px) {
  .services-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

    .left-image {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }

    .services-intro-text {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      padding: 30px 5%;
    }

    .right-image {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
    }
  }
}
</style>
