webview/src/pages/scan.page.vue

<script setup lang="ts">
import { useRequest } from 'alova/client';
import { getApplicationMethod } from '@/request/api';

import Start from '@/components/Start.vue';

const { data } = useRequest(getApplicationMethod, { initialData: { image: { el: '', copyright: '' } } });
const title = computed(() => data.value.image.title || import.meta.env.SIX_APP_TITLE);
const copyright = computed(() => data.value.copyright);
const button = computed(() => data.value.image.el.split('|').includes('btn'));
</script>

<template>
  <div class="wrapper flex flex-col">
    <div class="flex-none h-[106px]">
      <div class="h-full flex justify-center items-center text-4xl" style="letter-spacing: 0.2em">{{ title }}</div>
    </div>
    <div class="flex-auto relative">
      <Start v-if="button" class="decorate" />
    </div>
    <div class="flex-none text-xl p-2 text-center tracking-widest" v-html="copyright"></div>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  background: url('@/assets/images/screen.scan.png') no-repeat center / 100%;
}

.decorate {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
</style>