一排4个

1

src/views/co-ai/baseIndex.module.less

@@ -3,7 +3,8 @@
   // width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+  background: url('../../common/images/icon_bg.png') no-repeat center center /
+    cover;
   display: flex;
   flex-direction: column;
   padding: 61px 18px 18px 37px;
@@ -16,7 +17,7 @@
   width: 31px;
   height: 31px;
 
-  &>img {
+  & > img {
     width: 100%;
     height: 100%;
     object-fit: cover;
@@ -36,7 +37,6 @@
   width: 300px;
 
   :global {
-
     .van-search {
       width: 100%;
       z-index: 1;
@@ -47,11 +47,8 @@
       font-size: 12px;
     }
   }
-
 }
 
-
-
 .section {
   display: flex;
   // padding: 0 18px 0 27px;
@@ -65,15 +62,12 @@
     border-radius: 18px;
     margin-right: 15px;
 
-
-
-
     .directionc {
       overflow-y: auto;
       overflow-x: hidden;
       margin-top: 23px;
       padding: 12px 7px 12px;
-      background: #B5E1FF;
+      background: #b5e1ff;
       border-radius: 0 0 18px 18px;
       height: calc(100% - 24px);
 
@@ -100,9 +94,9 @@
 
       &.active {
         background-color: #fff;
-        background: #FEF8EF;
+        background: #fef8ef;
         border-radius: 6px;
-        color: #0CA2EA;
+        color: #0ca2ea;
       }
     }
   }
@@ -132,7 +126,7 @@
     display: flex;
     flex-wrap: wrap;
     padding-top: 18px;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
     // gap: 0 32px;
     // padding-left: 16px;
     // height: 100%;
@@ -162,12 +156,12 @@
 }
 
 .wrapfirstI {
-  // width: 25%;
+  width: 25%;
 }
 
 .wrapItem {
   position: relative;
-  width: 132px;
+  // width: 132px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -276,14 +270,18 @@
     height: 100%;
     z-index: 2;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right,
+    background-image: linear-gradient(
+        to right,
         rgba(0, 0, 0, 0.2) 0,
         rgba(255, 255, 255, 0.08) 0%,
-        transparent 0.5%),
-      linear-gradient(to right,
+        transparent 0.5%
+      ),
+      linear-gradient(
+        to right,
         rgba(0, 0, 0, 0.1) 0.3%,
         rgba(255, 255, 255, 0.09) 1.1%,
-        transparent 1.3%);
+        transparent 1.3%
+      );
     background-size: 50% 100%, 50% 100%;
     background-position: 0% top, 9% top;
   }
@@ -302,4 +300,4 @@
       opacity: 1;
     }
   }
-}
+}

src/views/co-ai/baseIndex.tsx

@@ -88,16 +88,16 @@ export default defineComponent({
       data.loading = false;
       isShowGuide.value = true;
 
-      nextTick(() => {
-        // 设置样式
-        const wrap = useRect(wrapRef);
-        const wrapItem = useRect(wrapItemRef.value[0]);
-        if (wrapItem.width > 0) {
-          wrapRef.value.style.width =
-            Math.floor(wrap.width / wrapItem.width) * wrapItem.width + 'px';
-          wrapRef.value.style.margin = '0 auto';
-        }
-      });
+      // nextTick(() => {
+      //   // 设置样式
+      //   const wrap = useRect(wrapRef);
+      //   const wrapItem = useRect(wrapItemRef.value[0]);
+      //   if (wrapItem.width > 0) {
+      //     wrapRef.value.style.width =
+      //       Math.floor(wrap.width / wrapItem.width) * wrapItem.width + 'px';
+      //     wrapRef.value.style.margin = '0 auto';
+      //   }
+      // });
     };
     onMounted(async () => {
       data.loading = true;