.page-theme-preview{
  height: 100%
}
.page-theme-preview .full-main{
  margin-top: 0
}
.page-theme-preview .preview-header-view{
  padding: 14px 40px;
  background-color: #fff
}
.preview-header-view .theme-name{
  font-size: 14px;
  line-height: 20px;
  color: #323233;
  flex-shrink: 0;
  flex-wrap: nowrap;
  display: flex;
  align-items: center
}
.change-type-btn{
  width: 24px;
  height: 24px
}
.change-type-btn img {
  display: none
}
.change-to-mobile{
  margin-left: 24px
}
.add-library-btn{
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
}
.thempate-detail{
  /* overflow: auto */
  overflow: hidden;
}
.thempate-detail .pc-preview{
  height: 100%;
}

.thempate-detail-content{
  height: 100%;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .thempate-detail{
    display: flex;
    flex-direction: column;
  }
  .thempate-detail .pc-preview{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 100%;
  }
  .thempate-detail-content{
    position: relative;
  }
  .h5-preview-content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 0;
  }
  .thempate-detail .h5-preview {
    width: 375px;
    height: 100%;
  }
  .h5-preview-content .qrcode-content {
    padding: 16px;
    border-radius: 20px;
    background-color: #fff;
    width: 240px;
    margin-left: 42px;
  }
  .h5-preview-content .qrcode-title {
    font-size: 14px;
    line-height: 20px;
    color: #323233;
    text-align: center;
  }
  .h5-preview-content .qrcode-box {
    margin-top: 16px;
    padding: 16px 24px 0;
    border-top: 1px dashed #c8c9cc;
  }
  .h5-preview-content .qrcode-box img {
    display: block;
    margin: 0 auto;
  }
}



@media screen and (max-width: 767px) {
  .h5-preview-content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 0;
  }
  .thempate-detail .h5-preview {
    width: 375px;
    height: 100%;
  }
  .page-theme-preview .preview-header-view{
    padding: 22px 16px;
    display: flex;
    align-items: center
  }
  .preview-header-view .theme-name{
    font-size: 13px;
    line-height: 18px;
    flex: 1;
  }
  .add-library-btn{
    margin-left: 24px
  }
  .thempate-detail{
    position: relative;
  }
  .change-type-view {
    position: absolute;
    left: 16px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    z-index: 111111111111111;
    padding: 12px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  }
  .change-to-mobile{
    margin-left: 0;
    margin-top: 20px
  }
  .qrcode-content {
    display: none;
  }
}