h5-Dooring/website/index.html
2021-06-01 23:04:59 +08:00

713 lines
29 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--// Meta Tags //-->
<meta charset="UTF-8">
<link href="http://dooring.cn/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dooring是一款功能强大专业可靠的H5可视化页面配置解决方案致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">
<meta name="keywords" content="H5编辑器,表单设计,可视化,代码编辑器,H5,HTML5,javascript,react,nodejs,前端开发,github,开源">
<meta name="author" content="徐小夕">
<!-- <meta name="robots" content="noindex, nofollow"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="sogou_site_verification" content="fvU1Vcgpcc" />
<meta name="baidu-site-verification" content="code-UskzpXvPYv" />
<title>H5数据可视化搭建平台</title>
<!--// FrameWorks //-->
<link rel="stylesheet" href="./css/frameworks.css">
<!--// Theme Main Js //-->
<link rel="stylesheet" href="./css/style.css">
</head>
<body data-spy="scroll" data-target="#fixedNavbar" data-offset="0">
<!--// Page Wrapper Start //-->
<div class="page-wrapper" id="home">
<!-- Header Start -->
<header class="header">
<div class="container">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/">
H5-Dooring
</a>
<!--// .logo //-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#fixedNavbar"
aria-controls="fixedNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="togler-icon-inner">
<span class="line-1"></span>
<span class="line-2"></span>
<span class="line-3"></span>
</span>
</button>
<div class="collapse navbar-collapse main-menu justify-content-end" id="fixedNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#" data-scroll-nav="0">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="1">特点</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="2">介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-scroll-nav="4">问题反馈</a>
</li>
</ul>
</div>
</nav>
<!--// .navbar-nav //-->
</div>
<!--// .container //-->
</header>
<!--// Header End //-->
<!--// Hero Section Start //-->
<section class="first-section" data-scroll-index="0">
<section class="hero-section" data-scroll-index="0">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-6 col-md-8 col-sm-12">
<h1 class="hero-section-title wow fadeInUp" data-wow-delay="0.2s">
让H5制作更方便
</h1>
<p class="hero-section-subtitle wow fadeInUp" data-wow-delay="0.3s">
H5-Dooring是一款功能强大高可扩展的H5可视化页面配置解决方案致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
</p>
<a href="http://h5.dooring.cn/h5_plus" target="_blank" class="default-outline-btn wow fadeInUp blue-btn"
data-wow-delay="0.4s">免费体验</a>
<a href="http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg" style="margin-left: 10px"
target="_blank" class="default-outline-btn wow fadeInUp blue-btn"
data-wow-delay="0.4s">GPL商业授权+私有化部署</a>
<a href="https://github.com/MrXujiang/h5-Dooring" target="_blank"
class="default-video-btn github wow fadeInUp blue-text">在线文档</a>
</div>
<!--// .col //-->
<div class="col-lg-6 text-center wow fadeInRight" style="overflow:hidden;padding:0;padding-top: 47px;">
<img src="./img/phone@2x.png" alt="Hero image" style="width: 542px; border-radius: 32px">
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
</section>
</section>
<!--// Hero Section End //-->
<section class="services section-padding mobile-hidden" data-scroll-index="1">
<div class="container">
<!--// .row //-->
<div class="row align-items-center justify-content-center ">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
<div class="services-item item-shadow" style="box-shadow: none;">
<div class="services-icon services-blue-icon services-img no-shadow">
<img src="./img/所见即所得.png" />
</div>
<span class="box-title">所见即所得</span>
<div class="services-body">
<p>
无需编程简单拖拽可视化模板或组件即可生成精美H5页面
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow" style="box-shadow: none;">
<div class="services-icon services-img no-shadow">
<img src="./img/代码可移植.png" />
</div>
<span class="box-title">代码可移植</span>
<div class="services-body">
<p>
平台生成的H5前端代码可植入任何系统且支持二次开发
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow" style="box-shadow: none;">
<div class="services-icon services-img no-shadow">
<img src="./img/自动云同步.png" />
</div>
<span class="box-title">自动云同步</span>
<div class="services-body">
<p>
在线制作H5登录账号同步保存无需下载客户端.
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<!--// Services Section Start //-->
<section class="services section-padding pc-hidden" data-scroll-index="2">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="section-heading">
<h2 class="section-title">产品特点</h2>
<p class="section-sub-title">
通过不断打磨和迭代致力于打造功能更强大操作更便捷的H5营销工具
</p>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
<div class="services-item item-shadow">
<div class="services-icon services-blue-icon">
1
</div>
<span class="box-title">简单方便</span>
<div class="services-body">
<p>
任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
2
</div>
<span class="box-title">插拔式体验</span>
<div class="services-body">
<p>
产品以GPL协议开源可植入任何系统并支持二次开发
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
3
</div>
<span class="box-title">持续迭代,无限可能</span>
<div class="services-body">
<p>
目前正在持续迭代中,后续可根具需求开发功能更强大的可视化系统.
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<section class="services section-padding mobile-hidden bg-wave" data-scroll-index="3">
<div class="container" style="position:relative; z-index: 3;">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title not-line">拖拽生成H5页面</h2>
<p class="section-sub-title pc-section-sub-title text-center ">
提供丰富的页面组件更方便的为使用者搭建更强大的H5落地页
</p>
<ul class="section-title-ul">
<li class="first">产品营销页面</li>
<li>企业/个人微官网</li>
<li>产品原型</li>
<li class="last">H5活动页面</li>
</ul>
<a href="http://h5.dooring.cn/h5_plus" target="_blank"
class="default-outline-btn wow fadeInUp section-sub-btn" data-wow-delay="0.4s">开始使用</a>
</div>
</div>
<img src="./img/pc.png" class="" />
<!--// .col //-->
</div>
<!--// .row //-->
<div class="row align-items-center justify-content-center pc-hidden">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
<div class="services-item item-shadow">
<div class="services-icon services-blue-icon">
1
</div>
<span class="box-title">简单方便</span>
<div class="services-body">
<p>
任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
2
</div>
<span class="box-title">插拔式体验</span>
<div class="services-body">
<p>
产品以GPL协议开源可植入任何系统并支持二次开发
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
3
</div>
<span class="box-title">持续迭代,无限可能</span>
<div class="services-body">
<p>
目前正在持续迭代中,后续可根具需求开发功能更强大的可视化系统.
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<section class="services section-padding mobile-hidden" data-scroll-index="3">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title not-line">模板灵活配置</h2>
<p class="section-sub-title pc-section-sub-title text-center ">
创建模板,一键复用,多种组件,灵活配置
</p>
<a href="http://h5.dooring.cn/h5_plus" target="_blank"
class="default-outline-btn wow fadeInUp section-sub-btn gray-btn" data-wow-delay="0.4s">立即注册</a>
</div>
</div>
<img src="./img/phone 2.png" />
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<section class="services section-padding mobile-hidden bg-circle" data-scroll-index="3">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title not-line">一次创建多端适配</h2>
<p class="section-sub-title pc-section-sub-title text-center ">
自动适配多个客户端,无需重复配置相同页面,省时更省心
</p>
</div>
</div>
<div class="big-adaptation-img-container">
<img class="col-lg-8 offset-2" src="./img/pad@2x.png" />
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<!--// About Section Start //-->
<section class="about section-padding pc-hidden" data-scroll-index="3" id="about">
<div class="container">
<div class="row align-items-center">
<div class="col-md-8 col-lg-8 wow fadeInLeft text-left">
<img src="./img/f1.png" alt="About image" class="img-fluid img-jump">
</div>
<!--// .col //-->
<div class="col-md-4 col-lg-4 wow fadeInUp about-container">
<div class="about-inner">
<!-- <span class="section-badge">场景展示</span> -->
<h3>拖拽式生成H5页面</h3>
<p>
通过轻松拖拽的方式来快速生成H5页面元素并提供丰富的页面组件更方便的为使用者搭建更强大的H5落地页
</p>
</div>
<div class="about-list">
<ul>
<li><i class="fa fa-check"><img src="./img/sale.png" style="width: 12px;height: 14px;" /></i>产品营销页面</li>
<li><i class="fa fa-check"><img src="./img/business.png"
style="width: 16px;height: 14px;" /></i>企业/个人微官网</li>
<li><i class="fa fa-check"><img src="./img/h5.png" style="width: 11px;height: 16px;" /></i>产品原型/H5活动页面
</li>
</ul>
</div>
<a href="http://h5.dooring.cn/h5_plus" class="default-btn">免费体验
<i class="ml-2 fa fa-angle-right"></i>
</a>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<!--// About Section End //-->
<!--// Features Section Start //-->
<section id="features" class="features-section section-padding pc-hidden" data-scroll-index="4">
<div class="container">
<div class="features-row">
<div class="col-md-8 col-lg-8 wow fadeInLeft text-center preview-container">
<img src="./img/phone@2x.png" alt="About image" class="img-fluid img-jump">
</div>
<div class="row align-items-center justify-content-between">
<div class="col-md-7 col-lg-6 wow fadeInLeft">
<div class="features-inner">
<!-- <span class="section-badge">场景展示</span> -->
<h2 class="section-title">灵活预览</h2>
<p>
自由拖拽灵活缩放视图支持H5长页面移动端真机预览PC端模拟预览最大限度的降低使用成本
</p>
<div class="row align-items-center justify-content-center">
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
<div class="services-item item-shadow">
<div class="services-icon services-blue-icon">
1
</div>
<span class="box-title">移动端适配</span>
<div class="services-body">
<p>
适配不同移动端机型,实时可调整,预览无压力
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
2
</div>
<span class="box-title">持续升级</span>
<div class="services-body">
<p>
定期根据用户需求进行系统升级,优化,创造更好的体验
</p>
</div>
</div>
</div>
<!--// .col //-->
<div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
<div class="services-item item-shadow">
<div class="services-icon">
3
</div>
<span class="box-title">实时下载</span>
<div class="services-body">
<p>
用户不用担心存储问题可在平台直接下载对应代码或json文件更灵活的使用.
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
</div>
</div>
<!--// .col //-->
<!-- <div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
<div class="features-circle"></div>
<div class="feature-image-wrap wow zoomIn" data-wow-delay="0.8s">
<img src="./img/f2.png" alt="About image" class="img-fluid img-jump">
</div>
</div> -->
<!--// .col //-->
</div>
<!--// .row //-->
</div>
</div>
<!--// .container //-->
</section>
<!--// Features Section Start //-->
<!--// How It Works Section End //-->
<!--// Contact Section Start //-->
<section class="services section-padding mobile-hidden" data-scroll-index="3">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title not-line">优秀案例精彩纷呈</h2>
<p class="section-sub-title pc-section-sub-title text-center ">
优秀案例,一键保存,多次复用,秒出精彩
</p>
<a href="http://h5.dooring.cn/h5_plus" target="_blank"
class="default-outline-btn wow fadeInUp section-sub-btn gray-btn" data-wow-delay="0.4s">复用案例</a>
</div>
</div>
<div class="big-adaptation-img-container">
<img class="col-lg-3" src="./img/Bitmap1.png" />
<img class="col-lg-3 offset-1" src="./img/Bitmap2.png" />
<img class="col-lg-3 offset-1" src="./img/Bitmap3.png" />
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<section class="services section-padding mobile-hidden" data-scroll-index="3">
<div class="container">
<div class="row justify-content-center">
<div class="row">
<div class="col-lg-12">
<div class="section-heading">
<h2 class="section-title not-line">选择Dooring编程更省心</h2>
<p class="section-sub-title pc-section-sub-title text-center ">
800+用户选择使用 Dooring 让编程更高效
</p>
</div>
</div>
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<div class="bg-circle">
<div class="merchant-img-container row gx-5">
<div class="col-lg-2 merchant-list"><div class="merchant-item"><img src="./img/logo3.svg" /></div></div>
<div class="col-lg-2 merchant-list"><div class="merchant-item"><img src="./img/101.jpg" /></div></div>
<div class="col-lg-2 merchant-list"><div class="merchant-item"><img src="./img/digital.jpg" /></div></div>
<div class="col-lg-2 merchant-list"><div class="merchant-item"><img src="./img/siwjie.jpg" /></div></div>
</div>
<div class="big-adaptation-img-container row gx-5">
</div>
</div>
<!--// .container //-->
</section>
<section class="contact-section section-padding mobile-hidden" data-scroll-index="5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title">联系我们</h2>
<p class="section-sub-title text-center">
想了解更多?可以通过以下方式联系到作者
</p>
</div>
</div>
<!--// .col //-->
</div>
</div>
<div class="team-container">
<div class="team-box">
<div class="team-card">
<img src="./img/徐小夕.jpg" alt="">
<div class="team-info">
<p>产品/技术/运营</p>
<span>徐小夕</span>
</div>
</div>
<div class="team-card">
<img src="./img/大风吹.jpg" alt="">
<div class="team-info">
<p>产品</p>
<span>大风吹</span>
</div>
</div>
<div class="team-card">
<img src="./img/背完单词看视频.jpg" alt="">
<div class="team-info">
<p>技术</p>
<span>背完单词看视频</span>
</div>
</div>
<div class="team-card">
<img src="./img/ralap.jpg" alt="">
<div class="team-info">
<p>技术</p>
<span>Ralap_C</span>
</div>
</div>
</div>
<div class="team-box">
<div class="team-card">
<img src="./img/朝霞.jpg" alt="">
<div class="team-info">
<p>技术</p>
<span>朝霞</span>
</div>
</div>
<div class="team-card">
<img src="./img/47.jpg" alt="">
<div class="team-info">
<p>设计师</p>
<span>47</span>
</div>
</div>
<div class="team-card">
<img src="./img/黎光.jpg" alt="">
<div class="team-info">
<p>运营</p>
<span>黎光</span>
</div>
</div>
</div>
</div>
<div class="row align-items-center justify-content-center">
<div class="col-lg-8">
<img src="./img/map@2x.png" alt="趣谈前端" style="width:100%">
</div>
<div class="col-lg-4">
<div class="mb-3" style="margin-top: -266px;">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="邮箱/手机号">
</div>
<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="8" placeholder="说点什么吧…"></textarea>
</div>
<div class="mb-3">
<button type="button" class="btn btn-secondary btn-lg" style="width: 123px;height: 60px;background: #4A547B;margin-right: 12px;">发送</button>
<button type="button" class="btn btn-outline-secondary btn-lg contact-us" style="width: 259px;height: 60px;background: #FFFFFF;border-radius: 8px;">联系我们</button>
<div class="qr-code-container bottom-top-arrow">
<img class="icon-qr-code" src="./img/qtqd_code.png"/>
</div>
</div>
</div>
</div>
<!--// .container //-->
</section>
<!--// Footer Section Start //-->
<footer class="footer pc-hidden">
<!--// .footer-top //-->
<div class="copyright">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-9">
<p class="text-center">
© Copyright <span id="fullYearCopyright"></span> - 徐小夕
<a style="margin-left:20px" href="https://beian.miit.gov.cn/#/Integrated/index"
target="_blank">鄂ICP备18024675号-3</a>
</p>
</div>
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</div>
<!--// .copyright //-->
</footer>
<footer class="footer pc-footer mobile-hidden">
<!--// .footer-top //-->
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-9">
<ul class="pc-footer-menu text-center">
<li>
<a href="/"> 主页</a>
</li>
<li>
<a href="http://h5.dooring.cn/doc" target="_blank"> 介绍</a>
</li>
<li>
<a href="http://h5.dooring.cn/h5?tid=FB593DD0" target="_blank"> 合作</a>
</li>
<li>
<a href="http://h5.dooring.cn/h5?tid=A71EE8BB" target="_blank"> 反馈</a>
</li>
</ul>
<ul class="pc-footer-contact text-center">
<li>
<img class="icon-contact" src="./img/wechat.png"/>
<div class="qr-code-container bottom-center-arrow">
<img class="icon-qr-code" src="./img/qtqd_code.png"/>
</div>
</li>
<!-- <li>
<img class="icon-contact" src="./img/qq.png"/>
<div class="qr-code-container bottom-center-arrow">
<img class="icon-qr-code" src="./img/wechat.png"/>
</div>
</li> -->
<li>
<a href="https://www.zhihu.com/people/build800">
<img class="icon-contact" src="./img/zhi.png"/>
</a>
<!-- <div class="qr-code-container bottom-center-arrow">
<img class="icon-qr-code" src="./img/wechat.png"/>
</div> -->
</li>
<li>
<a href="https://github.com/MrXujiang/h5-Dooring"><img class="icon-contact" src="./img/github.png"/></a>
<!-- <div class="qr-code-container bottom-center-arrow">
<img class="icon-qr-code" src="./img/wechat.png"/>
</div> -->
</li>
</ul>
<p class="text-center pc-footer-contact-info">
© Copyright <span id="fullYearCopyright"></span> - H5-Dooring
<a style="margin-left:20px" href="https://beian.miit.gov.cn/#/Integrated/index"
target="_blank">鄂ICP备18024675号-3</a>
</p>
</div>
</div>
<!--// .row //-->
</div>
<!--// .container //-->
<!--// .copyright //-->
</footer>
<!--// Footer Section Start //-->
<a href="#0" class="scroll-top-btn" data-scroll-goto="0">
<img src="./img/TOP.png" />
</a>
<!--// Scroll Top //-->
<div class="preloader-wrap">
<div class="preloader-inner">
<div class="sk-circle"></div>
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</div>
<!--// Preloader //-->
</div>
<!--// Page Wrapper End //-->
<!--// jQuery v3.4.1 //-->
<script src="./js/jquery.js"></script>
<!--// Plugins Js //-->
<script src="./js/plugins.js"></script>
<!--// Main Js //-->
<script src="./js/main.js"></script>
</body>
</html>