<template>
  <div class="about-page overflow-auto">
    <div v-if="(state.isH5 == 'true')"
         class="about-text">
      <div style="font-weight:bold;font-size:14px;text-align:center">延庆区博物馆监事人员名单</div>
      <div style="margin-top:20px">
        <div class="row">
          <div class="col-4 row items-center justify-center box-sizing border-t-1 border-l-1 font-12 fl-py-sm"
               style="border-radius: 10px 0 0 0 ">照片 </div>
          <div class="col-3 row items-center justify-center box-sizing border-t-1 border-l-1 font-12 fl-py-sm"> 姓名</div>
          <div class="col-5 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1  font-12 fl-py-sm"
               style="border-radius:  0 10px 0 0 ">简介 </div>
          <div class="col-4 row items-center justify-center box-sizing border-t-1 border-l-1">
            <img src="../../assets/images/peo-1.png"
                 style="width: 68px;height:88px">
          </div>
          <div class="col-3 row items-center justify-center box-sizing border-t-1 border-l-1 font-10"> 付红雁</div>
          <div class="col-5 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md font-10">2008年至今，就职于延庆区博物馆（文物所）职工，曾就职于隆庆阁文物商店，是延庆区金牌讲解员。 </div>
          <div class="col-4 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1"
               style="border-radius:  0  0  0 10px">
            <img src="../../assets/images/peo-2.png"
                 style="width: 68px;height:88px">
          </div>
          <div class="col-3 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 font-10"> 王伯轩</div>
          <div class="col-5 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md border-b-1 font-10"
               style="border-radius:  0  0  10px 0 ">2008年至今，就职于延庆区博物馆（文物所）职工，主要从事博物馆宣教陈列、藏品保管、数字档案等，2022年取得北京市博物馆专业副高级职称。 </div>

        </div>

      </div>
    </div>
    <div v-else
         class="about-text">
      <div style="font-weight:bold;font-size:20px">延庆区博物馆监事人员名单</div>
      <div style="margin-top:55px">

        <img src="../../assets/images/about-supervisoryauthority.png"
             style="width: 100%">
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const state = reactive({
  isH5: false,
});
onBeforeMount(() => {
  state.isH5 = localStorage.getItem("isH5");
})


const handleLink = (url) => {
}
</script>

<style scoped>
@media only screen and (max-width: 768px) {
  /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
  .about-page {
    max-height: calc(100vh - 78px - 72px);
    overflow: auto;
    background: url("../../assets/images/about-bg.png");
    padding: 9px 14px;
    height: 100%;
  }
  .about-text {
    padding: 16px 13px;
    background: #fff;
  }
}

@media only screen and (min-width: 769px) {
  /* 仅适用于屏幕宽度大于等于769px的设备（PC端） */
  .about-page {
    max-height: calc(100vh - 160px - 145px);
    min-height: calc(100vh - 160px - 145px);
    overflow: auto;
    background: url("../../assets/images/about-bg.png");
    padding: 41px;
  }
  .about-text {
    padding: 40px;
  }
}
</style>
