@cw-devops/bk-magic-vue/lib/ui/image-viewer.min.css.map

基于蓝鲸 Magicbox 和 Vue 的前端组件库

{"version":3,"sources":["image-viewer.css"],"names":[],"mappings":"AAOI,yBACI,cAAe,CACf,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MAAO,CACP,yBAA6B,CAC7B,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,2BAAsB,CAAtB,4BAAsB,CAAtB,yBAAsB,CAAtB,qBACJ,CACA,sBACI,iBAAkB,CAClB,KAAM,CACN,OAAQ,CACR,QAAS,CACT,MACJ,CAEA,wBACI,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,SAAU,CACV,UAAW,CACX,WAAY,CACZ,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAA8B,CAA9B,qBAA8B,CAA9B,6BAA8B,CAC9B,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,aAAwB,CACxB,yBAmBJ,CAlBI,4BACI,kBAAO,CAAP,UAAO,CAAP,MAAO,CACP,eAAgB,CAChB,kBAAmB,CACnB,sBAAuB,CACvB,cAAe,CACf,cACJ,CAEA,kCACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,oBAAyB,CAAzB,iBAAyB,CAAzB,wBACJ,CACA,mCACI,cAAe,CACf,aACJ,CAGJ,qBACI,iBAAkB,CAClB,SAAU,CACV,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,iBAAkB,CAClB,UAAW,CACX,6BAAsB,CAAtB,qBAAsB,CACtB,+BAAmC,CACnC,aAAc,CACd,wBAAiB,CAAjB,qBAAiB,CAAjB,oBAAiB,CAAjB,gBAMJ,CAJI,2BACI,+BAAmC,CACnC,UACJ,CAGJ,uBACI,WAAY,CACZ,gBAAiB,CACjB,iBAAkB,CAClB,cAAe,CACf,aAAc,CACd,cAIJ,CAHI,6BACI,UACJ,CAGJ,wBACI,UAAW,CACX,WAAY,CACZ,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,uBAAuB,CAAvB,oBAAuB,CAAvB,sBAAuB,CACvB,wBAAkB,CAAlB,qBAAkB,CAAlB,kBACJ,CAEA,4BACI,gBACJ,CAEA,uBACI,iBAAkB,CAClB,cAAe,CACf,aAOJ,CALI,gCACI,cAAe,CACf,aAAc,CACd,kBACJ,CAGJ,yBACI,QAAS,CACT,WAAY,CACZ,kCAA2B,CAA3B,0BAA2B,CAC3B,WAAY,CACZ,WAAY,CACZ,cAAe,CACf,+BAAiC,CACjC,iBAAgC,CAChC,kBAwBJ,CAvBI,+BACI,yBACJ,CAEA,+BACI,UAAW,CACX,WAAY,CACZ,kBAAmB,CACnB,cAAe,CACf,aAAwB,CACxB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,wBAA6B,CAA7B,4BAUJ,CARI,wCACI,cAKJ,CAHI,8CACI,UACJ,CAMZ,4CACI,OAAQ,CACR,UAAW,CACX,WAAY,CACZ,cAAe,CACf,cACJ,CAEA,sBAGI,SACJ,CAEA,4CALI,kCAAmC,CACnC,0BASJ,CALA,sBAGI,UAAW,CACX,eACJ","file":"image-viewer.min.css","sourcesContent":["@import './variable.css';\n\n$imgWrapTextColor:$newGreyColor;\n$tipsColor:$newBlackColor3;\n\n\n.bk-image-viewer {\n    &-wrapper {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: rgba(0, 0, 0, .6);\n        display: flex;\n        flex-direction: column;\n    }\n    &-mask{\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n    }\n\n    &-header {\n        position: absolute;\n        top: 0;\n        left: 0;\n        z-index: 9;\n        width: 100%;\n        height: 52px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: $imgWrapTextColor;\n        background: rgba(0,0,0,0.70);\n        > div {\n            flex: 1;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n            font-size: 14px;\n            padding: 0 25px;\n        }\n\n        .quit-box {\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n        }\n        .quit-tips{\n            font-size: 14px;\n            color: $tipsColor;\n        }\n    }\n\n    &-btn {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        opacity: .8;\n        box-sizing: border-box;\n        background-color: rgba(0, 0, 0, .3);\n        color: #DCDEE5;\n        user-select: none;\n\n        &:hover {\n            background-color: rgba(0, 0, 0, .4);\n            color: $defaultColor;\n        }\n    }\n\n    &-close {\n        height: 52px;\n        line-height: 48px;\n        text-align: center;\n        font-size: 32px;\n        color: #C4C6CC;\n        cursor: pointer;\n        &:hover{\n            color: #fff;\n        }\n    }\n\n    &-canvas {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        justify-content: center;\n        align-items: center\n    }\n\n    &-has-header {\n        padding-top: 52px;\n    }\n\n    &-error {\n        text-align: center;\n        font-size: 14px;\n        color: $newBlackColor1;\n\n        .bk-icon {\n            font-size: 85px;\n            line-height: 1;\n            margin-bottom: 15px;\n        }\n    }\n\n    &-actions {\n        left: 50%;\n        bottom: 30px;\n        transform: translateX(-50%);\n        width: 282px;\n        height: 44px;\n        padding: 0 23px;\n        background-color: $newBlackColor4;\n        border-color: $defaultLightColor;\n        border-radius: 22px;\n        &:hover{\n            background: rgba(0,0,0,.5);\n        }\n\n        &-inner {\n            width: 100%;\n            height: 100%;\n            text-align: justify;\n            font-size: 23px;\n            color: $imgWrapTextColor;\n            display: flex;\n            align-items: center;\n            justify-content: space-around;\n\n            .bk-icon {\n                cursor: pointer;\n\n                &:hover {\n                    color: $defaultLightColor;\n                }\n            }\n\n        }\n    }\n\n    &-next, &-prev {\n        top: 50%;\n        width: 80px;\n        height: 80px;\n        font-size: 40px;\n        cursor: pointer;\n    }\n\n    &-prev {\n        -webkit-transform: translateY(-50%);\n        transform: translateY(-50%);\n        left: 40px\n    }\n\n    &-next {\n        -webkit-transform: translateY(-50%);\n        transform: translateY(-50%);\n        right: 40px;\n        text-indent: 2px\n    }\n}\n"]}