<!-- 用户-检测页面 -->
<template>
  <NavBar title="燃气卫士" />
  <div class="container" :style="`height:${height+60}px`">
    <img class="img" src="../../../assets//images/radar.png" :width="`${width *0.65}`" :height="`${height *0.4}`" />
    <div class="content">
      <p class="title1">燃气监测中...</p>
      <p class="title2">未监测到泄露</p>
    </div>
  </div>
  <div class="btn-container">
    <t-button class="btn" size="large" @click="logs">
      <icon class="icon" name="root-list" color="#70A2F1" />
      日志
    </t-button>
  </div>
  <!-- <t-back-top v-show="backTopVisible" text="顶部" theme="round" /> -->
</template>
<script lang="ts" name="Home" setup>
import { useRouter } from "vue-router";
import NavBar from "../../../components/navBar/navBar.vue";
import { Icon } from 'tdesign-icons-vue-next';
const $router = useRouter(); // 路由实例
const $route = useRoute()
const backTopVisible = ref(false); // 回到顶部显隐
// 监听页面滚动
window.onscroll = function () {
  if (window.scrollY > 200) {
    //scrollY距离顶部的距离
    backTopVisible.value = true;
  } else {
    backTopVisible.value = false;
  }
};
// 页面宽高
const height = ref(document.body.clientHeight - 60)
const width = ref(document.body.clientWidth)
window.addEventListener('resize', () => {
  const bodyHeight = document.body.clientHeight - 60
  const bodyWidth = document.body.clientWidth
  height.value = bodyHeight
  width.value = bodyWidth
})

const logs = () => {
  $router.push({
    path: '/logs',
    query: {
      devCode: $route.query.devCode
    }
  })
}
onMounted(() => {

});
</script>
<style lang="scss" scoped>
.btn-container {
  position: absolute;
  bottom: 20px;
  display: flex;
  width: 100%;
  background: linear-gradient();

  .btn {
    width: 90%;
    margin: 0 auto;
  }
}

.container {
  background-image: linear-gradient(to bottom, #6882E5, #A6D2F6);

  .img {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
  }

  .content {
    position: absolute;
    top: 60%;
    color: #fff;
    text-align: center;
    width: 100%;

    .title1 {
      margin-top: 15px;
      font-size: 22px;
      font-weight: 700;
    }

    .title2 {
      margin-top: 20px;
      font-size: 18px;
    }
  }
}</style>