perf:修改站点列表

portal-manager-ui/admin/src/views/siteArrange/siteArrange.vue

@@ -45,22 +45,24 @@
           @end="changeCollect"
         >
           <div
-            class="common-item w-full flex flex-col items-center cursor-pointer"
+            class="common-item w-full flex flex-col items-center"
             v-for="(v, i) in collectList"
             :key="'' + v.id + i"
-            @click="openWindow(v)"
           >
             <div class="item-logo item-logo1">
               <img
-                class="w-full h-full object-cover"
+                class="w-full h-full object-cover cursor-pointer"
                 :src="api + v.modelIcon"
+                @click="openWindow(v)"
               />
               <img
                 class="bottom-img"
                 src="@/assets/images/siteArrange/pic-bottom.png"
               />
             </div>
-            <div class="text-white mt-[10px] leading-[20px]">
+            <div
+              class="text-white mt-[10px] leading-[20px] text-center cursor-default"
+            >
               {{ v.modelName }}
             </div>
           </div>
@@ -92,18 +94,19 @@
             @end="isAdd = false"
           >
             <div
-              class="common-item w-[160px] flex flex-col items-center cursor-pointer"
+              class="common-item w-full h-[130px] flex flex-col items-center"
               v-for="item in v.list"
               :key="item.id"
-              @click="openWindow(item)"
             >
-              <div class="item-logo">
+              <div class="item-logo" @click="openWindow(item)">
                 <img
-                  class="w-full h-full object-cover"
+                  class="w-full h-full object-cover cursor-pointer"
                   :src="api + item.modelIcon"
                 />
               </div>
-              <div class="text-white mt-[10px] leading-[20px]">
+              <div
+                class="text-white mt-[10px] leading-[20px] text-center cursor-default"
+              >
                 {{ item.modelName }}
               </div>
             </div>
@@ -327,16 +330,53 @@ export default {
         padding: 0px 6px;
         height: 200px;
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
+        // grid-template-rows: repeat(3, 140px);
         grid-row-gap: 10px;
+        align-content: start;
         overflow-y: auto;
+        &::-webkit-scrollbar {
+          display: none; /* Chrome Safari */
+        }
+        // &::-webkit-scrollbar {
+        //   width: 2px;
+        //   height: 2px;
+        //   overflow-y: auto;
+        // }
+
+        // &::-webkit-scrollbar-thumb {
+        //   border-radius: 2px;
+        //   background-image: linear-gradient(
+        //     180deg,
+        //     #0000 0%,
+        //     #fff 30%,
+        //     #0000 90%
+        //   );
+        // }
+
+        // &::-webkit-scrollbar-track {
+        //   border-radius: 2px;
+        //   background: #0000;
+        // }
       }
       &:nth-child(1) {
+        .type-list {
+          border-style: solid;
+          border-right-width: 2px;
+          border-image: linear-gradient(180deg, #0000 0%, #fff 30%, #0000 90%) 1;
+          // border-image-slice: 2;
+        }
         .item-logo {
           background: linear-gradient(180deg, #c7e1f6 0%, #ffffff 85%);
         }
       }
       &:nth-child(2) {
+        .type-list {
+          border-style: solid;
+          border-right-width: 2px;
+          border-image: linear-gradient(180deg, #0000 0%, #fff 30%, #0000 90%) 1;
+          // border-image-slice: 2;
+        }
         .item-logo {
           background: linear-gradient(180deg, #c7f6db 0%, #ffffff 85%);
         }