<template>
  <MOSTY.PageTree :isShowLeftTree="false" :pageTitle="'安全标识库列表'">
    <template #titleright>
      <!-- 头部 -->
      <div class="headBox" style="justify-content: space-between">
        <div style="color: rgb(0, 116, 87);">
          <el-popover placement="bottom-start" :width="620" trigger="hover" :title="popover?.title">
            <template #reference>
              <el-icon :size="28">
                <Warning />
              </el-icon>
            </template>
            <pre v-text="popover?.content"></pre>
          </el-popover>
        </div>
      </div>
    </template>
    <template #table>
      <SafetySignLibrary :type='"aqbsk"' :tableHeight='"60vh"' />
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, onMounted } from "vue";
import SafetySignLibrary from "@/components/MyComponents/TabList/SafetySignLibrary.vue";
// 详细信息
const popover = reactive({
  title: "",
  content: `
                        【安全标识牌尺寸对照表】

型号    观察距离        圆形标识     三角形标识     正方形标识     长方形标识 
         L (米)       外直径 (米)   外边長  (米)   外边長 (米)    (长×宽，米)
 1     0 < L ≤ 2.5      0.070        0.088          0.063      0.126 × 0.063
 2    2.5 < L ≤ 4.0     0.110        0.140          0.100      0.200 × 0.100
 3    4.0 < L ≤ 6.3     0.175        0.220          0.160      0.320 × 0.160
 4    6.3 < L ≤ 10.0    0.280        0.350          0.250      0.500 × 0.250
 5   10.0 < L ≤ 16.0    0.450        0.560          0.400      0.800 × 0.400
 6   16.0 < L ≤ 25.0    0.700        0.880          0.630      1.260 × 0.630
 7   25.0 < L ≤ 40.0    1.110        1.400          1.000      2.000 × 1.000
`
});
onMounted(() => {

})

</script>

<style lang="scss" scoped>
.headBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 150px;
}
</style>