官网pc端ui更新初版

This commit is contained in:
RalapChen 2021-02-04 02:02:46 +08:00
parent 3aa8705700
commit b93056aba1
30 changed files with 604 additions and 315 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@ -154,6 +154,41 @@ p {
text-align: left;
font-size: 1.125rem;
}
.pc-section-sub-title {
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9b9b9b;
margin-bottom: 22px;
}
.section-title-ul {
margin: auto;
}
.section-title-ul::after {
clear: both;
content: '';
display: block;
}
.section-title-ul li {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #444a59;
float: left;
position: relative;
margin-right: 60px;
}
.section-title-ul li::before {
content: '·';
position: absolute;
left: -34px;
}
.section-title-ul li.first::before {
content: '';
}
.section-title-ul li.last {
margin-right: 0;
}
.section-badge {
display: inline-block;
margin-bottom: 10px;
@ -165,6 +200,31 @@ p {
-webkit-box-shadow: 0 10px 16px 0 rgba(21, 219, 150, 0.15);
box-shadow: 0 10px 16px 0 rgba(21, 219, 150, 0.15);
}
.section-sub-btn {
margin-top: 60px;
width: 226px;
background: #2f55ec !important;
}
.big-adaptation-img-container {
}
.big-adaptation-img-container img {
}
.gray-btn {
background: #4a547b !important;
}
.mb-3 {
width: 400px;
}
.form-control {
background: rgba(187, 192, 212, 0.1);
border-radius: 8px;
border: 1px solid rgba(187, 192, 212, 0.4);
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9b9b9b;
line-height: 20px;
}
.default-outline-btn {
display: inline-block;
overflow: hidden;
@ -187,6 +247,9 @@ p {
background: #12bd81;
color: #fff !important;
}
.blue-text {
color: #0095ff !important;
}
.blue-btn {
background-color: #0095ff !important;
}
@ -227,7 +290,14 @@ p {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 750px) {
.github {
.github,
.mobile-hidden {
display: none !important;
}
}
@media only screen and (min-width: 750px) {
.pc-hidden {
display: none !important;
}
}
@ -1008,6 +1078,16 @@ p {
position: relative;
display: inline-block;
}
.services-img {
background-color: initial !important;
}
.services-img img {
width: 100%;
height: 100%;
}
.not-line:before {
background-color: initial !important;
}
.box-title {
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;

BIN
website/img/chat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
website/img/chat@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
website/img/github.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
website/img/github@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
website/img/map.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

BIN
website/img/map@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1010 KiB

BIN
website/img/map@3x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
website/img/pad.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 KiB

BIN
website/img/pad@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 763 KiB

BIN
website/img/pc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

BIN
website/img/pc@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 KiB

BIN
website/img/phone 2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 423 KiB

BIN
website/img/phone 2@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
website/img/phone.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 736 KiB

After

Width:  |  Height:  |  Size: 974 KiB

BIN
website/img/qq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
website/img/qq@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
website/img/wechat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
website/img/wechat@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
website/img/zhi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
website/img/zhi@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -2,342 +2,551 @@
<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">
<!--// 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 //-->
<!--// 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-7 col-md-10 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" 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">Github</a>
</div>
<!--// .col //-->
<div class="col-lg-4 text-center wow fadeInRight" style="overflow:hidden;padding:0;padding-top: 47px;">
<img src="./img/face_p.png" alt="Hero image" style="width: 268px; border-radius: 32px">
</div>
<!--// .col //-->
</div>
<!--// .row //-->
<!--// 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-7 col-md-10 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>
</section>
</section>
<!--// Hero Section End //-->
<!--// .col //-->
<div class="col-lg-4 text-center wow fadeInRight" style="overflow:hidden;padding:0;padding-top: 47px;">
<img src="./img/phone@2x.png" alt="Hero image" style="width: 268px; 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">
<div class="services-icon services-blue-icon services-img">
<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">
<div class="services-icon services-img">
<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">
<div class="services-icon services-img">
<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>
<!--// Services Section Start //-->
<section class="services section-padding" data-scroll-index="1" id="services-area">
<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 //-->
<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">拖拽生成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" 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-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>
任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
</p>
</div>
</div>
<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>
<!--// .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">
2
</div>
<span class="box-title">持续升级</span>
<div class="services-body">
<p>
定期根据用户需求进行系统升级,优化,创造更好的体验
</p>
</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 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>
<!--// .col //-->
</div>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// .container //-->
</section>
<!--// Services Section End //-->
<!--// About Section Start //-->
<section class="about section-padding" data-scroll-index="2" 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>
</div>
<!--// .container //-->
</section>
<!--// About Section End //-->
<!--// Features Section Start //-->
<section id="features" class="features-section section-padding" data-scroll-index="3">
<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">
<!--// .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="contact-section section-padding" data-scroll-index="4">
<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">
如果在使用过程中有任何疑问或者需求,可以通过以下方式联系到作者
</p>
<div style="text-align:center;margin-top:20px;width:240px;display:inline-block"><img src="./img/code.png" alt="趣谈前端" style="width:180px"></div>
</div>
</div>
<!--// .col //-->
</div>
</div>
<!--// .container //-->
</section>
<!--// Contact Section End //-->
<!--// Footer Section Start //-->
<footer class="footer">
<!--// .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 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>
<!--// .col //-->
</div>
<!--// .row //-->
</div>
<!--// Preloader //-->
</div>
<!--// .container //-->
</section>
<!--// Features Section Start //-->
<!--// How It Works Section End //-->
<!--// Contact Section Start //-->
<section class="contact-section section-padding" 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">
想了解更多?可以通过以下方式联系到作者
</p>
</div>
</div>
<!--// .col //-->
</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" style="width: 259px;height: 60px;background: #FFFFFF;border-radius: 8px;">联系我们</button>
</div>
</div>
</div>
<!--// .container //-->
</section>
<!--// Contact Section End //-->
<section class="contact-section section-padding pc-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">
如果在使用过程中有任何疑问或者需求,可以通过以下方式联系到作者
</p>
<div style="text-align:center;margin-top:20px;width:240px;display:inline-block"><img src="./img/code.png"
alt="趣谈前端" style="width:180px"></div>
</div>
</div>
<!--// .col //-->
</div>
</div>
<!--// .container //-->
</section>
<!--// Footer Section Start //-->
<footer class="footer">
<!--// .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 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>
<!--// Page Wrapper End //-->
<!--// Preloader //-->
<!--// 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>
</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>