doc/themes/weex/source/css/example.scss

.example-wrapper {
  width: 1120px;
  margin: 100px auto;
  display: flex;
  flex-direction: row;

  .horizontal {
    flex: 1;
    padding: 20px;
    position: relative;
    max-width: 620px;
    height: 600px;
  }

  .highlight {
    height: 580px;
    overflow-y: auto;
  }

  .phone {
    flex: 0 0 300px;
  }

  .mock-phone {
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    z-index: 25;
    width: 297px;
    height: 590px;
    border: 2px solid #0088fb;
    border-radius: 30px;
  }

  .camera {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    background: #afddff;
    border: 1px solid #0088fb;
    top: 23px;
    left: 94px;
  }

  .earpiece {
    position: absolute;
    width: 70px;
    height: 8px;
    border-radius: 8px;
    background: #afddff;
    border: 1px solid #0088fb;
    top: 26px;
    left: 124px;
  }

  .home-btn {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 56px;
    background: #afddff;
    border: 1px solid #0088fb;
    bottom: 14px;
    left: 50%;
    margin-left: -28px;
  }

  .inner {
    position: absolute;
    top: 60px;
    z-index: 26;
    left: 12px;
    width: 267px;
    height: 441px;
    overflow: hidden;
    border: 1px solid #0088fb;
  }

  iframe {
    margin: 0;
    width: 750px;
    height: 1248px;
    background: #fff;
    transform: scaleY(0.35333333);
    transform: scale(0.35333333, 0.353333333);
    transform-origin: top left;
  }

  .qrcode {
    flex: 0 0 150px;
    p {
      text-align: center;
      margin: 1em 0;
    }
  }

  #qrcode-img {
    padding: 0;
    width: 150px;
    height: 150px;
  }
}