{"version":3,"sources":["webpack://jerri-ui/src/components/filePreview/F:/All project/JR-UI-pub/src/components/filePreview/filePreview.scss","webpack://jerri-ui/src/components/filePreview/F:/All project/JR-UI-pub/src/components/filePreview/filePreview.vue"],"names":[],"mappings":"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","file":"style.css","sourcesContent":[".jr-file-preview {\r\n  padding: 10px 50px;\r\n  z-index: 20;\r\n  &.full-page {\r\n    padding: 0;\r\n    .file-preview-content {\r\n      height: calc(100% - 40px);\r\n    }\r\n  }\r\n\r\n  // 预览容器\r\n  .file-preview {\r\n    background-color: $--color-c6;\r\n    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.4);\r\n    border-radius: $--border-radius-base;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    // 头部开始\r\n    &__title {\r\n      height: 30px;\r\n      background-color: $--color-c15;\r\n      padding: 0 10px 0 15px;\r\n      font-size: $--font-xxs;\r\n      color: $--color-c6;\r\n      @include flex-justify;\r\n    }\r\n    &__name {\r\n      flex: 1;\r\n      margin-right: 40px;\r\n    }\r\n    &__icons {\r\n      display: flex;\r\n      .icon-maximize_file {\r\n        transform: translateX(-6px);\r\n      }\r\n      i {\r\n        cursor: pointer;\r\n        font-size: 24px;\r\n        &:hover {\r\n          color: $--color-c19;\r\n        }\r\n      }\r\n    }\r\n\r\n    // 内容\r\n    &__content {\r\n      position: relative;\r\n      overflow: hidden;\r\n      flex: 1;\r\n      background-color: #f4f6f4;\r\n      img {\r\n        display: block;\r\n        max-width: 100%;\r\n        max-height: 100%;\r\n        object-fit: contain;\r\n        pointer-events: none;\r\n      }\r\n    }\r\n\r\n    // 展示区域\r\n    &__display {\r\n      transition: 0.3s;\r\n      position: relative;\r\n      overflow: hidden;\r\n      height: 100%;\r\n      @include center;\r\n      &--samll {\r\n        height: calc(100% - 60px);\r\n      }\r\n      /deep/.load {\r\n        position: absolute;\r\n        width: 100%;\r\n        z-index: 20;\r\n        background-color: $--color-c6;\r\n      }\r\n      &:hover {\r\n        .file-preview__arrow {\r\n          display: block;\r\n        }\r\n      }\r\n    }\r\n\r\n    // 图片盒子\r\n    &__img-box {\r\n      transform-origin: top left;\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100%;\r\n      @include center;\r\n\r\n      &__waterMark {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 100%;\r\n        left: 0px;\r\n        top: 0px;\r\n        z-index: 1;\r\n      }\r\n\r\n      // 图片类型展示图\r\n      > img {\r\n        user-select: none;\r\n        position: absolute !important;\r\n      }\r\n    }\r\n\r\n    // 视频盒子\r\n    &__video-box {\r\n      @include center;\r\n      position: relative;\r\n      z-index: 18;\r\n      width: 100%;\r\n      height: 100%;\r\n      /deep/.player-box {\r\n        max-width: 100%;\r\n        max-height: 100%;\r\n        .load {\r\n          background-color: #f4f6f4;\r\n        }\r\n      }\r\n    }\r\n\r\n    // 音频盒子\r\n    &__audio {\r\n      padding-top: 15px;\r\n      i {\r\n        cursor: pointer;\r\n        margin: 0 auto;\r\n        width: 38px;\r\n        height: 38px;\r\n        display: block;\r\n        background: url(\"#{$--cdn-images}/filePreview/audio-status.png\")\r\n          no-repeat;\r\n        &.stop {\r\n          background-position-x: -38px;\r\n        }\r\n      }\r\n    }\r\n    // 消息提示\r\n    &__msg {\r\n      margin: auto;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n      width: fit-content;\r\n      height: 40px;\r\n      line-height: 40px;\r\n      user-select: none;\r\n      color: $--color-c6;\r\n      font-size: 13px;\r\n      background-color: rgba($--color-c1, 0.6);\r\n      border-radius: 20px;\r\n      padding: 0 20px;\r\n      z-index: 50;\r\n    }\r\n\r\n    // 其他文件类型展示图\r\n    &__other {\r\n      img {\r\n        margin: 0 auto;\r\n        cursor: pointer;\r\n      }\r\n      &-name {\r\n        padding: 20px 100px 0;\r\n        text-align: center;\r\n      }\r\n    }\r\n\r\n    // 箭头\r\n    &__arrow {\r\n      display: none;\r\n      cursor: pointer;\r\n      width: 48px;\r\n      height: 48px;\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      z-index: 19;\r\n      background: url(\"#{$--cdn-images}/filePreview/preview-arrow.png\")\r\n        no-repeat;\r\n      &-next {\r\n        background-position: -51px -1px;\r\n        right: 10px;\r\n        &:hover {\r\n          background-position: -51px -51px;\r\n        }\r\n      }\r\n      &-prev {\r\n        background-position: -1px -1px;\r\n        left: 10px;\r\n        &:hover {\r\n          background-position: -1px -52px;\r\n        }\r\n      }\r\n    }\r\n\r\n    // 缩略图列表\r\n    &__thumb-wrap {\r\n      transition: 0.3s;\r\n      position: relative;\r\n      height: 60px;\r\n      overflow: hidden;\r\n      &.small-height {\r\n        height: 0;\r\n      }\r\n    }\r\n    &__thumb-content {\r\n      height: 100%;\r\n      padding: 10px 0;\r\n      margin: 0 45px;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      text-align: center;\r\n      &::-webkit-scrollbar {\r\n        display: none;\r\n      }\r\n      ul {\r\n        overflow: hidden;\r\n        margin-top: 10px;\r\n        display: inline-block;\r\n        white-space: nowrap;\r\n        height: 40px;\r\n        li {\r\n          position: relative;\r\n          display: inline-block;\r\n          user-select: none;\r\n          cursor: pointer;\r\n          width: 40px;\r\n          height: 100%;\r\n          opacity: 0.5;\r\n          transition: 0.3s;\r\n          border: solid 2px $--color-c0;\r\n\r\n          &:not(:last-child) {\r\n            margin-right: 1px;\r\n          }\r\n          &:hover {\r\n            opacity: 1;\r\n            border: solid 2px #abc0ba;\r\n          }\r\n          &.active {\r\n            opacity: 1;\r\n            border: solid 2px $--color-c9;\r\n          }\r\n          .small-img {\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            @include center;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    // 缩略图箭头\r\n    &__thumb-arrow {\r\n      user-select: none;\r\n      cursor: pointer;\r\n      font-size: 44px;\r\n      position: absolute;\r\n      top: 50%;\r\n      color: $--color-c3;\r\n      &:hover {\r\n        color: $--color-c8;\r\n      }\r\n      &.prev {\r\n        left: 10px;\r\n        transform: translateY(-50%) rotate(180deg);\r\n      }\r\n      &.next {\r\n        right: 10px;\r\n        transform: translateY(-50%);\r\n      }\r\n      &.disabled {\r\n        color: $--color-c4;\r\n        cursor: auto !important;\r\n        pointer-events: none;\r\n      }\r\n    }\r\n\r\n    // 选项卡\r\n    &__options {\r\n      height: 40px;\r\n      padding: 0 20px;\r\n      color: #595959;\r\n      @include flex-justify;\r\n      i {\r\n        cursor: pointer;\r\n        font-size: 23px;\r\n        &:hover {\r\n          color: $--color-c9;\r\n        }\r\n      }\r\n      .icon-preview_file {\r\n        width: 30px;\r\n        font-size: 24px;\r\n      }\r\n    }\r\n    &__tool {\r\n      i {\r\n        margin: 0 12px;\r\n      }\r\n    }\r\n    &__page {\r\n      font-size: 13px;\r\n      user-select: none;\r\n      &-curr {\r\n        color: $--color-c1;\r\n        margin-right: 3px;\r\n      }\r\n      &-total {\r\n        margin-left: 3px;\r\n      }\r\n    }\r\n  }\r\n}\r\n","/* 颜色变量 几种常见的颜色 参考图片\r\n-------------------------- */\r\n// 亮晶晶\r\n$--color-c0: transparent !default;\r\n// 黑色\r\n$--color-c1: #000 !default;\r\n// 输入框占位字体颜色\r\n$--color-c2: #999 !default;\r\n// 分割线/标签描边/滚动条/icon禁用\r\n$--color-c3: #abc0ba !default;\r\n// 表头背景\r\n$--color-c4: #e2e9e7 !default;\r\n// 内容区域底色\r\n$--color-c5: #f9fbf9 !default;\r\n// 白色\r\n$--color-c6: #fff !default;\r\n// 菜单栏/各类大标题\r\n$--color-c7: #003f2d !default;\r\n// 按钮/图标/字体点亮\r\n$--color-c8: #067f42 !default;\r\n// VI色/按钮hover色\r\n$--color-c9: #1aa849 !default;\r\n// 下拉条选中/弹窗选中\r\n$--color-c10: #e3f7e3 !default;\r\n// 强调/提醒/警示\r\n$--color-c11: #ff5c54 !default;\r\n// 强调/提醒\r\n$--color-c12: #ff8e00 !default;\r\n// 下拉选项字体颜色\r\n$--color-c13: #333 !default;\r\n// 滚动条背景色\r\n$--color-c14: #eff4ef !default;\r\n// 弹窗标题背景色\r\n$--color-c15: #1f6c44 !default;\r\n// 禁用输入框背景色\r\n$--color-c16: #f7f9f9 !default;\r\n// 禁用输入框字体颜色\r\n$--color-c17: #666 !default;\r\n// 白色按钮禁用字体颜色 滚动条hover颜色 + -号按钮默认字体颜色\r\n$--color-c18: #7e9e94 !default;\r\n// 弹窗关闭icon的hover色\r\n$--color-c19: #00ff06 !default;\r\n\r\n/* 字体大小，以衣服尺码数来区分大小 XXS、XS、S、M、L、XL、XXL、XXXL\r\n-------------------------- */\r\n$--font-xxl: 32px !default;\r\n$--font-xl: 26px !default;\r\n$--font-l: 24px !default;\r\n$--font-m: 16px !default;\r\n$--font-s: 15px !default;\r\n$--font-xs: 14px !default;\r\n$--font-xxs: 13px !default;\r\n$--font-xxxs: 12px !default;\r\n\r\n/* 圆角\r\n-------------------------- */\r\n$--border-radius-base: 3px !default;\r\n// ellipse tab圆角\r\n$--border-radius-tabs: 13px !default;\r\n// 滚动条\r\n$--border-radius-scroll: 2px !default;\r\n\r\n/* 阴影\r\n-------------------------- */\r\n$--box-shadow-base: 0px 1px 10px 0px rgba($--color-c1, 0.2) !default;\r\n// 按钮阴影\r\n$--box-shadow-btn: 0px 3px 3px 0px rgba(0, 63, 45, 0.45) !default;\r\n// 输入框阴影\r\n$--box-shadow-input: 0 0 0 2px rgba(26, 168, 73, 0.3) !default;\r\n// tabs阴影\r\n$--box-shadow-tabs: 0px -1px 1px 0px rgba($--color-c1, 0.06) !default;\r\n$--box-shadow-ellipse: 0px 2px 6px 0px rgba(38, 50, 56, 0.16) !default;\r\n\r\n/* 高度\r\n-------------------------- */\r\n// 输入框高度\r\n$--height-input: 32px !default;\r\n\r\n/* 宽度\r\n-------------------------- */\r\n// 外框菜单宽度\r\n$--width-menu: 180px !default;\r\n\r\n/* 距离\r\n-------------------------- */\r\n// 表单之间默认距离\r\n$--distance-form: 16px !default;\r\n\r\n// 需适配屏幕分辨率\r\n$--screen-s: 1366px !default;\r\n$--screen-m: 1600px !default;\r\n\r\n// cdn地址\r\n$--cdn-url: \"//cdn.ymm.cn/CDN\";\r\n$--cdn-images: \"#{$--cdn-url}/jerri-ui/assets/images\";\r\n\n// 弹性布局居中\r\n@mixin center {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n// 占位符混入\r\n@mixin placeholder($color) {\r\n  &::-webkit-input-placeholder {\r\n    color: $color;\r\n  }\r\n}\r\n\r\n// 消除字体上下间距\r\n@mixin removeSpace($size) {\r\n  font-size: $size;\r\n  line-height: $size;\r\n}\r\n\r\n// 多行文本显示省略号\r\n@mixin rowHide($row) {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  word-break: break-all;\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  -webkit-line-clamp: $row;\r\n  cursor: default;\r\n}\r\n\r\n// 单行文本显示省略号\r\n@mixin ellip {\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n}\r\n\r\n// 滚动条混入\r\n@mixin scroll-bar {\r\n  ::-webkit-scrollbar {\r\n    width: 15px;\r\n    height: 15px;\r\n  }\r\n\r\n  /*定义滚动条轨道*/\r\n  ::-webkit-scrollbar-track {\r\n    background-color: $--color-c14;\r\n  }\r\n\r\n  /*定义滑块*/\r\n  ::-webkit-scrollbar-thumb {\r\n    border-radius: $--border-radius-scroll;\r\n    background-color: $--color-c3;\r\n\r\n    &:hover {\r\n      background-color: $--color-c18;\r\n    }\r\n  }\r\n}\r\n\r\n// 媒体查询最大宽度混入 默认1600\r\n@mixin less-resolution($max-width: $--screen-m) {\r\n  @media screen and (max-width: $max-width) {\r\n    @content;\r\n  }\r\n}\r\n\r\n// 弹性布局垂直居中 水平根据参数对齐 默认靠两端平分\r\n@mixin flex-justify($align: space-between) {\r\n  display: flex;\r\n  justify-content: $align;\r\n  align-items: center;\r\n}\r\n\n\r\n@import \"filePreview.scss\";\r\n"]}