<template>
  <el-row class="page">
    <el-row class="block-view">
      <el-row class="top">
        <el-col>
          <el-text class="mx-1">个人信息</el-text>
        </el-col>
      </el-row>

      <el-row>
        <el-image class="user-img" src="/user.png" title="点击设置头像"></el-image>
      </el-row>
      
      <el-row class="express-view">
        <el-row class="express-no-view">
          <el-text class="label">姓名:</el-text>
          <el-input class="info" placeholder="adminInfo.name"></el-input>
        </el-row>
        <el-row class="express-no-view">
          <el-text class="label">账号:</el-text>
          <el-input class="info" placeholder="adminInfo.username"></el-input>
        </el-row>
        <el-row class="express-no-view">
          <el-text class="label">邮箱:</el-text>
          <el-input class="info" placeholder="adminInfo.email"></el-input>
        </el-row>
        <el-row class="express-no-view">
          <el-text class="label">签名:</el-text>
          <el-input class="info" placeholder="adminInfo.signature"></el-input>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';

const adminInfo = ref({
  name: 'yyy',
  username: '123',
  email: 'admin@example.com',
  signature: '致力于教育事业'
});
</script>

<style>
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: white;
  line-height: 20px;
}
.block-view {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 20px;
  color: gray;
}
.express-view {
  display: flex;
  flex-direction: column; /* 垂直展示 */
  width: 100%;
}
.express-no-view {
  display: flex;
  flex-direction: row; /* 横向展示 */
  margin-left: 150px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 200;
}
.label {
  font-weight: bold;  /* 更改标签字体为粗体 */
  margin-right: 10px; /* 右边距，间隔标签与内容 */
}
.info {
  font-size: large;
  width: 800px;  /* 改变信息字体大小 */
}

.user-img{
  height: 50px;
   width: 50px; 
   margin: 0 auto;
}
</style>
