<template>
  <div id="Tool-level">
    <div class="Tool-level">
      <div class="Tool-Header"><span class="title-dialog">图层列表</span></div>
      <div class="Tool-Border">
          <li  v-for="item,index in itemForAll.data"
               :key="item.name"  >
              <div>
                <i class="Tool-ioc"></i>
                <span>{{item.name}}</span>
             </div>
          </li>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tools'
}
</script>

<script setup>
  import {onMounted, onBeforeUnmount, ref} from 'vue'
import bus from '@/utils/bus'
import 'element-plus/es/components/date-picker/style/css'

onMounted(() => {

})

onBeforeUnmount(() => {
})
  const  itemForAll=ref({
    data: [
      { name: '码头',  indexName: 'fd' ,click:false},
      { name: '泊位',  indexName: 'sx' ,click:false},
      { name: '航道',  indexName: 'qj' ,click:false},
      { name: '锚地',  indexName: 'qj' ,click:false},
      { name: '掉头区',  indexName: 'cl' ,click:false},
      { name: '警戒区',  indexName: 'cm' ,click:false},
      { name: '水上绿色综合服务区',  indexName: 'qc' ,click:false},
      { name: '航标',  indexName: 'cm' ,click:false},
      { name: '水下地形',  indexName: 'qc' ,click:false},

    ]})

</script>

<style lang="scss" scoped>
#Tool-level{
  position: absolute;
  bottom: -300px;
  left: calc(82% - 100px);
 transform: translateX(-50%);
  align-items: center;
  top: 10vh;
  .Tool-level{
    height: 515px;
    width: 290px;
    background: url('../../../../assets/imgs/header/tclbbg.png') no-repeat;
    background-size: 100%  100%;
    .Tool-Header{
      padding-top: 20px;
      height: 40px;
      width: 100%;
      text-align: left;
      position: relative;
      padding-left: 20px;
  }
    .Tool-Border{
       height: 300px;
       width: 100%;
        flex-direction: column;
        justify-content: space-between;

        li {
            padding-top:3%;
            height: 40px;
            list-style: none;
            width: 100%;
            padding-left:5%;
          div{
              padding-left:3%;
              padding-bottom: 10px;
             line-height: 25px;width: 80%;
            background: url('@/assets/imgs/header/tczsx.png') no-repeat;
              background-position: bottom;
            background-size: 90% 5px;
              display: flex;
              .Tool-ioc{
                  height: 25px;
                  width: 10%;
                  background: url('@/assets/imgs/header/tcx.png') no-repeat;
                  background-size: 80%;
                  background-position:center;
              }
              span{
                  padding-left: 1%;
                  height: 25px;
                  font-size: 15px;
                  text-align: left;
                  width: 90%;
              }
          }
        }
      }
     }
  }

</style>