* {
  margin: 0;
}

body {
  height: 100%;
}

.content {
  padding-top: 60px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
}

#root{
  width: 220px;
  height: calc(100% - 60px);
  overflow: scroll;
  margin: 20px;
}
.chart-item{
  margin-left:20px;
  margin-bottom:10px
}
.chart-item div{
  display: inline-block
}
.phone-wrap {
  flex: auto;
}
.phone_con {
  margin: 20px auto;
  background-size: 100% 100%;
  background-image: url(http://goh5.luoyefe.com/back/dist/img/phone.svg);
  background-repeat: no-repeat;
  width: 381px;
  height: 656px;
}
.phone_con .phone_screen {
  width: 320px;
  height: 480px;
  position: absolute;
  top: 140px;
  left: 3px;
  background-size: cover;
  background-repeat: no-repeat;
}

.phone_con #phone_title {
  position: absolute;
  top: 65px;
  width: 80%;
  left: 10%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 20px;
  font-size: 18px;
}
#nav{
  width: 100%;
  height: 60px;
  background: #31364a;
  position: fixed;
  top: 0;
  z-index: 99;
}
#nav .item.left {
  margin-left: 20px;
  font-size: 22px;
}
#nav .item {
  color: #fff;
  line-height: 60px;
  font-size: 12px;
}
#nav a{
  text-decoration: none
}

#canvas-container {
  border: none;
  width: 375px;
  height: calc(100% - 143px);
  margin: 103px 3px 40px 3px;
}