<script setup>
import { ref } from 'vue'
import { Toast } from 'vant'

// import Footer from '@/components/Footer.vue'

import { useRouter } from 'vue-router'

import { getSiteConfig } from '@/api'

const router = useRouter()

const shopContent = ref('')

let res = await getSiteConfig()
console.log(res)
if (res.code === 200) {
  shopContent.value = res.data.shop_content
} else {
  showToast('系統錯誤')
  router.push('/home')
}

</script>

<template>
  <div class="shop page">
    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
      <template #title>
        <h5 class="text-white mb-1"><strong>立即購買</strong></h5>
      </template>
      <template #left>
        <h4><i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i></h4>
      </template>
    </van-nav-bar>

    <div class="main-section" v-html="shopContent">
    </div>
  </div>
  <!-- <Footer/> -->
</template>

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

.recommend {
  width: 100%;
  padding-top: 2%;
}

.recommend ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.recommend ul li {
  width: 48%;
  flex-direction: column;
  margin: 1%;

  img {
    width: 100%;
  }
}</style>