1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    6.     <!-- 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器 -->
    7.     <meta name="renderer" content="webkit" />
    8.     <!-- 强制Chromium内核，作用于其他双核浏览器 -->
    9.     <meta name="force-rendering" content="webkit" />
    10.     <meta
    11.       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
    12.       name="viewport"
    13.     />
    14.     <!-- uc强制竖屏 -->
    15.     <meta name="screen-orientation" content="portrait" />
    16.     <!-- QQ强制竖屏 -->
    17.     <meta name="x5-orientation" content="portrait" />
    18.     <!-- 设置页面不缓存 -->
    19.     <meta http-equiv="Expires" content="0" />
    20.     <meta http-equiv="Pragma" content="no-cache" />
    21.     <meta http-equiv="Cache-control" content="no-cache" />
    22.     <meta http-equiv="Cache" content="no-cache" />
    23.     <meta name="keywords" content="至造云 至爱智家" />
    24.     <meta name="description" content="至造云 至爱智家" />
    25.     <meta name="apple-mobile-web-app-title" content="至造云 至爱智家" />
    26.     <link rel="icon" href="/favicon.ico" />
    27.     <link rel="stylesheet" href="<%= fontPath %>/iconfont.css" />
    28.     <title>海底捞H5</title>
    29.   </head>
    30.   <body>
    31.     <div id="app">
    32.       <style>
    33.           #loading-mask {
    34.               position: fixed;
    35.               top: 0;
    36.               left: 0;
    37.               z-index: 9999;
    38.               width: 100%;
    39.               height: 100%;
    40.               overflow: hidden;
    41.               background: #fff;
    42.               user-select: none;
    43.           }
    45.           .loading-wrapper {
    46.               position: absolute;
    47.               top: 50%;
    48.               left: 50%;
    49.               transform: translate(-50%, -100%);
    50.           }
    52.           .loading-dot {
    53.               position: relative;
    54.               display: inline-block;
    55.               width: 64px;
    56.               height: 64px;
    57.               font-size: 64px;
    58.               transform: rotate(45deg);
    59.               box-sizing: border-box;
    60.               animation: antRotate 1.2s infinite linear;
    61.           }
    63.           .loading-dot i {
    64.               position: absolute;
    65.               display: block;
    66.               width: 22px;
    67.               height: 22px;
    68.               background-color: #1890ff;
    69.               border-radius: 100%;
    70.               opacity: 0.3;
    71.               transform: scale(0.75);
    72.               animation: antSpinMove 1s infinite linear alternate;
    73.               transform-origin: 50% 50%;
    74.           }
    76.           .loading-dot i:nth-child(1) {
    77.               top: 0;
    78.               left: 0;
    79.           }
    81.           .loading-dot i:nth-child(2) {
    82.               top: 0;
    83.               right: 0;
    84.               -webkit-animation-delay: 0.4s;
    85.               animation-delay: 0.4s;
    86.           }
    88.           .loading-dot i:nth-child(3) {
    89.               right: 0;
    90.               bottom: 0;
    91.               -webkit-animation-delay: 0.8s;
    92.               animation-delay: 0.8s;
    93.           }
    95.           .loading-dot i:nth-child(4) {
    96.               bottom: 0;
    97.               left: 0;
    98.               -webkit-animation-delay: 1.2s;
    99.               animation-delay: 1.2s;
    100.           }
    101.           @keyframes antRotate {
    102.               to {
    103.                   -webkit-transform: rotate(405deg);
    104.                   transform: rotate(405deg);
    105.               }
    106.           }
    107.           @-webkit-keyframes antRotate {
    108.               to {
    109.                   -webkit-transform: rotate(405deg);
    110.                   transform: rotate(405deg);
    111.               }
    112.           }
    113.           @keyframes antSpinMove {
    114.               to {
    115.                   opacity: 1;
    116.               }
    117.           }
    118.           @-webkit-keyframes antSpinMove {
    119.               to {
    120.                   opacity: 1;
    121.               }
    122.           }
    123.       </style>
    124.       <div id="loading-mask">
    125.         <div class="loading-wrapper">
    126.           <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
    127.         </div>
    128.       </div>
    129.     </div>
    130.     <script>
    131.       ;(function () {
    132.         if (!/debug=true/.test(location.search) && localStorage.getItem('eruda-debug') !== 'true') return;
    133.         var script = document.createElement('script');
    134.         // script.crossOrigin = true; ios浏览器加这个属性会导致脚本不加载
    135.         script.async = true;
    136.         script.src = '//cdn.bootcdn.net/ajax/libs/eruda/2.4.1/eruda.min.js';
    137.         document.body.appendChild(script);
    138.         script.onload = function () {
    139.           window.eruda && window.eruda.init();
    140.         }
    141.       })();
    142.     </script>
    143.     <script type="module" src="/src/main.ts"></script>
    144.   </body>
    145. </html>