jifuning
/
yangchangwan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="format-detection"content="telephone=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" href="../../css/swiper.css">
    <link rel="stylesheet" href="../../css/animate.css">
    <style media="screen">
      .hide{
        display: none;
      }
      .col{
        padding: 0 10px;
      }
      .col label{
        color: #333;
        font-size: 16px;
        padding: 15px 0 ;
        position: relative;
        padding-left: 15px;
        width: 100%;
      }
      .col label:before{
        content: '';
        position: absolute;
        top: 13px;
        left: 0;
        width: 3px;
        height: 26px;
        background: #009fe8;
      }
      .col label:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ECF0F1;
      }
      /*浏览记录*/
      .browse-items{
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        align-items: center;;
      }
      .browse-info{
        padding-top: 15px;
      }
      .browse-item{
        width: 20%;
        font-size: 14px;
        color: #333;
        text-align: center;
        margin-bottom: 10px;
      }
      .browse-item img{
        width: 100%;
        border-radius: 50%;
        object-fit: cover;
        margin: auto;
        margin-bottom: 5px;
      }
      .browse-item p{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        min-width: 0;
      }
      .browse-item span{
        display: block;
        color: #fff;
        /*background: red;*/
        text-align: center;
        margin: auto;
        margin-bottom: 9px;
        border-radius: 50%;
      }
      /*浏览弹出框*/
      .modular{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, .6);
        z-index: 1000;
       }
        .box{
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          background: #fff;
          position: absolute;
          top: -10%;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 270px;
          height: 220px;
          z-index: 200;
          padding: 20px 10px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        .header-img{
          text-align: center;
        }
        .header-img img{
          width: 60px;
          height: 60px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          margin: auto;
        }
        .header-img p{
          text-align: center;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
        }
        .header-img{
          margin-bottom: 10px;
        }
        .personal-info p{
          padding: 5px 0;
          text-align: center;
          font-size: 14px;
          color: #333;
        }
        .personal-info .times{
         color: #727472;
       }
    </style>
  </head>
  <body>
    <div>
      <div class="col">
        <label>浏览记录</label>
        <div class="browse-info">
          <ul class="browse-items" id="browse_items">


          </ul>
        </div>
      </div>
    </div>
    <!--浏览信息弹出框-->
    <div class="modular hide animated" id="myModal">
        <div class=" box">
            <div class="header-img">
                <!--<img src="http://jiewei-php-files.oss-cn-qingdao.aliyuncs.com/avatar/avatar_15038412.png" alt="">-->
            </div>
            <div class="personal-info">
                <p class="name"></p>
                <p class="dep"></p>
                <p class="times"></p>
            </div>
        </div>
    </div>
  </body>
</html>
<script type="text/template" id="browseTl">
  {{~it:value}}
    {{?value.name != "" && value.name != null}}
      {{?value.img == null || value.img == ""}}
        <li class="browse-item" onclick="openModular('{{=value.name}}','{{=value.img}}','{{=value.department}}','{{=value.createDate}}')">
          <span style="width: {{=imgSize()}}px;height:{{=imgSize()}}px;line-height:{{=imgSize()}}px;background-color:#{{=Math.random().toString(16).slice(2,8)}}">{{=value.name.substr(value.name.length-1,1)}}</span>
          <p>{{=value.name}}</p>
        </li>
      {{??}}
        <li class="browse-item" onclick="openModular('{{=value.name}}','{{=value.img}}','{{=value.department}}','{{=value.createDate}}')">
          <img src="{{=String(value.img).substr(value.img, 4) == 'http'?value.img:urlphp+value.img}}" style="width: {{=imgSize()}}px;height:{{=imgSize()}}px" alt="">
          <p>{{=value.name}}</p>
        </li>
      {{?}}
    {{?}}
  {{~}}
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
apiready = function () {
  $apis.UILoading('')
  browseNum(api.pageParam.id)
};
// 浏览人数
function browseNum(id) {
  $http.fnReuestDataNologing(UrlRouter.getPageUserByPageId+id,'','get','',function (ret, err) {
    if (ret.code === '200') {
      $apis.html(browse_items,'#browseTl',ret.data);
      $apis.CloseUILoading()
    }
  })
}
// 浏览人员详情
function openModular(name, img, dep, time) {
   $('.modular').show();
   $('.box').addClass('animated bounceInDown');
   setTimeout(function () {
       $('.box').removeClass('animated bounceInDown')
   }, 1000);
   if (img == 'null') {
     $('.box').find('.header-img').html(` <p style="background:#${Math.random().toString(16).slice(2,8)};width: 60px;height: 60px;line-height:60px;margin: auto">${name.substr(name.length-1,1)}</p>`)
   }else {
     var url = img.substr(img, 4)
     if ( url == 'http') {
       $('.box').find('.header-img').html(`<img src="${img}">`)
     }else {
       $('.box').find('.header-img').html(`<img src="${urlphp+img}">`)
     }
   }
   $('.box').find('.name').html('姓名：'+name)
   $('.box').find('.dep').html('部门：'+ dep)
   $('.box').find('.times').html('最新浏览时间：' + time)
}
window.onclick = function(event) {
  if (event.target ==  document.getElementById('myModal')) {
      $('.modular').hide();
  }
}

// 动态计算浏览人数img大小
function imgSize() {
  var width = document.body.clientWidth;
  return  width / 5 - 23
}
</script>