evshop_h5/src/pages/Home/Index.vue

<template>
  <div class="main-wrap index-page mb-xxl">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(image,index) in images" :key="index">
        <a :href="image.ad_link" target="_blank" v-if="image.ad_link">
          <img class="banner-image" :src="image.ad_code"/>
        </a>
        <img class="banner-image" :src="image.ad_code" v-else/>
      </van-swipe-item>
    </van-swipe>
    <div class="feature">
      <img src="@/assets/images/feature01.png" alt="特色介紹">
    </div>
    <div class="feature">
      <img src="@/assets/images/feature02.png" alt="應用領域">
    </div>
    <div class="company">
      <div>
        匯康科技股份有限公司        
      </div>
      <div>
        服務專線：{{ shopStore.config.service_phone}}
      </div>
      <div>
        服務信箱：{{ shopStore.config.service_email}}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref ,onMounted } from 'vue'
import { getBanner } from '@/services/home'

import { useShopStore } from '@/store/Shop'

const shopStore = useShopStore()

const images = ref([]);

const img_url = import.meta.env.VITE_APP_IMG_URL

onMounted(async ()=>{
  let res = await getBanner()
    if(res.code === 200){
      images.value = res.data
    }
})

</script>

<style lang="less" scoped>
.banner-image {
  width: 100%;
}

.feature {
  width: 100%;
  margin-bottom: 20px;
  img{
    width: 100%;
  }
}

.company{
  background-color: #f5f5f5;
  width: 100%;
  // text-align: center;
  padding: 10px;
  margin-bottom: 20px;
  div{
    color: #666;
    margin-bottom: 3px;
  }
}
</style>