<template>
  <div class="leftSD">
    <!-- 隧道简介 -->
    <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="leftSD">
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/tunnelImg/jianjie.png';
import jk_01 from '@/assets/tunnelImg/jk_01.png';
import jk_02 from '@/assets/tunnelImg/jk_02.png';
import jk_03 from '@/assets/tunnelImg/jk_03.png';
import jk_04 from '@/assets/tunnelImg/jk_04.png';
import lfj_icon from '@/assets/tunnelImg/lfj_icon.png';
import sxj_icon from '@/assets/tunnelImg/sxj_icon.png';
import qt_icon from '@/assets/tunnelImg/qt_icon.png';
import jgwyj_icon from '@/assets/tunnelImg/jgwyj_icon.png';
import tjy_icon from '@/assets/tunnelImg/tjy_icon.png';
import ybj_icon from '@/assets/tunnelImg/ybj_icon.png';

const introduce =
  '延安市杨家岭隧道位于延安市中心城区西北部，走向大致由南向北。项目起点位于延安市拟建的延师桥北桥头、并与现有的延安市枣园路相交，路线向北穿杨家岭隧道至杨家岭沟内、与拟建的延安市杨家岭道路相交。路线全长0.911公里、其中隧道775米。';
const videoList = [jk_01, jk_02, jk_03, jk_04];
const shebeiList = [
  {
    name: ['激光位移计'],
    icon: jgwyj_icon,
    num: 27,
  },
  {
    name: ['光纤光栅', '应变计'],
    icon: ybj_icon,
    num: 45,
  },
  {
    name: ['光纤光栅', '调节仪'],
    icon: tjy_icon,
    num: 5,
  },
  {
    name: ['光纤光栅', '裂缝计'],
    icon: lfj_icon,
    num: 27,
  },
  {
    name: ['智能球形', '摄像机'],
    icon: sxj_icon,
    num: 4,
  },
  {
    name: ['其他'],
    icon: qt_icon,
    num: 0,
  },
];
</script>

<style lang="scss" scoped>
.leftSD {
  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% - 145px);
    }
    .topWZ {
      width: 100%;
      height: 140px;
      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>