<template>
  <div class="yanxue_page">
  <div class="item" v-if="listData.length>0">
      <div class="right_box">
        <div class="icon_box">
        </div>
        <img class="circle" src="@/assets/yanxue/icon.png" alt="" />
        <p class="index"></p>
      </div>
      <div class="line"></div>
      <p class="title" @click="handleItem(listData[0].title)">{{ listData[0].title }}</p>
    </div>
    <div class="item" v-if="listData.length>1">
      <p class="title" @click="handleItem(listData[1].title)">{{ listData[1].title }}</p>
      <div class="line"></div>
      <div class="right_box">
        <div class="icon_box">
          <img class="icon1" src="@/assets/yanxue/icon1.png" alt="" />
        </div>
        <img class="circle" src="@/assets/yanxue/icon.png" alt="" />
        <p class="index">第1站</p>
      </div>
    </div>
    <div class="item" v-if="listData.length>2">
      <p class="title" @click="handleItem(listData[2].title)">{{ listData[2].title }}</p>
      <div class="line"></div>
      <div class="right_box">
        <div class="icon_box">
          <img class="icon2" src="@/assets/yanxue/icon2.png" alt="" />
        </div>
        <img class="circle" src="@/assets/yanxue/icon.png" alt="" />
        <p class="index">第2站</p>
      </div>
    </div>
    <template v-for="(item, index) in listData">
     <div class="item" v-if="index>2" :key="index">
      
      <div class="right_box">
        <div class="icon_box">
          <img class="icon1" v-if="index % 5 == 1" src="@/assets/yanxue/icon1.png" alt="" />
          <img class="icon2" v-if="index % 5 == 2" src="@/assets/yanxue/icon2.png" alt="" />
          <img class="icon3" v-if="index % 5 == 3" src="@/assets/yanxue/icon3.png" alt="" />
          <img class="icon4" v-if="index % 5 == 4" src="@/assets/yanxue/icon4.png" alt="" />
          <img class="icon5" v-if="index % 5 == 0" src="@/assets/yanxue/icon5.png" alt="" />
        </div>
        <img class="circle" src="@/assets/yanxue/icon.png" alt="" />
        <p class="index">第{{ index }}站</p>
      </div>
      <div class="line"></div>
      <p class="title" @click="handleItem(item.title)">{{ item.title }}</p>
    </div>
    </template>
  </div>
</template>
<script>
import axios from 'axios'
import data from '@/assets/yanxue.json'
export default {
  data() {
    return {
      listData: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listData = data
      // this.$toast.loading('加载中...')
      // axios.get(`https://payment.myjxt.com/zlb_assets/yanxue.json`).then((res) => {
      //   this.$toast.clear()
      //   console.log('列表：', res.data)
      //   this.listData = res.data
      // })
    },
    handleItem(image) {
      this.$router.push({ name: 'YanxueDetail', query: { image: image } })
    },
  },
}
</script>
<style lang="scss">
.yanxue_page {
  background: rgb(255, 189, 105) url('../../assets/yanxue/bg.png') top/100% no-repeat;
  padding-top: 1400px;
  padding-bottom: 196px;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 36px;
      text-align: center;
      color: #e11121;
      width: 350px;
      height: 84px;
      line-height: 84px;
      border-radius: 18px;
      background: #fff;
    }
    .line {
      width: 186px;
      height: 2px;
      background: #fff;
    }
    .right_box {
      width: 200px;
      height: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 -89px;
      .icon_box {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .icon1 {
        width: 128px;
      }
      .icon2 {
        width: 98px;
      }
      .icon3 {
        width: 192px;
      }
      .icon4 {
        width: 52px;
      }
      .icon5 {
        width: 102px;
      }
      .circle {
        width: 22px;
      }
      .index {
        font-size: 36px;
        color: #fff;
        font-style: oblique;
      }
    }
  }
}
</style>