适配刘海屏

dist/css/app.c98792cc.css → dist/css/app.f63499c3.css

-*{margin:0;padding:0}#app{max-width:750px;min-height:100vh;margin:0 auto;background-color:#fff}.menu{height:60px}.menu .inner{position:fixed;left:0;top:0;right:0;min-width:70px;max-width:750px;height:60px;margin:0 auto;padding:0 30px;z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;background-color:#fff}.menu.is-show .menu-list{display:block}.menu.is-show .menu-icon{width:18px;height:20px;-webkit-box-orient:inherit;-webkit-box-direction:inherit;-ms-flex-direction:inherit;flex-direction:inherit}.menu.is-show .menu-icon span{width:2px;height:18px}.menu-icon{width:20px;height:18px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.menu-icon span{width:20px;height:2px;background:#333}.menu-list{position:absolute;top:20px;right:25px;display:none;margin-top:30px;width:180px;background:#fff;-webkit-box-shadow:0 2px 20px 0 rgba(0,0,0,.2);box-shadow:0 2px 20px 0 rgba(0,0,0,.2)}.menu-list li{height:60px;line-height:60px;color:#333;text-align:center;border-top:1px solid #f5f5f5;cursor:pointer}.menu-list li:first-child{border:0}.menu-list:before{position:absolute;top:-6px;right:8px;content:" ";display:block;width:0;height:0;border-color:transparent;border-style:solid;border-width:6px;border-top-width:0;border-bottom-color:#fff}html *{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h5,h6{font-size:100%}li,ol,ul{list-style:none}em,i{font-style:normal}b,strong{font-weight:400}img{border:none}img,input{vertical-align:middle}a{color:inherit;text-decoration:none}button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;border:0;border-radius:0}textarea:focus{outline:0}html{font-size:100px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:14px;line-height:1.4;color:#333;font-family:-apple-system-font,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background-color:#f4f4f4}.fixed-box{height:70px;padding:15px 0}.fixed-inner{position:fixed;left:0;right:0;bottom:0;padding:15px 30px;max-width:750px;margin:0 auto;background:#fff;-webkit-box-shadow:0 -4px 8px 0 rgba(0,0,0,.05);box-shadow:0 -4px 8px 0 rgba(0,0,0,.05)}.fixed-button{height:40px;line-height:40px;text-align:center;color:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#ff9b96),to(#ce3e3a));background:linear-gradient(180deg,#ff9b96,#ce3e3a);border-radius:5px;cursor:pointer}.empty{margin-top:100px;padding-top:140px;font-size:15px;color:#333;background:url(../img/icon_warning.e6a61b90.png) no-repeat top;background-size:93px 93px;text-align:center}.form-tips{padding:0 30px 10px;font-size:12px;color:#999}.form{padding:0 14px 30px}.form .van-cell{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.form input.van-field__control,.form textarea.van-field__control{height:40px;padding:0 20px;border:1px solid #999}.form .van-field__label{margin-bottom:10px}.form .van-field--error .van-field__control::-webkit-input-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control::-moz-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control:-ms-input-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control::-ms-input-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control,.form .van-field--error .van-field__control::placeholder{color:#999;-webkit-text-fill-color:currentColor}
+*{margin:0;padding:0}#app{max-width:750px;min-height:100vh;margin:0 auto;background-color:#fff}.menu{height:60px}.menu .inner{position:fixed;left:0;top:0;right:0;min-width:70px;max-width:750px;height:60px;margin:0 auto;padding:0 30px;z-index:100;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;background-color:#fff}.menu.is-show .menu-list{display:block}.menu.is-show .menu-icon{width:18px;height:20px;-webkit-box-orient:inherit;-webkit-box-direction:inherit;-ms-flex-direction:inherit;flex-direction:inherit}.menu.is-show .menu-icon span{width:2px;height:18px}.menu-icon{width:20px;height:18px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.menu-icon span{width:20px;height:2px;background:#333}.menu-list{position:absolute;top:20px;right:25px;display:none;margin-top:30px;width:180px;background:#fff;-webkit-box-shadow:0 2px 20px 0 rgba(0,0,0,.2);box-shadow:0 2px 20px 0 rgba(0,0,0,.2)}.menu-list li{height:60px;line-height:60px;color:#333;text-align:center;border-top:1px solid #f5f5f5;cursor:pointer}.menu-list li:first-child{border:0}.menu-list:before{position:absolute;top:-6px;right:8px;content:" ";display:block;width:0;height:0;border-color:transparent;border-style:solid;border-width:6px;border-top-width:0;border-bottom-color:#fff}html *{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}h1,h2,h3,h4,h5,h6{font-size:100%}li,ol,ul{list-style:none}em,i{font-style:normal}b,strong{font-weight:400}img{border:none}img,input{vertical-align:middle}a{color:inherit;text-decoration:none}button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;border:0;border-radius:0}textarea:focus{outline:0}html{font-size:100px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:14px;line-height:1.4;color:#333;font-family:-apple-system-font,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background-color:#f4f4f4}.fixed-box{height:70px;padding:15px 0}.fixed-inner{position:fixed;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom);max-width:750px;margin:0 auto;background:#fff;-webkit-box-shadow:0 -4px 8px 0 rgba(0,0,0,.05);box-shadow:0 -4px 8px 0 rgba(0,0,0,.05)}.fixed-button{margin:15px 30px;height:40px;line-height:40px;text-align:center;color:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#ff9b96),to(#ce3e3a));background:linear-gradient(180deg,#ff9b96,#ce3e3a);border-radius:5px;cursor:pointer}.empty{margin-top:100px;padding-top:140px;font-size:15px;color:#333;background:url(../img/icon_warning.e6a61b90.png) no-repeat top;background-size:93px 93px;text-align:center}.form-tips{padding:0 30px 10px;font-size:12px;color:#999}.form{padding:0 14px 30px}.form .van-cell{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.form input.van-field__control,.form textarea.van-field__control{height:40px;padding:0 20px;border:1px solid #999}.form .van-field__label{margin-bottom:10px}.form .van-field--error .van-field__control::-webkit-input-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control::-moz-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control:-ms-input-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control::-ms-input-placeholder{color:#999;-webkit-text-fill-color:currentColor}.form .van-field--error .van-field__control,.form .van-field--error .van-field__control::placeholder{color:#999;-webkit-text-fill-color:currentColor}.line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#app,.van-popup--bottom{padding-bottom:env(safe-area-inset-bottom)}
\ No newline at end of file

