<template>
  <div class="left-nav">
    <div v-if="showNav" class="top-box">
      <div class="ul">
        <div class="li active">异常告警</div>
        <div class="li">景区入口</div>
        <div class="li">核心路段</div>
        <div class="li">公共交通</div>
        <div class="li">广场</div>
      </div>
    </div>
    <div class="bom-box">
      <div class="title">
        <span>检索</span>
      </div>
      <div class="search-box flex">
        <el-input placeholder="请输入内容" v-model="searchValue" clearable> </el-input>
        <img class="search-icon" src="/src/assets/images/search-icon-1.png" alt="" />
      </div>
      <div class="tree-box">
        <div class="tree-a">
          <span class="name-1">核心点位</span>
          <div class="tree-b">
            <span class="name-2">摄像头1</span>
            <span class="name-2 activee">摄像头1</span>
            <span class="name-2">摄像头1</span>
          </div>
        </div>
        <div class="tree-a">
          <span class="name-1">核心点位</span>
          <div class="tree-b">
            <span class="name-2">摄像头1</span>
            <span class="name-2 activee">摄像头1</span>
            <span class="name-2">摄像头1</span>
          </div>
        </div>
        <div class="tree-a">
          <span class="name-1">其他</span>
          <div class="tree-b" v-if="true">
            <span class="name-2">摄像头1</span>
            <span class="name-2 activee">摄像头1</span>
            <span class="name-2">摄像头1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  let searchValue = ref('')

  let props = defineProps({
    showNav: {
      type: Boolean,
      default: () => true
    }
  })

  onMounted(() => {})
</script>
<style lang="scss" scoped>
  //背景色设置为透明
  :deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
  }
  //输入框颜色
  :deep(.el-input__inner) {
    background-color: rgba(0, 0, 0, 0) !important;
    color: #fff;
  }
  .left-nav {
    margin-left: vw(10);
    // margin-top:vh(35);
    width: vw(250);

    .bom-box {
      margin-top: vh(20);
      .search-box {
        background: rgba(217, 217, 217, 0);
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #0096ff;
        margin: vw(20) auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search-icon {
          width: vw(16);
          height: vh(16);
          margin: 0 vw(20);
        }
      }

      .tree-box::before {
        position: absolute;
        top: vw(-8);
        left: vw(-8);
        content: '';
        width: vw(12);
        height: vw(12);
        background-image: url('/src/assets/images/icon-a-1.png');
        background-size: 100% 100%;
      }
      .tree-box::after {
        position: absolute;
        content: '';
        width: vw(12);
        height: vw(12);
        background-image: url('/src/assets/images/icon-a-1.png');
        background-size: 100% 100%;
        bottom: vw(-4);
        left: vw(-8);
      }
      .tree-box {
        margin-left: vw(10);
        margin-top: vh(20);
        position: relative;
        border-left: vw(3) solid;
        border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
        .tree-a {
          .name-1 {
            padding: 0 vw(20);
            display: block;
            font-weight: 400;
            font-size: vw(15);
            color: #ffffff;
            height: vh(30);
            line-height: vh(30);
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .tree-b::before {
          position: absolute;
          top: vw(-8);
          left: vw(-8);
          content: '';
          width: vw(12);
          height: vw(12);
          background-image: url('/src/assets/images/icon-a-1.png');
          background-size: 100% 100%;
        }
        // .tree-b::after{
        // 	position:absolute;
        // 	content: '';
        // 	width:vw(12);
        // 	height:vw(12);
        // 	background-image: url('/src/assets/images/icon-a-1.png');
        // 	background-size:100% 100%;
        // 	bottom:vw(-4);
        // 	left:vw(-8);

        // }
        .tree-b {
          // margin-top:vh(20);
          position: relative;
          border-left: vw(3) solid;
          border-image: linear-gradient(311deg, rgba(0, 11, 36, 0), rgba(55, 216, 252, 1)) 1 1;
          margin-left: vw(30);
          margin-top: vh(10);
          .name-2 {
            padding: 0 vw(20);
            display: block;
            font-weight: 400;
            font-size: vw(15);
            color: #ffffff;
            height: vh(30);
            line-height: vh(30);
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      .tree-box .tree-a:first-child {
        position: relative;
        top: vh(-15);
      }
      .tree-box .tree-a:last-child {
        position: relative;
        bottom: vh(-12);
      }
      .title {
        background-image: url('/src/assets/images/nav-l-t-bg.png');
        background-size: 100% 100%;

        span {
          margin-left: vw(30);
          font-weight: 800;
          font-size: vw(15);
          line-height: vh(26);
          text-align: center;
          font-style: normal;
          text-transform: none;

          background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }
      }
    }
    .top-box {
      text-align: left;
      font-weight: 400;
      font-size: vw(18);
      color: rgba(255, 255, 255, 0.7);
      line-height: 21px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      .title {
        font-weight: 600;
        font-size: vw(15);
        text-align: left;
        font-style: normal;
        text-transform: none;
        height: vh(35);
        line-height: vh(34);
        padding-left: vw(20);
        // background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
      }
      .ul {
        .li {
          background: url('/src/assets/images/m-nav-bg-1.png');
          background-size: 100% 100%;
          width: vw(250);
          height: vh(58);
          line-height: vh(58);
          text-align: center;
          margin-bottom: vh(15);
        }
        .active {
          background: url('/src/assets/images/m-nav-bg-2.png');
          background-size: 100% 100%;
          // width:vw(178);
        }
      }
    }
  }
</style>
