Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang-PC

src/App.vue

@@ -1,5 +1,14 @@
 <template>
-  <router-view />
+  <router-view v-slot="{ Component }">
+    <transition name="fade-in-out">
+      <component :is="Component" />
+    </transition>
+  </router-view>
+  <audio
+    id="bg-music"
+    src="./configMultiMedia/music/music1.mp3"
+    style="opacity: 0;"
+  />
 </template>
 
 <script setup>
@@ -31,38 +40,40 @@ const store = useStore()
 </script>
 
 <style lang="less">
-// html, body {
-//   overscroll-behavior: none;
-//   overflow: hidden;
-//   height: 100%;
-// }
+html,
+body {
+  // overscroll-behavior: none;
+  overflow: hidden;
+  height: 100%;
+}
 
-// * {
-//   user-select: none;
-//   -webkit-touch-callout: none;
-// }
+* {
+  user-select: none;
+  -webkit-touch-callout: none;
+}
 
-// // 360浏览器不支持not()
-// input, textarea {
-//   user-select: initial;
-// }
+// 360浏览器不支持not()
+input,
+textarea {
+  user-select: initial;
+}
 
-// #app {
-//   height: 100%;
-// }
+#app {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
 
 // 字体
-// @font-face {
-//   font-family: 'Source Han Serif CN';
-//   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
-// }
-// @font-face {
-//   font-family: 'Source Han Serif CN-Bold';
-//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
-// }
-// i {
-//   font-style: italic;
-// }
+@font-face {
+  font-family: 'KingHwa_OldSong';
+  src: url('@/assets/style/KingHwa_OldSong.TTF');
+}
+
+@font-face {
+  font-family: 'KaiTi';
+  src: url('@/assets/style/SIMKAI.woff2');
+}
 
 // 滚动条，只设置某一项可能导致不生效。
 // ::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }
@@ -71,57 +82,124 @@ const store = useStore()
 
 // vue组件过渡效果
 .fade-out-leave-active {
-  transition: opacity 1s;
+  transition: opacity 2s;
   pointer-events: none;
 }
+
 .fade-out-leave-to {
   opacity: 0;
 }
 
-// vue组件过渡效果
 .fade-in-enter-active {
-  transition: opacity 1s;
+  transition: opacity 2s;
 }
+
 .fade-in-enter-from {
   opacity: 0;
 }
 
 .fade-in-out-enter-active {
-  transition: opacity 2s;
+  transition: opacity 1s;
 }
+
 .fade-in-out-leave-active {
-  transition: opacity 2s;
+  transition: opacity 1s;
   pointer-events: none;
 }
+
 .fade-in-out-enter-from {
   opacity: 0;
 }
+
 .fade-in-out-leave-to {
   opacity: 0;
 }
 
 // 不断渐变显隐 animation
 .animation-show-hide {
-  animation: show-hide 1.8s infinite;
+  animation: show-hide 1.5s infinite;
 }
+
 @keyframes show-hide {
   0% {
     opacity: 0;
   }
+
   50% {
     opacity: 1;
   }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+
+// 不断渐变显隐，显示时间较长 animation
+.animation-show-long-hide {
+  animation: show-long-hide 2.5s infinite;
+}
+
+@keyframes show-long-hide {
+  0% {
+    opacity: 0;
+  }
+
+  35% {
+    opacity: 1;
+  }
+
+  65% {
+    opacity: 1;
+  }
+
   100% {
     opacity: 0;
   }
 }
 
 // // vue-viewer
-// .viewer-container {
-//   background-color: rgba(0, 0, 0, 80%) !important;
-// }
-// 或者
-// .viewer-backdrop {
-//   background-color: rgba(0, 0, 0, 90%) !important;
-// }
+.viewer-backdrop {
+  background-color: rgba(0, 0, 0, 90%) !important;
+}
+
+.viewer-backdrop-home {
+  background-color: #597557 !important;
+  backdrop-filter: blur(10px);
+}
+
+.big-tip {
+  position: fixed;
+  // width: 100px;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2016;
+  display: flex;
+  align-items: center;
+  font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  line-height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  font-family: KaiTi;
+  color: white;
+  transition: all 0.5s;
+  >img{
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+  }
+}
+.viewer-button-home{
+  background: url(@/assets/images/icon_cancel.png);
+  background-size: 100% 100%;
+  background-color: rgba(0, 0, 0, 0) !important;
+  height: 40px !important;
+  right: 10px !important;
+  top: 10px !important;
+  width: 40px !important;
+  border: none !important;
+  -webkit-tap-highlight-color:none !important;
+}
+.viewer-button-home::before{
+  display: none !important;
+}
 </style>