修改前端样式，使用rem去适配移动端

microserviceUserH5/static/css/experience.css

@@ -1,8 +1,20 @@
-html {
-    font-size: 62.5%;
-    color: #222;
+@media screen and (max-width: 750px) {
+    html {
+        font-size: calc(100vw / 7.5);
+    }
+    .free-code-con .bottom-img{
+        width: 100%;
+        max-height: 100vh;
+    }
+}
+@media screen and (min-width: 750px) {
+    html {
+        font-size: calc(600px / 7.5);
+    }
+    .free-code-con .bottom-img{
+        width: 100%;
+    }
 }
-
 ::selection {
     background-color: #b3d4fc;
     text-shadow: none;
@@ -19,155 +31,56 @@ html {
 }
 
 body {
-    font-size: 1.2rem;
-    line-height: 1.5;
     background-color: #ffffff;
 }
 
-a {
-    color: #666;
-    text-decoration: none;
-}
-
-a:hover, a:active {
-    color: #0ae;
-    text-decoration: underline;
+.free-code-con {
+    background-color: #169AF2;
+    width: 7.5rem;
+    min-height: 100vh;
+    margin: 0 auto;
 }
 
 button:focus, input:focus{
     outline: 0;
 }
-header {
-    width: 100%;
-}
-
-
-header .top {
-
-}
-
-header .top .bottom-img{
-    width: 100%;
-}
-
-@media only screen and (max-width: 450px) {
-    header .top-font {
-        color: #CB0907;
-        position: absolute;
-        top: 22%;
-        left: 35%;
-    }
-
-    header .top-font .top-font-m {
-        font-size: 6rem
-    }
-
-    header .top-font .top-font-s {
-        font-size: 1rem
-    }
-}
-@media only screen and (min-width: 640px) {
-    body {
-        background-color: #ffffff;
-    }
-    .free-code-con {
-        width: 620px;margin: 0 auto;background-color: #ffffff;
-    }
-    header .top .center-pic{
-        margin-left: 8%;
-        width: 84%;
-        position: absolute;
-        bottom: 25%;
-    }
-    header .top .center-pic .recv-cont {
-        width: 100%;
-        top: -74%;
-    }
-}
-@media only screen and (min-width: 350px) and (max-width: 400px) {
-    header .top .center-pic .recv-cont{
-        top: -73%!important;
-    }
-}
-@media only screen and (max-width: 640px) {
-    .recv-btn .btn-bg-style {
-        top: 93%!important;
-    }
-    .tip-suc-con {
-        margin-left: 15%;
-    }
-    body {
-        background-color: #ffffff;
-    }
-    header .top .center-pic{
-        margin-left: 2.5%;
-        width: 95%;
-        position: absolute;
-        bottom: 25%;
-    }
-    header .top .center-pic .recv-cont {
-        width: 93%;
-        left: 3%;
-        top: -70%;
-    }
-}
 
-header .top .center-pic .recv-cont {
-    border-radius: 3rem;
+.top .center-pic {
     position: absolute;
+    bottom: 0.92rem;
 }
 
-@media only screen and (min-width: 700px) {
-    header .top .center-pic .recv-cont{
-        margin-bottom: 2rem;
-    }
-}
-
-@media only screen and (min-width: 480px) and (max-width: 700px){
-    header .top .center-pic .recv-cont{
-        margin-bottom: 1rem;
-    }
-}
-
-@media only screen and (max-width: 480px) {
-    header .top .center-pic .recv-cont{
-        margin-bottom: 1rem;
-    }
-}
-
-header .top .center-pic .recv-cont .recv-ipt{
-    margin-top: 3rem;
-    width: 97%;
-    margin-left: 2%;
-    padding-left: 15%;
-    border-radius: 7rem;
+.top .center-pic .recv-cont .recv-ipt{
+    width: 6.7rem;
+    height: 1rem;
+    margin-left: 0.4rem;
+    padding-left: 0.4rem;
+    border-radius: 0.5rem;
+    font-size: 0.3rem;
     color: #333333;
     background-color: white;
     border: none;
 }
-header .top .center-pic .recv-cont .recv-btn {
+.top .center-pic .recv-cont .recv-btn {
     color: #FFFFFF;
-    letter-spacing: 2px;
+    letter-spacing: 0.04rem;
+    line-height: 1.21rem;
+    font-size: 0.36rem;
     font-weight: 500;
-    border-radius:50px;
+    margin-left: 0.31rem;
+    margin-top: 0.33rem;
+    border-radius: 0.5rem;
     text-align: center;
-    position: relative;
-    width: 100%;
-    margin: 7% 0 0 0;
+    width: 6.88rem;
+    height: 1.21rem;
+    background: url(../img/experienceBtn.png) no-repeat;
+    background-size: 100% 100%;
 }
-.recv-btn .btn-bg-style{
+
+.top .center-pic .recv-cont .recv-btn img {
+    width: 0.25rem;
+    height: 0.25rem;
     position: absolute;
-    left: 50%;
-    top: 82%;
-    transform: translate(-50%, -50%);
-    width: fit-content;
-}
-.recv-btn .btn-bg-style img{
-    width: 8%;
-    vertical-align: text-top;
-    margin-left: -10px;
-    margin-top: -5px;
-}
-.coupons-item {
-    color: #FFFFFF;font-size: 18px;text-align: center;display: inline-block;width: 32%;margin: 7px 0;
+    top: -0.12rem;
+    right: -0.2rem;
 }

microserviceUserH5/static/css/invite.css

@@ -1,4 +1,21 @@
 
+@media screen and (max-width: 750px) {
+  html {
+      font-size: calc(100vw / 7.5);
+  }
+  .free-code-con .bottom-img{
+      width: 100%;
+      max-height: 100vh;
+  }
+}
+@media screen and (min-width: 750px) {
+  html {
+      font-size: calc(600px / 7.5);
+  }
+  .free-code-con .bottom-img{
+      width: 100%;
+  }
+}
 html, body, div, ul, li, p {
   padding: 0;
   margin: 0;

microserviceUserH5/vcloud/invite.html

@@ -57,21 +57,6 @@
     <input type="text" style="opacity: 0;z-index: -10;position: fixed;" id="passwordCopy" value="">
     <input type="text" style="opacity: 0;z-index: -10;position: fixed;" id="inviteCopy" value="">
     <script>
-        window.onload = window.onresize = function () {
-            verticalAlign()
-        }
-
-        function verticalAlign() {
-            var html = document.documentElement;
-            var BodyWidth = html.getBoundingClientRect().width;
-            if (BodyWidth > 750) {
-                html.style.fontSize = 750 / 7.5 + 'px';
-            } else {
-                html.style.fontSize = BodyWidth / 7.5 + 'px';
-            }
-        }
-    </script>
-    <script>
         toastr.options.positionClass = 'toast-center-center';
         toastr.options.timeOut = '3000';
     </script>

microserviceUserH5/vcloud/register.html

@@ -15,95 +15,32 @@
     <script src="../static/js/vender/toastr/toastr.min.js"></script>
     <script src="../static/js/vender/config.js"></script>
     <script>
-        window.onload = window.onresize = function () {
-            verticalAlign()
-        }
-
-        function verticalAlign() {
-            // alert($('body').css('font-size'));
-            var logo_w = $('body').width();
-            var logo_t = $('#bottom_img').height() * 0.05;
-            if (logo_w <= 640) {
-                $('#logo').css('top', '50px');
-                $('#logo').width('25%');
-            } else {
-                $('#logo').css('top', logo_t);
-                $('#logo').width(logo_w * 0.1178);
-            }
-
-            var ipt_w = $('#recv_ipt').width();
-            var ipt_h = ipt_w * 0.18;
-            var font_sz = ipt_w * 0.06 + 'px';
-            $('#recv_ipt').height(ipt_h);
-            $('#recv_ipt').css('font-size', font_sz);
-            $('#recv_btn').css('font-size', font_sz);
-            $('#recv_btn2').css('font-size', font_sz);
-            // $('#recv_ipt').css('line-height', ipt_h);
-            $('#icon').height(ipt_h);
-            var icon_w = $('#recv_cont').width() * 0.053333
-            $('#icon').width(icon_w);
-            var icon_t = 'calc(' + ipt_h / 6 + 'px' + ' + 3rem)';
-            $('#icon').css('top', icon_t);
-            $('#recv_btn').css('padding', ipt_w * 0.01 + 'px');
-            $('#recv_btn2').css('padding', ipt_w * 0.01 + 'px');
-            var btn_h = $('#recv_ipt').height() - ipt_w * 0.01 - 15;
-            $('#recv_btn').height(btn_h);
-            $('#recv_btn').css('line-height', btn_h + 'px');
-            $('#recv_btn2').height(btn_h);
-        }
-    </script>
-    <script>
         toastr.options.positionClass = 'toast-center-center';
     </script>
 </head>
 
 <body>
+    <div class="top free-code-con" style="position:relative;">
+        <div>
+            <img src="../static/img/experienceBg1.png" alt="" class="bottom-img">
+        </div>
 
-    <header>
-        <div class="top free-code-con" style="position:relative;">
-            <div>
-                <div>
-                    <picture>
-                        <source media="(max-width: 640px)" srcset="../static/img/experienceBg1.png 640w" />
-                        <source media="(min-width: 640px)" srcset="../static/img/experienceBg2.png 1366w" />
-                        <img src="../static/img/experienceBg1.png" alt="" class="bottom-img" id="bottom_img">
-                    </picture>
+        <div class="center-pic">
+            <div class="recv-cont" id="recv_cont">
+                <div style="position: relative;">
+                    <input type="tel" class="recv-ipt" id="recv_ipt" placeholder="请输入手机号码">
                 </div>
-
-                <div class="center-pic">
-                    <div class="recv-cont" id="recv_cont">
-                        <div style="padding: 0 8%">
-                            <div style="position: relative;">
-                                <input type="tel" class="recv-ipt" id="recv_ipt" placeholder="请输入手机号码">
-                            </div>
-                            <div onclick="handleClick()" style="position: relative">
-                                <div class="recv-btn" id="recv_btn">
-                                    <img src="../static/img/experienceBtn.png" alt="" style="width: 100%">
-                                    <span class="btn-bg-style">
-                                        <span>领取体验时长并下载</span>
-                                        <img src="../static/img/xing_icon.png" alt="">
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
+                <div onclick="handleClick()" style="position: relative">
+                    <div class="recv-btn" id="recv_btn">
+                        <span style="position: relative;">
+                            领取体验时长并下载
+                            <img src="../static/img/xing_icon.png" alt="">
+                        </span>
                     </div>
                 </div>
             </div>
-
-        </div>
-        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
-            aria-hidden="true">
-            <div class="modal-dialog tip-suc-con">
-                <div class="modal-content">
-                    <div class="tip-suc-title">领取成功</div>
-                    <!--<div class="modal-body tip-suc-context">
-                    激活码将以短信的形式发送至领取手机号，请留意短信。
-                </div>
-                <button type="button" class="btn btn-default tip-suc-btn" data-dismiss="modal">知道了</button>-->
-                </div>
-            </div>
         </div>
-    </header>
+    </div>
     <script type="text/javascript" th:inline="javascript">
         var parameters = GetRequest();
         var phone = parameters["phone"];