线：

&:after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          background: #DFE3E8;
          width: 100%;
          height: 1px;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
        }

框：

&:after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 200%;
              height: 200%;
              transform: scale(0.5);
              transform-origin: left top;
              box-sizing: border-box;
              z-index: 0;
              border: 1px solid #1F94D2;
              border-radius: 4px;
              pointer-events: none;
            }

<div class="page-holder md-safe-area-bottom"></div>
.page-holder{
      min-height: 65px;
      overflow: hidden;
      &.md-safe-area-bottom{
        min-height: calc(
          65px + constant(safe-area-inset-bottom)
        ); /* 兼容 iOS < 11.2 */
        min-height: calc(
          65px + env(safe-area-inset-bottom)
        ); /* 兼容 iOS >= 11.2 */
      }
    }

// 安卓没有头部安全区域高度

// 滚动穿透修复方法

// 禁止滚动
const preventDefaultFunc = function (e) {
    e.preventDefault();
  }
        document.body.style.overflow = 'hidden';
        document.addEventListener('touchmove', preventDefaultFunc, 
        {
          passive: false,
        });
      document.body.addEventListener('wheel', preventDefaultFunc, { passive: false })

// 恢复滚动
        document.body.style.overflow = 'auto';
        document.removeEventListener('touchmove', preventDefaultFunc, 
        {
          passive: false,
        });
       document.body.removeEventListener('wheel', preventDefaultFunc, { passive: false })

// ios 弹窗无法滚动底层列表滚动修复方法
setTimeout(()=>{
      let scrollDiv = document.querySelector(".can-scroll");
      scrollDiv.ontouchmove = (e)=>{
        e.stopPropagation()
      }
    }, 0)

// 兼容ios
    window.onscroll=()=>{
      // console.log('ios') 
      //在IOS下document.body.scrollTop 一直为0，要用document.documentElement.scrollTop
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if(showPopup.value){
        if(isFocus.value){
          // divTop.value = scrollTop  + 'px';
          let fixedDiv = document.querySelector(".popup-top-holder");
          if(fixedDiv){
            fixedDiv.style.top = scrollTop  + 'px';
            fixedDiv.style.backgroundColor = '#fff'
            fixedDiv.style.zIndex = '20003'
          }
        }else{
          let fixedDiv = document.querySelector(".popup-top-holder");
          if(fixedDiv){
            fixedDiv.style.top = 0  + 'px';
            fixedDiv.style.zIndex = '-1'
          }
        }
      }
    }
    // 兼容安卓
    window.onresize=()=>{
      if(showPopup.value){
        if(isFocus.value){
          let fixedDiv = document.querySelector(".popup-top-holder");
          if(fixedDiv){
            fixedDiv.style.top = 0  + 'px';
            fixedDiv.style.backgroundColor = '#fff'
            fixedDiv.style.zIndex = '20003'
            fixedDiv.style.height = '44px'
            console.log('fixedDiv', fixedDiv, fixedDiv.style )
          }
        }else{
          let fixedDiv = document.querySelector(".popup-top-holder");
          if(fixedDiv){
            fixedDiv.style.top = 0  + 'px';
            fixedDiv.style.zIndex = '-1'
          }
        }
      }
    }

document.body.scrollTop = document.body.scrollHeight
// 要把body拉起
        document.body.scrollIntoView(false)
        document.body.scrollIntoViewIfNeeded()
document.activeElement.scrollIntoView(false)
          document.activeElement.scrollIntoViewIfNeeded()

native 嵌套h5之后 height 属性不起作用。

min-height: 45px;
-webkit-logical-height:45px;

在loadedmetadata 方法里面调用play事件和playbackRate事件解决播放和速率问题 myplayer.src({src: '',type: 'video/mp4'})解决切片视频切换失败问题