<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.loading-warp {
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
top: -75px;
bottom: 0;
left: 0;
right: 0;
}
.loading {
width: 60px;
height: 60px;
margin: 0 auto;
position: relative;
animation: load 3s linear infinite;
}
.loading div {
width: 100%;
height: 100%;
position: absolute;
}
.loading span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #99cc66;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
animation: changeBgColor 3s ease infinite;
}
@keyframes load {
0% {
transform: rotate(0deg);
}
33.3% {
transform: rotate(120deg);
}
66.6% {
transform: rotate(240deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes changeBgColor {
0%,
100% {
background: #99cc66;
}
33.3% {
background: #ffff66;
}
66.6% {
background: #ff6666;
}
}
.loading div:nth-child(2) {
transform: rotate(120deg);
}
.loading div:nth-child(3) {
transform: rotate(240deg);
}
.loading div:nth-child(2) span {
animation-delay: 1s;
}
.loading div:nth-child(3) span {
animation-delay: 2s;
}
html,
body {
width: 100%;
height: 100%;
min-height: 100vh;
}
.design-canvas {
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 8px;
height: 8px;
}
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-corner {
background-color: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: #dbdbdb;
border-radius: 4px;
}
body::-webkit-scrollbar-thumb:hover {
background-color: #c2c2c2;
}
.design-page {
display: block;
height: 100%;
}
.design-page > :not(:defined):empty {
display: flex;
margin: 10px;
align-items: center;
}
.design-page > :not(:defined):empty::before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 3px solid #4f77ff;
border-top-color: transparent;
border-radius: 100%;
animation: circle infinite 0.75s linear;
}
.design-page > :not(:defined):empty > * {
display: none;
}
.design-page > :not(:defined):empty::after {
margin-left: 10px;
content: '区块加载中...';
font-size: 16px;
}
.canvas-container {
background: #f1f1f1;
height: 100%;
}
.canvas-container .container-box {
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 100% 0, 100% 100%;
position: relative;
height: 100%;
background-image: linear-gradient(-90deg, #e0e0e0, #e0e0e0), linear-gradient(-180deg, #e0e0e0, #e0e0e0);
}
.design-page .tiny-row .tiny-col:empty {
min-height: 30px;
border: 1px solid #ccc;
}
.canvas-container .container-box .container-tip {
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: initial;
font-size: 14px;
font-weight: 400;
height: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: #a7b1bd;
background-image: linear-gradient(-90deg, #e0e0e0, #e0e0e0), linear-gradient(-180deg, #e0e0e0, #e0e0e0);
}
.canvas-grid-bg {
background-image: linear-gradient(#dadada7d 1px, transparent 0),
linear-gradient(90deg, #dadada7d 1px, transparent 0), linear-gradient(#dadada 1px, transparent 0),
linear-gradient(90deg, #dadada 1px, transparent 0);
background-size: 11px 11px, 11px 11px, 55px 55px, 55px 55px;
background-color: rgb(255, 255, 255);
}
@keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body class="design-canvas" id="app">
<div class="loading-warp">
<div class="loading">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</div>
</body>
</html>