2 년 전 · a49d9fc18b
--- a/css/index.css
+++ b/css/index.css
@@ -0,0 +1,125 @@
 
				+* {
			
 
				+  -webkit-box-sizing: border-box;
			
 
				+  -moz-box-sizing: border-box;
			
 
				+  box-sizing: border-box
			
 
				+}
			
 
				+
			
 
				+*,
			
 
				+body {
			
 
				+  padding: 0px;
			
 
				+  margin: 0px;
			
 
				+  color: #222;
			
 
				+  font-family: "微软雅黑";
			
 
				+}
			
 
				+
			
 
				+html,
			
 
				+body {
			
 
				+  font-size: .16rem;
			
 
				+  color: #ffffff;
			
 
				+  position: relative;
			
 
				+  width: 100%;
			
 
				+  box-sizing: border-box;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+
			
 
				+.bck {
			
 
				+  width: 100%;
			
 
				+  height: 90rem;
			
 
				+
			
 
				+  background-color: rgb(80, 80, 242);
			
 
				+
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.banner {
			
 
				+  position: relative;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -40%);
			
 
				+  width: 350rem;
			
 
				+}
			
 
				+
			
 
				+#content {
			
 
				+  width: 100%;
			
 
				+  margin-top: -40rem;
			
 
				+}
			
 
				+
			
 
				+#content_item {
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+}
			
 
				+
			
 
				+#content_item>div {
			
 
				+  width: 30%;
			
 
				+  font-size: 12rem;
			
 
				+  height: 110rem;
			
 
				+  border-right: 1px solid rgb(150, 148, 148);
			
 
				+  border-bottom: 1px solid rgb(150, 148, 148);
			
 
				+  text-align: center;
			
 
				+  line-height: 50rem;
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+#content_item>div:nth-child(3n+1) {
			
 
				+  margin-left: 5%;
			
 
				+  border-left: none;
			
 
				+}
			
 
				+
			
 
				+#content_item>div:nth-child(3n) {
			
 
				+
			
 
				+  border-right: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+#content_item>div img {
			
 
				+  width: 50rem;
			
 
				+  display: block;
			
 
				+  margin-left: 50%;
			
 
				+  transform: translate(-50%, 30%);
			
 
				+}
			
 
				+
			
 
				+.show_all {
			
 
				+  font-size: 12rem;
			
 
				+  color: rgb(77, 79, 79);
			
 
				+  text-align: center;
			
 
				+  margin-top: 20rem;
			
 
				+  font-weight: bold;
			
 
				+  margin-bottom: 20rem;
			
 
				+}
			
 
				+
			
 
				+#foot {
			
 
				+  width: 100%;
			
 
				+  position: fixed;
			
 
				+  bottom: 0rem;
			
 
				+  border: 1px;
			
 
				+  height: 50rem;
			
 
				+  border-top: 1px solid rgb(150, 148, 148);
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+}
			
 
				+
			
 
				+#foot>div {
			
 
				+  text-align: center;
			
 
				+  font-size: 10rem;
			
 
				+  line-height: 30rem;
			
 
				+}
			
 
				+
			
 
				+#foot>div img {
			
 
				+  display: block;
			
 
				+  position: relative;
			
 
				+  left: 50%;
			
 
				+  top: 10%;
			
 
				+  transform: translate(-50%);
			
 
				+}
			
 
				+
			
 
				+#pageOne {
			
 
				+  display: block;
			
 
				+  overflow: auto;
			
 
				+  height: calc(100% - 50rem);
			
 
				+}
			
 
				+
			
 
				+#pageTwo {
			
 
				+  display: none;
			
 
				+  overflow: auto;
			
 
				+  height: calc(100% - 50rem);
			
 
				+}
			
