traffic-laser/src/views/tables/demo.vue

<!--  -->
<template>
  <MainPanel>
    <template v-slot:header>
      <Header :title="info.title" type="return" :on-back="() => onBack()">
        <!-- <ui-button type="primary" width="96px"> 完成 </ui-button> -->
      </Header>
    </template>

    <div class="explorate">
      <img :src="info.img" />
    </div>
  </MainPanel>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, onActivated } from 'vue';
import html2canvas from 'html2canvas';
import { downloadImage, uploadImage } from '@/store/sync';
import Message from '@/components/base/components/message/message.vue';
import Header from '@/components/photos/header.vue';
import MainPanel from '@/components/main-panel/index.vue';
import { router } from '@/router';
import img_1 from '@/assets/images/demo/1.png';
import img_2 from '@/assets/images/demo/2.png';
import img_3 from '@/assets/images/demo/3.png';
import img_4 from '@/assets/images/demo/4.png';
import img_5 from '@/assets/images/demo/5.png';
import img_6 from '@/assets/images/demo/6.png';
import img_7 from '@/assets/images/demo/7.png';
const list = ref([
  { title: '道路交通事故现场勘查笔录', img: img_1 },
  { title: '询问笔录', img: img_2 },
  { title: '讯问笔录', img: img_3 },
  { title: '道路交通事故认定书', img: img_4 },
  { title: '当事人血样登记表', img: img_5 },
  { title: '道路交通事故现场遗留物品清单', img: img_6 },
  { title: '授权委托书', img: img_7 },
]);
let index = Number(router.currentRoute.value.params.id);
const info = ref(list.value[index - 1]);
const onBack = () => {
  router.back();
};
onMounted(() => {});
onActivated(() => {
  index = Number(router.currentRoute.value.params.id);
  info.value = list.value[index - 1];
});
</script>
<style lang="scss" scoped>
.explorate {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  img {
    width: 100%;
    height: auto;
  }
}
</style>