✨ 官网pc端ui更新初版

website/css/style.css

@@ -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;

website/index.html

@@ -31,7 +31,8 @@
             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">
+          <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>
@@ -73,13 +74,17 @@
               <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/h5_plus" target="_blank" class="default-outline-btn wow fadeInUp blue-btn"
-                        <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>
+                data-wow-delay="0.4s">免费体验</a>
-                        <a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" class="default-video-btn github wow fadeInUp">Github</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-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">
+              <img src="./img/phone@2x.png" alt="Hero image" style="width: 268px; border-radius: 32px">
             </div>
             <!--// .col //-->
           </div>
@@ -88,9 +93,59 @@
       </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" data-scroll-index="1" id="services-area">
+    <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">
@@ -152,10 +207,125 @@
       </div>
       <!--// .container //-->
     </section>
-        <!--// Services Section End //-->
+
+    <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" data-scroll-index="2" id="about">
+    <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">
@@ -173,8 +343,10 @@
             <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/business.png"
-                                <li><i class="fa fa-check"><img src="./img/h5.png" style="width: 11px;height: 16px;"/></i>产品原型/H5活动页面</li>
+                      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">免费体验
@@ -189,7 +361,7 @@
     </section>
     <!--// About Section End //-->
     <!--// Features Section Start //-->
-        <section id="features" class="features-section section-padding" data-scroll-index="3">
+    <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">
@@ -270,7 +442,44 @@
     <!--// How It Works Section End //-->
 
     <!--// Contact Section Start //-->
-        <section class="contact-section section-padding" data-scroll-index="4">
+
+    <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">
@@ -279,7 +488,8 @@
               <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 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 //-->
@@ -287,8 +497,6 @@
       </div>
       <!--// .container //-->
     </section>
-        <!--// Contact Section End //-->
-
     <!--// Footer Section Start //-->
     <footer class="footer">
       <!--// .footer-top //-->
@@ -298,7 +506,8 @@
             <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>
+                <a style="margin-left:20px" href="https://beian.miit.gov.cn/#/Integrated/index"
+                  target="_blank">鄂ICP备18024675号-3</a>
               </p>
             </div>
           </div>