【10】MUI 仿拼多多 個人中心
阿新 • • 發佈:2018-11-09
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>個人中心</title> <link href="../css/mui.min.css" rel="stylesheet" /> <link href="../css/gouwu.css" rel="stylesheet" /> <link href="../css/useritem.css" rel="stylesheet" /> <style type="text/css"> body, .mui-content { background: white; } #top { width: 96%; height: 130px; background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%); margin: 7px auto; border-radius: 5px; } #top .acc_manager { width: 35%; font-size: 15px; float: right; text-align: center; height: 30px; margin-top: 15px; font-weight: bold; color: white; } #mui-icon-gear .mui-icon-gear { font-weight: bold; } .mui-icon-gear:before { font-size: 20px; } #top .top-info { width: 80%; height: 60px; float: left; margin-left: 30px; } #top .top-info .top-info-img { width: 23%; height: 100%; float: left; } #top .top-info .top-info-name { width: 77%; height: 100%; float: left; } #top .top-info .top-info-img img { width: 60px; height: 60px; border-radius: 50%; } .user-name-box { margin-left: 5px; line-height: 35px; } .user-id { margin-left: 5px; color: white; font-weight: bold; font-size: 12px; line-height: 20px; } .user-name { color: white; font-weight: bold; font-size: 15px; } .user-name:hover { color: white; } .user-lever { color: #F9D50D; font-weight: bold; font-size: 15px; } .user-lever:hover { color: #FFFF00; } .order-top { margin: 15px 20px; font-weight: bold; font-size: 15px; } .ft { font-size: 12px; color: #E02D26; font-weight: bold; display: initial; } .bd { border-right: 2px solid #EFEFF4; } .bg { height: 10px; background: #EFEFF4; } .st { margin-top: 20px; } .sti { border-radius: 50%; } .st_item1 { background: #F5AB59; } .st_item2 { background: #796BAF; } .st_item3 { background: #E02D26; } .st_item4 { background: #CACACB; } .st_item5 { background: #4DC7BA; } .st_item6 { background: #00A1E9; } .st_item7 { background: #F09300; } .st_item8 { background: #4E83DE; } .mui-bar-tab .mui-tab-item.mui-active { color: #929292; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">個人中心</h1> </header> <div class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div id="top"> <div id="btn_accountManager" class="acc_manager mui-pull-right"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">賬號管理</span> </div> <div class="top-info"> <div class="top-info-img" id="go_photo"> <img src="http://up.qqya.com/allimg/201710-t/17-101804_132321.jpg"> </div> <div class="top-info-name"> <div class="user-name-box"> <a class="user-name">鬼話連篇</a> <a class="user-lever">V1</a> </div> <div class="user-id">使用者ID:10086</div> </div> </div> </div> <div id="order"> <div class="order-top"> 我的訂單 </div> <div class="order-item mui-bar-tab "> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-daifukuan"></span> <span class="mui-tab-label">待付款</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-daishouhuo"></span> <span class="mui-tab-label">待收貨</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-daipingjia01"></span> <span class="mui-tab-label">待評價</span> </a> <a class="mui-tab-item bd"> <span class="mui-icon iconfont icon-tuikuan"></span> <span class="mui-tab-label">退換/售後</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-moban"></span> <span class="mui-tab-label">全部訂單</span> </a> </div> </div> <div class="bg"></div> <div id="wallet"> <div class="order-top"> 我的錢包 </div> <div class="order-item mui-bar-tab "> <a class="mui-tab-item"> <span class="mui-icon ft">6000元</span> <span class="mui-tab-label">賬戶餘額</span> </a> <a class="mui-tab-item"> <span class="mui-icon ft">20張</span> <span class="mui-tab-label">優惠券</span> </a> <a class="mui-tab-item"> <span class="mui-icon ft">2200元</span> <span class="mui-tab-label">獎金收益</span> </a> <a class="mui-tab-item"> <span class="mui-icon ft">6000分</span> <span class="mui-tab-label">消費積分</span> </a> </div> </div> <div class="bg"></div> <div id="menuItem"> <div class="order-item mui-bar-tab st"> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-msnui-market sti st_item1"></span> <span class="mui-tab-label">我的推廣</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-kehu sti st_item2"></span> <span class="mui-tab-label">我的客戶</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-shoucang sti st_item3"></span> <span class="mui-tab-label">我的收藏</span> </a> <a class="mui-tab-item bd"> <span class="mui-icon iconfont icon-tixing sti st_item4"></span> <span class="mui-tab-label">訊息提醒</span> </a> </div> <div class="order-item mui-bar-tab st"> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-zuji sti st_item5"></span> <span class="mui-tab-label">我的足跡</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-dizhi sti st_item6"></span> <span class="mui-tab-label">收貨地址</span> </a> <a class="mui-tab-item"> <span class="mui-icon iconfont icon-service sti st_item7"></span> <span class="mui-tab-label">聯絡客服</span> </a> <a class="mui-tab-item bd"> <span class="mui-icon iconfont icon-shezhi sti st_item8"></span> <span class="mui-tab-label">設定</span> </a> </div> </div> </div> </div> <script src="../js/mui.min.js"></script> <script src="../js/jquery-1.11.0.min.js"></script> <script> mui.init(); mui('.mui-scroll-wrapper').scroll({ bounce: true, indicators: true, deceleration: mui.os.ios ? 0.003 : 0.0009 }); //我的錢包 mui("#wallet").on("tap", ".mui-tab-item", function() { alert($(this).children()[1].innerHTML.trim()) }) //選單 mui(".mui-content").on("tap", ".mui-tab-item", function() { switch($(this).children()[1].innerHTML.trim()) { case "我的推廣": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyExtension.html", id: "MyExtension.html" }) break; case "我的客戶": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyCustomer.html", id: "MyCustomer.html" }) break; case "我的收藏": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyCollection.html", id: "MyCollection.html" }) break; case "訊息提醒": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MessageReminding.html", id: "MessageReminding.html" }) break; case "我的足跡": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/Myfootprint.html", id: "Myfootprint.html" }) break; case "收貨地址": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/ReceivingAddress.html", id: "ReceivingAddress.html" }) break; case "全部訂單": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html", id: "OrderIndex.html" }) break; case "待付款": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html", id: "OrderIndex.html", extras: { gotoIndex: 1, activeTab: "WaitPayment.html" } }) break; case "待收貨": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html", id: "OrderIndex.html", extras: { gotoIndex: 4, activeTab: "WaitReceipt.html" } }) break; case "待評價": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/OrderIndex.html", id: "OrderIndex.html", extras: { gotoIndex: 5, activeTab: "WaitEvaluate.html" } }) break; case "退換/售後": mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/MyOrder/ReturnSaleIndex.html", id: "ReturnSaleIndex.html" }) break; default: break; } }) //賬號管理 document.getElementById("btn_accountManager").addEventListener("tap", function() { mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/AccountManager.html", id: "AccountManager.html" }) }) //點選頭像跳轉個人資料 document.getElementById("go_photo").addEventListener("tap", function() { mui.openWindow({ url: "../tab-botton-subpage/File-tap-botton-subpage-5/AccountManager.html", id: "AccountManager.html" }) }) </script> </body> </html>