hjb_pc/pages/index.vue

<template>
  <div class="w-100%">
    <!--轮播图-->
    <banner-index></banner-index>
    <!--秒杀-->
    <seckill-index></seckill-index>
    <!--品牌好店-->
    <merchant-index :goodStoreImage="pcHomeCon?.goodStoreImage"></merchant-index>
    <!--推荐商品-->
    <recommended-index></recommended-index>
    <!--猜你喜欢-->
    <recommend></recommend>
  </div>
</template>

<script lang="ts" setup>

import SwiperIndex from "~/components/swiperIndex.vue";
import MerchantIndex from "~/pages/homeIndex/merchantIndex.vue";
import {pcHomeConfigApi} from "~/server/homeApi";
import RecommendedIndex from "~/pages/homeIndex/recommendedIndex.vue";
import BannerIndex from "~/pages/homeIndex/bannerIndex.vue";
import SeckillIndex from "~/pages/homeIndex/seckillIndex.vue";

useHead({
  title: 'JAVA 多商户 PC',
  meta: [
    {
      name: 'description',
      content:
        'Java商城，PC商城，CRMEB开源商城系统，新零售社交电商，小程序商城，公众号商城，免费商城系统源码，商城系统开发，开源商城系统，微商城源码，直播商城系统，多商户商城，B2B2C，私域电商，分销商城，高性能商城系统，陀螺匠OA系统，咨询：400-8888-794',
    },
    {
      name: 'keywords',
      content:
        'CRMEB开源商城系统，围绕新零售、品牌连锁、商家入驻等多种商业模式，自主研发B2C商城系统、B2B2C多商户商城系统、连锁多门店商城系统、跨境电商系统等；应用于直播电商、社交新零售、商家入驻等多种应用场景，系统支持多语言、多端登录，代码开源、独立部署、永久免费升级。咨询：400-8888-794',
    },
  ],
  bodyAttrs: {
    class: 'test',
  },
})

//首页配置
const { data: pcHomeCon } = useAsyncData(() => pcHomeConfigApi())

let mySwiper = null;

/** 自定义按钮 */
function toPrev(){
  mySwiper.slidePrev();
}

function toNext(){
  mySwiper.slideNext();
}

</script>

<style>
html {
  background: #F5F5F5 !important;
}
</style>

<style lang="scss" scoped>
.swiper{
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #fff;/* 两种都可以 */
  --swiper-pagination-bottom: 10px;
  --swiper-navigation-size:0;
}
</style>