v-preview-pc/dist/index.css

Vue图片预览插件，用于PC端，支持多张图片切换，缩放，旋转

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1645454_o7fvm9mumel.eot?t=1582023621299'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1645454_o7fvm9mumel.eot?t=1582023621299#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWcAAsAAAAACxwAAAVOAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCECgqIDIZyATYCJAMkCxQABCAFhG0HgQgbpglRlFBOAtnPArtpGWZmMF5CSit7jvPW7j+rZ49FxsPXfq/n7u7jALtEAco44PFR8UUwtopVnenU1+j3/kyNyP/O5e8h2sF/JwFl1YgU+rT9yeUK6dL0SA2dnlITchNuw7+nveS1sxwMdrpzuzlpB+nrjC9Yn9ceaM9z/z/HTBeFG22Yf21zyYwL2huNRxfFp5FhBXLAd4InimeynFw6k0BNUyr62/xxAr0tQ9bdxd0jlBR8XCDeS8GglLMqFlJoDbVwaRHfsLXpS/oH4Gv4+/Ef5lEiqTJ+0v3Lcw+ORmt2lF8fKWn5FTWeG7uryDgGCvFb9P4C4+yxrP7yd1leAytastJoja3xZsKpN/Wn+9nRo5DybDwprOh/8kBSZJVaaLREDdo5B/s51zJaroDE2DIr0N1AQGZCARVTz6yGrg+zgO4eAhpmR11a0Pm6lZnr4gjE373tDg+HRuS3726324NBt7a3Uas9OdP9+8T9R/i9F0l3HmAMs7A0NqZyr0jhYXfv3uVOEnd+mBpZqC0UcFRU+FylvAKPS4mmlPPzuJQZnmphvlq17i6NefkMtcxVKeBzVAsFvBUquzBxr/GUq85QyqO5q5xSnM9XFSwpz5FWSqJplZyaGL7s7l3s/v1Ayc2MKGWJ9+7h6sab7FbJF6gKFpTP2dWEsyfG0Er0ogrOH1MlJPHJ2opNeTh+5xV+7zFx/zV292FWO+m45lRk/vAKAJKrCS9LSAAnvIogErc1a5LN+O3bHhjvfizG8NY4LT0VU7flSnGXqRVJ6arvtCpMGkO+b9oPWQ+larSldSabg/bktvQUTZshD6EJ+eliGzeFv8+PKgz/UxiWHxn5znhmTRd7OxApjz3VfQ8QUtvQ+NXs8pkWifeiwCN/M/gavpkKYpZClE2BX/9nO/QuazqYzvFTghN6J7yDjuvg2gDGPDXfWUU4M6w6CTFuqwP+ZWd74rEmGCunn0yMNSf7Xf4M5obv7JufwersQrPRnIMHc1A/UOIrYszqyvEzN/Fri4gA9ejYOFqPVHSPALEnpZKbEFKB1hffXo9GgI4IIz8TXX4iSoqU+PqBHPTgQTQHyW7vymb55le+JgEpJvud9Q73k7ko6WJ7GNifHWhrO6ZuoD5MrzxYFqjQ0FJNsQMbWlsbAtlUdUuDQuDyXQZeugQZLfLFnjLdaH1rloy8lrxMVnAqcK+S4HIJr0GQCLc/fdomFdza4LZzi7BOq7Du7qOaBuoO8vuQvnyZJhWkMUiT9+u+wRhmA2naG3RSAAAgXPUV4iFtyS3oTzuLCqHvwaexoR8AAMCCXlWoikv4DM7CIPcZMzYd8i4eYjK/Y5Up6/VXTPJ3MOdR9ZtLzpHCJUmK/ACgld4+nW94rFh8rkdgW1ckmTsc6XRIezA6p7LphF6P8b0OrvgbV7/eWuuPpF9PIWlsQtbaRhbsMVQGJ1BrXULvyOXVg1VaVpQOh74UhCXfkCz4A9mSH2TB/kJlwz/UliILvYfo3nKwG7JyqokZ8tDZonRVxI3DVKLGexJpwHRWEVKfSScygbPxtFi4pIj0GGckKzE3hiPXKsQL9TQKAoWxVktyzXhhTGxPJlz6orGrQqi4pRHGIB7k2EKSS4lwf7JRKf38PSKkAoy2zHoRfka0hFw/mhmbtkBeaqNWs66lPbEizBlKc4jv6pUQuiA3CXRWQbF80BJxGWOLHumYbUKjeFvteH59+FgvgR5/YBcpcpSooo4m2uii17xXzJORKIiURY5sbCSLxIvXNHJVvC1n07WtSjf17t0ivZB3qTIXOMIeKybljGQKAAA=') format('woff2'),
  url('//at.alicdn.com/t/font_1645454_o7fvm9mumel.woff?t=1582023621299') format('woff'),
  url('//at.alicdn.com/t/font_1645454_o7fvm9mumel.ttf?t=1582023621299') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1645454_o7fvm9mumel.svg?t=1582023621299#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-loading:before {
  content: "\e72a";
}

.icon-guanbi:before {
  content: "\e601";
}

.icon-xiangqian-copy:before {
  content: "\e64a";
}

.icon-xiangqian:before {
  content: "\e610";
}

.icon-youxuanzhuan:before {
  content: "\e720";
}

.icon-zuoxuanzhuan:before {
  content: "\e722";
}

.icon-fangda:before {
  content: "\e752";
}

.icon-suoxiao:before {
  content: "\e840";
}

.vpfade-enter, .vpfade-leave-to {
  opacity: 0
}

.vpfade-leave, .vpfade-enter-to {
  opacity: 1
}

.vpfade-enter-active, .vpfade-leave-active {
  transition: all .2s
}

@keyframes vp-rotate{
  0%{
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
  }
  100%{
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
  }
}

@-webkit-keyframes vp-rotate{
  0%{
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
  }
  100%{
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
  }
}

.vp-rotate {
  transition: 0.5s;
  -webkit-transition: .5s;
  transform-origin: 50% 50%;  
  -webkit-transform-origin: 50% 50%;  
  -ms-transform-origin: 50% 50%;  
  -moz-transform-origin: 50% 50%;  
  -o-transform-origin: 50% 50%;  
  font-size: 0;
  animation: vp-rotate .6s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
  -webkit-animation: vp-rotate .6s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
  -ms-animation: vp-rotate .6s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
  -moz-animation: vp-rotate .6s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
  -o-animation: vp-rotate .6s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
}

.vp-dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  z-index: 9999;
}

.vp-img-box {
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  -ms-touch-action: none;
  -webkit-touch-callout: none;  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.vp-img-box.transition {
  transition: .3s all;
  -webkit-transition: .3s all;
}

.vp-img-box > img {
  width: 100%;
  height: 100%;
}

.vp-loading {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.vp-loading-icon {
  font-size: 20px;
  display: inline-block;
}

.vp-img-toolbar {
  position: absolute;
  z-index: 888;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  white-space: nowrap;
  color: #fff;
  font-size: 0;
}

.vp-img-toolbar .tool {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}

.vp-img-toolbar .tool span {
  font-size: 30px;
}

.vp-tooltip {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  height: 20px;
  left: 50%;
  line-height: 20px;
  margin-left: -25px;
  margin-top: -10px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 50px;
}

.vp-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  z-index: 100;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border-radius: 0 0 0 4px;
}