dist/index.html

@@ -12,4 +12,4 @@
         }
         resizeRoot()
         win.addEventListener('resize', resizeRoot, false)
-      })(window, document)</script><link href=/css/chunk-22619477.43b9e0bf.css rel=prefetch><link href=/css/chunk-25109fd7.15f611d8.css rel=prefetch><link href=/css/chunk-77d429bd.6e8b52de.css rel=prefetch><link href=/css/chunk-d0a18e22.d0f9dd30.css rel=prefetch><link href=/js/chunk-22619477.d685bf66.js rel=prefetch><link href=/js/chunk-25109fd7.574a068b.js rel=prefetch><link href=/js/chunk-2d0aa22f.795f8b77.js rel=prefetch><link href=/js/chunk-2d21ef2c.256d034b.js rel=prefetch><link href=/js/chunk-77d429bd.21dd4992.js rel=prefetch><link href=/js/chunk-d0a18e22.c598e77a.js rel=prefetch><link href=/css/app.c98792cc.css rel=preload as=style><link href=/css/chunk-vendors.25cc10a1.css rel=preload as=style><link href=/js/app.f7f7f638.js rel=preload as=script><link href=/js/chunk-vendors.9cc17171.js rel=preload as=script><link href=/css/chunk-vendors.25cc10a1.css rel=stylesheet><link href=/css/app.c98792cc.css rel=stylesheet></head><body><noscript><strong>We're sorry but ezijing-office-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.9cc17171.js></script><script src=/js/app.f7f7f638.js></script></body></html>
+      })(window, document)</script><link href=/css/chunk-22619477.43b9e0bf.css rel=prefetch><link href=/css/chunk-25109fd7.15f611d8.css rel=prefetch><link href=/css/chunk-77d429bd.6e8b52de.css rel=prefetch><link href=/css/chunk-d0a18e22.d0f9dd30.css rel=prefetch><link href=/js/chunk-22619477.d685bf66.js rel=prefetch><link href=/js/chunk-25109fd7.574a068b.js rel=prefetch><link href=/js/chunk-2d0aa22f.795f8b77.js rel=prefetch><link href=/js/chunk-2d21ef2c.256d034b.js rel=prefetch><link href=/js/chunk-77d429bd.21dd4992.js rel=prefetch><link href=/js/chunk-d0a18e22.c598e77a.js rel=prefetch><link href=/css/app.f63499c3.css rel=preload as=style><link href=/css/chunk-vendors.25cc10a1.css rel=preload as=style><link href=/js/app.f7f7f638.js rel=preload as=script><link href=/js/chunk-vendors.9cc17171.js rel=preload as=script><link href=/css/chunk-vendors.25cc10a1.css rel=stylesheet><link href=/css/app.f63499c3.css rel=stylesheet></head><body><noscript><strong>We're sorry but ezijing-office-h5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.9cc17171.js></script><script src=/js/app.f7f7f638.js></script></body></html>
\ No newline at end of file

src/assets/css/base.css

@@ -107,13 +107,14 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 15px 30px;
+  padding-bottom: env(safe-area-inset-bottom);
   max-width: 750px;
   margin: 0 auto;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
 }
 .fixed-button {
+  margin: 15px 30px;
   height: 40px;
   line-height: 40px;
   text-align: center;
@@ -160,3 +161,17 @@ body {
   color: #999;
   -webkit-text-fill-color: currentColor;
 }
+
+.line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+#app {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.van-popup--bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}

vue.config.js

 module.exports = {
   devServer: {
-    host: 'dev.ezijing.com',
+    // host: 'dev.ezijing.com',
     proxy: {
       '/api/user_center': {
         target: 'https://e-learning3.ezijing.com'