index.vue 1.59 KB

<template>
  <div class="page cPageBottom page-index">
    <div class="app__bgc bgc"></div>
    <div class="app__bg bg"></div>
    <div class="app__content main">
      <div class="top-space"></div>
      <!-- 轮播banner -->
      <div class="banner">
        <van-swipe indicator-color="#ffcc00" class="swiper" :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img class="img" v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 类别选择 -->
      <div class="sel">
        <div class="sel-item sel-item-1">
          黄金<br>首饰
        </div>
        <div class="sel-item sel-item-2">
          翡翠<br>玉石
        </div>
        <div class="sel-item sel-item-3">
          钻石<br>宝石
        </div>
        <div class="sel-item sel-item-4">
          K金<br>首饰
        </div>
        <div class="sel-item sel-item-5" @click="toMyFavorite">
          我的<br>收藏
        </div>
      </div>
      <div class="content">
        <!-- 产品推荐 -->
        <div class="product">
          <div class="product-title">-- 产品推荐 --</div>
          <div class="product-list">
            <div @click="toProduct(item)" v-for="(item,index) in 6" :key="index" class="item">
              <img class="image" src="https://img.yzcdn.cn/vant/apple-1.jpg" alt="">
              <div class="desc">黄金吊坠</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>