feat:事件工单滚动条

张含笑

2025-08-05 c832bf2e80ac465e71b7a1c1f7a59d4252030989

 src/views/job/components/DeviceJobDetails.vue

@@ -1,7 +1,7 @@
<!-- 历史任务详情 -->
<template>
   <el-dialog class="ztzf-dialog" append-to-body modal-class="detailsOfHistoricalTasks" v-model="isShow" title="历史任务详情"
      width="1800" :close-on-click-modal="false" :destroy-on-close="true">
      :width="pxToRem(1700)" :close-on-click-modal="false" :destroy-on-close="true">
      <div class="content">
         <div class="contentLeft">
            <div class="machineTableDetailsTitle"><span>详情</span></div>
@@ -69,7 +69,7 @@
</template>

<script setup>
// import { pxToRem } from '@/utils/rem'
import { pxToRem } from '@/utils/rem'
import JobRelatedEvents from './JobRelatedEvents.vue'
import { getEventMediaListApi, getJobDetails, getJobInfoFiles } from '@/api/job/task'
import DeviceJobDetailsMap from './DeviceJobDetailsMap.vue'
@@ -206,8 +206,7 @@
.content {
   display: flex;
   height: 100%;

   .contentLeft {
.contentLeft {
      margin-left: 35px;
      margin-right: 24px;
      width: 1150px;
@@ -222,7 +221,7 @@
            display: inline-block;
            margin-left: 30px;
            font-size: 16px;
            color: #363636;
            color: #0282ff;
            line-height: 20px;
            text-align: left;
            margin-bottom: 8px;
@@ -279,36 +278,36 @@
            .itemBox {
               display: flex;
               align-items: center;
               // background: #152743;
               background: #fff;
               height: 43px;
               // border-top: 2px solid #eeeeee;
               border-top: 2px solid #EFEFEF;

            }

         }

         .itemCon:nth-last-child(-n+2) {
            border-bottom: 2px solid #eeeeee;
            border-bottom: 2px solid #EFEFEF;
         }

         .itemBox:nth-last-child(-n+2) .itemTitle {
            border-bottom: 1px solid #eeeeee;
            border-bottom: 1px solid #EFEFEF;
         }

         .itemTitle {
            color: #363636;
            color: #0B1D38;
            width: 26%;
            text-align: right;
            // background: #0B1D38;
            background: #F3F6FF;
            height: 43px;
            line-height: 43px;
            padding-right: 10px;
            border-top: 1px solid #eeeeee
            border-top: 1px solid #EFEFEF;
         }

         .itemValue {
            font-size: 14px;
            color: #363636;
            color: #747e91;
            text-align: center;
            width: 74%;

@@ -348,34 +347,23 @@
         position: relative;
      }

      .videobutton {
         position: absolute;
         top: 40%;
         left: 45%;
         transform: translate(-50%);
         cursor: pointer;
         width: 40px;
         height: 40px;
         display: inline-block;
      }
      // .videobutton {
      //    position: absolute;
      //    top: 40%;
      //    left: 45%;
      //    transform: translate(-50%);
      //    cursor: pointer;
      //    width: 40px;
      //    height: 40px;
      //    display: inline-block;
      // }

   }

   .contentRight {
      width: 0;
      flex-grow: 1;
      background: #19ad8d;
      margin-right: 17px;
   }



   // .fullscreen-video {
   //   width: 100%;
   //   height: 100%;
   //   max-width: 800px;
   //   max-height: 800px;
   //   object-fit: contain;
   // }
}
</style>