style💄: gap样式兼容

src/views/VideoBox/components/TagInfo.vue

@@ -33,10 +33,10 @@
           :type="item.type"
           :isUpd="isUpd"
         ></PubUpload>
-        <div class="w-full flex flex-col gap-y-4" v-else>
+        <div class="w-full flex flex-col" v-else>
           <n-image
             v-for="(img, i) in item.fileList"
-            class="w-full"
+            class="w-full mb-4 last:mb-0"
             :key="i"
             :img-props="{ className: 'w-full' }"
             :src="img.url"
@@ -55,6 +55,7 @@
 
         <div class="tag-info-video-wrapper" v-else>
           <PubPlayer
+            class="mb-15px first:mb-0"
             ref="pubPlayerRefs"
             :id="dplayerId + video.id"
             v-for="video in item.fileList"
@@ -354,7 +355,7 @@
   const originalFormData = ref([])
 
   const renderToolbar = (props) => {
-    return h('div', { class: 'flex gap-2' }, [
+    return h('div', { class: 'flex mx-2' }, [
       props.nodes.rotateCounterclockwise,
       props.nodes.rotateClockwise,
       props.nodes.resizeToOriginalSize,
@@ -502,7 +503,6 @@
       width: 100%;
       display: flex;
       flex-wrap: wrap;
-      gap: 15px;
       overflow-x: auto;
     }
   }

src/views/VideoBox/components/rightBox.vue

@@ -2,10 +2,10 @@
   <ul
     v-if="show"
     :style="{ top: y + 'px', left: x + 'px' }"
-    class="absolute c-#fff right-box py-1 flex flex-col items-center justify-center gap-2 bg-#2262acb3"
+    class="absolute c-#fff right-box py-1 flex flex-col items-center justify-center bg-#2262acb3"
   >
     <li
-      class="px-4 py-1 cursor-pointer hover:bg-#2262ac"
+      class="px-4 py-1 cursor-pointer hover:bg-#2262ac mb-2 last:mb-0"
       @click="item.handler"
       v-for="(item, i) in menu"
       :key="i"

src/views/VideoBox/index.vue

@@ -22,10 +22,11 @@
               <pub-video-new newClass="zoom-video" class="h-full" :key="resetKey" />
             </template>
           </vue-photo-zoom-pro>
-          <div class="flex items-center z-99 absolute right-8px top-8px gap-2">
-            <ul class="flex justify-around items-center gap-3">
+          <div class="flex items-center z-99 absolute right-8px top-8px">
+            <ul class="flex justify-around items-center mr-2">
               <li
                 v-for="item in listComputed"
+                class="mr-3 last:mr-0"
                 :key="item.iCom"
                 @click.stop="toolsHandler(item.type)"
               >
@@ -45,7 +46,7 @@
               </li>
             </ul>
             <span
-              class="size-28px color-#8ac5ff cursor-pointer i-ph:magnifying-glass-plus"
+              class="size-28px mr-2 color-#8ac5ff cursor-pointer i-ph:magnifying-glass-plus"
               @click="magnifying(!magnifyingFlag)"
             ></span>
             <!-- 全屏按钮 -->

src/views/home/leftbox/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute">
+  <div class="w-453px flex flex-col lr-box-bg overflow-hidden absolute">
     <Box
       title="安全事件单位排序"
       wHeader="60px"
-      class="animate__animated animate__fadeInLeft animate__faster"
+      class="mb-15px animate__animated animate__fadeInLeft animate__faster"
     >
       <TopBox />
     </Box>
-    <Box title="三违行为监测" class="animate__animated animate__fadeInLeft animate__fast">
+    <Box title="三违行为监测" class="mb-15px animate__animated animate__fadeInLeft animate__fast">
       <MiddleBox />
     </Box>
     <Box title="实时预警情况" class="animate__animated animate__fadeInLeft animate__1s">

src/views/home/leftbox/middleBox.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="left-top-box">
-    <ul class="flex justify-end gap-15px mb-15px absolute right-15px z-10">
+    <ul class="flex justify-end mb-15px absolute right-15px z-10">
       <li
         :class="[
-          'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
+          'w-50px ml-15px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
           i === selectedI ? 'b-color-#FAC858' : ''
         ]"
         v-for="(item, i) in options"

src/views/home/leftboxtwo/bottomBox.vue

@@ -6,10 +6,10 @@
         <Countto class="text-18px color-#389bff font-bold" :endVal="data.yhzs" />
       </div>
 
-      <ul class="flex gap-15px">
+      <ul class="flex">
         <li
           :class="[
-            'w-50px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
+            'w-50px ml-15px cursor-pointer text-center b-solid b-1px b-color-#389bff hover:b-color-#FAC858',
             i === selectedI ? 'b-color-#FAC858' : ''
           ]"
           v-for="(item, i) in options"

src/views/home/leftboxtwo/index.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute">
+  <div class="w-453px flex flex-col lr-box-bg overflow-hidden absolute">
     <Box
       title="安全事件单位排序"
       wHeader="60px"
-      class="animate__animated animate__fadeInLeft animate__faster"
+      class="mb-15px animate__animated animate__fadeInLeft animate__faster"
     >
       <TopBox />
     </Box>
-    <Box title="监控设备接入分布" class="animate__animated animate__fadeInLeft animate__fast">
+    <Box
+      title="监控设备接入分布"
+      class="mb-15px animate__animated animate__fadeInLeft animate__fast"
+    >
       <MiddleBox />
     </Box>
     <Box title="用户情况" class="animate__animated animate__fadeInLeft animate__1s">

src/views/home/leftboxtwo/middleBox.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="left-top-box">
-    <div class="flex gap-15px h-90px">
-      <div
-        class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center gap-2px"
-      >
+    <div class="flex h-90px">
+      <div class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center">
         <span>监控点位</span>
-        <Countto class="text-20px color-#389bff font-bold" :endVal="80" />
+        <Countto class="text-20px color-#389bff font-bold mt-2px" :endVal="80" />
       </div>
-      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center gap-2px">
+      <div class="ml-15px box-style flex-1 flex flex-col flex-justify-center flex-items-center">
         <span>智能分析</span>
-        <Countto class="text-20px color-#389bff font-bold" :endVal="60" />
+        <Countto class="text-20px color-#389bff font-bold mt-2px" :endVal="60" />
       </div>
     </div>
     <ECharts

src/views/home/middleBottomBox/components/advancedLinkage.vue

@@ -3,9 +3,9 @@
     <UseFullscreen v-slot="{ toggle, isFullscreen }">
       <div class="relative w-full h-full flex items-center">
         <pub-video-new :newClass="['al-video' + currentActive]" class="aspect-ratio-video" />
-        <div class="absolute top-10px right-10px flex flex-row-reverse gap-1 z-999">
+        <div class="absolute top-10px right-10px flex flex-row-reverse z-999">
           <!-- 全屏按钮 -->
-          <div class="all-screen popover-screen-full-trigger cursor-pointer">
+          <div class="all-screen popover-screen-full-trigger cursor-pointer ml-1">
             <Icon
               icon="icon-park-outline:off-screen"
               color="#8ac5ff"

src/views/home/middleBottomBox/components/joystick.vue

@@ -17,9 +17,9 @@
     </div>
     <div class="flex">
       <div class="joystick-wrapper">
-        <div class="buttons grid grid-cols-3 grid-rows-3 gap-1 w-38 h-38">
+        <div class="buttons grid grid-cols-3 grid-rows-3 w-38 h-38">
           <div
-            class="direction-button bg-#093f9d75 b-0 overflow-hidden p-2 transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
+            class="direction-button bg-#093f9d75 b-0 overflow-hidden p-2 m-1 transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"
             v-for="direction in directions"
             :style="{
               backgroundColor: direction === 'hr' && isHR ? 'rgb(59 130 246)' : ''
@@ -33,9 +33,9 @@
         </div>
       </div>
       <div class="slider-box flex-1 ml-1 w-140px">
-        <div class="slider-box-control h-full grid grid-cols-1 grid-rows-3 gap-1">
+        <div class="slider-box-control h-full grid grid-cols-1 grid-rows-3">
           <div
-            class="h-full text-20px line-height-45px text-center bg-#093f9d75 flex flex-justify-around flex-items-center"
+            class="h-full mb-1 text-20px line-height-45px text-center bg-#093f9d75 flex flex-justify-around flex-items-center"
           >
             <img
               src="@/assets/images/fd.png"
@@ -52,7 +52,7 @@
               v-on:[upEvent]="setPZTmove('sx', 'up')"
             />
           </div>
-          <div class="h-full text-20px line-height-45px text-center bg-#093f9d75">
+          <div class="h-full mb-1 text-20px line-height-45px text-center bg-#093f9d75">
             <!-- <img
               src="@/assets/images/jia.png"
               class="w-32px transition duration-200 ease-in-out active:bg-blue-500 focus:outline-none"

src/views/home/middleBottomBox/components/tour.vue

@@ -20,11 +20,12 @@
         /> -->
           <!-- </template> -->
           <!-- 操作按钮 -->
-          <div
-            class="tour-main-btn-box absolute top-10px right-10px flex flex-row-reverse z-999 gap-1"
-          >
+          <div class="tour-main-btn-box absolute top-10px right-10px flex flex-row-reverse z-999">
             <!-- 全屏按钮 -->
-            <div class="tour-main-all-screen screen-full-trigger cursor-pointer" alt="全屏按钮">
+            <div
+              class="tour-main-all-screen screen-full-trigger cursor-pointer ml-1"
+              alt="全屏按钮"
+            >
               <Icon
                 icon="icon-park-outline:off-screen"
                 color="#8ac5ff"

src/views/home/middleBottomBox/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="bottom-box">
-    <div class="button-part flex flex-col items-center justify-center gap-2 relative">
+    <div class="button-part flex flex-col items-center justify-center relative">
       <div
         :class="[
-          'transition-all absolute top--10',
+          'transition-all absolute top--10 mb-2',
           show ? 'transform-rotate-z-0' : 'transform-rotate-z-180'
         ]"
       >
