mushen
/
zhonghan_wxgzh


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title>小程序公众号</title>

  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/my.css">
  <script src="js/jquery.js"></script>
  <script src="js/jquery.min.js"></script>
</head>

<body>
  <div id="pageOne">
    <div class="bck"></div>
    <div class="header">
      <img src="./image/banner.png" class="banner">
    </div>

    <div id="content">
      <div id="repl"></div>
    </div>
    <div class="show_all">展示全部</div>
  </div>
  <div id="pageTwo">
    <div class="bck2"></div>
    <div id="head_pic">
      <div class="head_content"><img id="my_head" /></div>
      <div id="my_name"></div>
    </div>
    <div class="my_item">
      <ul>
        <li>
          <div><img src="./image/myCenter01.png" /><span>我的消费</span></div>
          <img src="./image/icon-right.png" alt="">
        </li>
        <li>
          <div><img src="./image/myCenter05.png" /><span>我的考勤</span></div>
          <img src="./image/icon-right.png" alt="">
        </li>
        <li>
          <div><img src="./image/myCenter06.png" /><span>我的门禁</span></div>
          <img src="./image/icon-right.png" alt="">
        </li>
        <li>
          <div><img src="./image/myCenter04.png" /><span>我的订单</span></div>
          <img src="./image/icon-right.png" alt="">
        </li>
        <li>
          <div><img src="./image/myCenter02.png" /><span>我的信息</span></div>
          <img src="./image/icon-right.png" alt="">
        </li>
        <li>
          <div><img src="./image/myCenter03.png" /><span>我的操作</span></div>
          <img src="./image/icon-right.png" alt="">
        </li>
      </ul>
    </div>
  </div>
  <div id="foot">
  </div>
</body>
<script>
  var list = [
    { title: '自助订餐', src: './image/noodles.png', path: '' },
    { title: '我的会议', src: './image/icon14.png', path: '' },
    { title: '消费充值', src: './image/icon12.png', path: '' },
    { title: '消费明细', src: './image/icon15.png', path: '' },
    { title: '门禁记录', src: './image/icon15.png', path: '' },
    { title: 'IC卡改密', src: './image/icon09.png', path: '' },
    { title: '我要请假', src: './image/leave.png', path: '' },
    { title: '请假记录', src: './image/icon13.png', path: '' },
    { title: '考勤记录', src: './image/icon16.png', path: '' }
  ];
  let str = '';
  for (let i in list) {
    str += `<div><img src='${list[i].src}'/><span>${list[i].title}</span></div>`;
  };
  let val = $(`<div id='content_item'>${str}</div>`);
  val.replaceAll($('#repl'));
  var footList = [
    { title: '常用功能', src: './image/state.png', active_src: './image/state-active.png', isClick: true },
    { title: '我的', src: './image/my.png', active_src: './image/my-active.png', isClick: false }
  ];
  let foot_str = '';
  for (let i in footList) {
    foot_str += `<div class='foot_item' style='width:${100 / footList.length}%'><img class='foot_img' src='${footList[i].isClick ? footList[i].active_src : footList[i].src}'/><span class='foot_title' style='color:${footList[i].isClick ? 'blue' : 'black'}'>${footList[i].title}</span></div>`;
  };
  let foot_val = $(`<div id='foot'>${foot_str}</div>`);
  foot_val.replaceAll($('#foot'));

  elmOnchangeList('.foot_item');
  function elmOnchangeList(elm) {
    $(elm).each(function (i, item) {
      $(item).click(function () {
        if ($(this).is($(elm).eq(i))) {
          if (!footList[i].isClick) {
            var indexList = [];//获取没有被点击的index；
            footList.forEach((v, index) => {
              if (index != i) {
                indexList.push(index);
              }
            })
            indexList.forEach((v) => {//没有被点击的赋值；
              footList[v].isClick = false;
              document.getElementsByClassName('foot_img')[v].src = footList[v].src;
              document.getElementsByClassName('foot_title')[v].style.color = 'black'
            })
            footList[i].isClick = !footList[i].isClick;
            document.getElementsByClassName('foot_img')[i].src = footList[i].isClick ? footList[i].active_src : footList[i].src;
            document.getElementsByClassName('foot_title')[i].style.color = 'blue';
            if (i == 0) {//点击的下标
              $('#pageOne').css("display", 'block');
              $('#pageTwo').css("display", 'none');
            } else if (i == 1) {
              $('#pageOne').css("display", 'none');
              $('#pageTwo').css("display", 'block');
            }
          }

        }
      });
    });
  }
</script>
<script>//我的
  var name = '胡玮大帅逼！！！';
  $('#my_name').html(name);
  document.getElementById('my_head').src = './image/92.png'
</script>

</html>