<template>
  <div v-if="(state.isH5 == 'true')"
       class="about-text">
    <div style="margin-top:20px;padding:10px">
      <div class="row">
        <div class="col-6 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-6 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-6 row items-center justify-center box-sizing border-t-1 border-l-1 fl-pa-lg">
          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/d820103a-2883-4140-9c77-881cf2e2ccfc.pdf')">延庆博物馆2023年工作报告</div>
        </div>
        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-r-1 border-l-1 fl-py-lg fl-px-md font-10">2023-12-12</div>
        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 fl-pa-lg">

          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/a08dd5cb-c7d7-4698-82bb-e12e85b74ff5.pdf')">延庆博物馆2022年工作报告</div>
        </div>
        <div class="col-6 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">2022-12-12</div>

        <div class="col-6 row items-center justify-center box-sizing border-t-1 border-l-1 border-b-1 fl-pa-lg"
             style="border-radius:  0  0  0 10px">
          <div @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/b31e28b4-7b6d-4f65-9617-192ad7924e43.pdf')">延庆博物馆2021年工作报告</div>
        </div>
        <div class="col-6 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 ">2021-12-12</div>

      </div>

    </div>
  </div>
  <div v-else
       class="about-page overflow-auto">
    <div class="about-text row items-center "
         style="
        border-bottom: 1px solid rgba(233, 233, 233, 1);
      ">
      <div class="col-6 col-md-10 cursor"
           @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/d820103a-2883-4140-9c77-881cf2e2ccfc.pdf')">延庆博物馆2023年工作报告</div>
      <div class="col-6 col-md-2">
        <div>发布时间</div>
        <div class="fl-mt-sm">2023-12-17</div>
      </div>
    </div>
    <div class="about-text row items-center "
         style="
        border-bottom: 1px solid rgba(233, 233, 233, 1);

      ">
      <div class="col-6 col-md-10 cursor"
           @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/a08dd5cb-c7d7-4698-82bb-e12e85b74ff5.pdf')">延庆博物馆2022年工作报告</div>
      <div class="col-6 col-md-2">
        <div>发布时间</div>
        <div class="fl-mt-sm">2022-12-17</div>
      </div>
    </div>
    <div class="about-text row items-center "
         style="
        border-bottom: 1px solid rgba(233, 233, 233, 1);

      ">
      <div class="col-6 col-md-10 cursor"
           @click="handleOpen('https://cdns.fontree.cn/fonchain-main/test/image/40/recruit/b31e28b4-7b6d-4f65-9617-192ad7924e43.pdf')">延庆博物馆2021年工作报告</div>
      <div class="col-6 col-md-2">
        <div>发布时间</div>
        <div class="fl-mt-sm">2021-12-17</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
const state = reactive({
  isH5: false,
});
onBeforeMount(() => {
  state.isH5 = localStorage.getItem("isH5");
})

const handleOpen = (url) => {
  window.open(url)
}
</script>
<style scoped>
@media only screen and (max-width: 768px) {
  /* 仅适用于屏幕宽度小于等于768px的设备（移动端） */
  .about-page {
    min-height: calc(100vh - 78px - 72px);
    overflow: auto;
    background: url("../../assets/images/about-bg.png");
    padding: 9px 14px;
  }
  .about-text {
    padding: 4px;
    margin-top: 8px;
  }
}

@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 {
    font-weight: 700;
    font-size: 20px;
    padding: 24px;
    margin-top: 24px;
  }
}
</style>
