<template>
  <div class="ytg-def">
    <div class="ytg-def-title">
      <i class="el-icon-menu" style="font-size: 16px; color:#20a0ff; margin-right: 6px; position: relative; top: 1px;"></i>功能导航
    </div>
    <!-- <div class="ytg-def-content">
      <ul class="ytg-def-ul">
        <li class="ytg-def-li ytg-def-li1" @click="goto(1, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i1"></span>
            <p>销售管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li2" @click="goto(2, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i2"></span>
            <p>客户管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li3" @click="goto(3, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i3"></span>
            <p>规范管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li4" @click="goto(4, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i4"></span>
            <p>质量管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li5" @click="goto(5, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i5"></span>
            <p>计划管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li6" @click="goto(6, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i6"></span>
            <p>车间管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li7" @click="goto(7, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i7"></span>
            <p>物流管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li8" @click="goto(8, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i8"></span>
            <p>进程管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li9" @click="goto(9, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i9"></span>
            <p>成本管理</p>
          </div>
        </li>
        <li class="ytg-def-li ytg-def-li10" @click="goto(10, $event)">
          <div class="ytg-def-li-c"></div>
          <div class="ytg-def-li-t">
            <span class="xs-icons ytg-def-li-i xs-icons ytg-def-li-i10"></span>
            <p>基础配置管理</p>
          </div>
        </li>
      </ul>
    </div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    goto (index, e) {
      switch (index) {
        case 1: window.open(this.$store.state.ctx + './sales.html#/maintain');
          break;
        case 2: /* window.open(this.$store.state.ctx + './sales.html#/maintain' */;
          break;
        case 3: window.open(this.$store.state.ctx + './standard.html#/productName');
          break;
        case 4: window.open(this.$store.state.ctx + './qualityControl.html#/qualityDesign');
          break;
        case 5: window.open(this.$store.state.ctx + './produce.html#/produceOrder');
          break;
        case 6: window.open(this.$store.state.ctx + './workshop.html#/slitting');
          break;
        case 7: window.open(this.$store.state.ctx + './logistics.html#/logisticsMain/logistics-querystorage#500201');
          break;
        case 8: window.open(this.$store.state.ctx + './process.html#/production');
          break;
        case 9: /* window.open(this.$store.state.ctx + './sales.html#/maintain' */;
          break;
        case 10: window.open(this.$store.state.ctx + './basicconfig.html#/baseData');
          break;
      }
    }
  }
}
</script>
<style scoped>
  .ytg-def { height: 100%; position: relative; }
  .ytg-def-title {
    position: absolute; top: 0; left: 5%;
    width: 90%; height: 60px; line-height: 60px;
    border-bottom: 1px solid #ddd;
    font-size: 14px; color: #666;
  }
  .ytg-def-content {
    position: relative;
    padding-top: 60px;
    min-width: 1200px; height: 100%;
    background: url(../../../assets/img/default-bg.png) center bottom no-repeat;
  }
  .ytg-def-ul {
    position: absolute; top: 50%; left: 50%;
    margin-left: -560px; margin-top: -250px;
    width: 1100px; height: 440px;
    overflow: hidden;
  }
  .ytg-def-li {
    cursor: pointer;
    position: relative; float: left;
    width: 200px; height: 200px;
    margin: 10px;
    -webkit-transition: transform .4s ease-out; transition: transform .4s ease-out;
  }
  .ytg-def-li1 { background-color: #4fa9ee; animation: fadeInLeft .5s ease-out .7s both; }
  .ytg-def-li2 { background-color: #45e3e6; animation: fadeInLeft .5s ease-out .6s both; }
  .ytg-def-li3 { background-color: #4fa9ee; animation: fadeInLeft .5s ease-out .5s both; }
  .ytg-def-li4 { background-color: #f2d830; animation: fadeInLeft .5s ease-out .4s both; }
  .ytg-def-li5 { background-color: #4fa9ee; animation: fadeInLeft .5s ease-out .3s both; }
  .ytg-def-li6 { background-color: #f26199; animation: fadeInRight .5s ease-out .3s both;}
  .ytg-def-li7 { background-color: #4fa9ee; animation: fadeInRight .5s ease-out .5s both;}
  .ytg-def-li8 { background-color: #4cd995; animation: fadeInRight .5s ease-out .7s both;}
  .ytg-def-li9 { background-color: #4fa9ee; animation: fadeInRight .5s ease-out .9s both;}
  .ytg-def-li10 { background-color: #f29e55; animation: fadeInRight .5s ease-out 1.1s both;}
  .ytg-def-li-c {
    opacity: 0;
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    background-color: #000;
    -webkit-transition: opacity .4s ease-out; transition: opacity .4s ease-out;
  }
  .ytg-def-li:hover { transform: scale(1.1, 1.1); }
  .ytg-def-li:hover > .ytg-def-li-c { opacity: .3; box-shadow: 0 0 5px #000; }

  .ytg-def-li-t {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: 100%; height: 100%;
    font-size: 14px; color: #fff; text-align: center;
  }
  .ytg-def-li-i {
    margin-top: 50px; margin-bottom: 10px;
    width: 60px; height: 60px;
    cursor: default;
  }
  .ytg-def-li-i1 { background-position: 0 -193px;cursor: pointer; }
  .ytg-def-li-i2 { background-position: -72px -193px;cursor: pointer; }
  .ytg-def-li-i3 { background-position: -144px -193px;cursor: pointer; }
  .ytg-def-li-i4 { background-position: -216px -193px;cursor: pointer; }
  .ytg-def-li-i5 { background-position: -288px -193px;cursor: pointer; }
  .ytg-def-li-i6 { background-position: 0 -269px;cursor: pointer; }
  .ytg-def-li-i7 { background-position: -72px -269px;cursor: pointer; }
  .ytg-def-li-i8 { background-position: -144px -269px;cursor: pointer; }
  .ytg-def-li-i9 { background-position: -216px -269px;cursor: pointer; }
  .ytg-def-li-i10 { background-position: -288px -269px;cursor: pointer; }
</style>
