vue-photo-view-x/dist/css/main.css

```javascript // main.js import PhototView from 'photo-view' import 'vue-photo-view-x/dist/css/main.css' Vue.use(PhototView)

/*!******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/PhotoView/assets/font/iconfont.css ***!
  \******************************************************************************************/
@font-face {
  font-family: "iconfont"; /* Project id 3461279 */
  src: url(.././assets/2ca3b56069c3e0444ca6.woff2) format('woff2'),
       url(.././assets/85973d5f2b821ab953c9.woff) format('woff'),
       url(.././assets/bfdd50070db439fabc27.ttf) format('truetype');
}

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

.icon-xiazai:before {
  content: "\e626";
}

.icon-youjiantou:before {
  content: "\e624";
}

.icon-zuojiantou:before {
  content: "\e625";
}

.icon-yulan:before {
  content: "\e64c";
}

.icon-xuanzhuan:before {
  content: "\e615";
}

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

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

.icon-suoxiao1:before {
  content: "\e619";
}

.icon-icon-test:before {
  content: "\e912";
}


/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/PhotoView/PhotoMenu.vue?vue&type=style&index=0&id=361948e0&lang=less&scoped=true& ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
.photo-menu[data-v-361948e0] {
  max-height: 50px;
  display: flex;
  margin: 20px 0;
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 333;
  transform: translateX(-50%);
  padding: 8px 10px;
  border-radius: 5px;
  background-color: var(--background-color);
  z-index: 99;
}
.photo-menu .menu-item[data-v-361948e0] {
  height: 25px;
  width: 25px;
  border-radius: 2px;
  cursor: pointer;
  margin: 0 7px;
  box-sizing: border-box;
  color: var(--font-color);
  font-size: 18px;
}
.photo-menu .menu-item[data-v-361948e0]:hover {
  background-color: var(--background-menu-color);
}
.photo-menu .menu-item i[data-v-361948e0] {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 25px;
  text-align: center;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/PhotoView/PhotoShow.vue?vue&type=style&index=0&id=1683bba4&lang=less&scoped=true& ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
.photo-show[data-v-1683bba4] {
  width: 100%;
  height: 100%;
  position: absolute;
  user-select: none;
}
.photo-show img[data-v-1683bba4] {
  width: 600px;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  cursor: move;
  transition: all 0.3s ease-out;
  margin-left: -300px;
  margin-top: -300px;
  filter: brightness(var(--img-brightness));
}
.photo-show p.imageName[data-v-1683bba4] {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  color: var(--file-name-color);
  padding: 5px 10px;
  line-height: 32px;
  text-align: center;
  border-radius: 10px;
  background-color: var(--background-color);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/PhotoView/PhotoView.vue?vue&type=style&index=0&id=50376dd6&lang=less&scoped=true& ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
.photo-view[data-v-50376dd6] {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  --font-color: #000;
  --file-name-color: #fff;
  --img-brightness: 100%;
  --background-color: #fff;
  --background-menu-color: rgba(0, 0, 0, 0.5);
}
.photo-view .close-btn[data-v-50376dd6] {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px 0 5px 50%;
  z-index: 444;
  cursor: pointer;
  user-select: none;
  color: var(--font-color);
  background-color: var(--background-color);
}
.photo-view .photo-inner[data-v-50376dd6] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.v-enter[data-v-50376dd6],
.v-leave-to[data-v-50376dd6] {
  opacity: 0;
}
.v-leave-to[data-v-50376dd6] {
  transform: translateY(30px) scale(1.1);
}
.v-enter-to[data-v-50376dd6],
.v-leave[data-v-50376dd6] {
  opacity: 1;
}
.v-enter-active[data-v-50376dd6],
.v-leave-active[data-v-50376dd6] {
  transition: all 0.3s ease-in-out;
}
@media (prefers-color-scheme: dark) {
.photo-view[data-v-50376dd6] {
    --font-color: #aaa;
    --img-brightness: 50%;
    --background-color: #000;
    --file-name-color: #aaa;
    --background-menu-color: rgba(255, 255, 255, 0.5);
}
}