<template>
  <div>
    <!-- 顶部用户信息 -->
    <div style="padding:30px 5px 10px 5px; background-color:#c6dbee">
      <div style="display:flex;align-items: center">
        <div style="color:#666;background-color:#bababa;width:50%;border-radius: 15px;overflow:hidden;height:100%;font-size:16px;
          line-height:19px">

          <div
            style="color:#666;background-color:#0eafff;text-align:left;color:#fff;font-weight:bold;height:100%;display:flex;align-items: center"
            :style="jdtwidth(70)">
            <div style="margin-left:5px;font-size:16px;flex:0 0 70px;">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-grade"></use>
              </svg>
              学徒</div>
            <div>210/300</div>
          </div>
        </div>

        <div style="font-size:16px;margin-left:15%;background-color:#bababa;color:#fff;font-weight:bold;padding:0 15px 0 0 ;border-radius: 25px;
          line-height:19px">
          <svg class="icon" aria-hidden="true" style="font-size:16px;margin-left:2px">
            <use xlink:href="#icon-qian"></use>
          </svg>
          <span style="margin-left:5px">
            1234
          </span>
        </div>
      </div>
      <div style="display:flex;align-items: center">
        <div style="flex:0 0 65%">
          <div style="font-size:18px;font-weight:bold;color:#fff;text-shadow:1px 1px 0px #666">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yonghu"></use>
            </svg>
            灭曱甴大队长</div>
          <div style="font-size:13px;color:#888;margin-left:25px">ID:13600136000</div>
        </div>
        <div style="font-size:12px;color:#666">
          <div> <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon--huangguan"></use>
            </svg>
            团队级别：50人</div>
          <div><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shouyishuaicesuan"></use>
            </svg>
            推广收益：234</div>
        </div>
      </div>
    </div>


    <div style="margin:20px 0 100px 0;">
      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_blue">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yitihuachuxing"></use>
          </svg>
        </div>
        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">正在学习</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_green">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-format-list-bulleted"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">学习历史</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_orange">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-renwu"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">应聘历史</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_red">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-face"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">实名认证</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_green">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-caiwuguanli"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">收款方式</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_blue">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiaozu-"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">我的团队</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_orange">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huaban"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">邀请好友</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_red">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouzhiliushui"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">M币转让</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>


      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_green">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weiwaifaliao"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">奖品转赠</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>


      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_orange">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouzhiguanli"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">兑换经验</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>


      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_red">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiugaimima"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">安全中心</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>


      <div class="setting_list_item ">
        <div class="setting_list_item_icon setting_icon_bg_blue">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-guanyu"></use>
          </svg>
        </div>

        <div class="setting_list_item_text setting_list_item_border">
          <div class="setting_list_item_name">服务中心</div>
          <div class="setting_list_item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-iconfontjiantou2"></use>
            </svg>
          </div>
        </div>
      </div>

      <div class="setting_relogin">退出当前帐号</div>

    </div>

    <!-- 底部按钮 -->
    <div class="todolist-tab">
      <div class="todolist-tab-btn ">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
          </svg>
        </div>
        招聘市场
      </div>
      <div class="todolist-tab-btn  ">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-format-list-bulleted"></use>
          </svg>
        </div>
        游戏中心
      </div>

      <div class="todolist-tab-btn todolist-tab-btn-on">
        <div class="todolist-tab-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-account"></use>
          </svg>
        </div>
        个人中心
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "symarket",
    methods: {
      jdtwidth: function (x) {
        return {
          'width': x + '%'
        }
      }
    }

  }

</script>

<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #deeaf6;
    font-family: "微软雅黑";
  }

  .setting_relogin {
    /* background-color: #ffffff; */
    font-size: 18px;
    font-weight: bold;
    color: #e14123;
    /* padding: 18px; */
    text-align: center;
    margin: 30px 0;
  }

  .setting_liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
  }

  .setting_list_item_text {
    display: flex;
    flex: 0 0 78%;
    margin: 0 0 0 15px;
  }

  .setting_list_item_border {
    border-bottom: 1px solid #d0dcea;
  }

  .setting_list_item_right {
    color: #9b9b9b;
    font-size: 15px;
    position: absolute;
    right: 20px;
  }

  .setting_list_item {
    display: flex;
    color: #606060;
    font-size: 15px;
    font-weight: bold;
    line-height: 55px;
    padding: 0 0 0 20px;
    align-items: center;
  }

  .setting_list_item_icon {
    flex: 0 0 35px;
    /* width: 35px;
    height: 35px; */
    font-size: 20px;
    line-height: 35px;

    color: #fff;
    border-radius: 50%;
    text-align: center;
  }


  .setting_icon_bg_blue {
    background-color: #00aaee;
  }

  .setting_icon_bg_green {
    background-color: #47cc47;
  }

  .setting_icon_bg_orange {
    background-color: #ff9800;
  }

  .setting_icon_bg_red {
    background-color: #ff6f61;
  }





  .setting_liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
  }

  .setting_list_item_text {
    display: flex;
    flex: 0 0 78%;
    margin: 0 0 0 15px;
  }

  .setting_list_item_border {
    border-bottom: 1px solid #d0dcea;
  }

  .bgpic {
    display: inline-block;
    height: auto;
    max-width: 100%;
  }


  .card {
    display: flex;
    color: #fff;
    margin: 10px 10px 0 0;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    padding: 5px;
    align-items: center
  }

  .touxiang {
    flex: 0 0 20%;
    margin-right: 10px;
    border-radius: 100%;
    overflow: hidden;
  }

  .info {
    flex: 0 0 50%
  }

  .book {
    flex: 0 0 20%;
    text-align: center;
    border-radius: 30px;
    font-size: 15px;
    padding: 5px 3px;
    font-weight: bold
  }

  .bookzhi {
    background-color: #ece3fc;
    color: #9758ff;
  }

  .bookorange {
    background-color: #fcebd0;
    color: #ffa922;
  }


  .bookred {
    background-color: #f8ddde;
    color: #fa5053;
  }

  .bgorange {
    background-color: #ffa922
  }

  .bgred {
    background-color: #fa5053
  }

  .bgzhi {
    background-color: #9758ff
  }

  .info_title {
    font-weight: bold;
  }

  .info_value {
    font-size: 12px;
  }

  /* 底部栏 */
  .todolist-tab {
    color: #666;
    display: flex;
    position: fixed;
    bottom: 0;
    background-color: #d2e3f3;
    width: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 5px 0 2px 0;
    /* box-shadow: 0 -1px 3px #f1f1f1 */
  }

  .todolist-tab-btn {
    font-size: 13px;
    width: 33%;
    text-align: center
  }

  .todolist-tab-btn-on {
    color: #46a4da
  }

  .todolist-tab-icon {
    font-size: 23px;
  }

  .todolist-tab-count {
    position: absolute;
    margin-left: 14%;
    bottom: 30px;
    font-size: 12px;
    line-height: 12px;
    width: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    text-align: center;
    background-color: #fc4f4f
  }

</style>
