新增 视频水印

src/views/shipSecurityManage/checkShipExamine.vue

@@ -80,7 +80,7 @@
               style="width: 50px; height: 50px"
               src="../../assets/play.png"
               alt=""
-              @click="showModal(item.viewUrl)"
+              @click="showModal(item)"
             />
             <video
               style="width: 200px; height: 200px"
@@ -135,12 +135,28 @@
       title="视频查看"
       style="width: 400px"
     >
-      <video
-        style="width: 100%; height: 100%"
-        autoplay
-        controls
-        :src="videoUrl"
-      ></video>
+      <div class="video-mark-box">
+        <video
+          style="width: 100%; height: auto"
+          autoplay
+          controls
+          :src="currentItem.downloadUrl"
+        ></video>
+        <div class="video-mark">
+          <div class="mb10">{{ shipDetail.shipname }}</div>
+          <div class="mb10">{{ currentItem.uploadTime }}</div>
+          <div class="mb10">
+            {{ currentItem.province }}·{{ currentItem.city }}·{{
+              currentItem.district
+            }}
+          </div>
+          <div class="mb10">
+            {{ weeks[currentItem.week] }} {{ currentItem.weather }}
+            {{ currentItem.temperature }} ℃
+          </div>
+          <div class="mb10">真实 实时 精准</div>
+        </div>
+      </div>
     </el-dialog>
   </el-card>
 </template>
@@ -195,13 +211,24 @@ function isImage(url) {
   let lastIndex = url.lastIndexOf(".");
   return imgArr.indexOf(url.substring(lastIndex + 1, url.length)) != -1;
 }
-let videoUrl = ref(false);
+
 let isModalVisable = ref(false);
-function showModal(url) {
+let currentItem = ref({});
+function showModal(item) {
+  currentItem.value = item;
   isModalVisable.value = true;
-  videoUrl.value = url;
 }
 
+const weeks = ref([
+  "星期一",
+  "星期二",
+  "星期三",
+  "星期四",
+  "星期五",
+  "星期六",
+  "星期日",
+]);
+
 onMounted(() => {
   getSecurityCheckDetail(route.query.id);
 });
@@ -246,4 +273,17 @@ onMounted(() => {
 .play-icon:hover {
   transform: scale(1.2);
 }
+.video-mark-box {
+  position: relative;
+}
+
+.video-mark {
+  position: absolute;
+  bottom: 70px;
+  left: 15px;
+  font-size: 16px;
+  font-weight: 700;
+  z-index: 100;
+  color: #fff;
+}
 </style>