<template>
  <div class="leftQL">
    <!-- 隧道简介 -->
    <div class="topBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">桥梁简介</div>
      </div>
      <div class="topContent contentBox">
        <img :src="jianjie" alt="" class="topImg" />
        <div class="topWZ">{{ introduce }}</div>
      </div>
    </div>
    <!-- 感知设备 -->
    <div class="centerBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">感知设备</div>
      </div>
      <div class="centerContent contentBox">
        <div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i">
          <div class="shebeiBox_left">
            <div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">{{ t }}</div>
            <div class="shebeiBox_left_num">
              <span>{{ item.num }}</span
              >个
            </div>
          </div>
          <div class="shebeiBox_right">
            <img :src="item.icon" alt="" class="shebei_img" />
          </div>
        </div>
      </div>
    </div>
    <!-- 隧道监控 -->
    <div class="bottomBox">
      <div class="ListBoxHeader">
        <div class="ListBoxHeader_font">桥梁监控</div>
      </div>
      <div class="bottomContent contentBox">
        <div class="videoBox" v-for="(item, i) in videoList" :key="i">
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="leftQL">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';

// import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
// import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
// import sd_icon from '@/assets/newImgs/sd.png'; //隧道
// import ps_icon from '@/assets/newImgs/ps.png'; //排水

import jianjie from '@/assets/qiaoliangImg/jianjie_ql.png';
import jk_01 from '@/assets/qiaoliangImg/qljk_01.png';
import jk_02 from '@/assets/qiaoliangImg/qljk_02.png';
import jk_03 from '@/assets/qiaoliangImg/qljk_03.png';
import jk_04 from '@/assets/qiaoliangImg/qljk_04.png';
import lfj_icon from '@/assets/qiaoliangImg/lfj.png';
import sxj_icon from '@/assets/qiaoliangImg/sxj.png';
import wdj_icon from '@/assets/qiaoliangImg/wdj.png';
import jlszy_icon from '@/assets/qiaoliangImg/jlszy.png';
import jsdj_icon from '@/assets/qiaoliangImg/jsdj.png';
import ybj_icon from '@/assets/qiaoliangImg/ybj.png';

const introduce =
  '延安王家坪大桥（彩虹桥）位于延安市王家坪革命纪念馆前，是根据延安王家坪革命纪念馆的总体布局和延安城区防洪需要，由省政府决定、省交通厅负责实施的，是在原桥位置上新建的一座特大桥。该项工程于１９９７年４月２２日开工建设，１９９８年９月２８日竣工通车，工程总投资３６６７万元。';
const videoList = [jk_01, jk_02, jk_03, jk_04];
const shebeiList = [
  {
    name: ['静力水准仪'],
    icon: jlszy_icon,
    num: 22,
  },
  {
    name: ['应变计'],
    icon: ybj_icon,
    num: 42,
  },
  {
    name: ['加速度计'],
    icon: jsdj_icon,
    num: 18,
  },
  {
    name: ['温度计'],
    icon: wdj_icon,
    num: 3,
  },
  {
    name: ['裂缝计'],
    icon: lfj_icon,
    num: 3,
  },
  {
    name: ['摄像机'],
    icon: sxj_icon,
    num: 3,
  },
];
</script>

<style lang="scss" scoped>
.leftQL {
  width: 100%;
  height: 100%;
  // box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}

.topBox {
  width: 100%;
  height: calc(100% - 486px);
  // flex: 1;
  // border: 1px solid red;
  // background: red;
  .topContent {
    margin: 6px 0 5px;
    height: calc(100% - 55px);
    .topImg {
      display: block;
      width: 100%;
      height: calc(100% - 160px);
    }
    .topWZ {
      width: 100%;
      height: 155px;
      white-space: pre-wrap;
      word-break: break-word;
      text-indent: 2em;
      overflow-y: auto;
      padding: 10px;
      // box-sizing: border-box;
      background: url('@/assets/tunnelImg/jjwz.png') no-repeat;
      background-size: 100% 100%;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      line-height: 22px;
      color: #61cafc;
    }
  }
}
.centerBox {
  // background: blue;
  width: 100%;
  // height: 33%;
  .centerContent {
    padding: 6px 0 6px;
    height: 174px;
    box-sizing: border-box;
    .shebeiBox {
      position: relative;
      width: 136px;
      height: 76px;
      padding: 4px 0px 6px 6px;
      // background: linear-gradient(0deg, rgba(17, 102, 139, 0.6) 0%, rgba(0, 65, 103, 0.3) 100%);
      border-radius: 2px;
      // border: 1px solid #007aa8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // kpbj_img
      background: url('@/assets/tunnelImg/kpbj_img.png') no-repeat;
      background-size: 100% 100%;
      .shebeiBox_left {
        z-index: 99;
        height: 100%;
        // padding: 10px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .shebeiBox_left_font {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          color: #ffffff;
          // height: 26px;
          // line-height: 26px;
        }
        .shebeiBox_left_num {
          font-weight: 500;
          font-size: 12px;
          color: #cef6ff;
          span {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 22px;
            color: #15d2fd;
            margin-right: 10px;
          }
        }
      }
      .shebeiBox_right {
        z-index: 99;
        .shebei_img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}
.bottomBox {
  width: 100%;
  // height: 35%;
  // flex: 1;
  .bottomContent {
    margin-top: 6px;
    // height: calc(100% - 50px);
    height: 218px;
    .videoBox {
      // border: 1px solid red;
      width: 206px;
      height: 104px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.contentBox {
  // border: 1px solid yellow;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
}
</style>