<template>
    <div class="mainBox">
        <side-bar :active_index="3"></side-bar>
        <div class="mainContent">
            <h1 class="title">
                <div class="GoBack" @click="$router.go(-1)"><span class="iconfont">&#xe720;</span>返回</div>
                <span class="name">编辑个人资料</span>
                <div class="GoBack"></div>
            </h1>
            <div class="information">
                <div class="blueBorder"></div>
                <div class="name">
                   <div class="item">
                        <h2>个人头像</h2>
                       <div class="tx">

                         <!--<img :src="myinfo.avatar" alt="" v-if="myinfo.avatar != ''">-->
                         <!--&lt;!&ndash;<h2>个人信息</h2>&ndash;&gt;-->
                         <!--<img :src="avatar" alt="" v-if="myinfo.avatar == ''">-->


                       </div>
                   </div>
                </div>
                <div class="set">
                    <div class="item">
                        <h2>姓名</h2>
                       <div class="tx">
                           <input type="text" class="InputBox" placeholder="姓名">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                   <div class="item">
                       <h2>职务</h2>
                       <div class="tx">
                           <input type="text" class="InputBox" placeholder="职务">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                   <div class="item">
                       <h2>昵称</h2>
                       <div class="tx">
                           <input type="text" class="InputBox" placeholder="昵称">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                   <div class="item">
                        <h2>性别</h2>
                       <div class="tx">
                           <input type="text" class="InputBox" placeholder="性别">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                   <div class="item">
                        <h2>出生日期</h2>
                        <div class="tx">
                           <input type="text" class="InputBox" placeholder="出生日期">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                   <div class="item">
                        <h2>微信号</h2>
                       <div class="tx">
                           <input type="text" class="InputBox" placeholder="微信号">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                    <div class="item">
                        <h2>QQ号</h2>
                       <div class="tx">
                           <input type="text" class="InputBox" placeholder="QQ号">
                           <span class="iconfont">&#xe6f9;</span>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SideBar from "@/pages/layout/SideBar";

export default {
  name: "EditPersonal",
  components: {
    SideBar
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.mainContent {
  .title {
    font-size: 0.36rem;
    padding: 0.3rem 0.37rem;
    color: #34495e;
    @include align-items-center;
    @include display-flex;
    @include justify-content-between;
    @include text-align;
    background: #fff;
    .GoBack {
      color: $main-color;
      font-size: 0.36rem;
      @include display-flex;
      .iconfont {
        color: $main-color;
        font-size: 0.5rem;
      }
    }
  }
  .information {
    width: 100%;
    margin: 0 auto;
    .name {
      background: #fff;
      width: 70%;
      margin: 0 auto;
      border-radius: 4px;
      .item {
        padding: 0.37rem 0.4rem;
        @include align-items-center;
        @include display-flex;
        @include justify-content-between;
        @include text-align;
        .tx {
          @include display-flex;
          @include align-items-center;
          @include text-align;
          img {
            width: 1.24rem;
            height: 1.24rem;
            border-radius: 50%;
            display: inline-block;
            margin-right: 0.26rem;
          }
          .iconfont {
            font-size: 0.4rem;
          }
        }
      }
      h2 {
        color: #34495e;
        font-size: 0.34rem;
      }
    }
    .set {
      background: #fff;
      width: 70%;
      margin: 0 auto;
      border-radius: 4px;
      margin-top: 0.3rem;
      .item {
        padding: 0.32rem 0.4rem;
        @include align-items-center;
        @include display-flex;
        @include justify-content-between;
        @include text-align;
        border-bottom: 1px #e5e5e5 solid;
        &:last-child {
          border: none;
        }
        .tx {
          @include display-flex;
          @include align-items-center;
          @include text-align;
          font-size: 0.36rem;
          .InputBox {
            border: none;
            @include flex;
            text-align: right;
            color: $pgh-color;
          }
          .iconfont {
            font-size: 0.4rem;
          }
          img {
            width: 0.42rem;
            height: 0.42rem;
            border-radius: 50%;
            display: inline-block;
            margin-right: 0.3rem;
          }
        }
      }
      h2 {
        color: #34495e;
        font-size: 0.36rem;
      }
    }
  }
}
</style>
