|
|
@@ -0,0 +1,151 @@
|
|
|
+<!--
|
|
|
+ * @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>
|
