@mixin defaultColor() {
  background-color: rgba(255,255,255,0.08);
  border-radius: 10px;
}

/* 头部 */
.personal-data-header{
  margin-bottom:15px;
}
.personal-header-info{
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  margin-top: 15px;
}
/* 头部 */

/* 资源 */
.personal-assets{
  width: 540px;
  @include defaultColor();
}
.personal-info,.personal-assets{
  padding: 0 20px;
}
.personal-assets-header{
  height: 286px;
}
/* 资源 */

/* 用户头像 */
$avatar-size: 240px;
.personal-avatar-container{
  width: $avatar-size;
  margin-right: 20px;
}
.personal-upload-avatar{
  @include square($avatar-size);
  margin-top: 10px;
}
.personal-update-avatar{
  right: 10px;
  bottom: 10px;
  width: 80px;
  height: 26px;
  background-color: rgba(0,0,0,0.2);
  border-radius: 12px;
  font-size: 14px;
  line-height: 18px;
}
/* 用户头像 */

/* 个人资料 */
.personal-info-scroll{
  padding: 20px 0;
}
.personal-info{
  @include defaultColor();
  width: 310px;
  margin-left: 15px;
}
.personal-edit-icon{
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 18px;
  font-weight: 400;
}
.personal-edit-icon img{
  width: 13px;
  height: 15px;
  margin-right: 7px;
}
.personal-info-item{
  margin-top: 15px;
  font-size: 14px;
  line-height: 32px;
  font-weight: 400;
}
.personal-info-item:first-child{
  margin-top: 0 !important;
}
.personal-info-label,.personal-info-value{
  line-height: 32px;
}
.personal-info-label{
  width: 40px;
}
.personal-info-placeholder{
  color: rgba(255,255,255,0.5);
}

/* 个人资料 */

/* 底部上传用户照片墙 */
.personal-assets-footer{
  margin-top: 22px;
}
.personal-assets-footer-item{
  @include square(120px);
}
/* 底部上传用户照片墙 */

/* 音频 */
.personal-audio-container{
  @include defaultColor();
  padding: 30px;
  margin-top: 10px;
}
/* 音频 */

/* 个人资料编辑模式 */
.personal-info-edit-item{
  margin-top: 11px;
}
.personal-info-edit-item:first-child{
  margin-top: 22px;
}
.personal-edit-input{
  height: 32px;
  @include defaultColor();
  padding: 0 10px;
}
.personal-edit-input input,.personal-edit-input textarea{
  color: #fff;
  font-size: 14px;
  line-height: 16px;
}
.personal-edit-input input::placeholder,.personal-edit-input textarea::placeholder {
  color: rgba(255,255,255,0.7);
}
/* 个人资料编辑模式 */

/* textarea */
.personal-edit-textarea-container{
  height: auto;
  padding: 5px 10px;
}
.personal-edit-textarea{
  height: 60px;
  resize: none;
  line-height: 20px !important;
}
.personal-edit-textarea-length{
  text-align: right;
  line-height: 20px;
}
/* textarea */

/* 底部 */
.personal-data-footer,.personal-data-footer>div{
  height: 150px;
}
.personal-data-footer>div {
  margin-right: 15px;
  @include defaultColor();
  padding: 0 30px;
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
}
.personal-data-footer>div:last-child{
  margin-right: 0;
}
.personal-footer-button{
  background-color: rgba(255,255,255,0.1);
  border-radius: 18px;
  width: 80px;
  height: 36px;
  color: #59ACFF;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.personal-footer-icon{
  width: 44px;
  height: 44px;
  margin-right: 15px;
}
/* 底部 */