产品进销存-前端
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
spring
2 天以前 ff7ae06028d6ce02b7a710a3878e34daa5c0ff25 
 index.html


@@ -1,215 +1,217 @@


<!DOCTYPE html>



<html>







<head>



  <meta charset="utf-8">



  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">



  <meta name="renderer" content="webkit">



  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">



  <link rel="icon" href="/ZQHXico.ico">



  <title>中强恒兴管理系统</title>



  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->



  <style>



    html,



    body,



    #app {



      height: 100%;



      margin: 0px;



      padding: 0px;



    }







    .chromeframe {



      margin: 0.2em 0;



      background: #ccc;



      color: #000;



      padding: 0.2em 0;



    }







    #loader-wrapper {



      position: fixed;



      top: 0;



      left: 0;



      width: 100%;



      height: 100%;



      z-index: 999999;



    }







    #loader {



      display: block;



      position: relative;



      left: 50%;



      top: 50%;



      width: 150px;



      height: 150px;



      margin: -75px 0 0 -75px;



      border-radius: 50%;



      border: 3px solid transparent;



      border-top-color: #FFF;



      -webkit-animation: spin 2s linear infinite;



      -ms-animation: spin 2s linear infinite;



      -moz-animation: spin 2s linear infinite;



      -o-animation: spin 2s linear infinite;



      animation: spin 2s linear infinite;



      z-index: 1001;



    }







    #loader:before {



      content: "";



      position: absolute;



      top: 5px;



      left: 5px;



      right: 5px;



      bottom: 5px;



      border-radius: 50%;



      border: 3px solid transparent;



      border-top-color: #FFF;



      -webkit-animation: spin 3s linear infinite;



      -moz-animation: spin 3s linear infinite;



      -o-animation: spin 3s linear infinite;



      -ms-animation: spin 3s linear infinite;



      animation: spin 3s linear infinite;



    }







    #loader:after {



      content: "";



      position: absolute;



      top: 15px;



      left: 15px;



      right: 15px;



      bottom: 15px;



      border-radius: 50%;



      border: 3px solid transparent;



      border-top-color: #FFF;



      -moz-animation: spin 1.5s linear infinite;



      -o-animation: spin 1.5s linear infinite;



      -ms-animation: spin 1.5s linear infinite;



      -webkit-animation: spin 1.5s linear infinite;



      animation: spin 1.5s linear infinite;



    }











    @-webkit-keyframes spin {



      0% {



        -webkit-transform: rotate(0deg);



        -ms-transform: rotate(0deg);



        transform: rotate(0deg);



  <head>



    <meta charset="utf-8" />



    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />



    <meta name="renderer" content="webkit" />



    <meta



      name="viewport"



      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"



    />



    <link rel="icon" href="/ZQHXico.ico" />



    <title>测试进销存管理系统</title>



    <!--[if lt IE 11



      ]><script>



        window.location.href = "/html/ie.html";



      </script><!



    [endif]-->



    <style>



      html,



      body,



      #app {



        height: 100%;



        margin: 0px;



        padding: 0px;



      }







      100% {



        -webkit-transform: rotate(360deg);



        -ms-transform: rotate(360deg);



        transform: rotate(360deg);



      }



    }







    @keyframes spin {



      0% {



        -webkit-transform: rotate(0deg);



        -ms-transform: rotate(0deg);



        transform: rotate(0deg);



      .chromeframe {



        margin: 0.2em 0;



        background: #ccc;



        color: #000;



        padding: 0.2em 0;



      }







      100% {



        -webkit-transform: rotate(360deg);



        -ms-transform: rotate(360deg);



        transform: rotate(360deg);



      #loader-wrapper {



        position: fixed;



        top: 0;



        left: 0;



        width: 100%;



        height: 100%;



        z-index: 999999;



      }



    }







      #loader {



        display: block;



        position: relative;



        left: 50%;



        top: 50%;



        width: 150px;



        height: 150px;



        margin: -75px 0 0 -75px;



        border-radius: 50%;



        border: 3px solid transparent;



        border-top-color: #fff;



        -webkit-animation: spin 2s linear infinite;



        -ms-animation: spin 2s linear infinite;



        -moz-animation: spin 2s linear infinite;



        -o-animation: spin 2s linear infinite;



        animation: spin 2s linear infinite;



        z-index: 1001;



      }







    #loader-wrapper .loader-section {



      position: fixed;



      top: 0;



      width: 51%;



      height: 100%;



      background: #7171C6;



      z-index: 1000;



      -webkit-transform: translateX(0);



      -ms-transform: translateX(0);



      transform: translateX(0);



    }



      #loader:before {



        content: "";



        position: absolute;



        top: 5px;



        left: 5px;



        right: 5px;



        bottom: 5px;



        border-radius: 50%;



        border: 3px solid transparent;



        border-top-color: #fff;



        -webkit-animation: spin 3s linear infinite;



        -moz-animation: spin 3s linear infinite;



        -o-animation: spin 3s linear infinite;



        -ms-animation: spin 3s linear infinite;



        animation: spin 3s linear infinite;



      }







    #loader-wrapper .loader-section.section-left {



      left: 0;



    }



      #loader:after {



        content: "";



        position: absolute;



        top: 15px;



        left: 15px;



        right: 15px;



        bottom: 15px;



        border-radius: 50%;



        border: 3px solid transparent;



        border-top-color: #fff;



        -moz-animation: spin 1.5s linear infinite;



        -o-animation: spin 1.5s linear infinite;



        -ms-animation: spin 1.5s linear infinite;



        -webkit-animation: spin 1.5s linear infinite;



        animation: spin 1.5s linear infinite;



      }







    #loader-wrapper .loader-section.section-right {



      right: 0;



    }



      @-webkit-keyframes spin {



        0% {



          -webkit-transform: rotate(0deg);



          -ms-transform: rotate(0deg);



          transform: rotate(0deg);



        }







        100% {



          -webkit-transform: rotate(360deg);



          -ms-transform: rotate(360deg);



          transform: rotate(360deg);



        }



      }







    .loaded #loader-wrapper .loader-section.section-left {



      -webkit-transform: translateX(-100%);



      -ms-transform: translateX(-100%);



      transform: translateX(-100%);



      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);



      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);



    }



      @keyframes spin {



        0% {



          -webkit-transform: rotate(0deg);



          -ms-transform: rotate(0deg);



          transform: rotate(0deg);



        }







    .loaded #loader-wrapper .loader-section.section-right {



      -webkit-transform: translateX(100%);



      -ms-transform: translateX(100%);



      transform: translateX(100%);



      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);



      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);



    }



        100% {



          -webkit-transform: rotate(360deg);



          -ms-transform: rotate(360deg);



          transform: rotate(360deg);



        }



      }







    .loaded #loader {



      opacity: 0;



      -webkit-transition: all 0.3s ease-out;



      transition: all 0.3s ease-out;



    }



      #loader-wrapper .loader-section {



        position: fixed;



        top: 0;



        width: 51%;



        height: 100%;



        background: #7171c6;



        z-index: 1000;



        -webkit-transform: translateX(0);



        -ms-transform: translateX(0);



        transform: translateX(0);



      }







    .loaded #loader-wrapper {



      visibility: hidden;



      -webkit-transform: translateY(-100%);



      -ms-transform: translateY(-100%);



      transform: translateY(-100%);



      -webkit-transition: all 0.3s 1s ease-out;



      transition: all 0.3s 1s ease-out;



    }



      #loader-wrapper .loader-section.section-left {



        left: 0;



      }







    .no-js #loader-wrapper {



      display: none;



    }



      #loader-wrapper .loader-section.section-right {



        right: 0;



      }







    .no-js h1 {



      color: #222222;



    }



      .loaded #loader-wrapper .loader-section.section-left {



        -webkit-transform: translateX(-100%);



        -ms-transform: translateX(-100%);



        transform: translateX(-100%);



        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);



        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);



      }







    #loader-wrapper .load_title {



      font-family: 'Open Sans';



      color: #FFF;



      font-size: 19px;



      width: 100%;



      text-align: center;



      z-index: 9999999999999;



      position: absolute;



      top: 60%;



      opacity: 1;



      line-height: 30px;



    }



      .loaded #loader-wrapper .loader-section.section-right {



        -webkit-transform: translateX(100%);



        -ms-transform: translateX(100%);



        transform: translateX(100%);



        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);



        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);



      }







    #loader-wrapper .load_title span {



      font-weight: normal;



      font-style: italic;



      font-size: 13px;



      color: #FFF;



      opacity: 0.5;



    }



  </style>