@@ -16,9 +16,9 @@
         />
       </div>
       <transition name="scaleHide" @after-enter="onAfterEnter">
-        <div v-if="show" :class="['part-plan w-full flex gap-2 justify-between']">
+        <div v-if="show" :class="['part-plan w-full flex justify-between']">
           <div
-            class="w-50% relative flex flex-col bg-#00000080 overflow-hidden"
+            class="w-50% first:mr-2 relative flex flex-col bg-#00000080 overflow-hidden"
             v-for="(part, i) in partList"
             :key="i"
           >

src/views/home/middleTopBox/components/tool.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col">
     <div
-      class="relative w-52px h-52px flex justify-center items-center cursor-pointer"
+      class="relative mb-2 w-52px h-52px flex justify-center items-center cursor-pointer"
       v-for="(tool, i) in tools"
       :key="i"
       :style="{ background: `url(${tool.selected ? tool.yes : tool.no}) no-repeat center` }"
@@ -15,16 +15,16 @@
         'overflow-hidden origin-top-right transition duration-300 z-999 w-180px bg-[rgba(11,21,44,1)] absolute right-62px top-0'
       ]"
     >
-      <ul class="flex flex-col gap-1 p-2">
+      <ul class="flex flex-col p-2">
         <li
-          class="flex gap-1 items-center cursor-pointer"
+          class="flex mb-1 items-center cursor-pointer"
           v-for="(item, ii) in oneList"
           :key="ii"
           @click="oneClick(ii)"
         >
           <img v-show="ii === oneActive" :src="item.yes" alt="" />
           <img v-show="ii != oneActive" :src="item.no" alt="" />
