study_sm/src/containers/center/components/menu/index.css

.m-left-block {
    width: 189px;
    background: #f8f8f8;
}
.m-left-list {
  margin-top: 20px;
  min-height: 665px;
  border-top: 1px solid #f8f8f8;
}
.m-left-list a {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f8f8f8;
  font-size: 15px;
  display: block;
  box-sizing: border-box;
  padding-left: 65px;
  position: relative;
}
.m-left-list a:hover,
.m-left-list a.current {
  color: #3290d4;
}
.m-left-list a:hover .ico-desktop,
.m-left-list a.current .ico-desktop {
  background-position: -130px -240px;
}
.m-left-list a:hover .ico-course,
.m-left-list a.current .ico-course {
  background-position: 0 -30px;
}
.m-left-list a:hover .ico-files,
.m-left-list a.current .ico-files {
  background-position: -30px -30px;
}
.m-left-list a:hover .ico-car,
.m-left-list a.current .ico-car {
  background-position: -60px -30px;
}
.m-left-list a:hover .ico-order,
.m-left-list a.current .ico-order {
  background-position: -90px -30px;
}
.m-left-list a:hover .ico-news,
.m-left-list a.current .ico-news {
  background-position: -120px -30px;
}
.m-left-list a:hover .ico-set,
.m-left-list a.current .ico-set {
  background-position: -150px -30px;
}
.m-left-list a:hover .ico-payment,
.m-left-list a.current .ico-payment {
  background-position: 2px -752px;
}
.m-left-list a:hover .ico-personal-m,
.m-left-list a.current .ico-personal-m {
  background-position: -62px -750px;
}
.m-left-list a:hover .ico-notes,
.m-left-list a.current .ico-notes {
  background-position: -90px -730px;
}
.m-left-list a:hover .ico-process,
.m-left-list a.current .ico-process {
  background-position: -120px -730px;
}
.m-left-list a:hover .ico-delay,
.m-left-list a.current .ico-delay {
  background-position: 3px -815px;
}
.m-left-list a:hover .ico-time,
.m-left-list a.current .ico-time {
  background-position: -29px -815px;
}
.m-left-list .current {
  border-left: 5px solid #3290d4;
  background-color: #fff;
}
.m-left-list .current a {
  color: #3290d4;
  width: 187px;
  background-color: #fff;
  border-right: 2px solid #fff;
}
.m-left-list .current a .ico-desktop {
  background-position: -130px -240px;
}
.m-left-list .current a .ico-course {
  background-position: 0 -30px;
}
.m-left-list .current a .ico-files {
  background-position: -30px -30px;
}
.m-left-list .current a .ico-car {
  background-position: -60px -30px;
}
.m-left-list .current a .ico-order {
  background-position: -90px -30px;
}
.m-left-list .current a .ico-news {
  background-position: -120px -30px;
}
.m-left-list .current a .ico-set {
  background-position: -150px -30px;
}
.m-left-list .current a .ico-payment {
  background-position: 2px -752px;
}
.m-left-list .current a .ico-personal-m {
  background-position: -62px -750px;
}
.m-left-list .current a .ico-notes {
  background-position: -90px -730px;
}
.m-left-list .current a .ico-process {
  background-position: -120px -730px;
}
.m-left-list .current a .ico-delay {
  background-position: 3px -815px;
}
.m-left-list .current a .ico-time {
  background-position: -29px -815px;
}
.m-left-list .current .p-ico2 {
  left: 20px;
}
.m-left-list .current .sub-list {
  display: block;
}
.m-left-list .current .sub-list a {
  color: #666;
}
.m-left-list .current .sub-list a:before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid;
  border-color: transparent transparent #ddd #ddd;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: -3px;
}
.m-left-list .current .sub-list a:hover,
.m-left-list .current .sub-list a.current {
  color: #3290d4;
  border-left: 0;
}
.m-left-list .sub-list {
  display: none;
}
.m-left-list .p-ico2 {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 12px;
  left: 25px;
}
.m-left-list .ico-desktop {
  background-position: -100px -240px;
}
.m-left-list .ico-course {
  background-position: 0 0;
}
.m-left-list .ico-files {
  background-position: -30px 0;
}
.m-left-list .ico-car {
  background-position: -60px 0;
}
.m-left-list .ico-order {
  background-position: -90px 0;
}
.m-left-list .ico-news {
  background-position: -120px 0;
}
.m-left-list .ico-set {
  background-position: -150px 0;
}
.m-left-list .ico-new {
  width: 10px;
  height: 10px;
  background-position: -260px -30px;
  top: 10px;
  left: 42px;
}
.m-left-list .ico-payment {
  background-position: 2px -722px;
}
.m-left-list .ico-personal-m {
  background-position: -62px -721px;
}
.m-left-list .ico-notes {
  background-position: -90px -700px;
}
.m-left-list .ico-process {
  background-position: -120px -700px;
}
.m-left-list .ico-delay {
  background-position: 3px -785px;
}
.m-left-list .ico-time {
  background-position: -29px -785px;
}
.m-left-list .li-1 {
  border-top: 5px solid #dadada;
  position: relative;
  top: -1px;
}
.m-left-list .li-1 .ico-new {
  top: 13px;
}

.m-left-block .user-block {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
}
.m-left-block .user-block .user-img {
  width: 140px;
  height: 140px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #dadada;
  padding: 5px;
}
.m-left-block .user-block .user-name {
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}