Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。
森中灵 最后提交于3月前 整理V8.0.6
index_pc.htm8KB
<#def htmlOverflowHidden = true/>
${zhiqim_com_header()}
${zhiqim_com_topnav("index")}
${Styles.htmlOverflowHidden()}
${Scripts.src("/src_extend/zhiqim_scroll_screen.js")}
${Scripts.src("/src_extend/zhiqim_webgl_three.js")}
<script>
Z.onload(function()
{
//1、初始化滚屏,上方固定55px
var sScreen = new Z.ScrollScreen();
sScreen.fixHeight = 55;
sScreen.speed = 19;
sScreen.execute();
//2、初始化动画
var three = new Z.WebGLThree();
three.threePath = "/zinc/www/three.js";
three.target = "z-webgl-canvas";
three.execute();
//3、滚动监听
Z(document).on("scroll",function(){
var docScroll = document.documentElement.scrollTop;
var itemHeight = parseFloat(Z(".section").css("height"));
var num = Math.floor(docScroll / itemHeight);
Z(Z(".section")[num]).addClass("fadeInDown").siblings(".section").removeClass("fadeInDown");
})
//4、调用数量累加
countNum('programmersNum', 11000);
countNum('companiesNum', 2600);
});
// 数量累加方法
function countNum(elem, stop){
var $elem = Z.$elem(elem, 'countNum');
stop = parseFloat('0' + stop);
if (stop === 0) {
return Z.alert('countNum 方法参数设置有误!');
}
var start = 0;
var sumNum = stop - start; // 总变化数值
var duration = 2000; // 持续时间
// 按 1s 30 帧,计算每一帧需要显示的数字
var stepTime = 1000/30; // 每帧时间
var stepNum = sumNum / (duration / stepTime); // 每帧变化数值
var showNum = start;
var setTime = setInterval(function() // 定义定时器
{
showNum += stepNum;
showNum = Math.round(showNum);
if (showNum >= stop) {
showNum = stop;
clearInterval(setTime);
}
$elem.html(showNum);
},stepTime);
}
</script>
<!--框架体系-->
<div data-role="z-screen" class="section" id="first" style="background-color:#1d72c0;">
<div id="z-webgl-canvas" class="z-absolute z-w100p z-h100p"></div>
<div class="first">
<div class="title"><img src="/zinc/www/images/slogan.png"></div>
<div class="intro">
<div class="z-text-center z-text-white z-w300">
<div class="z-mg-b20"><img src="/zinc/www/images/ico_dk.png" class="z-w120 z-h120"></div>
<p class="z-px24 z-mg-b20 z-h25">ZhiqimDK</p>
<p class="z-px15 z-lh25 z-mg-t10">一套颠覆传统Tomcat和servlet的完整型、开放型、创新型的技术体系。</p>
<div class="z-mg-t15"><button class="z-button z-w80 z-h35" onclick="window.open('https://www.zhiqim.com/product/www/dkIntroduce.htm');">更多</button></div>
</div>
<div class="z-text-center z-text-white z-w300">
<div class="z-mg-b20"><img src="/zinc/www/images/ico_studio.png" class="z-w120 z-h120"></div>
<p class="z-px24 z-mg-b20 z-h25">ZhiqimStudio</p>
<p class="z-px15 z-lh25">快速搭建基于ZhiqimDK的web工程,大幅提升HTML、js、css的开发效率。</p>
<div class="z-mg-t15"><button class="z-button z-w80 z-h35" onclick="window.open('https://www.zhiqim.com/product/www/studioIntroduce.htm');">更多</button></div>
</div>
<div class="z-text-center z-text-white z-w300">
<div class="z-mg-b20"><img src="/zinc/www/images/ico_pm.png" class="z-w120 z-h120"></div>
<p class="z-px24 z-mg-b20 z-h25">ZhiqimPM</p>
<p class="z-px15 z-lh25">一款融合了代码托管、协同开发、开发过程管理的强大的软件管理工具。</p>
<div class="z-mg-t15"><button class="z-button z-w80 z-h35" onclick="window.open('https://www.zhiqim.com/product/www/pmIntroduce.htm');">更多</button></div>
</div>
</div>
<div class="z-w100p count"><span id="programmersNum">0</span><span class="z-sup">+</span> 程序员,<span id="companiesNum">0</span><span class="z-sup">+</span> 家公司正在使用</div>
</div>
</div>
<!--产品-->
<div data-role="z-screen" class="section" id="third">
<div class="third z-pd-l20">
<div class="z-float-left z-hide z-w40p z-h100p z-text-left"><img src="/zinc/www/images/product.png"> </div>
<div class="z-float-right z-w60p z-text-left z-pd-l20" style="margin-top:50px;">
<div class="sectiontitle">gitsolo</div>
<div class="z-px18 z-color-333 z-lh25">gitsolo是首个独立命名,由知启蒙团队自主研发的一个极简的git仓库管理器,支持HTT(S)协议,包含部门角色权限等管理,用户可在此基础上进行二次开发,也可作为其他大项目下的组件使用。
<span class="z-mg-l10 z-color-666 z-px14">(Demo用户名:zhiqim <span class="z-mg-l10">密码:</span>zhiqim@2015)</span>
</div>
<div class="productfont">
<ul>
<li>依赖于zhiqim_manager,自带管理和权限功能。</li>
<li>集成了sqlite文件数据库,安装使用方便。</li>
<li>全程自主研发,无外部包依赖,开发环境纯净。</li>
<li>安装简单,启动容易,一键式启动方式。</li>
<li>隶属于zhiqim_pm下的,基于git规范的开源代码仓库系统</li>
</ul>
</div>
<div class="z-mg-t20 z-w100p">
<button class="z-button z-xlarge z-orange z-w140" onclick="window.open('${context.getRootPath("http://gitsolo.demo.zhiqim.com")}')">Demo体验</button>
<button class="z-button z-xlarge z-blue z-w140 z-mg-l10" onclick="Z.L.href('${context.getRootPath("/product/www/gitsoloIntroduce.htm")}');">查看详情</button>
</div>
</div>
</div>
</div>
<!--组件-->
<div data-role="z-screen" class="section" id="second">
<div class="second">
<div class="z-float-left z-hide z-w40p z-h100p z-text-center"><img src="/zinc/www/images/component.png"></div>
<div class="z-float-right z-w60p z-text-left brief">
<table class="z-table z-pd6">
<tr>
<td colspan="2"><div class="sectiontitle">组件中心</div></td>
</tr>
<tr>
<td><i class="z-mg-r5"><img src="/zinc/www/images/one.png"/></i><span class="z-px20">可重用性</span></td>
<td><i class="z-mg-r5"><img src="/zinc/www/images/two.png"/></i><span class="z-px20">组件可扩展性</span></td>
</tr>
<tr>
<td><i class="z-mg-r5"><img src="/zinc/www/images/three.png"/></i><span class="z-px20">组件类型多样化</span></td>
<td><i class="z-mg-r5"><img src="/zinc/www/images/four.png"/></i><span class="z-px20">缩短软件开发周期 提高效率</span></td>
</tr>
<tr class="z-h120">
<td colspan="2"><span class="z-px18 z-lh30">组件是封装了一个或多个实体程序模块的实体。采用类似于搭积木的方法快速的形成新的组件或产品,不仅可以缩短软件项目的开发周期,同时也提高了系统的稳定性。知启蒙现已形成如zhiqim_manager、zhiqim_account等多个组件。</span></td>
</tr>
<tr class="z-h60">
<td colspan="2"><a class="z-lh30" href="https://www.zhiqim.com/gitcan/index.htm">了解更多》</a></td>
</tr>
</table>
</div>
</div>
</div>
<!--关于我们-->
<div data-role="z-screen" class="section" id="fourth">
<div class="fourth">
<div class="z-float-left z-hide z-w40p z-h100p z-text-center"><img src="/zinc/www/images/aboutus.png"> </div>
<div class="z-float-right z-w60p z-text-left brief">
<div class="corporate">关于知启蒙</div>
<div class="z-lh30 z-color-333 z-px18">
<p>湖南知启蒙科技有限公司专业致力于互联网领域,是集互联网平台,技术框架,技术组件等开发服务于一体的网络科技公司,公司凭借多年在互联网等信息领域的沉淀积累,为客户提供了优质的互联网产品及服务。</p>
<p>知启蒙技术平台是由知启蒙团队开发的整合Java & HTML5,前后端于一体的技术体系,其特点为积木式组件模块化和模型模板化。</p>
<p>我们拥有<br>
----安全、轻便的技术框架<br>
----先进、专业的技术支持<br>
----多样、强大的技术组件
</p>
</div>
</div>
</div>
</div>
${zhiqim_com_footer()}