fork-reap-design/src/styles/components/layout/aui-phone/index.less

A high quality UI components Library with Vue.js

.aui-preview-bg {
    position: relative;
    z-index: 1005;
    &.iPhone6 {
        width: 375px;
        height: 750px;
        background: url('//v.campus.qq.com/reap/static/img/iPhone6.png') no-repeat;
        background-size: 100%;
        .aui-preview-pos {
            position: relative;
            top: 118px;
            left: 44px;
            width: 288px;
            height: 495px;
            background-color: #fff;
        }
    }
    &.iPhoneX {
        margin: 15px 0 0 15px;
        width: 350px;
        height: 720px;
        background: url('//v.campus.qq.com/reap/static/img/iPhoneX.png') no-repeat;
        background-size: 100%;
        .aui-preview-pos {
            position: relative;
            top: 48px;
            left: 25px;
            width: 300px;
            height: 600px;
            background-color: #fff;
        }
    }

}

.aui-preivew-modal {
    .ivu-modal-body {
        padding: 0;
    }
    .ivu-modal-content {
        background-color: transparent;
        box-shadow: none;
    }
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
        .ivu-modal{
            top: 0;
        }
    }
}