ChuangHeng/src/views/main-sidebar.vue

<template>
  <aside
    class="aui-sidebar"
  >
    <div class="logo">
      <img src="@/assets/images/agent/logo.png">
    </div>
    <div class="create_dialog">
      + 创建新对话
    </div>
    <div class="aui-sidebar__inner" style="margin-top: 26px;">
      <el-menu
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :default-active="activeMenuId"
        :collapseTransition="false"
        class="aui-sidebar__menu"
      >
        <sub-menu
          v-for="(menu, index) in erjiMenu"
          :key="menu.id"
          :menu="menu"
          :index="index"
        />
      </el-menu>
    </div>
    <div class="user_info">
      <div class="left" @click.self="handleUser">
        <img src="@/assets/images/agent/avatar.png">
        <div class="name">
          <span>{{ userName }}</span>
          <span class="type">{{ userType }}</span>
        </div>
      </div>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
export default {
  data () {
    return {
      activeMenuId:'',
      erjiMenu:[],
      userName:'威廉教练',
      userType:'专业教练',
    }
  },
  components: {
    SubMenu
  },
  computed:{
    erjiMenudata(){
      return this.$store.state.erjismenu;
    }
  },
  watch:{
    "$store.state.currentMenuId":"changeMenuId",
    erjiMenudata(e){
      this.erjiMenu=e;
      console.log(this.erjiMenu);
    }
  },
  methods:{
    changeMenuId(newval,oldval){
      if(newval!=oldval){
        this.activeMenuId=newval;
      }
    },
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
    this.erjiMenu=this.$store.state.erjismenu==null?this.$store.state.sidebarMenuList[0].children:this.$store.state.erjismenu;
 }
}
</script>

<style lang="scss" scoped>
.logo{
  img{
    width: 202px;
    height: 34px;
    margin-top: 9px;
  }
}

.create_dialog{
  width: 100%;
  height: 42px;
  background: #761E6A;
  border-radius: 8px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 42px;
  text-align: center;
  margin-top: 44px;
  cursor: pointer;
}

.user_info{
  width: 100%;
  padding: 24px 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #E5E7EB;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  .left{
    display: flex;
    align-items: center;
    cursor: pointer;
    img{
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .name{
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      span{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 14px;
        color: #111111;
        line-height: 20px;
        &.type{
          font-weight: 400;
          font-size: 12px;
          color: #707784;
          line-height: 17px;
          margin-top: 2px;
        }
      }
    }
  }
  .right{
    cursor: pointer;
    img{
      width: 18px;
      height: 18px;
    }
  }
}

.loginBox{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  .box{
    width: 712px;
    height: 418px;
    background: #FFFFFF;
    border-radius: 16px;
    display: flex;
    .left{
      width: 288px;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }

    .right{
      width: calc(100% - 288px);
      height: 100%;
      padding: 85px 48px 31px 56px;
      box-sizing: border-box;
      position: relative;
      .close{
        width: 12px;
        height: 12px;
        position: absolute;
        top: 26px;
        right: 22px;
        cursor: pointer;
      }
      .tabs{
        width: 100%;
        display: flex;
        align-items: center;
        margin-left: -24px;
        .t_pre{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #111111;
          line-height: 20px;
          padding-bottom: 8px;
          position: relative;
          width: 118px;
          text-align: center;
          cursor: pointer;
          &:last-child{
            margin-left: 0;
          }
          &.active{
            font-weight: bold;
            color: #2463EB;
            &::after{
              content: '';
              width: 72px;
              height: 2px;
              background: #2463EB;
              position: absolute;
              bottom: 0;
              left: 50%;
              margin-left: -36px;
            }
          }
        }
      }
      .content{
        margin-top: 14px;
        .c_pre{
          height: 44px;
          margin-top: 20px;
          background: #FFFFFF;
          border-radius: 6px;
          border: 1px solid #E5E7EB;
          display: flex;
          align-items: center;
          .left{
            width: 214px;
          }
          .cp_right{
            width: calc(100% - 214px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            &::before{
              content: '';
              width: 1px;
              height: 21px;
              background: rgba(36,99,235,0.21);
              position: absolute;
              top: 50%;
              margin-top: -10.5px;
              left: 0;
            }
            span{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #3C82F6;
              line-height: 20px;
            }
          }
        }
      }
      .login{
        width: 100%;
        height: 46px;
        background: rgba(36, 99, 235, .5);
        border-radius: 6px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 46px;
        text-align: center;
        margin-top: 30px;
        letter-spacing: 1px;
        cursor: pointer;
        &.active{
          background: rgba(36, 99, 235, 1);;
        }
      }
      .agree{
        margin-top: 36px;
      }
    }
  }
}

::v-deep .el-input__inner{
  border: none !important;
  width: calc(100% - 2px);
  margin-left: 2px;
}
::v-deep .el-checkbox__label{
  font-weight: 400;
  font-size: 12px !important; 
  color: #9CA3AF !important;
  line-height: 17px;
}
</style>