<template>
  <div class="home">
    <nav-bar url="/"></nav-bar>
    <div class="bj"></div>
    <van-swipe class="in_banner" :autoplay="5000">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>

    <div class="container">
      <div class="zstj_box">
        <div class="nr">
          <router-link to="zstj_yy">
            <img src="../assets/zstj_pic.png" alt="" />
            <p>预约体检</p>
          </router-link>
          <router-link to="zstj_tc">
            <img src="../assets/zstj_pic1.png" alt="" />
            <p>体检套餐</p>
          </router-link>
          <router-link to="zstj_wd">
            <img src="../assets/zstj_pic2.png" alt="" />
            <p>我的体检</p>
          </router-link>
          <router-link to="zstj_zxly">
            <img src="../assets/zstj_pic3.png" alt="" />
            <p>咨询留言</p>
          </router-link>
        </div>
      </div>

      <div class="zstj_box1">
        <div class="bt">热门体检套餐</div>
        <ul>
          <li v-for="item in list" :key="item.id">
            <router-link :to="'Zstj_detail?id=' + item.id">
              <!-- <div class="l"><img :src="list.img" alt="" /></div> -->
              <div class="z">
                <h2>{{ item.name }}</h2>
                <p>{{ item.explain }}</p>
              </div>
              <div class="r">¥{{ item.price }}</div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { apiGetInspectHome } from "@/request/api.js";
import { Toast } from "vant";
export default {
  components: {},
  mounted() {
    console.log(this.$route.meta.title);
    this.title = this.$route.meta.title;
  },
  data() {
    return {
      title: "",
      banners: [],
      list: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取列表
    getData() {
      apiGetInspectHome().then((res) => {
        this.loading = false;

		    console.log(res)
        this.banners = res.data.carousel;
        this.list= res.data.tijian;
      });
    },
    loadMore() {
      if (!this.finished) {
        this.paramsData.page += 1;
        this.getData();
      }
    },
  },
};
</script>


<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.in_banner {
  width: 100%;
  img {
    width: 100%;
    height: auto;
  }
}

.zstj_box {
  padding: 40px 0px;
}

.zstj_box .nr {
  padding: 45px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0px 0px 8px #eee;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zstj_box .nr a {
  text-align: center;
  font-size: 28px;
  color: #000;
}

.zstj_box .nr a img {
  width: 70px;
  height: 70px;
}

.zstj_box1 .bt {
  font-size: 36px;
  color: #000;
}

.zstj_box1 ul {
  margin-top: 20px;
}

.zstj_box1 ul li {
  margin-bottom: 20px;
}

.zstj_box1 ul li a {
  background: #fff;
  border-radius: 24px;
  box-sizing: border-box;
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.zstj_box1 ul li a .l img {
  width: 68px;
  height: auto;
}

.zstj_box1 ul li a .z {
  width: 420px;
}

.zstj_box1 ul li a .z h2 {
  font-size: 28px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zstj_box1 ul li a .z p {
  font-size: 24px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zstj_box1 ul li a .r {
  font-size: 36px;
  color: #d62e25;
}
</style>
