✨ 修改官网ui，新增底部和表单部分

website/css/style.css

@@ -214,6 +214,7 @@ p {
 }
 .mb-3 {
   width: 400px;
+  position: relative;
 }
 .form-control {
   background: rgba(187, 192, 212, 0.1);
@@ -241,6 +242,120 @@ p {
   -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
+.pc-footer {
+  height: 334px;
+  background: #303955;
+}
+.pc-footer-menu {
+  margin-top: 70px;
+  margin-bottom: 46px;
+}
+.pc-footer-menu li {
+  display: inline-block;
+  width: 126px;
+  text-align: center;
+  color: #d9d9d9;
+  line-height: 12px;
+  font-size: 12px;
+  margin: 0 !important;
+}
+.pc-footer-contact li {
+  display: inline-block;
+  width: 66px;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 !important;
+  position: relative;
+  opacity: 1 !important;
+}
+.pc-footer-contact li:hover .qr-code-container {
+  display: block;
+}
+
+.contact-us:hover {
+  color: #50597d;
+}
+.contact-us:hover + .qr-code-container {
+  display: block;
+  right: 0;
+  left: initial;
+  top: 80px;
+}
+.qr-code-container {
+  display: none;
+  position: absolute;
+  width: 260px;
+  height: 268px;
+  background: #ffffff;
+  box-shadow: 0px 0px 9px 0px rgba(187, 192, 212, 0.5);
+  border-radius: 8px;
+  bottom: 70px;
+  left: 0;
+  margin-left: -100px;
+  padding: 13px;
+}
+.qr-code-container .icon-qr-code {
+  width: 100%;
+  height: 100%;
+}
+.bottom-center-arrow {
+  background: #ffffff;
+  /* border: 3px solid #bbc0d480; */
+}
+.bottom-center-arrow:after,
+.bottom-center-arrow:before {
+  top: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  margin-left: -14px;
+}
+.bottom-center-arrow:after {
+  border-color: rgba(136, 183, 213, 0);
+  border-top-color: #ffffff;
+  border-width: 14px;
+}
+.bottom-center-arrow:before {
+  border-color: rgba(194, 225, 245, 0);
+  border-top-color: #bbc0d480;
+  border-width: 14px;
+  margin-left: -14px;
+}
+.bottom-top-arrow {
+  background: #ffffff;
+  border: 1px solid #bbc0d480;
+}
+.bottom-top-arrow:after,
+.bottom-top-arrow:before {
+  bottom: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.bottom-top-arrow:after {
+  border-color: rgba(136, 183, 213, 0);
+  border-bottom-color: #ffffff;
+  border-width: 12px;
+  margin-left: -12px;
+}
+.bottom-top-arrow:before {
+  border-color: rgba(194, 225, 245, 0);
+  border-bottom-color: #bbc0d480;
+  border-width: 14px;
+  margin-left: -14px;
+}
+.pc-footer-contact-info {
+  margin-top: 44px;
+  margin-bottom: 74px;
+}
 .default-outline-btn:hover {
   -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
@@ -1074,6 +1189,9 @@ p {
   -webkit-box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
   box-shadow: 0 10px 16px 0 rgba(0, 51, 204, 0.15);
 }
+.no-shadow {
+  box-shadow: none !important;
+}
 .services-icon span {
   position: relative;
   display: inline-block;

website/index.html

@@ -99,7 +99,7 @@
         <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">
+              <div class="services-icon services-blue-icon services-img no-shadow">
                 <img src="./img/所见即所得.png" />
               </div>
               <span class="box-title">所见即所得</span>
@@ -113,7 +113,7 @@
           <!--// .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">
+              <div class="services-icon services-img no-shadow">
                 <img src="./img/代码可移植.png" />
               </div>
               <span class="box-title">代码可移植</span>
@@ -127,7 +127,7 @@
           <!--// .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">
+              <div class="services-icon services-img no-shadow">
                 <img src="./img/自动云同步.png" />
               </div>
               <span class="box-title">自动云同步</span>
@@ -472,7 +472,10 @@
           </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>
+            <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>
@@ -498,7 +501,7 @@
       <!--// .container //-->
     </section>
     <!--// Footer Section Start //-->
-    <footer class="footer">
+    <footer class="footer pc-hidden">
       <!--// .footer-top //-->
       <div class="copyright">
         <div class="container">
@@ -518,6 +521,74 @@
       <!--// .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=""> 特点</a>
+                </li>
+                <li>
+                    <a href=""> 介绍</a>
+                </li>
+                <li>
+                     <a href=""> 合作</a>
+                </li>
+                <li>
+                      <a href=""> 加入</a>
+                </li>
+                <li>
+                       <a href=""> 反馈</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> - 徐小夕
+                <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" />