职业培训

zhangxiaoxu123456

2022-04-11 5652ac21dcf9dc05fd9d0bf6005375a6224aace6

 src/pages/components/showIndexTitle.vue

@@ -1,159 +1,165 @@
<template>
    <div class="showIndexTitle-wrap">
      <h1 class="title">石家庄人社局业务运行数据分析平台</h1>
      <el-menu :default-active="$route.path" router mode="horizontal" class="el-menu-demo">
        <div class="showIndex-left">
          <el-menu-item index="/index">
            <div class="showIndex-block">
              <h1>首页</h1>
            </div>
          </el-menu-item>
          <el-menu-item index="/jiuyeAndChuangye">
            <div class="showIndex-block">
              <h1>就业创业</h1>
            </div>
          </el-menu-item>
          <el-menu-item index="/shehuiBaozhang">
            <div class="showIndex-block">
              <h1>社会保障</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>人事人才</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>劳动关系</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>其它业务</h1>
            </div>
          </el-menu-item>

        </div>
        <div class="showIndex-right">
          <el-menu-item>
            <div class="showIndex-block">
              <h1>营商政策</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>通讯录</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>工作周报</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>文档中心</h1>
            </div>
          </el-menu-item>
          <el-menu-item>
            <div class="showIndex-block">
              <h1>退出登录</h1>
            </div>
          </el-menu-item>
        </div>
      </el-menu>
    </div>
  <div class="showIndexTitle-wrap">
    <h1 class="title">石家庄人社局业务运行数据分析平台</h1>
    <el-menu
      :default-active="$route.path"
      router
      mode="horizontal"
      class="el-menu-demo"
    >
      <div class="showIndex-left">
        <el-menu-item index="/index">
          <div class="showIndex-block">
            <h1>首页</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/jiuyeAndChuangye">
          <div class="showIndex-block">
            <h1>就业创业</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/shehuiBaozhang">
          <div class="showIndex-block">
            <h1>社会保障</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>人事人才</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>劳动关系</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>其它业务</h1>
          </div>
        </el-menu-item>
      </div>
      <div class="showIndex-right">
        <el-menu-item index="/businessPolicy">
          <div class="showIndex-block">
            <h1>营商政策</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>通讯录</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>工作周报</h1>
          </div>
        </el-menu-item>
        <el-menu-item>
          <div class="showIndex-block">
            <h1>文档中心</h1>
          </div>
        </el-menu-item>
        <el-menu-item index="/login">
          <div class="showIndex-block">
            <h1>退出登录</h1>
          </div>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
    export default {
        name: "showIndexTitle"
    }
export default {
  name: "showIndexTitle"
};
</script>

