<template>
    <div class="setting">
        <go-back :title="title" ></go-back>
        <ul>
            <li>
                <h2>头像</h2>
                <div class="right">
                    <img src="http://www.ce.cn/newtravel/mjxj/mjtp/200607/08/W020060708336050196304.jpg" alt="">
                    <span class="iconfont">&#xe6f8;</span>
                </div>
            </li>
            <li>
                <h2>姓名</h2>
                <div class="right flex">
                    <input type="text" class="inputText" v-model='xm' />
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
            <li>
                <h2>职务</h2>
                <div class="right flex">
                    <input type="text" class="inputText" v-model='zw' />
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
            <li>
                <h2>昵称</h2>
                <div class="right flex">
                    <input type="text" class="inputText" v-model='nc' />
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
            <li>
                <h2>性别</h2>
                <div class="right flex">
                    <input type="text" class="inputText"  />
                    <el-radio v-model="radio" label="1">男</el-radio>
                    <el-radio v-model="radio" label="2">女</el-radio>
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
             <li>
                <h2>出生日期</h2>
                <div class="right flex">
                    <input type="text" class="inputText" v-model='csrq' />
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
             <li>
                <h2>微信号</h2>
                <div class="right flex">
                    <input type="text" class="inputText" v-model='wxh' />
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
            <li>
                <h2>QQ号</h2>
                <div class="right flex">
                    <input type="text" class="inputText" v-model='qqh' />
                    <span class="iconfont">&#xe6f8;</span>  
                </div>
            </li>
        </ul>

    </div>
</template>

<script>
import GoBack from "./components/goBack";
export default {
  name: "personalSetting",
  data() {
    return {
      title: "个人资料编辑",
      radio: "1",
      currentDate: new Date(),
      xm: "超人",
      zw: "1111",
      nc: "55",
      csrq: "526",
      wxh: "56",
      qqh: "65"
    };
  },
  components: {
    GoBack
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.setting {
  ul {
    li {
      padding: 0.18rem 0.28rem;
      background: #fff;
      @include align-items-center;
      @include display-flex;
      @include justify-content-between;
      border-bottom: 1px #e5e5e5 solid;
      text-align: center;
      h2 {
        font-size: 0.34rem;
        margin: 0 0.3rem 0 0;
      }
      .right {
        @include align-items-center;
        @include display-flex;

        img {
          width: 1.1rem;
          height: 1.1rem;
          border-radius: 50%;
          display: block;
        }
        .iconfont {
          margin: 0 0 0 0.36rem;
          color: $font-color;
        }
        .inputText {
          @include flex;
          border: none;
          height: 0.7rem;
          line-height: 0.7rem;
          font-size: 0.3rem;
          padding: 0 0 0 15px;
          text-align: right;
          color: #333;
        }
      }
      .flex {
        @include flex;
      }
      &:first-child {
        margin: 0.27rem 0;
        border: none;
      }
      &:last-child {
        border: none;
      }
    }
  }
}
</style>

