fix: 宽度不在动态计算，统一宽度

guzijian
1 parent 590074cc
Showing 1 changed file with 39 additions and 28 deletions
src/views/home/index.vue
@@ -59,7 +59,8 @@
             <div class="fleet-top-title">{{ item.title }}</div>
           </div>
           <!-- 内容盒子 -->
-          <div class="fleet-content-box">
+          <div ref="fleetContentBox" class="fleet-content-box">
+            <!-- <vue3-seamless-scroll :list="item.fleetInfos" :step="1" :hoverStop="true" :hover="true"> -->
             <!-- 线路信息 -->
             <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName"
               class="fleet-line-info-container">
@@ -106,6 +107,7 @@
                 </div>
               </div>
             </div>
+            <!-- </vue3-seamless-scroll> -->
           </div>
         </div>
       </div>
@@ -114,7 +116,6 @@
 </template>
  
 <script setup name="Index">
-
 import { queryLineInfo, querySignInfoByType } from '@/api/big_view/big_view.js';
 import ConstForm from '@/components/ConstForm/index.vue';
 import getWeek from "@/utils/dateUtils.js";
@@ -128,6 +129,7 @@ import icon4 from &quot;../../assets/bigview/image-icon-3.png&quot;;
 import icon5 from "../../assets/bigview/image-icon-4.png";
 import icon6 from "../../assets/bigview/image-icon-5.png";
 import icon1 from "../../assets/bigview/image-icon-6.png";
+const fleetContentBox = ref()
 const currentDateKey = ref();
 const loading = ref(true);
 /** 签到信息 */
@@ -262,6 +264,7 @@ onMounted(() =&gt; {
   console.log();
   currentDateKey.value = dateKey;
   handleUpdateDataRequest(currentDateKey.value);
+
 })
  
 /** 销毁之前触发 */
@@ -324,6 +327,15 @@ const alterEnterHandler = (val, el) =&gt; {
 /** 监听数据更新日期 */
 watch(timeTaskObject.updateDateObject, (val1, val2) => {
   //  发送请求更新数据
+  const currentTime = moment().format('HH:mm');
+  let dateKey;
+  if (currentTime < '03:00') {
+    dateKey = moment().subtract(1, 'day').format('YYYY-MM-DD');
+  } else {
+    dateKey = moment().format("YYYY-MM-DD");
+  }
+  console.log();
+  currentDateKey.value = dateKey;
   handleUpdateDataRequest(currentDateKey.value);
 })
  
@@ -363,24 +375,24 @@ const handleUpdateDataRequest = (dateKey) =&gt; {
     nextTick(() => {
       const containerElement = fleetNbbmInfoContainer.value;
       if (containerElement != null) {
-        containerElement.forEach((el) => {
-          const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
-          if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
-            const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
-            // 有售票员
-            for (let index = 0; index < el.children.length; index++) {
-              const element = el.children[index];
-              element.style.width = `${textWidth}px`;
-            }
-            // 无售票员
-          } else {
-            const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
-            for (let index = 0; index < el.children.length; index++) {
-              const element = el.children[index];
-              element.style.width = `${textWidth}px`;
-            }
-          }
-        })
+        // containerElement.forEach((el) => {
+        //   const nbbmHaveSaleInfo = el.firstElementChild.firstElementChild;
+        //   if ("fleet-nbbm-info-have-sale" == nbbmHaveSaleInfo.className) {
+        //     const textWidth = nbbmHaveSaleInfo.children[1].firstElementChild.offsetWidth;
+        //     // 有售票员
+        //     for (let index = 0; index < el.children.length; index++) {
+        //       const element = el.children[index];
+        //       element.style.width = `${textWidth}px`;
+        //     }
+        //     // 无售票员
+        //   } else {
+        //     const textWidth = nbbmHaveSaleInfo.firstElementChild.offsetWidth;
+        //     for (let index = 0; index < el.children.length; index++) {
+        //       const element = el.children[index];
+        //       element.style.width = `${textWidth}px`;
+        //     }
+        //   }
+        // })
         loading.value = false;
       } else {
         loading.value = false;
@@ -624,8 +636,9 @@ const handleGlobalInfo = (data, num) =&gt; {
         .fleet-content-box {
           height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));
           width: 100%;
-          overflow-y: scroll;
-          overflow-x: hidden;
+          // overflow-y: hidden;
+          // overflow-x: hidden;
+          overflow: auto;
  
           // 线路信息
           .fleet-line-info-container {
@@ -645,14 +658,16 @@ const handleGlobalInfo = (data, num) =&gt; {
               box-sizing: border-box;
               display: flex;
               flex-wrap: wrap;
+              justify-content: space-between;
+              justify-content: flex-start;
               font-size: 0.8vw;
  
               .fleet-nbbm-info-item {
-                // width: 6vw;
+                width: 6vw;
                 height: 2.4vh;
-                margin-right: 0.4vw;
                 box-sizing: border-box;
                 margin-top: 0.4vw;
+                margin-right: 0.4vw;
                 color: white;
  
                 .fleet-nbbm-info-have-sale {
@@ -717,10 +732,6 @@ const handleGlobalInfo = (data, num) =&gt; {
                   }
                 }
               }
-
-              .fleet-nbbm-info-item:last-child {
-                margin-right: 0;
-              }
             }
           }
         }