ai-postcard/src/views/Step_5.vue

<script setup>
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import Footer from "../components/Footer.vue";

const { t } = useI18n();
const store = useMainStore();
console.log("step5 store.assignBgImg", store.assignBgImg);
console.log("step5 store.assignBgImgUrl", store.assignBgImgUrl);
</script>

<template>
  <div class="content main-bg">
    <v-container
      class="px-5 px-sm-15 mt-15 d-flex flex-column align-center justify-center"
    >
      <div>
        <v-img
          width="85vw"
          cover
          class="my-5 mx-auto"
          :lazy-src="store.assignBgImgUrl"
          :src="store.assignBgImgUrl"
        >
          <template v-slot:placeholder>
            <div class="d-flex align-center justify-center fill-height">
              <v-progress-circular
                color="grey-lighten-4"
                indeterminate
              ></v-progress-circular>
            </div>
          </template>
        </v-img>

        <!-- <p>{{ store.assignBgImgTitle }}</p> -->

        <!-- <v-img
          max-width="500"
          cover
          class="my-5 mx-auto"
          :lazy-src="`https://cmm.ai/postcard/static/assets/img/bg/${store.assignBgImg.bg_img}`"
          :src="`https://cmm.ai/postcard/static/assets/img/bg/${store.assignBgImg.bg_img}`"
        >
          <template v-slot:placeholder>
            <div class="d-flex align-center justify-center fill-height">
              <v-progress-circular
                color="grey-lighten-4"
                indeterminate
              ></v-progress-circular>
            </div>
          </template>
        </v-img> -->

        <!-- <p>{{ t(store.assignBgImg.title) }}</p> -->

        <!-- <p
          class="text-start px-5 my-10 description"
          v-html="t(store.assignBgImg.description)"
        ></p> -->
      </div>

      <router-link to="/step6" class="main-btn mt-auto">
        {{ t("confirm") }}
      </router-link>
    </v-container>

    <Footer url="/step4" />
  </div>
</template>

<style lang="scss" scoped>
.v-container {
  min-height: 75vh;
}

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>