develop

分支 (3)

管理

管理

develop

in.open

master

tiny-engine
/
canvas.html

<!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" />
    <link href="https://unpkg.com/@opentiny/vue-theme@3/index.css" rel="stylesheet" />
    <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,
      div,
      span,
      object,
      iframe,
      p,
      blockquote,
      pre,
      abbr,
      address,
      cite,
      code,
      del,
      dfn,
      em,
      img,
      ins,
      kbd,
      q,
      samp,
      small,
      strong,
      sub,
      sup,
      var,
      b,
      i,
      dl,
      dt,
      dd,
      ol,
      ul,
      li,
      fieldset,
      form,
      label,
      legend,
      table,
      caption,
      tbody,
      tfoot,
      thead,
      tr,
      th,
      td,
      article,
      aside,
      canvas,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section,
      summary,
      time,
      mark,
      audio,
      video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        background: transparent;
        user-select: none;
      }
      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>
    <script type="module" src="/src/canvas/src/components/render/runner.js"></script>
  </body>
</html>