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()}