<style lang="scss">
  .showIndexTitle-wrap{
    .el-menu-item:focus, .el-menu-item:hover{
      background-color:transparent;
    }
    /*.el-menu-item:focus{*/
    /*  background:url("../../assets/images/menu-active.png") no-repeat center;*/
    /*  background-size: 100% 100%;*/
    /*  width: 12.8rem  !* 128/10 *!;*/
    /*  height: 5rem;*/
    /*}*/
    .el-menu-item.is-active{
      background:url("../../assets/images/menu-active.png") no-repeat center;
      background-size: 100% 100%;
      width: 12.8rem  /* 128/10 */;
      height: 5rem;
    }
    .el-menu-item{
      background:url("../../assets/images/menu-normal.png") no-repeat center;
      background-size: 100% 100%;
      width: 12.8rem  /* 128/10 */;
      height: 5rem;
      margin-right: 1.2rem  /* 12/10 */;
    }
    .el-menu.el-menu--horizontal{
      border-bottom: 0;
    }
.showIndexTitle-wrap {
  .el-menu-item:focus,
  .el-menu-item:hover {
    background-color: transparent;
  }

  /*.el-menu-item:focus{*/
  /*  background:url("../../assets/images/menu-active.png") no-repeat center;*/
  /*  background-size: 100% 100%;*/
  /*  width: 12.8rem  !* 128/10 *!;*/
  /*  height: 5rem;*/
  /*}*/
  .el-menu-item.is-active {
    background: url("../../assets/images/menu-active.png") no-repeat center;
    background-size: 100% 100%;
    width: 0.5rem  /* 128/256 */;
    height: 0.1953125rem  /* 50/256 */;
  }
  .el-menu-item {
    background: url("../../assets/images/menu-normal.png") no-repeat center;
    background-size: 100% 100%;
    width: 0.5rem  /* 128/256 */;
    height: 0.1953125rem  /* 50/256 */;
    margin-right: 0.046875rem  /* 12/256 */;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: 0;
  }
}
</style>
<style lang="scss" scoped>
  .showIndexTitle-wrap{
    width: 100%;
    height: 9rem  /* 90/10 */;
    background:url("../../assets/images/jiashicang-title-bj.png") no-repeat center;
    background-size: 100% 100%;
    .title{
      font-size: 3rem  /* 30/10 */;
      font-family: 'Source Han Sans CN';
      color: #fff;
      text-align: center;
      line-height: 7rem  /* 70/10 */;
    }
    .showIndex-left{
      position: absolute;
      left:1rem  /* 10/10 */;
      top: -5rem  /* 10/10 */;
      display: flex;
      .showIndex-block{
        /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
        /*background-size: 100% 100%;*/
        /*width: 12.8rem  !* 128/10 *!;*/
        /*height: 5rem;*/
        h1{
          color: #fff;
          font-size: 2.4rem;
          text-align: center;
          line-height: 5rem;
        }
      }
    }
    .showIndex-right{
      position: absolute;
      right:1rem  /* 10/10 */;
      top: -5rem  /* 10/10 */;
      display: flex;
      .showIndex-block{
        /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
        /*background-size: 100% 100%;*/
        /*width: 12.8rem  !* 128/10 *!;*/
        /*height: 5rem;*/
        /*cursor: pointer;*/
        h1{
          color: #fff;
          font-size: 2.4rem;
          text-align: center;
          line-height: 5rem;
        }
      }
      .menu-active{

.showIndexTitle-wrap {
  width: 100%;
  height: 0.3515625rem  /* 90/256 */;
  background: url("../../assets/images/jiashicang-title-bj.png") no-repeat
    center;
  background-size: 100% 100%;
  .title {
    font-size: 0.1171875rem  /* 30/256 */;
    //font-family: "Source Han Sans CN";
    color: #fff;
    text-align: center;
    line-height: 0.2734375rem  /* 70/256 */;
  }
  .showIndex-left {
    position: absolute;
    left: 0.0390625rem  /* 10/256 */;
    top: -0.1953125rem  /* -50/256 */;
    display: flex;
    z-index: 9;
    .showIndex-block {
      /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
      /*background-size: 100% 100%;*/
      /*width: 12.8rem  !* 128/10 *!;*/
      /*height: 5rem;*/
      h1 {
        color: #fff;
        font-size: 0.09375rem  /* 24/256 */;
        text-align: center;
        line-height: 0.1953125rem  /* 50/256 */;
      }
    }
  }
  .showIndex-right {
    position: absolute;
    right: 0.0390625rem  /* 10/256 */;
    top: -0.1953125rem  /* -50/256 */;
    display: flex;
    z-index: 9;
    .showIndex-block {
      /*background:url("../../assets/images/menu-normal.png") no-repeat center;*/
      /*background-size: 100% 100%;*/
      /*width: 12.8rem  !* 128/10 *!;*/
      /*height: 5rem;*/
      /*cursor: pointer;*/
      h1 {
        color: #fff;
        font-size: 0.09375rem  /* 24/256 */;
        text-align: center;
        line-height: 0.1953125rem  /* 50/256 */;
      }
    }
    .menu-active {
    }
  }
}
</style>