修改了我的信息模块的样式和布局

hailin

2023-07-13 c25002c67252a521624af3f352bc1c5378775c21

修改了我的信息模块的样式和布局

 src/layout/components/Navbar.vue

@@ -65,6 +65,8 @@
  position: relative;
  background: #fff;
  display: flex;
  border-bottom: 1px solid #f0f2f5;
  // box-shadow: 0 0 0.857143rem rgba(0, 0, 0, 0.12);
  // box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
@@ -124,22 +126,25 @@
    }

    .avatar-container {
      margin-right: 30px;
      margin-right: 24px;
      height: 100%;
      .avatar-wrapper {
        // margin-top: 5px;
        width: 40px;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          width: 30px;
          height: 30px;
          font-size: 10px;
          border-radius: 50%;
          margin-right: 12px;
          // margin-right: 12px;
          background: #0077DB;
          line-height: 40px;
          line-height: 31px;
          text-align: center;
          color: #fff;
        }

 src/views/personal/myInformation/index.vue

@@ -1,11 +1,33 @@
<template>
  <div class="my-main content-main">
    <div class="my-info">
      <div class="tips">
        <span />
        <div>基本信息</div>
      <div class="tips-main">
        <div class="tips">
          <span />
          <div>基本信息</div>
        </div>
        <div class="tips-btn">
          <span><i class="el-icon-edit" />操作：</span>
          <el-button type="text">编辑</el-button>
        </div>
      </div>
      <el-table
      <div class="message">
        <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>121212121212</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />姓名：</span>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
        </div>
        <div class="message-item">
          <span><i class="el-icon-edit" />电话号码：</span>
          19825217196</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />邮箱：</span>
          1212112</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />签名：</span>
          2121212121212121</div>
      </div>
      <!-- <el-table
        ref="infoTable"
        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
        :data="infoTable"
@@ -49,17 +71,23 @@
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table> -->
    </div>
    <div class="my-business">
      <div class="tips">
        <span />
        <div>企业信息</div>
      <div class="tips-main">
        <div class="tips">
          <span />
          <div>企业信息</div>
        </div>
        <div class="tips-btn">
          <span><i class="el-icon-edit" />操作：</span>
          <el-button type="text">编辑</el-button>
        </div>
      </div>
      <el-table
      <!-- <el-table
        ref="businessTable"
        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
        :data="businessTable"
@@ -109,10 +137,30 @@
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">退出</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table> -->
      <div class="message">
        <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>121212121212</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />姓名：</span>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}"/>{{ 'jack' }}</el-tag>
        </div>
        <div class="message-item">
          <span><i class="el-icon-edit" />电话号码：</span>
          19825217196</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />邮箱：</span>
          1212112</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />签名：</span>
          2121212121212121</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />操作：</span>
          <el-button type="text">编辑</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
@@ -161,34 +209,98 @@
.my-main{
  .my-info,.my-business{
    background: #fff;
    padding: 20px 20px 10px 20px;
    // padding: 10px 20px 10px 20px;
    margin: 0;
    margin-bottom: 12px;
    .tips{
    border-radius: 6px;
    overflow: hidden;
    .tips-main{
      // margin: ;
      padding: 10px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      // height: ;
      &:hover{
        background: #85bff810;
        .tips-btn{
          display: block;
          left: 0;
          opacity:1;
        }
      }
      .tips-btn{
        height: 100%;
        // display: none;
        position: relative;
        opacity:0;
        left: 100px;
        transition: all 0.3s ease-in-out;
      }
      .tips{
      height: 100%;
      display: flex;
      height: 24px;
      align-items: center;
      font-size: 16px;
      margin-bottom: 12px;
      span{
      // margin-bottom: 12px;
      >span{
        display: inline-block;
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #0077DB;
      }
      div{
      >div{
        height: 100%;
        line-height: 26px;
      }
      .el-button{
        padding: 0;
      }
      }
    }

    // 基本信息和企业信息的每一个信息项样式
    .message{
      padding: 0px 20px 10px 20px;

      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid #F2F6FC;
      // border-top: 1px solid #F2F6FC;
      >div{
        flex: 30%;
        max-width: 30%;
        padding: 8px;
        color: #606266;
        align-items: center;
        // height: 65px;
        font-size: 12px;
        height: 52px;
        display: flex;
        align-items: center;
        >span{
          color: #303133;
          font-size: 16px;
          //
          >i{
            margin-right: 8px;
          }
        }
      }
      // >div:nth-child(5){
      //   flex: 60%;
      //   max-width: 60%;
      // }
    }
  }
  .my-info{

  }
  .my-business{

    margin-top: 28px;
  }
}
</style>