-          <span>{{ item.name }}</span>
+          <span class="ml-1">{{ item.name }}</span>
         </li>
       </ul>
     </div>
@@ -34,16 +34,16 @@
         'overflow-hidden origin-top-right transition duration-300 z-999 w-180px bg-[rgba(11,21,44,1)] absolute right-62px top-180px'
       ]"
     >
-      <ul class="flex flex-col gap-1 p-2">
+      <ul class="flex flex-col p-2">
         <li
-          class="flex gap-1 items-center cursor-pointer"
+          class="flex mb-1 items-center cursor-pointer"
           v-for="(item, ii) in twoList"
           :key="ii"
           @click="twoClick(ii)"
         >
           <img v-show="ii === twoActive" :src="item.yes" alt="" />
           <img v-show="ii != twoActive" :src="item.no" alt="" />
-          <span>{{ item.name }}</span>
+          <span class="ml-1">{{ item.name }}</span>
         </li>
       </ul>
     </div>

src/views/home/rightbox/index.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute right-0">
+  <div class="w-453px flex flex-col lr-box-bg overflow-hidden absolute right-0">
     <Box title="安全生产危险分布点" class="animate__animated animate__fadeInRight animate__faster">
       <RightTopBox />
     </Box>
-    <Box title="监控设备接入分布" class="animate__animated animate__fadeInRight animate__fast">
+    <Box
+      title="监控设备接入分布"
+      class="mb-15px animate__animated animate__fadeInRight animate__fast"
+    >
       <MiddleBox />
     </Box>
     <Box
       title="报警类型TOP5"
       wHeader="124px"
