更新 样式

src/views/voyage/voyageDetail.vue

@@ -311,7 +311,13 @@
     <div class="media-content df ffw">
       <div class="pic-container">
         <div v-for="(item, index) in media" :key="item" class="pic-main">
-          <div :class="index % 2 == 0 ? 'box' : 'box bottom-box'">
+          <div
+            :class="[
+              'box',
+              index % 2 == 0 ? '' : 'bottom-box',
+              item.status == 1 ? 'now-box' : '',
+            ]"
+          >
             <div class="card-note">
               {{ item.shipName }} 拍摄于
               <br />
@@ -360,9 +366,18 @@
               ></el-checkbox>
             </div>
           </div>
-          <div :class="index % 2 == 0 ? 's-line' : 's-line top210px'"></div>
-          <div class="point"></div>
-          <div class="l-line" v-if="index + 1 != media.length"></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>
         <el-dialog
           v-model="videoModal"
@@ -390,7 +405,6 @@ import router from "../../router";
 import store from "../../store";
 import { ElNotification } from "element-plus";
 import PicTimelineVue from "../../components/PicTimeline.vue";
-import { v } from "../../../dist/assets/vendor.f273df9f";
 
 export default {
   components: {
@@ -413,7 +427,6 @@ export default {
       coordinates.value = res.data.result.coordinates;
       voyage.value = res.data.result.voyage;
       media.value = res.data.result.medias;
-
       for (let i of media.value) {
         previewSrcList.value.push(i.downloadUrl);
       }
@@ -611,7 +624,7 @@ export default {
   height: 100%;
   box-sizing: border-box;
   display: flex;
-  padding: 20px;
+  padding: 30px;
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
@@ -625,12 +638,21 @@ export default {
   position: absolute;
   height: 240px;
   width: var(--box-width);
-  border: 1px solid #dddddd;
+  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;
@@ -638,15 +660,7 @@ export default {
   height: 20px;
   border-left: 2px dashed;
   box-sizing: border-box;
-  border-color: #97caf6;
-}
-.point {
-  position: relative;
-  left: 93px;
-  top: 258px;
-  width: 16px;
-  height: 16px;
-  background-image: url(../../images/blue-circle.png);
+  border-color: #ddd;
 }
 
 .l-line {
@@ -656,7 +670,7 @@ export default {
   top: 249px;
   height: 3px;
   width: 100px;
-  background-color: #0094fe;
+  background-color: #dddddd;
 }
 
 .bottom-box {
@@ -700,4 +714,20 @@ export default {
 .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>