--- a/css/my.css
+++ b/css/my.css
@@ -0,0 +1,85 @@
 
				+.bck2 {
			
 
				+  width: 100%;
			
 
				+  height: 200rem;
			
 
				+  background-color: rgb(80, 80, 242);
			
 
				+}
			
 
				+
			
 
				+#head_pic {
			
 
				+  position: relative;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, -120%);
			
 
				+  width: 100rem;
			
 
				+  height: 150rem;
			
 
				+  font-size: 18rem;
			
 
				+}
			
 
				+
			
 
				+.head_content {
			
 
				+  width: 100%;
			
 
				+  height: 100rem;
			
 
				+  border: 2rem solid rgb(225, 223, 223);
			
 
				+  border-radius: 50%;
			
 
				+  overflow: hidden;
			
 
				+  background-color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+#my_head {
			
 
				+  height: 100rem;
			
 
				+  width: 100rem;
			
 
				+}
			
 
				+
			
 
				+#my_name {
			
 
				+  text-overflow: ellipsis;
			
 
				+  overflow: hidden;
			
 
				+  white-space: nowrap;
			
 
				+  width: 100%;
			
 
				+  text-align: center;
			
 
				+  margin-top: 10rem;
			
 
				+  color: #ffffff;
			
 
				+}
			
 
				+
			
 
				+.my_item {
			
 
				+  height: 400rem;
			
 
				+  border: 1px solid rgb(232, 228, 228);
			
 
				+  z-index: 99;
			
 
				+  position: relative;
			
 
				+  margin-top: -180rem;
			
 
				+  margin-bottom: 20rem;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%);
			
 
				+  width: 92%;
			
 
				+  background-color: #fffdfd;
			
 
				+  font-size: 12rem;
			
 
				+  border-radius: 10rem;
			
 
				+  box-shadow: 5px 5px 10px rgb(220, 217, 217);
			
 
				+}
			
 
				+
			
 
				+.my_item>ul {
			
 
				+  list-style: none;
			
 
				+  padding: 0 0 0 20rem;
			
 
				+}
			
 
				+
			
 
				+.my_item>ul li {
			
 
				+  border-bottom: 1px solid rgb(214, 214, 214);
			
 
				+  height: 60rem;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+  font-size: 14rem;
			
 
				+  font-weight: 600;
			
 
				+}
			
 
				+
			
 
				+.my_item>ul li div {
			
 
				+  display: flex;
			
 
				+  width: 100rem;
			
 
				+
			
 
				+  justify-content: space-around;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+
			
 
				+.my_item>ul li div img {
			
 
				+  width: 20rem;
			
 
				+}
			
 
				+
			
 
				+.my_item>ul li>img {
			
 
				+  margin-right: 20rem;
			
 
				+}
			
--- a/image/92.png
+++ b/image/92.png
--- a/image/active.png
+++ b/image/active.png
--- a/image/banner.png
+++ b/image/banner.png
--- a/image/close.png
+++ b/image/close.png
--- a/image/default.png
+++ b/image/default.png
--- a/image/down.png
+++ b/image/down.png
--- a/image/failure.png
+++ b/image/failure.png
--- a/image/gou.png
+++ b/image/gou.png
--- a/image/hair.png
+++ b/image/hair.png
--- a/image/icon-right.png
+++ b/image/icon-right.png
--- a/image/icon/icon/banner.png
+++ b/image/icon/icon/banner.png
--- a/image/icon/icon/operate01.png
+++ b/image/icon/icon/operate01.png
--- a/image/icon/icon/operate02.png
+++ b/image/icon/icon/operate02.png
--- a/image/icon/icon/operate03.png
+++ b/image/icon/icon/operate03.png
--- a/image/icon/icon/operate04.png
+++ b/image/icon/icon/operate04.png
--- a/image/icon/icon/phone.png
+++ b/image/icon/icon/phone.png
--- a/image/icon/icon/tips-icon01.png
+++ b/image/icon/icon/tips-icon01.png
--- a/image/icon/icon/tips-icon02.png
+++ b/image/icon/icon/tips-icon02.png
--- a/image/icon/icon/杩斿洖.png
+++ b/image/icon/icon/杩斿洖.png
--- a/image/icon/icon/涓.png
+++ b/image/icon/icon/涓.png
--- a/image/icon/icon/鍒犻櫎.png
+++ b/image/icon/icon/鍒犻櫎.png
--- a/image/icon/icon/鎷嶆憚.png
+++ b/image/icon/icon/鎷嶆憚.png
--- a/image/icon/icon/鏅氶.png
+++ b/image/icon/icon/鏅氶.png
--- a/image/icon/icon/鏈€変腑.png
+++ b/image/icon/icon/鏈€変腑.png
--- a/image/icon/myCenter05.png
+++ b/image/icon/myCenter05.png
--- a/image/icon09.png
+++ b/image/icon09.png
--- a/image/icon10.png
+++ b/image/icon10.png
--- a/image/icon11.png
+++ b/image/icon11.png
--- a/image/icon12.png
+++ b/image/icon12.png
--- a/image/icon13.png
+++ b/image/icon13.png
--- a/image/icon14.png
+++ b/image/icon14.png
--- a/image/icon15.png
+++ b/image/icon15.png
--- a/image/icon16.png
+++ b/image/icon16.png
--- a/image/icon17.png
+++ b/image/icon17.png
--- a/image/jiegua1.png
+++ b/image/jiegua1.png
--- a/image/leave.png
+++ b/image/leave.png
--- a/image/medical.png
+++ b/image/medical.png
--- a/image/my-active.png
+++ b/image/my-active.png
--- a/image/my.png
+++ b/image/my.png
--- a/image/myCenter01.png
+++ b/image/myCenter01.png
--- a/image/myCenter02.png
+++ b/image/myCenter02.png
--- a/image/myCenter03.png
+++ b/image/myCenter03.png
--- a/image/myCenter04.png
+++ b/image/myCenter04.png
--- a/image/myCenter05.png
+++ b/image/myCenter05.png
--- a/image/myCenter06.png
+++ b/image/myCenter06.png
--- a/image/noodles.png
+++ b/image/noodles.png
--- a/image/open.png
+++ b/image/open.png
--- a/image/operate01.png
+++ b/image/operate01.png
--- a/image/operate02.png
+++ b/image/operate02.png
--- a/image/operate03.png
+++ b/image/operate03.png
--- a/image/operate04.png
+++ b/image/operate04.png
--- a/image/operate05.png
+++ b/image/operate05.png
--- a/image/order.png
+++ b/image/order.png
--- a/image/ordershow.png
+++ b/image/ordershow.png
--- a/image/phone.png
+++ b/image/phone.png
--- a/image/pic.png
+++ b/image/pic.png
--- a/image/radio-active.png
+++ b/image/radio-active.png
--- a/image/radio-default.png
+++ b/image/radio-default.png
--- a/image/repair.png
+++ b/image/repair.png
--- a/image/server-active.png
+++ b/image/server-active.png
--- a/image/server.png
+++ b/image/server.png
--- a/image/shopCar.png
+++ b/image/shopCar.png
--- a/image/sower.png
+++ b/image/sower.png
--- a/image/state-active.png
+++ b/image/state-active.png
--- a/image/state.png
+++ b/image/state.png
--- a/image/success.png
+++ b/image/success.png
--- a/image/tips-icon01.png
+++ b/image/tips-icon01.png
--- a/image/tips-icon02.png
+++ b/image/tips-icon02.png
--- a/image/up.png
+++ b/image/up.png
--- a/image/upDown.png
+++ b/image/upDown.png
--- a/image/upload-default.png
+++ b/image/upload-default.png
--- a/image/灏卞瘽绾綍.png
+++ b/image/灏卞瘽绾綍.png
--- a/image/闂ㄧ璁板綍.png
+++ b/image/闂ㄧ璁板綍.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,132 @@
 
				+<!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>
			
--- a/js/jquery.js
+++ b/js/jquery.js
--- a/js/jquery.min.js
+++ b/js/jquery.min.js