Yi.Vue3.x.Vant/src/view/shop/shopIndex.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template >
<div class="back">

  <van-row class="top-div"> <van-col  span="3"><van-icon name="circle" size="2rem" /></van-col>
    <van-col span="18">  <router-link to="/shopSearch"><van-cell-group inset>
  <van-field  label="搜索" placeholder="搜索" />
</van-cell-group>  </router-link></van-col>
    <van-col span="3"><van-icon name="circle" size="2rem" /></van-col></van-row>

  <div class="head-div">
    <van-swipe
      height="100"
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
  </div>

  <van-row class="body-row">
    <van-col span="24">
      <van-grid :column-num="4">
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </van-grid>
    </van-col>
    <van-col span="24"> <AppCard /></van-col>
    <van-col span="24"> <AppCard /></van-col>
    <van-col span="24"> <AppCard /></van-col>
  </van-row>
  </div>
</template>
<script  setup lang="ts">
import AppCard from "@/components/AppCard.vue";
</script>
<style>

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.body-row {
  padding: 1rem;
  padding-top: 0.2rem;
  margin-top: 1rem;
}
.van-swipe {
  /* margin-top: 10rem;
  margin-left: 1rem;