</head>



      .loaded #loader {



        opacity: 0;



        -webkit-transition: all 0.3s ease-out;



        transition: all 0.3s ease-out;



      }







<body>



  <div id="app">



    <div id="loader-wrapper">



      <div id="loader"></div>



      <div class="loader-section section-left"></div>



      <div class="loader-section section-right"></div>



      <div class="load_title">正在加载系统资源，请耐心等待</div>



      .loaded #loader-wrapper {



        visibility: hidden;



        -webkit-transform: translateY(-100%);



        -ms-transform: translateY(-100%);



        transform: translateY(-100%);



        -webkit-transition: all 0.3s 1s ease-out;



        transition: all 0.3s 1s ease-out;



      }







      .no-js #loader-wrapper {



        display: none;



      }







      .no-js h1 {



        color: #222222;



      }







      #loader-wrapper .load_title {



        font-family: "Open Sans";



        color: #fff;



        font-size: 19px;



        width: 100%;



        text-align: center;



        z-index: 9999999999999;



        position: absolute;



        top: 60%;



        opacity: 1;



        line-height: 30px;



      }







      #loader-wrapper .load_title span {



        font-weight: normal;



        font-style: italic;



        font-size: 13px;



        color: #fff;



        opacity: 0.5;



      }



    </style>



  </head>







  <body>



    <div id="app">



      <div id="loader-wrapper">



        <div id="loader"></div>



        <div class="loader-section section-left"></div>



        <div class="loader-section section-right"></div>



        <div class="load_title">正在加载系统资源，请耐心等待</div>



      </div>



    </div>



  </div>



  <script type="module" src="/src/main.js"></script>



</body>







</html>


    <script type="module" src="/src/main.js"></script>



  </body>



</html>