feat: 修改UI重新传的首页机巢效果

chenyao

2025-04-10 4ca9d0b91c821c18eeeea381b6e16132fe6577b8

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue

@@ -9,11 +9,14 @@
            <div class="name">总任务数</div>
         </div>
         <div class="status">
            <div v-for="item in list">
               <div :style="{ color: item.color }" class="value">
                  {{ jobStatistics[item.field] }}
            <div class="item" v-for="(item, index) in list">
               <div>
                  <div :style="{ color: item.color }" class="value">
                     {{ jobStatistics[item.field] }}
                  </div>
                  <div class="name">{{ item.name }}</div>
               </div>
               <div class="name">{{ item.name }}</div>
               <div v-if="index !== 2 && index !== 4" class="right-line"></div>
            </div>
         </div>
      </div>
@@ -171,14 +174,14 @@

   .inspection-num {
      background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% 100%;
      width: 360px;
      height: 118px;
      width: 378px;
      height: 110px;
      position: relative;

      .total {
         position: absolute;
         left: 34px;
         top: 44px;
         left: 20px;
         top: 36px;
         font-weight: 500;
         font-size: 14px;
         color: #ffffff;
@@ -194,24 +197,40 @@

      .status {
         position: absolute;
         top: 8px;
         right: 10px;
         width: 200px;
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         justify-content: flex-start;
         line-height: 22px;
         padding: 0 10px 10px 0;

         left: 115px;
         width: 250px;
         height: 110px;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(1   , 30px); // 设置每行高度
         gap: 10px 0; // 调整行间距
         align-content: center;
			
         .item {
            display: flex;
            align-items: center;
         }
         .right-line {
        width: 0px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(27, 148, 255, 0), rgba(27, 148, 255, 1), rgba(27, 148, 255, 0)) 1 1;
        margin-left: 10px;
      }
         .name {
            width: 56px;
            text-align: center;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            margin-top: -4px;
         }

         .value {
            width: 56px;
            text-align: center;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 26px;