<template>
  <div>
    <div class="con-title">修改头像</div>
    <div class="con-box">
      <el-row justify="center">
        <el-col :xs="24" :sm="9" :md="8" :lg="7" :xl="6">
          <div class="pic-show">
            <img src="" alt="">
          </div>
        </el-col>
        <el-col :xs="24" :sm="15" :md="16" :lg="17" :xl="18">
          <div class="info">支持jpg、gif、png或bmp格式的图片，建议文件小于5M</div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.con-title {
  padding: 0 30px;
  font-size: 16px;
  line-height: 45px;
  border-bottom: 1px solid #c9c9c9;
}
.con-box {
  padding: 0.5rem 0.3rem;
  .pic-show {
    display: block;
    margin: 0 auto;
    width: 2rem;
    height: 2rem;
    background: #ffffff url('../../assets/img/person-default.jpg') center center no-repeat;
    background-size: cover;
    border: 1px solid #ffffff;
    border-radius: 50%;
  }
  .info {
    margin-top: 0.2rem;
  }
  .upload-demo {
    display: block;
    margin: 0.8rem 0 0 0;
  }
}

@media (max-width: 767px) {
  .con-box {
    .info {
      margin-top: 0.2rem;
      text-align: center;
    }
    .upload-demo {
      text-align: center;
    }
  }
}
</style>
