WisdomCity-Web
/
huikaifa


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!--
 * @Author: wjc
 * @Date: 2021-12-22 10:03:00
 * @LastEditors: wjc
 * @LastEditTime: 2021-12-22 10:03:00
 * @Description: 
-->
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
  <title>form generator</title>
  <style>
    html,
    body {
      height: 100%;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }

    #frame {
      display: none;
    }
  </style>
  <style>
    .pre-loader {
      position: absolute;
      top: calc(50% - 32px);
      left: calc(50% - 32px);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      perspective: 800px;
    }

    .pre-loader .inner {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .pre-loader .inner.one {
      left: 0%;
      top: 0%;
      -webkit-animation: rotate-one 1s linear infinite;
      animation: rotate-one 1s linear infinite;
      border-bottom: 3px solid #bc9048;
    }

    .pre-loader .inner.two {
      right: 0%;
      top: 0%;
      -webkit-animation: rotate-two 1s linear infinite;
      animation: rotate-two 1s linear infinite;
      border-right: 3px solid #74aeff;
    }

    .pre-loader .inner.three {
      right: 0%;
      bottom: 0%;
      -webkit-animation: rotate-three 1s linear infinite;
      animation: rotate-three 1s linear infinite;
      border-top: 3px solid #caef74;
    }

    @keyframes rotate-one {
      0% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
      }

      100% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
      }
    }

    @keyframes rotate-two {
      0% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
      }

      100% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
      }
    }

    @keyframes rotate-three {
      0% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
      }

      100% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="pre-loader" id="pre-loader">
    123
    <div class="inner one"></div>
    <div class="inner two"></div>
    <div class="inner three"></div>
  </div>
  <iframe id="frame" width="100%" height="100%" frameborder="0"></iframe>
  <script>
    window.onload = function () {
      const vscode = acquireVsCodeApi()
      const cmds = {
        setSrc: function (message) {
          var frame = document.getElementById('frame')
          frame.src = message.data.src
          frame.onload = function () {
            document.getElementById('pre-loader').style.display = "none"
            frame.style.display = "block"
            frame.contentWindow.postMessage({
              cmd: 'mountApp',
              data: message.data.db // 发送db.json中的内容
            }, '*')
          }
        },
        writeFile: function (message) {
          vscode.postMessage(message)
        },
        openUrl: function (message) {
          vscode.postMessage(message)
        },
        setStorageItem: function (message) {
          vscode.postMessage(message)
        }
      }

      window.addEventListener('message', event => {
        const message = event.data
        if (message && message.cmd) cmds[message.cmd](message)
      })
    }
  </script>
</body>
</html>