-      class="animate__animated animate__fadeInRight animate__1s"
+      class="mb-15px animate__animated animate__fadeInRight animate__1s"
     >
       <RightBottomBox />
     </Box>

src/views/home/rightbox/middleBox.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="right-top-box">
-    <div class="flex gap-15px h-90px">
+    <div class="flex h-90px">
       <div
-        class="box-style color- flex-1 flex flex-col flex-justify-center flex-items-center gap-2px"
+        class="box-style mr-15px color- flex-1 flex flex-col flex-justify-center flex-items-center"
       >
         <span>监控点位</span>
-        <Countto class="text-20px color-#389bff font-bold" :endVal="80" />
+        <Countto class="text-20px mt-2px color-#389bff font-bold" :endVal="80" />
       </div>
-      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center gap-2px">
+      <div class="box-style flex-1 flex flex-col flex-justify-center flex-items-center">
         <span>智能分析</span>
-        <Countto class="text-20px color-#389bff font-bold" :endVal="60" />
+        <Countto class="text-20px mt-2px color-#389bff font-bold" :endVal="60" />
       </div>
     </div>
     <ECharts

src/views/home/rightbox/topBox.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="right-top-box">
-    <div class="flex gap-2 justify-between relative">
+    <div class="flex justify-between relative">
       <NScrollbar style="width: 40%; max-height: 230px">
-        <ul class="flex flex-col gap-15px justify-start">
+        <ul class="flex flex-col justify-start">
           <li
             :class="[
-              'rtb-item h-40px line-height-40px cursor-pointer text-center',
+              'rtb-item h-40px mb-15px last:mb-0 line-height-40px cursor-pointer text-center',
               i === typeSelectedI ? 'active-style b-color-#FAC858' : ''
             ]"
             v-for="(item, i) in typeOptions"
@@ -16,7 +16,7 @@
           </li>
         </ul>
       </NScrollbar>
-      <div class="flex-1">
+      <div class="flex-1 ml-2">
         <ECharts
           id="bjzx-echarts"
           width="100%"

src/views/home/rightboxtwo/index.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="w-453px flex flex-col gap-15px lr-box-bg overflow-hidden absolute right-0">
-    <Box title="安全生产危险分布点" class="animate__animated animate__fadeInRight animate__faster">
+  <div class="w-453px flex flex-col lr-box-bg overflow-hidden absolute right-0">
+    <Box
+      title="安全生产危险分布点"
+      class="mb-15px animate__animated animate__fadeInRight animate__faster"
+    >
       <RightTopBox />
     </Box>
-    <Box title="实时预警情况" class="animate__animated animate__fadeInRight animate__fast">
+    <Box title="实时预警情况" class="mb-15px animate__animated animate__fadeInRight animate__fast">
       <MiddleBox />
     </Box>
     <Box

src/views/home/rightboxtwo/topBox.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="right-top-box">
-    <div class="flex gap-2 justify-between relative">
+    <div class="flex justify-between relative">
       <NScrollbar style="width: 40%; max-height: 230px">
-        <ul class="flex flex-col gap-15px justify-start">
+        <ul class="flex flex-col justify-start">
           <li
             :class="[
-              'rtb-item h-40px line-height-40px cursor-pointer text-center',
+              'rtb-item mb-15px last:mb-0 h-40px line-height-40px cursor-pointer text-center',
               i === typeSelectedI ? 'active-style b-color-#FAC858' : ''
             ]"
             v-for="(item, i) in typeOptions"
@@ -16,7 +16,7 @@
           </li>
         </ul>
       </NScrollbar>
-      <div class="flex-1">
+      <div class="flex-1 ml-2">
         <ECharts
           id="bjzx-echarts2"
           width="100%"