<template>
  <div class="navgin-list">
    <div class="navgin-header">
      <img src="../assets/image/Left-Navigation/list.png">
      <span>功能导航</span>
    </div>
    <ul class="navgin-item">
      <li>
        <div class="navgin-Items">
          <img src="../assets/image/Left-Navigation/index.png" class="navgin-Items-img1">
          <span>首页</span>
        </div>
      </li>
      <li>
        <div class="navgin-Items">
          <img src="../assets/image/Left-Navigation/business.png" class="navgin-Items-img1">
          <span>业务管理</span>
          <img src="../assets/image/Left-Navigation/pulldown.png" class="navgin-Items-img2">
        </div>
        <ul class="navgin-secondlist">
          <li>
            <router-link to="/navigation/pawn" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>典当管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/navigation/approval" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>审批管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/navigation/alarm" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>告警管理</span>
            </router-link>
          </li>
        </ul>
      </li>
      <li>
        <div class="navgin-Items">
          <img src="../assets/image/Left-Navigation/account.png" class="navgin-Items-img1">
          <span>台账管理</span>
          <img src="../assets/image/Left-Navigation/pulldown.png" class="navgin-Items-img2">
        </div>
        <ul class="navgin-secondlist">
          <li>
            <router-link to="/navigation/bill" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>账单管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/navigation/covenant" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>合同管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/navigation/customer" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>客户管理</span>
            </router-link>
          </li>
        </ul>
      </li>
      <li>
        <div class="navgin-Items">
          <img src="../assets/image/Left-Navigation/systems.png" class="navgin-Items-img1">
          <span>系统管理</span>
          <img src="../assets/image/Left-Navigation/pulldown.png" class="navgin-Items-img2">
        </div>
        <ul class="navgin-secondlist">
          <li>
            <router-link to="/navigation/user" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>用户管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/navigation/workflow" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>审批流程管理</span>
            </router-link>
          </li>
          <li>
            <router-link to="/navigation/branch" class="navgin-secondItems">
              <img src="../assets/image/Left-Navigation/suspend.png">
              <span>分店管理</span>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "LeftNavigation"
}
</script>

<style scoped>
.navgin-list{
  width: 8%;
  height: 800px;
  border: 1px solid #b8d5e5;
}
/*导航头部*/
.navgin-header{
  width: 100%;
  height: 40px;
  background-color: #3391d8;
  display: flex;
  align-items: center;
  color: white;
  font-size: 10px;
}

.navgin-header img{
  width: 15px;
  height: 15px;
  margin-left: 10px;
}

.navgin-header span{
  margin-left: 15px;
}

/*导航项*/
.navgin-item{
  width: 100%;
  height: 760px;
  padding: 0;
  margin-top: 0;
  list-style-type: none;
  background-color: #f1f8fc;
}

.navgin-item li{
  width: 100%;
}

.navgin-Items{
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 15px;
  border-bottom: 1px solid #b8d5e5;
}

.navgin-Items-img1{
  width: 25px;
  height: 25px;
  margin-left: 10px;
}

.navgin-Items-img2{
  width: 15px;
  height: 15px;
  margin-left: 15px;
}

.navgin-Items span{
  margin-left: 15px;
}

/*二级菜单*/
.navgin-secondlist{
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.navgin-secondlist li{
  width: 100%;
}

.navgin-secondItems{
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #b8d5e5;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
}

.navgin-secondItems img{
  width: 10px;
  height: 10px;
  margin-left: 25px;
}

.navgin-secondItems span{
  margin-left: 15px;
  font-size: 10px;
}

</style>