Web1020/12_vuecli/mediaapp/src/views/book/BookPage.vue

<template>
  <div class="book-container">
    <div class="swiper-content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="https://images.weserv.nl/?url=https://img1.doubanio.com/img/files/file-1739868345-0.jpg"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://images.weserv.nl/?url=https://img1.doubanio.com/img/files/file-1739869022-0.jpg"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav-content">
      <van-grid :border="false" :clickable="true">
        <van-grid-item icon="fire" text="豆瓣经典" />
        <van-grid-item icon="shop-collect" text="家居生活" />
        <van-grid-item icon="photograph" text="外出旅行" />
        <van-grid-item icon="gift-card" text="文具小物" />
      </van-grid>
    </div>
    <div class="new-product"></div>
    <div class="type-product"></div>
  </div>
</template>
<style scoped>
.my-swipe .van-swipe-item img {
  width: 100%;
}
.nav-content {
    border-bottom: .2rem solid #f9f9f9;
}
</style>
<script>
export default {
  mounted() {
    this.$emit("changePage", "1002");
  },
};
</script>