个人信息页面

<template>
  <div >
    <div class="me-message">
    <!-- 个人信息 -->
    <div class="personal-information" style="margin-top:20px">
      <b style="margin-left: 30px;margin-top: 200px;">个人信息</b>
    </div>
    <!-- 用户名 -->
    <div style="height: 200px;border-bottom:1px solid darkgray">
      <!-- 头像 -->
      <div style="float:left">
       <el-row class="demo-avatar demo-basic" style="float:left">
        <el-col :span="6">         
          <div class="demo-basic--circle" style="float: left;margin-left: 30px;margin-top: 20px;">
            <el-avatar :size="size" :src="circleUrl"></el-avatar>
          </div>
        </el-col>   
        </el-row>
        
          <ul style="float:left;list-style-type: none;margin-left: 50px;margin-top:50px">
            <li><b>用户名</b></li>
            <li><span>分析员</span> <p>级别：</p></li>
            <li><el-rate
                  v-model="zhi"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template=3.7>
                </el-rate></li>
          </ul>
        
                
      </div>
      <!-- shourudiv -->
        <div class="shourudiv">
        <ul>
          <li style="text-align:center"><b style="font-size: 30px">0</b><p>总收入</p></li>
          <li style="text-align:center"><b style="font-size: 30px">0</b><p>完成项目</p></li>
          <li style="text-align:center"><b style="font-size: 30px">0</b><p>正在进行的项目</p></li>
        </ul>
        
      </div> 

    </div>

    <div style="border-bottom:1px solid darkgray; height:200px;width:800px;line-height:50px;margin-top:40px;margin-left: 30px">
      
        <b>关于我：</b>
      <p>对客户新增的产品进行专业的维护以及报价、支付凭证审核、对于合同的不同类型的产品进行生产流程分配。</p>
      
      
    </div>
    <div style="line-height:50px;margin-left: 30px;margin-top:40px" class="geren">
      <ul>
        <li style=""><b>昵称：</b>昵称</li>
        <li style=""><b>邮箱：</b>ghfgfgfgf@.com</li>
        <li style=""><b>电话：</b>12345678912</li>
        <li style=""><b>类型：</b>皮卡皮卡</li>
        <li><b>技能：</b><el-tag>标签一</el-tag></li>
      </ul>

    </div>
    </div>
    <div class="me-message" style="margin-top: 15px;">
        gfdgfgf
    </div>
  </div>
  <!-- 评价 -->
 
  
</template>

<script>
  export default {
    name: ‘MessageBoard‘,
    data() {
      
      return {
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        zhi:‘3.7‘
      }
    },
    computed: {
      title (){
        return ‘留言板 - For Fun‘
      }
    }
  }
</script>

<style scoped>
  
  .me-message {
    
    background-color:white;
  }

  .el-container {
    width: 700px;
  }

  .me-main {
    overflow: hidden;
  }

  .me-log-box {
    margin-left: 30%;
    margin-top: 20px;

  }

  .personal-information{
    height: 300px;
    border-bottom:1px solid darkgray; height:50px;width:800px;
    
  }

  .imgg{
width: 100px;
height: 135px;
padding: 0;
float:left
}

.shourudiv{
  
  width:500px;
  margin-top: 30px;
  float: right;
}

.shourudiv ul{
  list-style-type: none;
    margin-left: 50px;
}

.shourudiv ul li{
    float: left;
    line-height: 50px;
    margin-right: 50px;
    font-size: 16px;
}

.geren{
  line-height:50px;
  margin-left: 30px;
  margin-top:40px;
  margin-bottom: 40px;
}
.geren ul{
  list-style-type: none;
}

.pingjia{

}
</style>