feat: 修改样式

guzijian
1 parent a6ad0dd2
Showing 4 changed files with 62 additions and 122 deletions
src/components/ConstForm/index.vue
src/components/FleetContentBox/index.vue
src/views/home/index.vue
src/views/in/in/index.vue
 <template>
-  <div v-loading="loading" element-loading-text="加载详情..." element-loading-svg-view-box="-10, -10, 50, 50"
-    element-loading-background="#062a5ac5">
+  <div v-loading="loading" element-loading-text="加载详情..." element-loading-svg-view-box="-10, -10, 50, 50">
     <div class="person-info">
       <div class="font-box">
         <span class="label">
@@ -35,7 +34,7 @@
         </div>
       </div>
     </div>
-    <div style="display: flex;align-items: center;margin-bottom: 7px; color: #0CFCFC; font-size: 13px; margin-top: 15px;">
+    <div style="display: flex;align-items: center;margin-bottom: 7px; color: green; font-size: 13px; margin-top: 15px;">
       打卡详情</div>
     <div class="mainTable">
       <el-table :data="info.signInfos" style="width: 100%;">
@@ -115,26 +114,26 @@ watch(
 :deep(.mainTable .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
   text-align: center;
   font-weight: bold;
-  color: white;
-  background-color: #0359A4 !important;
+  color: black;
+  background-color: #f4f4f5d3 !important;
   font-size: 0.5vw;
   height: 20px !important;
 }
  
 :deep(.mainTable .el-table__empty-text) {
   line-height: 30px !important;
-  color: white;
+  color: black;
   font-weight: bold;
   font-size: 0.5vw;
 }
  
 :deep(.mainTable .el-table__empty-block) {
   min-height: 30px !important;
-  background-color: #041e74d5;
+  background-color: #f4f4f5d3;
 }
  
 :deep(.mainTable .el-table tr) {
-  background-color: #03113F;
+  background-color: #f4f4f5d3;
 }
  
 :deep(.mainTable .el-table .el-table__cell) {
@@ -143,17 +142,12 @@ watch(
 }
  
 :deep(.mainTable .el-table tbody tr:hover>td) {
-  background: rgba(39, 54, 91, 0.571) !important;
+  background: #ffffff !important;
 }
  
-// :deep(.mainTable .el-table th) {
-//   border: 1px solid black !important;
-//   border-right: none !important;
-//   border-bottom: none !important;
-// }
  
 :deep(.el-table td) {
-  border: 1px solid #033E72;
+  border: 1px solid #c5c7c9;
   border-right: none !important;
 }
  
@@ -161,12 +155,13 @@ watch(
 :deep(.mainTable td .cell) {
   text-align: center;
   font-size: 0.5vw;
-  color: white;
+  color: black;
 }
  
 // 修改行单元格内边距
 :deep(.mainTable .el-table .cell) {
   padding: 1px !important;
+  box-sizing: border-box;
 }
  
 .person-info {
@@ -174,6 +169,7 @@ watch(
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  box-sizing: border-box;
  
   .font-box {
     width: 50%;
@@ -184,19 +180,19 @@ watch(
     align-items: center;
  
     .label {
-      color: #0CFCFC;
+      color: green;
       font-family: "黑体", "圆体";
       font-weight: 500;
       width: 39px;
     }
  
     .content-box {
-      color: white;
+      color: black;
       width: 95.5px;
       box-sizing: border-box;
       padding: 2px;
       text-align: center;
-      background-color: #03113F;
+      background-color: #f4f4f5d3;
  
       .content-text {
         display: flex;
 <template>
   <div @wheel="handleWheel" ref="fleetContentBox" :class="{ scrolling: isScrolling }" 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">
-      <!-- <div class="line-box" style="height: 1px; margin: 5px; background-color: #0761ba;"></div> -->
-
+    <div v-for="(childItem, childIndex) in item.fleetInfos" :key="childItem.lineName" ref="fleetLineInfoContainer"
+      class="fleet-line-info-container">
       <div :id="childItem.lineName" class="fleet-line-title">
         {{ childItem.lineName }}
       </div>
@@ -12,7 +10,8 @@
       <div ref="fleetNbbmInfoContainer" class="fleet-nbbm-info-container">
         <div v-for="(sunItem, sunIndex) in childItem.lineInfos" :key="sunItem.nbbm" class="fleet-nbbm-info-item">
           <div v-if="sunItem.saleInfoVo != null" class="fleet-nbbm-info-have-sale">
-            <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName" :width="320"
+            <el-popover popper-class="fleet-popover-style" placement="top-start" :title="childItem.lineName" :width="320"
+              :open-delay="500" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
               :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)">
               <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode"
                 :currentDateKey="currentDateKey" :jobCode="sunItem.driverInfoVo.jobCode" />
@@ -30,7 +29,8 @@
                 </span>
               </span>
             </div>
-            <el-popover popper-class="fleet-popover-style" placement="top" :title="childItem.lineName" :width="320"
+            <el-popover popper-class="fleet-popover-style" placement="top-start" :title="childItem.lineName" :width="320"
+              :open-delay="500" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
               :show-after="200" @after-enter="alterEnterHandler(sunItem.saleInfoVo.jobCode)">
               <ConstForm :showFlag="personSignInfo.jobCode == sunItem.saleInfoVo.jobCode" :currentDateKey="currentDateKey"
                 :jobCode="sunItem.saleInfoVo.jobCode" />
@@ -41,7 +41,8 @@
             </el-popover>
           </div>
           <el-popover v-else :show-after="200" @after-enter="alterEnterHandler(sunItem.driverInfoVo.jobCode)"
-            placement="top" :title="childItem.lineName" popper-class="fleet-popover-style" :width="320">
+            :open-delay="500" :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
+            placement="top-start" :title="childItem.lineName" popper-class="fleet-popover-style" :width="320">
             <ConstForm :showFlag="personSignInfo.jobCode == sunItem.driverInfoVo.jobCode" :currentDateKey="currentDateKey"
               :jobCode="sunItem.driverInfoVo.jobCode" />
             <template #reference>
@@ -55,12 +56,12 @@
         </div>
       </div>
     </div>
-    <!-- </vue3-seamless-scroll> -->
   </div>
 </template>
 <script setup>
 import ConstForm from '@/components/ConstForm/index.vue';
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
+const popoverRef = ref({});
 const props = defineProps({
   item: {
     type: Object,
@@ -91,7 +92,8 @@ const personSignInfo = reactive(
 const isScrolling = ref(false);
 // 元素信息
 const fleetNbbmInfoContainer = ref();
-const fleetContentBox = ref()
+const fleetContentBox = ref();
+const fleetLineInfoContainer = ref();
 /**
  * 显示弹窗
  * @param {*} val 工号
@@ -103,16 +105,21 @@ const alterEnterHandler = (val) =&gt; {
 /**
  * 处理容器滚动回调函数
  * @param container HTML parent element
+ * @param boxContainerElement HTML parent element
  */
-const handleContainerScrollCallBack = (container) => {
-  if (container.scrollHeight > container.clientHeight) {
-    // 内容溢出
-    isScrolling.value = true;
-  } else {
-    // 内容未溢出
-    isScrolling.value = false;
-  }
-  props.handleLoadSuccess(false);
+const handleContainerScrollCallBack = (container, boxContainerElement) => {
+  let element = container[0];
+  let parentLength = element.offsetWidth - 1;
+  let styles = window.getComputedStyle(element.firstElementChild);
+  let margin = Number(styles.marginRight.substring(0, styles.marginRight.length - 2));
+  let childLength = element.firstElementChild.offsetWidth - 1 + margin;
+  let elementCount = Math.floor(parentLength / childLength);
+  let containerLength = elementCount * childLength;
+  let surplus = Math.floor((parentLength - containerLength) / 2) - 1;
+  boxContainerElement.forEach(boxElement => {
+    boxElement.style.paddingLeft = surplus + "px";
+    boxElement.style.paddingRight = surplus + "px";
+  });
 }
  
 /**
@@ -126,56 +133,31 @@ const handleWheel = (el) =&gt; {
     // el.preventDefault();
     // 根据滚轮滚动的距离来计算滚动量
     const scrollAmount = el.deltaY > 0 ? 100 : -100;
-
     // 修改盒子的滚动位置
     containerElement.scrollTop += scrollAmount;
-
   }
-
 }
  
 onMounted(() => {
-  // 处理容器滚动
-  // nextTick(() => {
-  //   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`;
-  //     //     }
-  //     //   }
-  //     // })
-  //     loading.value = false;
-  //   } else {
-
-  //   }
-  // })
   nextTick(() => {
-    const containerElement = fleetContentBox.value;
-    handleContainerScrollCallBack(containerElement);
+    const containerElement = fleetNbbmInfoContainer.value;
+    const boxContainerElement = fleetLineInfoContainer.value;
+    try {
+      handleContainerScrollCallBack(containerElement, boxContainerElement);
+    } catch (error) {
+      console.log("元素为空");
+    }
+    props.handleLoadSuccess(false);
   })
 })
  
+
 </script>
  
 <style lang="scss" scoped>
 .fleet-content-box {
   height: calc(100% - clamp(0.8rem, -0.907rem + 5.71vw, 1.3rem));
-  // height: auto;
   width: auto;
-  // overflow-y: hidden;
-  // overflow-x: hidden;
   overflow: hidden;
  
   .scrolling {
@@ -210,8 +192,6 @@ onMounted(() =&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 {
@@ -219,7 +199,7 @@ onMounted(() =&gt; {
         height: 2.4vh;
         box-sizing: border-box;
         margin-top: 0.4vw;
-        // margin-right: 0.4vw;
+        margin-right: 0.4vw;
         color: black;
  
         .fleet-nbbm-info-have-sale {
@@ -289,46 +269,8 @@ onMounted(() =&gt; {
         }
       }
     }
-
-
-
-
   }
 }
-
-
-
-/* 定义滚动条样式 */
-.fleet-content-box::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-/*定义滑块 内阴影+圆角*/
-.fleet-content-box::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  // box-shadow: inset 0 0 0px rgba(237, 44, 37, .5);
-  background-color: #01366c;
-  background-image: url('../assets/bigview/scroll-box.png');
-}
-
-/* 设置滚动条拖拽按钮的样式 */
-.fleet-content-box::-webkit-scrollbar-thumb:vertical {
-  background-color: #0761ba;
-  /* 背景图片的尺寸适应滑块 */
-  background-size: cover;
-}
-
-.fleet-content-box::-webkit-scrollbar-button {
-  display: none;
-}
-
-/*定义滚动条轨道 内阴影+圆角*/
-.fleet-content-box::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 0px #01DEDD;
-  border-radius: 6px;
-  background-color: #121622;
-}
 </style>
 <style>
 .fleet-popover-style {
@@ -338,8 +280,7 @@ onMounted(() =&gt; {
 }
  
 .el-popover.fleet-popover-style {
-  border-color: #146EBD;
-  background-color: #062a5ac5;
+  border-color: #f4f4f5;
 }
  
 .fleet-popover-style .el-popover__title {
@@ -348,7 +289,7 @@ onMounted(() =&gt; {
 }
  
 .el-popper[data-popper-placement^=top]>.el-popper__arrow::before {
-  border-top-color: #062a5ac5 !important;
-  background-color: #062a5ac5 !important;
+  border-top-color: rgba(244, 244, 245, 0.735) !important;
+  background-color: rgba(244, 244, 245, 0.735) !important;
 }
 </style>
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!-- 可视化大屏 -->
     <div class="box-view" v-loading="loading" element-loading-text="Loading..."
-      element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="#081138">
+      element-loading-svg-view-box="-10, -10, 50, 50">
       <!-- 标题 -->
       <div class="big-view-container-title">
         <!-- 标题 -->
@@ -19,9 +19,9 @@
       <div class="big-view-container-global-info common-style">
         <div v-for=" (item, index) in globalInfoBoxList" :key="index" class="global-info-box">
           <div class="global-info-box-container">
-            <div class="global-info-box-container-left">
-              <!-- <img :src="item.icon" /> -->
-            </div>
+            <!--<div class="global-info-box-container-left">
+              <img :src="item.icon" />
+            </div>-->
             <div class="global-info-box-container-right">
               <div class="global-info-box-container-right-title">
                 {{ item.title }}
@@ -446,6 +446,9 @@ const handleGlobalInfo = (data, num) =&gt; {
             .global-info-box-container-right-number {
               font-weight: bold;
               color: black;
+              text-align: center;
+              // display: flex;
+              // align-items: center;
             }
           }
         }
@@ -394,7 +394,7 @@ function handleDelete(row) {
 function handleExport() {
   proxy.download('in/in/export', {
     ...queryParams.value
-  }, `in_${new Date().getTime()}.xlsx`)
+  }, `${queryParams.value.date}打卡记录表.xlsx`)
 }
  
 watch(open, (val1, val2) => {