master

分支 (1)

管理

管理

master

uniui
/
h5model.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Anyup Colorful UI 演示</title>
    <style>
      .demo-preview-wrap {
        position: fixed;
        z-index: 10;
        top: 5vh;
        width: 330px;
        height: 90vh;
        box-sizing: border-box;
        border-radius: 30px;
        margin: 0 auto;
        left: calc(50% - 165px);
      }

      img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 11;
      }

      .demo-time {
        position: absolute;
        top: 17px;
        left: 37px;
        z-index: 12;
        font-size: 12px;
        color: #becde9;
        font-weight: 700;
      }

      iframe {
        position: relative;
        padding: 48px 16px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        z-index: 12;
      }

      @media (max-width: 750px) {
        .demo-preview-wrap {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        img {
          display: none;
        }
        iframe {
          padding: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="demo-preview-wrap">
      <img src="https://www.anyup.cn/static/anyup/images/iphone.png" />
      <iframe src="https://www.anyup.cn/h5/#/" scrolling="auto" frameborder="0"></iframe>
    </div>
  </body>
</html>