<script setup>
import { useRoute } from "vue-router";
// url: http://ip:port/main.jsv.js?p1=123#/feature/HashParams?p3=test&p4=123
const route = useRoute();
const href = window.location.href;
const search = window.location.search;
const query = JSON.stringify(route.query);
</script>

<template>
  <jsv-focus-block autoFocus></jsv-focus-block>
  <div class="root">
    <div
      :style="{
        top: 50,
        height: 130,
      }"
      class="content"
    >
      {{ `url: ${href}` }}
    </div>
    <div
      :style="{
        top: 180,
        height: 130,
      }"
      class="content"
    >
      {{ `search param: ${search}` }}
    </div>
    <div
      :style="{
        top: 310,
        height: 130,
      }"
      class="content"
    >
      {{ `query: ${query}` }}
    </div>
  </div>
</template>

<style scoped>
.root {
  width: 1280;
  height: 720;
  background-color: #007788;
}

.content {
  left: 50;
  width: 1200;
  font-size: 30;
  line-height: 32;
  color: #ffffff;
  white-space: pre-wrap;
  text-overflow: clip;
}
</style>
