<template>
  <div class="list">
    <img src="@/assets/login/product-1.png" />
    <div class="scroll-cont">
      <div class="scroll-cont-bar" :style="{ top: `${currentIndex * 140}px` }"></div>
      <div v-for="(item, index) in productDescList" :key="item.title" :style="currentIndex === index ? 'padding-top: 55px; height: 176px;' : 'padding-top: 30px; height: 117px;' " class="scroll-cont-card">
        <div class="pro-title">{{ item.title }}</div>
        <div class="pro-desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productDescList: [
        {
          style: {},
          title: '产品特点1',
          desc: '依据电商卖家在电商平台已发货订单生成的待结算金额为商家提供保理融资服务的产品。'
        },
        {
          style: {},
          title: '产品特点2',
          desc: '依据电商卖家在电商平台已发货订单生成的待结算金额为商家提供保理融资服务的产品。'
        },
        {
          style: {},
          title: '产品特点3',
          desc: '依据电商卖家在电商平台已发货订单生成的待结算金额为商家提供保理融资服务的产品。'
        }
      ],
      currentIndex: 0
    }
  },
  mounted() {
    this.startAutoSlide()
  },
  methods: {
    startAutoSlide() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.productDescList.length
      }, 3000)
    },
    removeAllStyle() {
      this.productDescList.forEach(el => {
        el.style = {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  img {
    width: 780px;
    height: 450px;
    margin-right: 60px;
  }
  .scroll-cont {
    flex: 1;
    position: relative;
    .scroll-cont-bar {
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 176px;
      background-color: #E9423A;
      transition: top 0.5s ease;
    }
    .scroll-cont-card {
      width: 100%;
      height: 117px;
      background-color: #F9F9F9;
      padding-left: 50px;
      padding-top: 30px;
      transition: height 0.5s ease, padding-top 0.5s ease;
      .pro-title {
        font-size: 14px;
        font-weight: 700;
        color: #E9423A;
        margin-bottom: 10px;
      }
      .pro-desc {
        font-size: 12px;
        line-height: 18px;
        color: #32373E;
      }
    }
    .scroll-cont-card:nth-child(3) {
      margin: 20px 0;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1600px) {}
@media screen and (max-width: 768px) {}
@media screen and (min-width: 1930px) {}
</style>
