文物展示系统-移动端适配/视频标签去掉下载

文物展示系统/vueapp/src/App.vue

@@ -1,11 +1,25 @@
-
 <template>
   <router-view class="pc" />
 </template>
 
 <script setup>
-</script>
+import { onMounted } from "vue";
+
+// onMounted(() => {
+//   let width = document.documentElement.clientWidth;
+//   let height = document.documentElement.clientHeight;
 
+//   if (height > width) {
+//     const dom = document.querySelector("body");
+//     dom.style.width = height + "px";
+//     dom.style.height = width + "px";
+//     dom.style.position = "relative";
+//     dom.style.left = "100%";
+//     dom.style.transform = `rotate(90deg)`;
+//     dom.style.transformOrigin = "left top";
+//   }
+// });
+</script>
 
 <style>
 @import "@/assets/style/reset.css";
@@ -18,10 +32,9 @@
 
 body {
   font-size: 16px;
-  background-color: #F5F5F5;
+  background-color: #f5f5f5;
 }
 
-
 ::-webkit-scrollbar {
   display: none;
 }
@@ -43,7 +56,6 @@ li {
   list-style: none;
 }
 
-
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.3s ease;

文物展示系统/vueapp/src/components/detail/ThreeDetail.vue

@@ -7,6 +7,7 @@
           <video
             ref="video$"
             controls
+            controlslist="nodownload"
             muted
             autoplay
             class="initial-video"
@@ -331,4 +332,23 @@ const modules = [Grid, FreeMode, Mousewheel];
     }
   }
 }
+
+/*竖屏*/
+@media screen and (orientation: portrait) {
+  .two-hp{
+    .content{
+      .inner{
+        display: block;
+        .left{
+          width: 100%;
+          height: 50%;
+        }
+        .right{
+          width: 100%;
+          height: 50%;
+        }
+      }
+    }
+  }
+}
 </style>

文物展示系统/vueapp/src/components/detail/TwoDetail.vue

@@ -7,6 +7,7 @@
           <video
             ref="video$"
             controls
+            controlslist="nodownload"
             muted
             autoplay
             class="initial-video"
@@ -347,4 +348,22 @@ watch(currentIfr, () => {
     }
   }
 }
+/*竖屏*/
+@media screen and (orientation: portrait) {
+  .two-hp{
+    .content{
+      .inner{
+        display: block;
+        .left{
+          width: 100%;
+          height: 50%;
+        }
+        .right{
+          width: 100%;
+          height: 50%;
+        }
+      }
+    }
+  }
+}
 </style>

文物展示系统/vueapp/src/views/cultural-relic.vue

@@ -174,4 +174,10 @@ const activeIdx = ref("three");
     }
   }
 }
+/*竖屏*/
+@media screen and (orientation: portrait) {
+  .logo{
+    display: none;
+  }
+}
 </style>

文物展示系统/vueapp/src/views/home.vue

@@ -75,11 +75,27 @@
       </Transition>
     </teleport>
   </div>
+
+  <div class="HenTitBox" v-if="isTitShow">
+    <p>向右滑动浏览</p>
+    <p @click="isHenShow=true" class="HenTitBoxTxt">横屏浏览效果更佳&nbsp;<img src="../assets/images/titt.png" alt="">
+    </p>
+  </div>
+
   <!-- 请横屏浏览 -->
-  <div class="toHengBox">
-    <img src="../assets/images/toHeng.png" alt="" />
+  <div :class="`toHengBox ${isHenShow?'toHengBoxShow':''}`">
+
+    <img @click="isHenShow=false" class="toHengBoxClose" src="../assets/images/close_thin.png" alt="">
+
+    <!-- <img src="../assets/images/toHeng.png" alt="" /> -->
     <p>请横屏浏览（手机关闭方向锁定）</p>
-    <p>微信浏览器请开启横屏模式<br/>（设置-通用-开启横屏模式）</p>
+    <p>安卓-微信请开启横屏模式<br/>（微信-设置-通用-开启横屏模式）</p>
+
+    <img class="toHenTit" src="../assets/images/tit1.jpg" alt="">
+    <img class="toHenTit" src="../assets/images/tit2.jpg" alt="">
+    <img class="toHenTit" src="../assets/images/tit3.jpg" alt="">
+    <img class="toHenTit" src="../assets/images/tit4.jpg" alt="">
+
   </div>
 </template>
 
@@ -92,6 +108,11 @@ import ThreeDetail from "@/components/detail/ThreeDetail.vue";
 import CulturalRelic from "@/views/cultural-relic.vue";
 import { two, three } from "@/data/category";
 
+const isTitShow =ref(true)
+
+const isHenShow =ref(false)
+
+
 let list = three.data.concat(
   two.data.map((item) => {
     return { ...item, isTwo: true };
@@ -208,6 +229,9 @@ const onTouchStart = (e) => {
 
 const onTouchMove = (e) => {
   if (isMouseDown.value && e.changedTouches.length === 1) {
+
+    isTitShow.value=false
+
     // 疯狂操作的极端情况下两个时间戳之间的时差会不合理，甚至为0
     if (
       lastMoveEventTimeStamp.value &&
@@ -383,35 +407,77 @@ onBeforeUnmount(() => {
     }
   }
   .toHengBox {
+    display: block;
     opacity: 0;
     pointer-events: none;
     transition: all 0.2s;
-    position: fixed;
+    position: absolute;
+    overflow-y: auto;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
     background-color: rgba(0, 0, 0, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    & > img {
-      width: 80%;
+    text-align: center;
+
+    .toHengBoxClose{
+      position: fixed;
+      top: 15px;
+      right: 15px;
+      width: 30px;
+      z-index: 99;
     }
+
+    // & > img {
+    //   width: 80%;
+    // }
     & > p {
       margin-top: 10px;
       color: #fff;
       font-size: 14px;
     }
+    .toHenTit{
+      width: 100%;
+      margin: 10px 0;
+    }
+  }
+  .toHengBoxShow{
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .HenTitBox{
+    position: absolute;
+    z-index: 9999;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #7a6553;
+    font-size: 14px;
+    text-align: center;
+    .HenTitBoxTxt{
+      display: none;
+      margin-top: 5px;
+      
+      align-items: center;
+      &>img{
+        width: 24px;
+      }
+    }
   }
+
 }
 /*竖屏*/
 @media screen and (orientation: portrait) {
-  .toHengBox {
-    opacity: 1;
-    pointer-events: auto;
+  // .toHengBox {
+  //   opacity: 1;
+  //   pointer-events: auto;
+  // }
+  .HenTitBox{
+    .HenTitBoxTxt{
+      display: flex;
+    }
   }
 }
 </style>

重写子系统/src/pages/A2Goods/index.tsx

@@ -272,7 +272,7 @@ function A2Goods({ id, closePageFu }: Props) {
                     </div>
                   ) : v.type === "video" && myInd === i ? (
                     <div className="videoBox">
-                      <video src={baseURL + v.filePath} controls></video>
+                      <video src={baseURL + v.filePath} controls controlsList="nodownload"></video>
                     </div>
                   ) : null}
                 </div>

重写子系统/src/pages/A2GoodsM/index.tsx

@@ -286,7 +286,7 @@ function A2GoodsM({ id, closePageFu }: Props) {
                 </div>
               ) : v.type === "video" && myInd === i ? (
                 <div className="videoBox">
-                  <video src={baseURL + v.filePath} controls></video>
+                  <video src={baseURL + v.filePath} controls controlsList="nodownload"></video>
                 </div>
               ) : null}
             </div>