更新 样式

src/App.vue

@@ -30,6 +30,7 @@ export default {
   },
 };
 </script>
+
 <style>
 .main-container {
   height: 100%;
@@ -125,6 +126,17 @@ export default {
 .mt20 {
   margin-top: 20px;
 }
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.mt30 {
+  margin-top: 30px;
+}
+
+.mt50 {
+  margin-top: 50px;
+}
 
 .container-title {
   font-size: 18px;
@@ -175,4 +187,15 @@ export default {
 .pointer {
   cursor: pointer;
 }
+
+.el-upload-list__item-thumbnail {
+  object-fit: contain !important;
+}
+.el-input__inner {
+  text-align: center;
+  color: #777 !important;
+}
+.el-upload--picture-card {
+  border: none;
+}
 </style>

src/views/voyage/voyageDetail.vue

@@ -1,9 +1,16 @@
 <template>
-  <div class="line-container-p18">
+  <div class="line-container-p24">
     <i class="el-icon-arrow-left"></i>
-    <div class="dib go-back ml8 pointer" @click="router.go(-1)">
+    <div
+      class="dib go-back ml8 pointer"
+      @click="router.replace('/voyage/voyageList')"
+    >
       返回航次列表
     </div>
+  </div>
+
+  <div class="container-title">航次信息</div>
+  <div class="line-container-p24">
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">航次名称</div>
@@ -115,7 +122,7 @@
     </div>
   </div>
   <div class="container-title">航次信息</div>
-  <div class="line-container-p18">
+  <div class="line-container-p24">
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">运输状态</div>
@@ -281,69 +288,79 @@
         ></el-input>
       </div>
     </div>
-    <div
-      class="media-content df ffw"
-      style="width: 100%; background: #f7f7f7; border-radius: 2px"
-    >
-      <el-card
-        style="
-          width: 240px;
-          height: 360px;
-          margin-left: 20px;
-          margin-bottom: 15px;
-        "
-        v-for="item in medias"
-        :key="item"
-        shadow="hover"
-      >
-        <div class="card-note">
-          {{ item.note }}
+    <div class="media-content df ffw">
+      <div class="pic-container">
+        <div v-for="(item, index) in media" :key="item" class="pic-main">
+          <div
+            :class="[
+              'box',
+              index % 2 == 0 ? '' : 'bottom-box',
+              item.status == 1 ? 'now-box' : '',
+            ]"
+          >
+            <div class="card-note">
+              {{ item.shipName }} 拍摄于
+              <br />
+              {{ item.createTime }}
+            </div>
+            <div class="media-box" style="position: relative">
+              <el-image
+                v-if="item.mediaType == 1"
+                style="width: 100%; height: 100%"
+                fit="contain"
+                :src="item.downloadUrl"
+                :preview-src-list="previewSrcList"
+              ></el-image>
+              <video
+                style="width: 100%; height: 100%"
+                v-else
+                :src="item.downloadUrl"
+              ></video>
+              <img
+                @click="openVideoModal(item.downloadUrl)"
+                v-if="item.mediaType == 2"
+                src="../../assets/icon-player.png"
+                style="
+                  object-fit: contain;
+                  width: 40px;
+                  height: 40px;
+                  position: absolute;
+                  top: calc(50% - 20px);
+                  left: calc(50% - 20px);
+                  background: #fff;
+                  border-radius: 50%;
+                "
+                alt=""
+              />
+            </div>
+          </div>
+          <div
+            :class="[
+              's-line',
+              index % 2 == 0 ? '' : 'top210px',
+              item.status == 1 ? 'now-s-line' : '',
+            ]"
+          ></div>
+          <div :class="['point', item.status == 1 ? '' : 'now-point']"></div>
+          <div
+            :class="['l-line', item.status == 1 ? 'now-l-line' : '']"
+            v-if="index + 1 != media.length"
+          ></div>
         </div>
-        <div class="media-box" style="position: relative">
-          <el-image
-            v-if="item.mediaType == 1"
-            style="width: 100%; height: 100%"
-            fit="contain"
-            :src="item.downloadUrl"
-            :preview-src-list="previewSrcList"
-          ></el-image>
+        <el-dialog
+          v-model="videoModal"
+          title="视频审核"
+          width="20%"
+          :before-close="videoClose"
+        >
           <video
+            autoplay
+            controls
             style="width: 100%; height: 100%"
-            v-else
-            :src="item.downloadUrl"
+            :src="currentUrl"
           ></video>
-          <img
-            @click="openVideoModal(item.downloadUrl)"
-            v-if="item.mediaType == 2"
-            src="../../assets/icon-player.png"
-            style="
-              object-fit: contain;
-              width: 40px;
-              height: 40px;
-              position: absolute;
-              top: calc(50% - 20px);
-              left: calc(50% - 20px);
-              background: #fff;
-              border-radius: 50%;
-            "
-            alt=""
-          />
-        </div>
-      </el-card>
-
-      <el-dialog
-        v-model="videoModal"
-        title="视频查看"
-        width="30%"
-        :before-close="videoClose"
-      >
-        <video
-          autoplay
-          controls
-          style="width: 100%; height: 100%"
-          :src="currentUrl"
-        ></video>
-      </el-dialog>
+        </el-dialog>
+      </div>
     </div>
   </div>
 </template>
@@ -351,8 +368,9 @@
 import { onMounted, reactive, ref, toRefs } from "_vue@3.2.20@vue";
 import api from "../../apis/fetch";
 import { useRoute } from "vue-router";
-import router from "../../router";
 import _ from "lodash";
+import router from "../../router";
+import store from "../../store";
 import { ElNotification } from "element-plus";
 
 export default {
@@ -360,7 +378,7 @@ export default {
     const route = useRoute();
     let map = ref();
     let voyage = ref({});
-    let medias = ref();
+    let media = ref();
     let coordinates = ref();
     let previewSrcList = ref([]);
 
@@ -372,12 +390,13 @@ export default {
 
       coordinates.value = res.data.result.coordinates;
       voyage.value = res.data.result.voyage;
-      medias.value = res.data.result.medias;
-      for (let i of medias.value) {
+      media.value = res.data.result.medias;
+      for (let i of media.value) {
         previewSrcList.value.push(i.downloadUrl);
       }
       initMap();
     }
+
     function initMap() {
       map.value = new AMap.Map("map-container", {
         zoom: 11, //级别
@@ -446,6 +465,7 @@ export default {
       }
     }
     let options = ref([
+      { value: 0, label: "请选择" },
       {
         value: 1,
         label: "航行",
@@ -495,6 +515,18 @@ export default {
       videoModal.value = true;
     }
 
+    async function auditMedia(mediaId, a, index, mediaType) {
+      console.log(mediaId, a, index, mediaType);
+      let res = await api.auditMedia({
+        mediaId,
+        audit: a,
+      });
+      if (res.data.status == 0) {
+        media.value[index].audit = a;
+      }
+      console.log(res);
+    }
+
     onMounted(() => {
       getVoyageDetail();
     });
@@ -502,17 +534,18 @@ export default {
       options,
       voyage,
       coordinates,
-      medias,
+      media,
       disabledStatus,
       changeVoyageInfo,
       cancelVoyageChange,
       submitVoyageChange,
       finishVoyage,
-      currentUrl,
-      videoModal,
       openVideoModal,
       previewSrcList,
       router,
+      auditMedia,
+      currentUrl,
+      videoModal,
     };
   },
 };
@@ -522,9 +555,7 @@ export default {
   width: 100%;
   height: 500px;
 }
-:deep().el-input__inner {
-  color: #333 !important;
-}
+
 .card-note {
   height: 30px;
   font-size: 12px;
@@ -538,4 +569,129 @@ export default {
   height: 200px;
   margin-top: 20px;
 }
+
+.checkbox-group {
+  width: 200px;
+  height: 50px;
+  margin-top: 20px;
+}
+
+.media-content {
+  width: 100%;
+  height: 600px;
+  background: #f7f7f7;
+  border-radius: 2px;
+}
+
+.pic-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  padding: 30px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+.pic-main {
+  position: relative;
+  width: 120px;
+}
+.box {
+  position: absolute;
+  height: 240px;
+  width: var(--box-width);
+  border: 5px solid #dddddd;
+  transition: all 0.5s;
+  background: #fff;
+  z-index: 10;
+}
+
+.point {
+  position: relative;
+  left: 93px;
+  top: 258px;
+  width: 16px;
+  height: 16px;
+  background-image: url(../../assets/blue-circle.png);
+}
+
+.s-line {
+  position: absolute;
+  left: 100px;
+  top: 242px;
+  height: 20px;
+  border-left: 2px dashed;
+  box-sizing: border-box;
+  border-color: #ddd;
+}
+
+.l-line {
+  position: relative;
+  bottom: 30px;
+  left: 111px;
+  top: 249px;
+  height: 3px;
+  width: 100px;
+  background-color: #dddddd;
+}
+
+.bottom-box {
+  top: 290px;
+}
+.top210px {
+  top: 270px;
+}
+
+.box:hover {
+  transform: scale(1.2);
+}
+
+.media-box {
+  width: 80px;
+  height: 80px;
+  margin-top: 10px;
+}
+
+.card-note {
+  height: 30px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #777777;
+  padding: 10px 20px;
+}
+
+.media-box {
+  width: 100%;
+  height: 100px;
+  margin-top: 20px;
+}
+
+.checkbox-group {
+  width: 180px;
+  height: 50px;
+  margin-top: 20px;
+}
+
+.el-checkbox {
+  margin: 0;
+}
+
+.now-box {
+  border: 5px solid #0094fe;
+}
+
+.now-l-line {
+  background-color: #0094fe;
+}
+
+.now-s-line {
+  border-color: #97caf6;
+}
+
+.now-point {
+  filter: grayscale(1);
+}
 </style>