first commit

2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>${context.getContextName()}</title>
+<meta charset="UTF-8">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+${Styles.src(zhiqim.css)}
+${Scripts.src(zhiqim.js)}
+${Styles.src(zmr_theme.css)}
+${Scripts.src(zmr_theme.js)}
+${Scripts.src(zhiqim_iframenav.js)}
+${Styles.htmlOverflowHidden()}
+<script>
+Zmr.contextPath = "${context.getContextPath()}";
+Zin.contextPath = "${context.getContextPath()}";
+Z.onload(Zmr.calcMainbodyHeight);
+Z(window).resize(Zmr.calcMainbodyHeight);
+Z(window).resize(Zin.setTranslateForShowActive);
+<#if !sessionUser.isWelcomeUrl()>
+Z.onload(function()
+{
+    var $elem = Z("#sidebar [data-url]");
+    if ($elem.length > 0)
+    {//存在指定主页，主动打开
+        Zin.doClickChildMenu($elem[0], $elem.attr("data-url"));
+    }
+});
+</#if>
+</script>
+</head>
+
+<body>
+<!--顶部导航 -->
+<div class="topnav">
+    <div id="logo" class="logo z-pointer z-text-left ${sessionUser.getSidebarClass()}" onclick="Zin.selectIframeTab('menu_index');">${context.getAttribute("name")}</div>
+    <div class="topnavleft">
+        <div class="bar z-w60 z-text-center z-pointer" onclick="Zmr.sidebar();"><i class="z-font z-list z-px22"></i></div>
+        ${zhiqim_manager_topnav_left_defined()}
+    </div>
+    <div class="topnavright">
+        ${zhiqim_manager_topnav_right_defined()}
+        <#if sessionUser.getOperatorType() lt 2>
+        <div class="nav z-text-center z-pointer z-pd-l20 z-pd-r20" style="max-width:200px;" onclick="Zmr.selectOrgDialog();">${ZmrOrgDao.getOrgName(request, sessionUser.getSelectedOrgId())}</div>
+        </#if>
+        <div class="nav z-w100 z-text-center z-pointer" onclick="Zin.refreshIframeTabActive();">刷新</div>
+        <div class="nav z-w100 z-text-center z-pointer" onclick="Z.L.confirm('${context.getRootPath("/"+zhiqim_manager+"/logout.htm")}', '确实要退出吗?');">退出系统</div>
+    </div>
+</div>
+
+<!--容器开始 -->
+<div id="container" class="container">
+
+<!--侧边导航 -->
+<div id="sidebar" class="sidebar ${sessionUser.getSidebarClass()}">
+    <!-- 个人中心 -->
+    <div class="z-h80 z-pd-t15 z-pd-l15" style="border-bottom:1px solid #22282e;">
+        <div class="z-float-left z-w50 z-h50 z-mg-r10"><img class="z-bd-rd50p z-w50 z-h50" src="${sessionUser.getAvatar50()}"></div>
+        <div class="z-float-left z-lh25">
+            <span class="z-px14 z-bold z-color-white">${sessionUser.getOperatorName()}</span><br>
+            <a href="javascript:void(0);" onclick="Zin.doClickChildMenu(this, '${context.getRootPath("/"+zhiqim_manager+"/profile.htm")}');"><span class="z-color-white z-px12">个人中心</span></a>
+        </div>
+    </div>
+    <!-- 栏目列表 -->
+<#var topMenuCode = sessionUser.getSelectedTopMenuCodeOrFirstMenuCode(request, sessionUser.getMainUrl())/>
+<#for topMenu : sessionUser.getTopMenuList()>
+<#if topMenu.getMenuName() != "我的设计" && topMenu.getMenuName() != "入驻考核" >
+	<#if sessionUser.hasChildMenu(topMenu.getMenuCode())>
+		
+	    <p><i class="z-font z-px18 z-mg-r5 ${topMenu.getMenuIcon()}"></i>#{topMenu.getMenuName()}<i class="z-arrow z-px5 z-gray"></i></p>
+	    <ul id="${topMenu.getMenuCode()}" style="display: <#if topMenu.getMenuCode() == topMenuCode>block<#else>none</#if>;">
+	    <#for childMenu : sessionUser.getChildMenuList(topMenu.getMenuCode())>
+	        <li onclick="Zin.doClickChildMenu(this, '${context.getRootPath(childMenu.getMenuUrl())}');" <#if context.getRootPath(childMenu.getMenuUrl()) == sessionUser.getMainUrl()>class="active" data-url="${context.getRootPath(childMenu.getMenuUrl())}"</#if>><i class="z-font z-mg-r10 ${childMenu.getMenuIcon()}"></i>#{childMenu.getMenuName()}</li>
+	    </#for>
+	    </ul>
+	<#elseif Validates.isNotEmptyBlank(topMenu.getMenuUrl())>
+	    <p onclick="Zin.doClickChildMenu(this, '${context.getRootPath(topMenu.getMenuUrl())}');"><i class="z-font z-px18 z-mg-r5 ${topMenu.getMenuIcon()}"></i>#{topMenu.getMenuName()}</p>
+	</#if>
+</#if>
+</#for>
+</div>
+
+<!-- 框架导航 -->
+<div class="iframenav z-h40 z-lh40 z-bg-white z-bd-b" style="margin-left:<#if sessionUser.hasSidebar()>200px<#else>0</#if>">
+    <div class="iframenav-prev" onclick="Zin.turnIframeTab(false);"><i class="z-font z-arrow-left"></i><i class="z-font z-arrow-left"></i></div>
+    <div class="iframenav-tab-wrap">
+    <ul class="iframenav-tab-list">
+        <li class="iframenav-tab-item active" id="tab_menu_index" onclick="Zin.selectIframeTabEvent(event);"><span>首页</span></li>
+    </ul>
+    </div>
+    <div class="iframenav-next" onclick="Zin.turnIframeTab(true);"><i class="z-font z-arrow-right"></i><i class="z-font z-arrow-right"></i></div>
+    <div class="iframenav-ctrl">
+        <div class="iframenav-ctrl-title" onclick="Zin.toggleIframeCtrlWrap();">关闭操作<i class="z-font z-arrow-down"></i></div>
+        <div class="iframenav-ctrl-wrap">
+        <ul>
+            <li class="iframenav-ctrl-item" onclick="Zin.selectIframeTabActive();">定位当前选项卡</li>
+        </ul>
+        <ul>
+            <li class="iframenav-ctrl-item" onclick="Zin.closeIframeTabAll();">关闭全部选项卡</li>
+            <li class="iframenav-ctrl-item" onclick="Zin.closeIframeTabOther();">关闭其他选项卡</li>
+        </ul>
+        </div>
+    </div>
+</div>
+
+<!--框架内容-->
+<div id="mainbody" class="mainbody iframenav-cont z-h100p" style="margin-left:<#if sessionUser.hasSidebar()>200px<#else>0</#if>">
+    <div id="iframe_menu_index" class="iframenav-cont-item active">
+        <iframe id="mainFrame" name="mainFrame" frameborder="0" scrolling="auto" src="welcome.htm"></iframe>
+    </div>
+</div>
+
+<!--容器结束 -->
+</div>
+<#if Validates.isNotEmptyBlank(sessionUser.getOperator().getInitialPassword()) && sessionUser.getOperator().getInitialPassword().equals(sessionUser.getOperator().getOperatorPass())>
+<script>
+	function doModifyPass(form)
+	{
+	    var ajax = new Z.Ajax();
+	    ajax.setContextPath("${context.getContextPath()}");
+	    ajax.setClassName("ZmrProfilePresenter");
+	    ajax.setMethodName("doModifyPass");
+	    ajax.setParamForm(form);
+	    ajax.setFailureAlert();
+	    ajax.setSuccessAlertReloadParent("修改成功");
+	    ajax.execute();
+	}
+	var dialog = new Z.Dialog();
+	dialog.title = '<span style="font-weight:bold">初始密码需要修改</span>';
+	dialog.text = '<div id="dialog_content"></div>';
+    dialog.width = 650;
+    dialog.height = 280;
+    dialog.fixed = true;
+    dialog.close = function ()
+    {//关闭
+    	dialog.remove();
+        dialog = null;
+    }
+    dialog.execute();
+    dialog.$background.remove();//去边框
+    var text = `
+    	<form>
+			<input type="text" class="z-hidden-fixed">
+			<input type="password" class="z-hidden-fixed">
+			<table class="z-table z-mg-t10 z-mg-b10">
+			<tr class="z-h60">
+			    <td width="80" class="zi-pd-l10">旧&ensp;密&ensp;码：</td>
+			    <td width="303"><input name="oldPassword" type="password" class="z-input z-w300 ${zmr_color_class}" maxlength="16" autocomplete="off"></td>
+			    <td width="10" class="z-px14 z-text-red zi-pd-t6">*</td>
+			    <td width="*" class="zi-pd-r10 z-px14 z-color-999">请输入原始密码</td>
+			</tr>
+			<tr class="z-h60">
+			    <td class="zi-pd-l10">新&ensp;密&ensp;码：</td>
+			    <td><input name="newPassword" type="password" class="z-input z-w300 ${zmr_color_class}" maxlength="16" autocomplete="off"></td>
+			    <td class="z-px14 z-text-red zi-pd-t6">*</td>
+			    <td class="zi-pd-r10 z-px12 z-color-999">6-16位密码，大写字母、小写字母、数字和特殊字符必须四选三，特殊字符支持</span><span class="z-px12 z-color-999 z-samp">.\`_~!@#$%</span></td>
+			</tr>
+			<tr class="z-h60">
+			    <td class="zi-pd-l10">确认密码：</td>
+			    <td><input name="newPassword2" type="password" class="z-input z-w300 ${zmr_color_class}" maxlength="16" autocomplete="off"></td>
+			    <td class="z-px14 z-text-red zi-pd-t6">*</td>
+			    <td class="zi-pd-r10 z-px14 z-color-999">再次输入新密码</td>
+			</tr>
+			</table>
+			<div class="z-absolute z-b0 z-l0 z-w100p z-h80 z-pd20 z-text-center z-bg-gray">
+			    <button type="button" class="z-button z-large z-w100 ${zmr_color_class}" onclick="doModifyPass(this.form);">提交</button>
+			</div>
+		</form>
+	`;
+    Z("#dialog_content").htmlc(text);
+    dialog.innerAlert = false;
+    dialog.submit = function(){
+    	
+    }
+    document.getElementsByClassName("z-font z-error")[0].remove();
+</script>
+</#if>
+</body>
+</html>
@@ -0,0 +1 @@
+<#include include/>
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>${context.getContextName()}</title>
+<meta charset="UTF-8">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+${Styles.src(zhiqim.css)}
+${Scripts.src(zhiqim.js)}
+${Scripts.src(jsencrypt.js)}
+${Styles.htmlOverflowHidden()}
+<style>
+body{color:#333;background-color:#747f9d;background-image: url(ztmpl/zhiqim_manager/index_bg_00.jpg);background-repeat: no-repeat;background-size:100%;}
+body,table,td,div{font-size:14px;line-height:120%;}
+a,a:visited{color:#333;text-decoration:none;cursor:pointer;}
+a:active,a:hover{color:#1e7eec;text-decoration:none;}
+
+.header{position:fixed;width:100%;height:40px;line-height:40px;background-color:#000; background:rgba(0,0,0,0.2); filter:alpha(opacity=20);}
+.footer{position:fixed;bottom:0px; width:100%;height:40px;background:rgba(255,255,255,0.2);line-height:40px;text-align:center;color:#fff;}
+
+.login{background-image: url(ztmpl/zhiqim_manager/00_default/index_bg_center.jpg);background-repeat:repeat-y; width:825px;}
+.input{background-color:#3f3f40;color:#fffafa;font-size:20px;letter-spacing:1px;border:2px solid #5c5c5c;border-radius:5px;height:45px;line-height:45px;text-indent:10px;font-family:Consolas,"微软雅黑";}
+.input:focus{border-color:#708090;}
+.input.verificationCode{letter-spacing:4px;}
+</style>
+<script>
+Z.onload(function()
+{//默认焦点
+    if (Z.V.isEmpty(Z("#operatorCode").val()))
+        Z("#operatorCode").focus();
+    else if (Z.V.isEmpty(Z("#operatorPass").val()))
+        Z("#operatorPass").focus();
+    else if (Z("#verificationCode").length > 0)
+        Z("#verificationCode").focus();
+        
+    Z(document).keydown(function(e)
+    {
+        if (Z.E.key(e) != Z.E.KEY.ENTER)
+            return;
+            
+        if (!Z.Dialog.cache.isEmpty())
+            return;
+            
+        doLogin();
+    });
+});
+
+function doRememberCode(rememberCode)
+{//取消记住账号时，同时取消记住密码
+    if (!rememberCode.checked)
+    {
+        Z("#rememberPass")[0].checked = false;
+        Z("[data-id=rememberPass]").removeClass("z-active");
+    }
+}
+
+function doRememberPass(rememberPass)
+{//记住密码时，同时记住账号
+    if (rememberPass.checked)
+    {
+        Z("#rememberCode")[0].checked = true;
+        Z("[data-id=rememberCode]").addClass("z-active");
+    }
+}
+
+function doLogin()
+{//登陆
+    var operatorCode = Z("#operatorCode").val();
+    if (Z.V.isEmptyBlank(operatorCode))
+    {//用户名和密码必填
+        Z.failure("用户名不能为空！",function(){
+            Z("#operatorCode").focus();
+        });
+        return;
+    } 
+    
+    var operatorPass = Z("#operatorPass").val();
+    if (Z.V.isEmptyBlank(operatorPass))
+    {//用户名和密码必填
+        Z.failure("密码不能为空！",function(){
+            Z("#operatorPass").focus();
+        });
+        return;
+    }
+    
+    var verificationCode = Z("#verificationCode").val();
+    if (Z("#verificationCode").length > 0 && verificationCode.length != 4)
+    {//如果有验证码框的时候，要求值必须是4位（数字在输入时控制）
+        Z.failure("验证码为4位数字！");
+        return;
+    }
+    
+    //对密码进行RSA加密
+    var publicKey = "${ZmrParamDao.getPublicKey(context)}";
+    var encrypt = new JSEncrypt();
+    encrypt.setPublicKey(publicKey);
+    operatorPass = encrypt.encrypt(operatorPass);
+    
+    var ajax = new Z.Ajax();
+    ajax.setContextPath("${context.getContextPath()}");
+    ajax.setClassName("ZmrLoginPresenter");
+    ajax.setMethodName("doLogin");
+    ajax.addParam("operatorCode", operatorCode);
+    ajax.addParam("operatorPass", operatorPass);
+    ajax.addParam("role", "oms");
+    ajax.addParam("verificationCode", verificationCode);
+    
+    <#if hasRememberCode>
+    ajax.addParam("rememberCode", Z("#rememberCode")[0].checked);
+    </#if>
+    <#if hasRememberPass>
+    ajax.addParam("rememberPass", Z("#rememberPass")[0].checked);
+    </#if>
+    
+    ajax.setFailureAlertRecovery();
+    ajax.setSuccessLocationResponse();
+    ajax.setLoading("login", "正在登录...", {disabled:true,recovery:false});
+    ajax.execute();
+}
+</script>
+</head>
+
+<body>
+${Htmls.toCallFrame()}
+<div class="header">
+    <div class="z-float-left z-w400 z-lh40 z-pd-l10 z-color-white">欢迎登录&nbsp;&nbsp;[&nbsp;${context.getContextName()}&nbsp;]！</div>
+    <div class="z-float-right z-text-right z-w200 z-lh40 z-pd-r10"></div>
+</div>  
+<div class="z-absolute-center-middle login" style="height:<#if hasVerificationCode && hasRememberCode>410<#elseif hasVerificationCode>360<#elseif hasRememberCode>350<#else>300</#if>px"> 
+<table class="z-table z-h100p">
+<tr>
+    <td width="50%" class="z-text-center"><img src="ztmpl/zhiqim_manager/index_logo_00.png"></td>
+    <td width="50%" valign="top" rowspan="2">
+    <input type="text" class="z-hidden-fixed"/>
+    <input type="password" class="z-hidden-fixed"/>
+    <table class="z-table z-mg-l30 z-h70-tr z-pd5 z-color-white">
+    <tr>
+        <td class="z-px20 z-text-gray z-mg-t10">用户登录</td>
+    </tr>
+    <tr>
+        <td><input id="operatorCode" class="z-w300 input" placeholder="用户名" value="#{operatorCode}" maxlength="16" spellcheck="false" autocomplete="off"></td>
+    </tr>
+    <tr>
+        <td><input id="operatorPass" type="password" class="z-w300 input" placeholder="密码" value="#{operatorPass}" maxlength="16" spellcheck="false" autocomplete="off"></td>
+    </tr>
+    <#if hasVerificationCode>
+    <tr>
+        <td>
+            <input id="verificationCode" class="z-w200 input verificationCode" placeholder="验证码" data-options="type:Numeric;paste:true;" maxlength="4" spellcheck="false" autocomplete="off">
+            <img class="z-pointer z-bd-rd5 z-mg-t-8" title="点击刷新验证码" onclick="this.src='service/vcode.jpg?bgColor=%231299ec&width=95&height=42&fontSize=20&yawp=true&t='+new Date().getTime();" src="service/vcode.jpg?bgColor=%231299ec&width=95&height=42&fontSize=20&yawp=true&t=${DateTimes.getDateTime17String()}">
+        </td>   
+    </tr>
+    </#if>
+    <#if hasRememberCode>
+    <tr class="zi-h40">
+        <td class="z-px16 z-text-gray">
+            <input id="rememberCode" type="checkbox" data-role="z-checkbox" data-class="z-mg-r10 ${zmr_color_class}" onclick="doRememberCode(this);" <#if Validates.isNotEmpty(operatorCode)>checked</#if>>记住用户名
+        <#if hasRememberPass>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <input id="rememberPass" type="checkbox" data-role="z-checkbox" data-class="z-mg-r10 ${zmr_color_class}" onclick="doRememberPass(this);" <#if Validates.isNotEmpty(operatorPass)>checked</#if>/>记住密码
+        </#if>
+        </td>
+    </tr>
+    </#if>
+    <tr>
+        <td><button id="login" class="z-button z-w300 z-h50 zi-px20 ${zmr_color_class}" onclick="doLogin()">登&nbsp;&nbsp;录</button></td>
+    </tr>
+    </table>
+    </td>
+</tr>
+<tr class="z-h120">
+    <td class="z-text-center" valign="top"><img src="ztmpl/zhiqim_manager/index_slogan_00.png"/></td>
+</tr>
+</table>
+</div>
+<div class="footer">Copyright  © 2023 领淘众创  All Rights Reserved  <a href="https://beian.miit.gov.cn/" style="color: white" target="_blank">备案号：闽ICP备2023014112号-1 </a></div>
+</body>
+</html>
@@ -0,0 +1,17 @@
+<#-- 主题变量和函数定义 -->
+<#include "/ztmpl/zhiqim_manager/"+themeMain+"/define.htm"/>
+<!DOCTYPE html>
+<html>
+<head>
+<title>${context.getContextName()}</title>
+<meta charset="UTF-8">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+${Styles.src(zhiqim.css)}
+${Scripts.src(zhiqim.js)}
+${Styles.src(zmr_theme.css)}
+</head>
+
+<body>
+<#include include/>
+</body>
+</html>
@@ -0,0 +1,15 @@
+<#-- 主题变量和函数定义 -->
+<#include "/ztmpl/zhiqim_manager/"+themeMain+"/define.htm"/>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>${context.getContextName()}</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    ${Scripts.src(zhiqim.js)}
+</head>
+<body>
+    <#include include/>
+</body>
+</html>
@@ -0,0 +1,15 @@
+<#-- 主题变量和函数定义 -->
+<#include "/ztmpl/zhiqim_manager/"+themeMain+"/define.htm"/>
+<!DOCTYPE html>
+<html>
+<head>
+<title>${context.getContextName()}</title>
+<meta charset="UTF-8">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+${Scripts.src(zhiqim.js)}
+</head>
+
+<body>
+<#include include/>
+</body>
+</html>
@@ -0,0 +1,12 @@
+<#-- 主题变量和函数定义 -->
+<#include "/ztmpl/zhiqim_manager/"+themeMain+"/define.htm"/>
+<#-- 判断是否启用了iframe -->
+<#if !ZmrParamDao.isThemeFrame(context)>
+    <#include "/ztmpl/zhiqim_manager/"+themeMain+"/alone.htm"/>
+<#else>
+    <#if request.getPathInContext() == "/"+zhiqim_manager+"/main.htm">
+        <#include "/ztmpl/zhiqim_manager/"+themeMain+"/iframeMain.htm"/>
+    <#else>
+        <#include "/ztmpl/zhiqim_manager/"+themeMain+"/iframeInner.htm"/>
+    </#if>
+</#if>
@@ -0,0 +1,266 @@
+/*
+ * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
+ * 
+ * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
+ *
+ * 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
+ * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
+ * 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
+ * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
+ * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
+ * 5、您可以在以下链接获取一个完整的许可证副本。
+ * 
+ * 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
+ *
+ * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
+ */
+(function(Z)
+{//BEGIN
+
+/**************************************************/
+//定义全局的对象，便于所有的页面调用
+/**************************************************/
+var Zin = window.Zin = {};
+
+Zin.doClickChildMenu = function(elem, menuUrl)
+{//点击二级栏目
+    var $elem = Z(elem);
+    
+    //1.判断是否已存在，存在则置为显示并切换该框架导航选项卡置为活动
+    var elemId = $elem[0].id || "menu_" + Z.Ids.uuid();
+    $elem.attr("id", elemId);
+    
+    var tabId = "tab_" + elemId;
+    var iframeId = "iframe_" + elemId;
+    var $tab = Z("#" + tabId);
+    var $iframe = Z("#" + iframeId);
+    
+    if ($tab[0] && $iframe[0])
+    {
+        Zin.selectIframeTab(elemId);
+        return;
+    }
+    
+    //2.不存在则创建该框架导航选项卡
+    var $tabList = Z(".iframenav-tab-list");
+    var clickText = $elem.attr("data-text") || $elem.text() || "未命名";
+    $tab = Z('<li class="iframenav-tab-item" id="'+ tabId +'"><span>'+ clickText +'</span><i class="z-font z-error"></i></li>')
+           .appendTo($tabList);
+    $tab.on("click", Zin.selectIframeTabEvent);
+    $tab.find(".z-refresh").on("click", Zin.refreshIframeTabClick);
+    $tab.find(".z-error").on("click", Zin.closeIframeTabClick);
+
+    $iframe = Z('<div id="'+ iframeId +'" class="iframenav-cont-item"><iframe src="'+ menuUrl +'" name="'+iframeId+'"></iframe></div>')
+              .appendTo(".iframenav-cont");
+
+    //3.选中自己，调整位置偏移，显示完整选项卡
+    Zin.selectIframeTab(elemId);
+};
+
+/**************************************************/
+//3个iframenav的点击事件（其中刷新暂时没有添加）
+/**************************************************/
+
+Zin.selectIframeTabEvent = function(event)
+{//点击选项卡标签页
+    var $tab = Z.E.current(event);
+    var tabId = $tab.id;
+    Zin.selectIframeTab(tabId.replace("tab_", ""));
+};
+
+Zin.refreshIframeTabClick = function(event)
+{//点击选项卡上的刷新按钮
+    var $refresh = Z(Z.E.current(event));
+    var tabId = $refresh.parent()[0].id;
+    Zin.refreshIframeTab(tabId.replace("tab_", ""));
+};
+
+Zin.closeIframeTabClick = function(event)
+{//点击选项卡上的关闭按钮
+    var $close = Z(Z.E.current(event));
+    var tabId = $close.parent()[0].id;
+    Zin.closeIframeTab(tabId.replace("tab_", ""));
+};
+
+/**************************************************/
+//指定操作功能
+/**************************************************/
+
+Zin.selectIframeTab = function(id)
+{//选择指定的选项卡
+    Z("#tab_"+id).addClass("active").siblings(".iframenav-tab-item").removeClass("active");
+    Z("#iframe_"+id).addClass("active").siblings(".iframenav-cont-item").removeClass("active");
+    Zin.setTranslateForShowActive();
+    
+    var mainUrl = Z("#iframe_"+id+" iframe").attr("src");
+    if (mainUrl)
+    {//切换选项卡同步到后端，关闭选项卡时为null不处理，整页刷新时依然使用关闭的URL
+        var $elem = Z("#" + id);
+        $elem.parent().parent().find("li").removeClass("active");
+        $elem.addClass("active");
+    
+        mainUrl = mainUrl.substring(location.origin.length);
+        Z.ajax().setContextPath(Zin.contextPath)
+                .setClassName("sessionUser").setMethodName("setMainUrl").addParam(mainUrl)
+                .execute();
+    }
+};
+
+Zin.refreshIframeTab = function(id)
+{//刷新指定框架
+    Z("#iframe_" + id).find("iframe")[0].contentWindow.location.reload(true);
+};
+
+Zin.closeIframeTab = function(id)
+{//关闭指定框架，并切换到前一个框架
+    var $currTab = Z("#tab_" + id);
+    var $prevTab = Z($currTab[0].previousElementSibling || Z(".iframenav-tab-item:first-child")[0]);
+
+    //删除当前框架，同时选中前一个为活动
+    Zin.closeIframeTabOnly(id);
+    Zin.selectIframeTab($prevTab[0].id.replace("tab_", ""));
+};
+
+Zin.closeIframeTabOnly = function(id)
+{//仅关闭指定框架
+    Z("#tab_" + id).remove();
+    Z("#iframe_" + id).remove();
+};
+
+Zin.setTranslateForShowActive = function()
+{//调整位置偏移，显示完整选项卡
+    var $tabList = Z(".iframenav-tab-list");
+    var $tabs = Z(".iframenav-tab-item");
+    
+    //1.校准宽度
+    var fillWidth = 0;
+    $tabs.each(function(item){
+        fillWidth += item.getBoundingClientRect().width;
+    });
+    fillWidth = Math.ceil(fillWidth);
+    
+    var wrapRect = Z(".iframenav-tab-wrap")[0].getBoundingClientRect();
+    $tabList.css("width", fillWidth > wrapRect.width ? fillWidth : wrapRect.width);
+    if (fillWidth < wrapRect.width)
+        $tabList.css("transform", "translate(0,0)");
+
+    //2.当前标签、前后两个标签，宽度信息
+    var $active = Z(".iframenav-tab-item.active");
+    var activeRect = $active[0].getBoundingClientRect();
+    var $prev = $active[0].previousElementSibling;
+    var prevWidth = !!$prev ? $prev.getBoundingClientRect().width : 0;
+    var $next = $active[0].nextElementSibling;
+    var nextWidth = !!$next ? $next.getBoundingClientRect().width : 0;
+    
+    //3.计算理论偏移量
+    var mLeft = activeRect.left - prevWidth - wrapRect.left;
+    var mRight = activeRect.right + nextWidth - wrapRect.right;
+    var tabTransX = parseFloat($tabList.css("transform").replace(/^[^\d]+/,"") || 0);
+    tabTransX = tabTransX >= 0 ? tabTransX : 0;
+    if (mLeft < 0 && mRight > 0)
+        return;
+        
+    if (mLeft < 0)
+        tabTransX += mLeft;
+        
+    if (mRight > 0)
+        tabTransX += mRight;
+        
+    $tabList.css("transform", "translate(-" + tabTransX + "px,0)");
+};
+
+/**************************************************/
+//外部调用
+/**************************************************/
+
+Zin.toggleIframeCtrlWrap = function()
+{//切换关闭操作界面
+    Z(".iframenav-ctrl-wrap").toggle();
+};
+
+Zin.selectIframeTabActive = function()
+{//定位到当前选项卡
+    var $active = Z(".iframenav-tab-item.active");
+    var tabId = $active[0].id;
+    Zin.selectIframeTab(tabId.replace("tab_", ""));
+    
+    Zin.toggleIframeCtrlWrap();
+}
+
+Zin.closeIframeTabAll = function()
+{//关闭所有选项卡
+    var $tab = Z(".iframenav-tab-item:not(:first-child)");
+    
+    var idList = [];
+    $tab.each(function(elem){idList.push(elem.id.replace("tab_", ""));});
+    idList.forEach(Zin.closeIframeTabOnly);
+    
+    //选中首页
+    var $index = Z(".iframenav-tab-item:first-child");
+    Zin.selectIframeTab($index[0].id.replace("tab_", ""));
+    Zin.toggleIframeCtrlWrap();
+};
+
+Zin.closeIframeTabOther = function()
+{//关闭其他选项卡
+    var $tab = Z(".iframenav-tab-item:not(:first-child)");
+    var $active = Z(".iframenav-tab-item.active");
+    
+    var idList = [];
+    $tab.each(function(elem){if ($active[0] !== elem){idList.push(elem.id.replace("tab_",""));}});
+    idList.forEach(Zin.closeIframeTabOnly);
+    
+    Zin.setTranslateForShowActive();
+    Zin.toggleIframeCtrlWrap();
+};
+
+Zin.refreshIframeTabActive = function()
+{//刷新当前选项卡
+    var $active = Z(".iframenav-tab-item.active");
+    Zin.refreshIframeTab($active[0].id.replace("tab_",""));
+};
+
+Zin.turnIframeTab = function(isNext)
+{//向前向后翻页选项卡
+    var wrapWidth = Z(".iframenav-tab-wrap")[0].getBoundingClientRect().width;
+    var $tabList = Z(".iframenav-tab-list");
+    var tabTransX = parseFloat($tabList.css("transform").replace(/^[^\d]+/,"") || 0);
+    tabTransX = tabTransX >= 0 ? tabTransX : 0;
+    
+    var $tabs = Z(".iframenav-tab-item");
+    var listWidth = 0, fillWidth = 0;
+    var fillArray=[];
+    
+    for (var i=0;i<$tabs.length;i++)
+    {
+        var tab = $tabs[i];
+        var tabWidth = tab.getBoundingClientRect().width;
+        listWidth += tabWidth;
+        if (isNext)
+        {
+            if (listWidth - tabTransX > wrapWidth)
+            {
+                tabTransX = listWidth - tabWidth;
+                break;
+            }
+        }
+        else
+        {
+            fillArray.unshift(tabWidth);
+            if (listWidth >= tabTransX)
+            {
+                while(fillWidth < wrapWidth)
+                {
+                    fillWidth += fillArray[i++];
+                }
+                tabTransX = listWidth - fillWidth;
+                break;
+            }
+        }
+    }
+    
+    $tabList.css("transform", "translate(-" + (tabTransX >= 0 ? tabTransX : 0) + "px,0)");
+}
+
+//END
+})(zhiqim);
@@ -0,0 +1,208 @@
+/*
+ * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
+ * 
+ * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
+ *
+ * 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
+ * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
+ * 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
+ * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
+ * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
+ * 5、您可以在以下链接获取一个完整的许可证副本。
+ * 
+ * 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
+ *
+ * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
+ */
+(function(Z)
+{
+//BEGIN
+
+/**
+ * 图片裁切
+*/
+Z.ImageClipper = Z.Class.newInstance();
+Z.ImageClipper.prototype = 
+{
+    defaults:
+    {
+        elem : null,
+        ratio: 1,
+        state : {},
+        img: null,
+        clipWidth: [50, 100, 150],
+        save: null
+    },
+    
+    execute: function()
+    {
+        this.$elem = Z.$elem(this.elem, "Z.ImageClipper");
+        if (this.clipWidth == null || this.clipWidth.length == 0)
+        {
+            Z.alert("[Z.ImageClipper]没有设置clipWidth，或不是数组");
+            return;
+        }
+    
+        this.id = Z.random(10);
+        var html = '<div id="ZImageClipper_'+this.id+'" class="z-relative" style="width:620px;height:460px;">'
+                 + '    <div id="ZImageClipper_image_'+this.id+'" class="z-relative z-w400 z-h400 z-bd z-overflow-hidden z-bg-white" style="cursor:move;background-repeat: no-repeat;">'
+                 + '       <div id="ZImageClipper_square_'+this.id+'" class="z-absolute z-w200 z-h200 z-bd" style="top:100px;left:100px;box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);"></div>'
+                 + '       <div id="ZImageClipper_loading_'+this.id+'" class="z-absolute-center-middle z-w60 z-h30 z-hide">加载中...</div>'
+                 + '    </div>'
+                 + '    <div class="z-w400 z-h30 z-mg-t10">'
+                 + '        <button type="button" class="z-button z-cyan z-w120 z-h50 zi-px20" id="ZImageClipper_upload_'+this.id+'">上传图像 </button>'
+                 + '        <button type="button" class="z-button z-cyan z-w50 z-h50 zi-px30" id="ZImageClipper_zoomIn_'+this.id+'">+</button>'
+                 + '        <button type="button" class="z-button z-cyan z-w50 z-h50 zi-px30" id="ZImageClipper_zoomOut_'+this.id+'">-</button>'
+                 + '        <button type="button" class="z-button z-cyan z-w80 z-h50 zi-px20" id="ZImageClipper_clip_'+this.id+'">裁切</button>'
+                 + '        <button type="button" class="z-button z-cyan z-w80 z-h50 zi-px20" id="ZImageClipper_save_'+this.id+'">保存</button>'
+                 + '    </div>'
+                 + '    <div id="ZImageClipper_clipped_'+this.id+'" class="z-absolute z-w200 z-text-center z-pd-t20 z-bd" style="top:0;right:0;height:460px;"></button>'
+                 + '</div>';
+                 
+        this.$elem.html(html);
+        this.$imageBox = this.$elem.find("#ZImageClipper_image_"+this.id);
+        this.$square =  this.$elem.find("#ZImageClipper_square_"+this.id);
+        this.$loading = this.$elem.find("#ZImageClipper_loading_"+this.id).show();
+        
+        this.image = new Image();
+        Z(this.image).load(function() 
+        {
+            this.$loading.hide();
+            this.setBackground();
+
+            this.$imageBox.mousedown(this.onMouseDown, this).mousemove(this.onMouseMove, this);
+            Z(window).mouseup(this.onMouseUp, this);
+        }, this);
+        this.image.src = this.img;
+        
+        Z("#ZImageClipper_zoomIn_"+this.id).click(this.onZoomIn, this);
+        Z("#ZImageClipper_zoomOut_"+this.id).click(this.onZoomOut, this);
+        
+        this.$file = Z("<input id='ZImageClipper_upload_file_"+this.id+"' type='file' accept='image/jpg,image/jpeg,image/png' class='z-hide' single>");
+        this.$file.appendTo("body").change(function()
+        {
+            var file = this.$file[0].files[0];
+            var reader = new FileReader();
+            reader.onload = Z.bind(function(e)
+            {
+                this.img = e.target.result;
+                this.image.src = this.img;
+            }, this);
+
+            reader.readAsDataURL(file);
+        }, this);
+        
+        Z("#ZImageClipper_upload_"+this.id).click(function(){this.$file[0].click();}, this);
+        Z("#ZImageClipper_clip_"+this.id).click(function()
+        {
+            var imgData = this.getDataURL();
+            var imgDiv = '';
+            Z.each(this.clipWidth, function(elem){
+                imgDiv += '<div class="z-w200 z-mg-b20"><img src="'+imgData+'" class="z-bd-rd50p" style="width:'+elem+'px;"><br>'+elem+' * '+elem+'</div>'
+            });
+            Z("#ZImageClipper_clipped_"+this.id).html(imgDiv);
+        }, this);
+        
+        if (Z.T.isFunction(this.save)){
+            Z("#ZImageClipper_save_"+this.id).click(this.save, this);
+        }
+    },
+    
+    setBackground: function()
+    {
+        var w =  parseInt(this.image.width) * this.ratio;
+        var h =  parseInt(this.image.height) * this.ratio;
+
+        var pw = (400 - w) / 2;
+        var ph = (400 - h) / 2;
+
+        this.$imageBox.css({
+            "background-image": "url(" + this.image.src + ")",
+            "background-size": w +"px " + h + "px",
+            "background-position": pw + "px " + ph + "px",
+            "background-repeat": "no-repeat"});
+    },
+    
+    onMouseDown: function(e)
+    {
+        Z.E.stop(e);
+        this.state.dragging = true;
+        this.state.mouseX = e.clientX;
+        this.state.mouseY = e.clientY;
+    },
+    
+    onMouseMove: function(e)
+    {
+        Z.E.stop(e);
+        if (!this.state.dragging)
+            return;
+            
+        var x = e.clientX - this.state.mouseX;
+        var y = e.clientY - this.state.mouseY;
+
+        var bg = this.$imageBox.css('background-position').split(' ');
+
+        var bgX = x + parseInt(bg[0]);
+        var bgY = y + parseInt(bg[1]);
+
+        this.$imageBox.css('background-position', bgX +'px ' + bgY + 'px');
+
+        this.state.mouseX = e.clientX;
+        this.state.mouseY = e.clientY;
+    },
+    
+    onMouseUp: function(e)
+    {
+        Z.E.stop(e);
+        this.state.dragging = false;
+    },
+    
+    onZoomIn: function()
+    {
+        this.ratio *= 1.1;
+        this.setBackground();
+    },
+    
+    onZoomOut: function()
+    {
+        this.ratio *= 0.9;
+        this.setBackground();
+    },
+    
+    getDataURL: function()
+    {
+        var width = this.$square.offsetWidth(),
+            height = this.$square.offsetHeight(),
+            canvas = document.createElement("canvas"),
+            dim = this.$imageBox.css('background-position').split(' '),
+            size = this.$imageBox.css('background-size').split(' '),
+            dx = parseInt(dim[0]) - this.$imageBox.offsetWidth()/2 + width/2,
+            dy = parseInt(dim[1]) - this.$imageBox.offsetHeight()/2 + height/2,
+            dw = parseInt(size[0]),
+            dh = parseInt(size[1]),
+            sh = parseInt(this.image.height),
+            sw = parseInt(this.image.width);
+
+        canvas.width = width;
+        canvas.height = height;
+        var context = canvas.getContext("2d");
+        context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
+        var imageData = canvas.toDataURL('image/png');
+        return imageData;
+    },
+    
+    getBlob: function()
+    {
+        var imageData = this.getDataURL();
+        var b64 = imageData.replace('data:image/png;base64,','');
+        var binary = atob(b64);
+        var array = [];
+        for (var i = 0; i < binary.length; i++) {
+            array.push(binary.charCodeAt(i));
+        }
+        return new Blob([new Uint8Array(array)], {type: 'image/png'});
+    }
+}
+
+//END
+})(zhiqim);
@@ -0,0 +1,265 @@
+/*
+ * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
+ * 
+ * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
+ *
+ * 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
+ * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
+ * 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
+ * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
+ * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
+ * 5、您可以在以下链接获取一个完整的许可证副本。
+ * 
+ * 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
+ *
+ * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
+ */
+(function(Z)
+{
+//BEGIN
+
+/**
+ * WebGL+three.js 3D动画，当前有波浪和光线球两种
+*/
+Z.WebGLThree = Z.Class.newInstance();
+Z.WebGLThree.prototype = 
+{
+    defaults:
+    {
+        //常量
+        SEPARATION: 125, 
+        AMOUNTX: 35,
+        AMOUNTY: 35, 
+        
+        //传入参数
+        threePath: null,
+        elem: null,
+        
+        //内部对象
+        camera: null, 
+        scene: null, 
+        renderer: null, 
+        particles_ware: [], 
+        particles_globe: [], 
+        
+        //运行时
+        count: 0, 
+        mouseX: 0, 
+        mouseY: 0, 
+        windowHalfX: window.innerWidth / 2, 
+        windowHalfY: window.innerHeight / 2, 
+        rotation_speed: .002, 
+        timeout: null
+    },
+    
+    execute: function()
+    {
+        if (Z.B.mobile || Z.B.msieVer <= 9)
+        {//移动端和IE9以下不支持
+            return;
+        }
+        
+        if (this.threePath == null || this.elem == null)
+        {//两个参数必须，未传不处理
+            return;
+        }
+            
+        //先加载three.js，再初始化init
+        this.$elem = Z.$elem(this.elem, "Z.WebGLThree");
+        Z.loads(this.threePath, Z.bind(this.initWebGL, this));
+    },
+    
+    initWebGL: function()
+    {
+        var animationType = Math.floor(2 * Math.random());
+        if (animationType == 0)
+        {//波浪
+            this.initWave(); 
+            this.animateWave();
+        }
+        else
+        {//光球
+            this.initGlobe(); 
+            this.animateGlobe();
+        }
+        
+        //增加事件处理
+        Z(document).mousemove(this.onDocumentMouseMove, this)
+                   .on("touchstart", this.onDocumentTouchStart, this)
+                   .on("touchmove", this.onDocumentTouchMove, this);
+        Z(window).resize(this.onWindowResize, this);
+    },
+
+    /******************************************************************************************/
+    //光球
+    /******************************************************************************************/
+    initGlobe: function initGlobe() 
+    {
+        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4), 
+        this.camera.position.z = 500, 
+        this.scene = new THREE.Scene;
+        
+        for (var t = 2 * Math.PI, i = function (e) {e.beginPath(), e.arc(0, 0, 25, 0, t, true), e.fill()}, t = 2 * Math.PI, n = 0; 500 > n; n++) 
+        {
+            var o = new THREE.SpriteCanvasMaterial({color: 16777215, 
+                                                     transparent: true, 
+                                                     program: function (e) {e.beginPath(), e.arc(0, 0, .5, 0, t, true), e.fill()}});
+            var particle = new THREE.Sprite(o);
+            particle.position.x = 2 * Math.random() - 1;
+            particle.position.y = 2 * Math.random() - 1;
+            particle.position.z = 2 * Math.random() - 1;
+            particle.position.normalize();
+            particle.position.multiplyScalar(10 * Math.random() + 450);
+            particle.scale.multiplyScalar(4 + 2 * Math.random());
+            particle.material.opacity = .1;
+            this.scene.add(particle);
+            this.particles_globe.push(particle);
+        }
+        for (var n = 0; 500 > n; n++) 
+        {
+            var s = new THREE.Geometry;
+            var r = new THREE.Vector3(2 * Math.random() - 1, 2 * Math.random() - 1, 2 * Math.random() - 1);
+            r.normalize();
+            r.multiplyScalar(450);
+            s.vertices.push(r);
+            
+            var a = r.clone();
+            a.multiplyScalar(.3 * Math.random() + 1), s.vertices.push(a);
+            var l = new THREE.Line(s, new THREE.LineBasicMaterial({color: 16777215, opacity: .3}));
+            this.scene.add(l)
+        }
+        this.renderer = new THREE.CanvasRenderer({alpha: true});
+        this.renderer.setClearColor(0, 0);
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.$elem.append(this.renderer.domElement)
+    },
+    
+    animateGlobe: function() 
+    {
+        requestAnimationFrame(Z.bind(this.animateGlobe, this));
+        this.renderGlobe();
+    },
+    
+    renderGlobe: function() 
+    {
+        var e = Z("body:hover"), t = this.camera.position.x, i = this.camera.position.y, n = this.camera.position.z;
+        if (e.length != 0 && this.timeout != null)
+        {
+            this.camera.position.x += .05 * (this.mouseX - this.camera.position.x);
+        }
+        else
+        {
+            this.camera.position.x = t * Math.cos(this.rotation_speed) - n * Math.sin(this.rotation_speed);
+            this.camera.position.z = n * Math.cos(this.rotation_speed) + t * Math.sin(this.rotation_speed);
+        }
+                                          
+        this.camera.position.y += .05 * (-this.mouseY + 200 - this.camera.position.y);
+        this.camera.lookAt(this.scene.position);
+        
+        Z(document).mousemove(function () {
+            this.timeout !== null && clearTimeout(this.timeout), this.timeout = setTimeout(function () {this.timeout = null}, 600)
+        });
+        
+        for (var o = 0; o < this.particles_globe.length; o++)
+        {
+            var particle = this.particles_globe[o++];
+            temp = 50 * Math.sin(.3 * (o + this.count)) + .5 * Math.sin(.5 * (o + this.count));
+            opacity = Math.abs(temp) / 50 + .1;
+            opacity > 1 && (opacity = 1);
+            particle.material.opacity = opacity;
+        }
+        
+        this.renderer.render(this.scene, this.camera);
+        this.count += .1;
+    },
+    
+    /******************************************************************************************/
+    //波浪
+    /******************************************************************************************/
+    initWave: function() 
+    {
+        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4);
+        this.camera.position.z = 1e3;
+        this.camera.position.y = 100; 
+        this.camera.position.y = 1e3; 
+        
+        this.scene = new THREE.Scene;
+        for (var t = 2 * Math.PI, i = 0, n = 0; this.AMOUNTX > n; n++)for (var o = 0; this.AMOUNTY > o; o++)
+        {
+            var s = new THREE.SpriteCanvasMaterial({color: 16777215, 
+                                                     transparent: true, 
+                                                     program: function (e) {e.beginPath(), e.arc(0, 0, .5, 0, t, true), e.fill()}});
+                                                     
+            var particle = this.particles_ware[i++] = new THREE.Sprite(s);
+            particle.position.x = n * this.SEPARATION - this.AMOUNTX * this.SEPARATION / 2;
+            particle.position.z = o * this.SEPARATION - this.AMOUNTY * this.SEPARATION / 2;
+            this.scene.add(particle), particle.material.opacity = .4;
+        }
+        
+        this.renderer = new THREE.CanvasRenderer({alpha: true});
+        this.renderer.setClearColor(0, 0);
+        this.renderer.setSize(window.innerWidth, window.innerHeight); 
+        this.$elem.append(this.renderer.domElement);
+    },
+    
+    animateWave: function() 
+    {
+        requestAnimationFrame(Z.bind(this.animateWave, this));
+        this.renderWave();
+    },
+    
+    renderWave: function() 
+    {
+        this.camera.position.x += .01 * (this.mouseX - this.camera.position.x), 
+        this.camera.position.y += .005 * (this.mouseY - this.camera.position.y), 
+        this.camera.lookAt(this.scene.position);
+        
+        for (var e = 0, t = 0; this.AMOUNTX > t; t++)
+        {
+            for (var i = 0; this.AMOUNTY > i; i++)
+            {
+                var particle = this.particles_ware[e++];
+                particle.position.y = 50 * Math.sin(.3 * (t + this.count)) + 50 * Math.sin(.5 * (i + this.count));
+                particle.scale.x = particle.scale.y = 4 * (Math.sin(.3 * (t + this.count)) + 1) + 4 * (Math.sin(.5 * (i + this.count)) + 1);
+                opacity = Math.abs(particle.position.y) / 100;
+                opacity < .5 && (opacity = .5);
+                opacity > 1 && (opacity = 1);
+                particle.material.opacity = opacity;
+            }
+        }
+        
+        this.renderer.render(this.scene, this.camera);
+        this.count += .03
+    },
+    
+    /******************************************************************************************/
+    //事件处理
+    /******************************************************************************************/
+    
+    onWindowResize: function() 
+    {//缩放
+        this.windowHalfX = window.innerWidth / 2, 
+        this.windowHalfY = window.innerHeight / 2, 
+        this.camera.aspect = window.innerWidth / window.innerHeight, 
+        this.camera.updateProjectionMatrix(), 
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    },
+    
+    onDocumentMouseMove: function(e) 
+    {//鼠标移动
+        this.mouseX = e.clientX - this.windowHalfX, this.mouseY = e.clientY + 150;
+    },
+    
+    onDocumentTouchStart: function(e) 
+    {//iOS触摸开始
+        1 === e.touches.length && (e.preventDefault(), this.mouseX = e.touches[0].pageX - this.windowHalfX, this.mouseY = -e.touches[0].pageY);
+    },
+    
+    onDocumentTouchMove: function(e) 
+    {//iOS触摸移动
+        1 === e.touches.length && (e.preventDefault(), this.mouseX = e.touches[0].pageX - this.windowHalfX, this.mouseY = -e.touches[0].pageY);
+    }
+};
+
+//END
+})(zhiqim);