💄 更新官网ui新版样式

This commit is contained in:
RalapChen 2021-01-27 00:38:15 +08:00
parent 9a0503946b
commit 92a3088aad
11 changed files with 1470 additions and 1399 deletions

BIN
.DS_Store vendored

Binary file not shown.

File diff suppressed because it is too large Load Diff

BIN
website/img/.DS_Store vendored

Binary file not shown.

BIN
website/img/TOP.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
website/img/business.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 504 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 176 KiB

BIN
website/img/h5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 B

BIN
website/img/menu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 B

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 736 KiB

BIN
website/img/sale.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 474 B

View File

@ -62,7 +62,8 @@
<!--// Header End //-->
<!--// Hero Section Start //-->
<section class="hero-section" data-scroll-index="0">
<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">
@ -72,18 +73,19 @@
<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" data-wow-delay="0.4s">GPL商业授权+私有化部署</a>
<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-right wow fadeInRight" style="overflow:hidden;padding:0;margin-left: 30px">
<img src="./img/face_p.png" alt="Hero image" style="height: 528px; border-radius: 32px">
<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 //-->
</div>
</section>
</section>
<!--// Hero Section End //-->
@ -93,7 +95,7 @@
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="section-heading">
<h2 class="section-title">产品 <span>特点</span></h2>
<h2 class="section-title">产品特点</h2>
<p class="section-sub-title">
通过不断打磨和迭代致力于打造功能更强大操作更便捷的H5营销工具
</p>
@ -108,8 +110,8 @@
<div class="services-icon services-blue-icon">
1
</div>
<span class="box-title">简单方便</span>
<div class="services-body">
<h5>简单方便</h5>
<p>
任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
</p>
@ -122,8 +124,8 @@
<div class="services-icon">
2
</div>
<span class="box-title">插拔式体验</span>
<div class="services-body">
<h5>插拔式体验</h5>
<p>
产品以GPL协议开源可植入任何系统并支持二次开发
</p>
@ -136,8 +138,8 @@
<div class="services-icon">
3
</div>
<span class="box-title">持续迭代,无限可能</span>
<div class="services-body">
<h5>持续迭代,无限可能</h5>
<p>
目前正在持续迭代中,后续可根具需求开发功能更强大的可视化系统.
</p>
@ -160,9 +162,9 @@
<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">
<div class="col-md-4 col-lg-4 wow fadeInUp about-container">
<div class="about-inner">
<span class="section-badge">场景展示</span>
<!-- <span class="section-badge">场景展示</span> -->
<h3>拖拽式生成H5页面</h3>
<p>
通过轻松拖拽的方式来快速生成H5页面元素并提供丰富的页面组件更方便的为使用者搭建更强大的H5落地页
@ -170,12 +172,12 @@
</div>
<div class="about-list">
<ul>
<li><i class="fa fa-check">1</i>产品营销页面</li>
<li><i class="fa fa-check">2</i>企业/个人微官网</li>
<li><i class="fa fa-check">3</i>产品原型/H5活动页面</li>
<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">立即使用
<a href="http://h5.dooring.cn/h5_plus" class="default-btn">免费体验
<i class="ml-2 fa fa-angle-right"></i>
</a>
</div>
@ -186,56 +188,80 @@
<!--// .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>
<h3>自由缩放视图,多模式预览页面</h3>
<!-- <span class="section-badge">场景展示</span> -->
<h2 class="section-title">灵活预览</h2>
<p>
自由拖拽灵活缩放视图支持H5长页面移动端真机预览PC端模拟预览最大限度的降低使用成本
</p>
<ul class="features-list">
<li class="d-flex align-items-center">
<i class="mdi">4</i>
<div class="features-box">
<h6>移动端适配</h6>
<span>适配不同移动端机型,实时可调整,预览无压力</span>
<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>
</li>
<li class="d-flex align-items-center">
<i class="mdi">5</i>
<div class="features-box">
<h6>持续升级</h6>
<span>定期根据用户需求进行系统升级,优化,创造更好的体验</span>
</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>
</li>
<li class="d-flex align-items-center">
<i class="mdi">6</i>
<div class="features-box">
<h6>实时下载</h6>
<span>用户不用担心存储问题可在平台直接下载对应代码或json文件更灵活的使用</span>
</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>
</li>
</ul>
</div>
<!--// .col //-->
</div>
</div>
</div>
<!--// .col //-->
<div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
<!-- <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>
</div> -->
<!--// .col //-->
</div>
<!--// .row //-->
</div>
</div>
<!--// .container //-->
</section>
@ -249,7 +275,7 @@
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-heading">
<h2 class="section-title">问题<span>反馈</span></h2>
<h2 class="section-title">问题反馈</h2>
<p class="section-sub-title">
如果在使用过程中有任何疑问或者需求,可以通过以下方式联系到作者
</p>
@ -285,7 +311,7 @@
<!--// Footer Section Start //-->
<a href="#0" class="scroll-top-btn" data-scroll-goto="0">
🔝
<img src="./img/TOP.png" />
</a>
<!--// Scroll Top //-->
@ -302,7 +328,7 @@
</div>
</div>
<!--// Preloader //-->
</div>
<!--// Page Wrapper End //-->
@ -314,4 +340,4 @@
<script src="./js/main.js"></script>
</body>
</html>
</html>