Home Explore Help
Register Sign In
xuzhihao
/
admin-apps
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: c4c37d020f
Branches Tags
admin-apps
/
admins
/
fd-mall-backstage
/
index.html

index.html 17 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 
  1. <!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>四维商圈管理平台</title><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"><link rel="shortcut icon" href="statics/img/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="statics/css/bootstrap.min.css"><link rel="stylesheet" href="statics/css/font-awesome.min.css"><link rel="stylesheet" href="statics/css/style.css"><link rel="stylesheet" href="statics/css/login.css"><link rel="stylesheet" href="statics/css/main.css"><link rel="stylesheet" href="statics/css/iview.css"><link rel="shortcut icon" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico"><link rel="icon" type="image/png" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon192.png" sizes="192x192"><link rel="apple-touch-icon" sizes="180x180" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon180.png"><!--[if lt IE 9]>
    2. 

  2.     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    3. 

  3.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    4. 

  4.     <![endif]--><script src="https://cdn.bootcss.com/babel-polyfill/7.8.7/polyfill.min.js"></script><script>var _hmt = _hmt || [];
    5. 

  5.         (function() {
    6. 

  6.             var hm = document.createElement("script");
    7. 

  7.             hm.src = "https://hm.baidu.com/hm.js?4656e49e8efa9f2ad6868ea26fb8984c";
    8. 

  8.             var s = document.getElementsByTagName("script")[0];
    9. 

  9.             s.parentNode.insertBefore(hm, s);
    10. 

  10.         })();</script><style>.navbar-header div{
    11. 

  11.             position: absolute;
    12. 

  12.             top: 53%;
    13. 

  13.             left: 4%;
    14. 

  14.             transform: translate(-50%, -50%);
    15. 

  15.             font-size: 22px;
    16. 

  16.         }
    17. 

  17. 

  18.         .navbar-header div span{
    19. 

  19.             margin-left: 20px;
    20. 

  20.         }</style></head><body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden"><div id="mainApp" v-cloak><nav class="navbar-default navbar-static-side" role="navigation"><div class="nav-close"><i class="fa fa-times-circle"></i></div><div class="sidebar-collapse"><ul class="nav" id="side-menu"><li class="nav-header"><div class="dropdown profile-element" style="text-align: center;font-size: 18px;font-weight: 600;color: white;">四维商圈管理平台</div><div class="logo-element">四维商圈管理平台</div></li><menu-item :item="item" v-for="item in menuList"></menu-item></ul></div></nav><div id="page-wrapper" class="gray-bg dashbard-1"><div class="border-bottom"><nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0"><div class="navbar-header"><div><i class="iconfont iconmy"></i><span>{{user.username}}</span></div></div><ul class="nav navbar-top-links navbar-right"><li><a href="javascript:;" @click="updatePassword"><i class="fa fa-lock"></i> &nbsp;修改密码</a></li><li><a @click="logout"><i class="fa fa fa-sign-out"></i>退出</a></li></ul></nav></div><div class="content-tabs"><button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i></button><nav class="page-tabs J_menuTabs"><div class="page-tabs-content"><a href="javascript:;" class="active J_menuTab" data-id="main">首页</a></div></nav><button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i></button><div class="btn-group roll-nav roll-right"><button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span></button><ul role="menu" class="dropdown-menu dropdown-menu-right"><li class="J_tabCloseItem"><a>关闭当前选项卡</a></li><li class="J_tabCloseAll"><a>关闭全部选项卡</a></li><li class="J_tabCloseOther"><a>关闭其他选项卡</a></li></ul></div><a class="roll-nav roll-right J_tabRefresh"><i class="fa fa-refresh"></i> &nbsp;刷新</a></div><div class="J_mainContent" id="content-main"><iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="sys/main.html" frameborder="0" data-id="main" seamless></iframe></div><div class="footer"><div class="pull-right">珠海市四维时代网络科技有限公司 <a href="http://www.4dage.com/" target="_blank">Copyright © 2019 4DAGE Co., Ltd. All rights reserved.</a></div></div></div><div id="right-sidebar"><div class="sidebar-container"><ul class="nav nav-tabs navs-3"><li class="active"><a data-toggle="tab" href="#tab-1"><i class="fa fa-gear"></i> 主题</a></li><li class=""><a data-toggle="tab" href="#tab-2">通知</a></li></ul><div class="tab-content"><div id="tab-1" class="tab-pane active"><div class="sidebar-title"><h3><i class="fa fa-comments-o"></i> 主题设置</h3><small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式，这些设置会被保存在本地，下次打开的时候会直接应用这些设置。</small></div><div class="skin-setttings"><div class="title">主题设置</div><div class="setings-item"><span>收起左侧菜单</span><div class="switch"><div class="onoffswitch"><input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu"> <label class="onoffswitch-label" for="collapsemenu"><span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span></label></div></div></div><div class="setings-item"><span>固定顶部</span><div class="switch"><div class="onoffswitch"><input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar"> <label class="onoffswitch-label" for="fixednavbar"><span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span></label></div></div></div><div class="setings-item"><span>固定宽度</span><div class="switch"><div class="onoffswitch"><input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout"> <label class="onoffswitch-label" for="boxedlayout"><span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span></label></div></div></div><div class="title">皮肤选择</div><div class="setings-item default-skin nb"><span class="skin-name"><a href="#" class="s-skin-0">默认皮肤</a></span></div><div class="setings-item blue-skin nb"><span class="skin-name"><a href="#" class="s-skin-1">蓝色主题</a></span></div><div class="setings-item yellow-skin nb"><span class="skin-name"><a href="#" class="s-skin-3">黄色/紫色主题</a></span></div></div></div><div id="tab-2" class="tab-pane"><div class="sidebar-title"><h3><i class="fa fa-comments-o"></i> 最新通知</h3><small><i class="fa fa-tim"></i> 您当前有1条未读信息</small></div><div><div class="sidebar-message"><a href="#"><div class="pull-left text-center"><div class="m-t-xs"><i class="fa fa-star text-warning"></i> <i class="fa fa-star text-warning"></i></div></div><div class="media-body">这是一条测试消息<br><small class="text-muted">今天 4:21</small></div></a></div></div></div></div></div></div><div id="passwordLayer" style="display: none;"><form class="form-horizontal" style="width: 350px;"><div class="form-group"><div class="form-group"><div class="col-sm-2 control-label">账号</div><span class="label label-success" style="margin-top: 5px;
    21. 

  21.                     padding: 0;
    22. 

  22.                     text-align: center;
    23. 

  23.                     display: inline-block;
    24. 

  24.                     width: 60px;
    25. 

  25.                     font-size: 12px;
    26. 

  26.                     line-height: 20px;">{{user.username}}</span></div><div class="form-group"><div class="col-sm-2 control-label">原密码</div><div class="col-sm-10"><i-input type="password" v-model="password" placeholder="原密码"/></div></div><div class="form-group"><div class="col-sm-2 control-label">新密码</div><div class="col-sm-10"><i-input v-model="newPassword" placeholder="新密码"/></div></div></div></form></div></div></body><body class="hold-transition skin-blue sidebar-mini"><script src="statics/libs/jquery.min.js"></script><script src="statics/libs/vue.min.js"></script><script src="statics/libs/iview.min.js"></script><script src="statics/libs/bootstrap.min.js"></script><script src="statics/plugins/layer/layer.js"></script><script src="statics/libs/contabs.js"></script><script src="statics/libs/content.js"></script><script src="statics/libs/hplus.js"></script><script src="statics/plugins/metisMenu/jquery.metisMenu.js"></script><script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script><script src="js/common.js"></script><script>//生成菜单
    27. 

  27.     var menuItem = Vue.extend({
    28. 

  28.         name: 'menu-item',
    29. 

  29.         props: {item: {}},
    30. 

  30.         template: [
    31. 

  31.             '<li>',
    32. 

  32.             '<a v-if="item.type === 0" href="#">',
    33. 

  33.             '<i v-if="item.icon != null" :class="item.icon"></i>',
    34. 

  34.             '<span class="nav-label">{{item.name}}</span>',
    35. 

  35.             '<span class="fa arrow"></span>',
    36. 

  36.             '</a>',
    37. 

  37.             '<ul v-if="item.type === 0" class="nav nav-second-level">',
    38. 

  38.             '<menu-item :item="item" v-for="item in item.list"></menu-item>',
    39. 

  39.             '</ul>',
    40. 

  40.             '<a v-if="item.type === 1" class="J_menuItem" :href="item.url"><i :class="item.icon"></i>{{item.name}}</a>',
    41. 

  41.             '</li>'
    42. 

  42.         ].join('')
    43. 

  43.     });
    44. 

  44.     //注册菜单组件
    45. 

  45.     Vue.component('menuItem', menuItem);
    46. 

  46. 

  47.     var vm = new Vue({
    48. 

  48.         el: '#mainApp',
    49. 

  49.         data: {
    50. 

  50.             password: '',
    51. 

  51.             newPassword: '',
    52. 

  52.             menuList: {},
    53. 

  53.             user: {}
    54. 

  54.         },
    55. 

  55.         methods: {
    56. 

  56.             getMenuList: function (event) {
    57. 

  57.                 $.getJSON("sys/menu/user?_" + $.now(), function (r) {
    58. 

  58.                     vm.menuList = r.menuList;
    59. 

  59.                 });
    60. 

  60.             },
    61. 

  61.             getUser: function () {
    62. 

  62.                 $.getJSON("sys/user/info?_" + $.now(), function (r) {
    63. 

  63.                     vm.user = r.user;
    64. 

  64.                 });
    65. 

  65.             },
    66. 

  66.             updatePassword: function () {
    67. 

  67.                 openWindow({
    68. 

  68.                     title: "修改密码",
    69. 

  69.                     area: ['350px', '280px'],
    70. 

  70.                     content: jQuery("#passwordLayer"),
    71. 

  71.                     btn: ['修改', '取消'],
    72. 

  72.                     btn1: function (index) {
    73. 

  73.                         var data = "password=" + vm.password + "&newPassword=" + vm.newPassword;
    74. 

  74.                         $.ajax({
    75. 

  75.                             type: "POST",
    76. 

  76.                             url: "sys/user/password",
    77. 

  77.                             data: data,
    78. 

  78.                             dataType: "json",
    79. 

  79.                             success: function (result) {
    80. 

  80.                                 if (result.code == 0) {
    81. 

  81.                                     layer.close(index);
    82. 

  82.                                     layer.alert('修改成功', function (index) {
    83. 

  83.                                         location.reload();
    84. 

  84.                                     });
    85. 

  85.                                 } else {
    86. 

  86.                                     layer.alert(result.msg);
    87. 

  87.                                 }
    88. 

  88.                             }
    89. 

  89.                         });
    90. 

  90.                     }
    91. 

  91.                 });
    92. 

  92.             },
    93. 

  93.             toggleFullScreen: function () {
    94. 

  94.                 var isFullscreen = document.fullScreenElement//W3C
    95. 

  95. 			    	||document.msFullscreenElement //IE
    96. 

  96. 			    	||document.mozFullScreenElement //火狐
    97. 

  97. 			    	||document.webkitFullscreenElement //谷歌
    98. 

  98. 			    	||false;
    99. 

  99.    	if(!isFullscreen){
    100. 

  100. 	   	var el = document.documentElement;
    101. 

  101.    		if (el.requestFullscreen) { 
    102. 

  102.    			el.requestFullscreen(); 
    103. 

  103. 	    } else if (el.mozRequestFullScreen) { 
    104. 

  104. 	    	el.mozRequestFullScreen(); 
    105. 

  105. 	    } else if (el.webkitRequestFullscreen) { 
    106. 

  106. 	    	el.webkitRequestFullscreen(); 
    107. 

  107. 	    } else if (el.msRequestFullscreen) { 
    108. 

  108. 	    	el.msRequestFullscreen(); 
    109. 

  109. 	    } 
    110. 

  110.    	}else{
    111. 

  111.    		if (document.exitFullscreen) { 
    112. 

  112.    			document.exitFullscreen(); 
    113. 

  113. 	    } else if (document.msExitFullscreen) { 
    114. 

  114. 	    	document.msExitFullscreen(); 
    115. 

  115. 	    } else if (document.mozCancelFullScreen) { 
    116. 

  116. 	    	document.mozCancelFullScreen(); 
    117. 

  117. 	    } else if (document.webkitCancelFullScreen) { 
    118. 

  118. 	    	document.webkitCancelFullScreen(); 
    119. 

  119. 	    } 
    120. 

  120.    	}
    121. 

  121.             },
    122. 

  122.             logout: function () {
    123. 

  123.                 confirm('注：您确定要安全退出本次登录吗？', function () {
    124. 

  124.                     dialogLoading(true);
    125. 

  125.                     setTimeout(function () {
    126. 

  126.                         toUrl('logout?_' + $.now());
    127. 

  127.                     }, 500);
    128. 

  128.                 });
    129. 

  129.             }
    130. 

  130.         },
    131. 

  131.         created: function () {
    132. 

  132.             this.getUser();
    133. 

  133.             this.getMenuList();
    134. 

  134.         },
    135. 

  135.         updated: function () {
    136. 

  136.             // MetsiMenu
    137. 

  137.             $('#side-menu').metisMenu();
    138. 

  138. 

  139.             //通过遍历给菜单项加上data-index属性
    140. 

  140.             $(".J_menuItem").each(function (index) {
    141. 

  141.                 if (!$(this).attr('data-index')) {
    142. 

  142.                     $(this).attr('data-index', index);
    143. 

  143.                 }
    144. 

  144.             });
    145. 

  145. 

  146.             $('.J_menuItem').on('click', menuItem);
    147. 

  147. 

  148.             function menuItem() {
    149. 

  149.                 // 获取标识数据
    150. 

  150.                 var dataUrl = $(this).attr('href'),
    151. 

  151.                     dataIndex = $(this).data('index'),
    152. 

  152.                     menuName = $.trim($(this).text()),
    153. 

  153.                     flag = true;
    154. 

  154.                 if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
    155. 

  155. 

  156.                 // 选项卡菜单已存在
    157. 

  157.                 $('.J_menuTab').each(function () {
    158. 

  158.                     if ($(this).data('id') == dataUrl) {
    159. 

  159.                         if (!$(this).hasClass('active')) {
    160. 

  160.                             $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
    161. 

  161.                             scrollToTab(this);
    162. 

  162.                             // 显示tab对应的内容区
    163. 

  163.                             $('.J_mainContent .J_iframe').each(function () {
    164. 

  164.                                 if ($(this).data('id') == dataUrl) {
    165. 

  165.                                     $(this).show().siblings('.J_iframe').hide();
    166. 

  166.                                     return false;
    167. 

  167.                                 }
    168. 

  168.                             });
    169. 

  169.                         }
    170. 

  170.                         flag = false;
    171. 

  171.                         return false;
    172. 

  172.                     }
    173. 

  173.                 });
    174. 

  174. 

  175.                 // 选项卡菜单不存在
    176. 

  176.                 if (flag) {
    177. 

  177.                     var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
    178. 

  178.                     $('.J_menuTab').removeClass('active');
    179. 

  179. 

  180.                     // 添加选项卡对应的iframe
    181. 

  181.                     var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
    182. 

  182.                     $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
    183. 

  183. 

  184.                     // 显示loading提示
    185. 

  185.                     var loading = layer.load();
    186. 

  186. 

  187.                     $('.J_mainContent iframe:visible').load(function () {
    188. 

  188.                         //iframe加载完成后隐藏loading提示
    189. 

  189.                         layer.close(loading);
    190. 

  190.                     });
    191. 

  191.                     // 添加选项卡
    192. 

  192.                     $('.J_menuTabs .page-tabs-content').append(str);
    193. 

  193.                     scrollToTab($('.J_menuTab.active'));
    194. 

  194.                 }
    195. 

  195.                 return false;
    196. 

  196.             }
    197. 

  197. 

  198.             //滚动到指定选项卡
    199. 

  199.             function scrollToTab(element) {
    200. 

  200.                 var marginLeftVal = calSumWidth($(element).prevAll()),
    201. 

  201.                     marginRightVal = calSumWidth($(element).nextAll());
    202. 

  202.                 // 可视区域非tab宽度
    203. 

  203.                 var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
    204. 

  204.                 //可视区域tab宽度
    205. 

  205.                 var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
    206. 

  206.                 //实际滚动宽度
    207. 

  207.                 var scrollVal = 0;
    208. 

  208.                 if ($(".page-tabs-content").outerWidth() < visibleWidth) {
    209. 

  209.                     scrollVal = 0;
    210. 

  210.                 } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
    211. 

  211.                     if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
    212. 

  212.                         scrollVal = marginLeftVal;
    213. 

  213.                         var tabElement = element;
    214. 

  214.                         while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
    215. 

  215.                             scrollVal -= $(tabElement).prev().outerWidth();
    216. 

  216.                             tabElement = $(tabElement).prev();
    217. 

  217.                         }
    218. 

  218.                     }
    219. 

  219.                 } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
    220. 

  220.                     scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
    221. 

  221.                 }
    222. 

  222.                 $('.page-tabs-content').animate({
    223. 

  223.                     marginLeft: 0 - scrollVal + 'px'
    224. 

  224.                 }, "fast");
    225. 

  225.             }
    226. 

  226. 

  227.             //计算元素集合的总宽度
    228. 

  228.             function calSumWidth(elements) {
    229. 

  229.                 var width = 0;
    230. 

  230.                 $(elements).each(function () {
    231. 

  231.                     width += $(this).outerWidth(true);
    232. 

  232.                 });
    233. 

  233.                 return width;
    234. 

  234.             }
    235. 

  235.         }
    236. 

  236.     });</script></body></html>
    237.