<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>
      <img src="../../assets/symarket.jpg" class="bgpic"></img>
    </div>

<!-- 这里的margin:0 0 204px 0 只是为了截效果图时用，实际开发时请删除 -->
    <div style="margin:0 0 200px 0">

      <div class="card bgorange">
        <div class="touxiang"><img src="../../assets/touxiang_2.jpg" class="bgpic"></img></div>
        <div class="info">
          <div class="info_title">主管</div>
          <div class="info_value">预约时间：11:00~11:10</div>
          <div class="info_value">要求经验：100~999</div>
          <div class="info_value">职位收益：2天 / 5%</div>
        </div>
        <div class="book bookorange">
          <div>$99</div>
          <div>预约</div>
        </div>
      </div>


      <div class="card bgred">
        <div class="touxiang"><img src="../../assets/touxiang_3.jpg" class="bgpic"></img></div>
        <div class="info">
          <div class="info_title">经理</div>
          <div class="info_value">预约时间：12:00~12:10</div>
          <div class="info_value">要求经验：1000~1999</div>
          <div class="info_value">职位收益：3天 / 20%</div>
        </div>
        <div class="book bookred">
          <div>$399</div>
          <div>预约</div>
        </div>
      </div>

      <div class="card bgzhi">
        <div class="touxiang"><img src="../../assets/touxiang_1.jpg" class="bgpic"></img></div>
        <div class="info">
          <div class="info_title">总裁</div>
          <div class="info_value">预约时间：13:00~13:10</div>
          <div class="info_value">要求经验：2000~9999</div>
          <div class="info_value">职位收益：4天 / 35%</div>
        </div>
        <div class="book bookzhi">
          <div>$899</div>
          <div>预约</div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="todolist-tab">
      <div class="todolist-tab-btn todolist-tab-btn-on">
        <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 ">
        <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: "微软雅黑";
  }

  .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>
