样式调整

src/views/entrances/list/index.vue

@@ -1,6 +1,6 @@
 <!-- 门墩儿入口管理列表 -->
 <template>
-  <div class="d-flex justify-center" style="margin-top: 130px;">
+  <div class="d-flex justify-center" style="margin-top: 80px;">
     <div style="text-align: center;">
       <div style="font-size: 40px; font-weight: bold;">
         <span v-for="(val, i) in bigTitle" :key="'bigTitle' + i" :class="{'ml-2': i}">{{ val }}</span>
@@ -10,15 +10,17 @@
       </div>
     </div>
   </div>
-  <div class="listBox mt-15">
-    <div
-      v-for="(item, index) in menuList" :key="'menu' + index"
-      class="listItem mb-5 mx-3"
-      @click="handleClick(item)"
-    >
-      <v-icon color="primary" size="50" class="mt-6" style="height: 100px; line-height: 100px;">{{ item.icon }}</v-icon>
-      <div style="font-size: 18px;">{{ item.title }}</div>
-      <div style="font-size: 14px;" class="defaultLink mt-3">立即体验 ></div>
+  <div class="mt-15">
+    <div class="listBox" v-for="(val, index) in menuList" :key="'menuBox' + index">
+      <div
+        v-for="(item, index) in val" :key="'menu' + index"
+        class="listItem mb-5 mx-3"
+        @click="handleClick(item)"
+      >
+        <v-icon color="primary" size="50" class="mt-6" style="height: 100px; line-height: 100px;">{{ item.icon }}</v-icon>
+        <div style="font-size: 18px;">{{ item.title }}</div>
+        <div style="font-size: 14px;" class="defaultLink mt-3">立即体验 ></div>
+      </div>
     </div>
   </div>
 </template>
@@ -42,9 +44,20 @@ const menuList = ref([
   { icon: 'mdi-town-hall', title: '门墩儿产业与院校联合会', to: '' },
 ])
 
- const handleClick = (item) => {
-  window.open(item.to)
- }
+// 每行三个
+const chunkArray = (arr, chunkSize) => {
+  const newArr = []
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    const chunk = arr.slice(i, i + chunkSize)
+    newArr.push(chunk)
+  }
+  return newArr
+}
+menuList.value = chunkArray(menuList.value, 3) // 分割数据
+
+const handleClick = (item) => {
+if (item.to) window.open(item.to)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +67,7 @@ const menuList = ref([
   justify-content: center;
   .listItem {
     width: 250px;
-    height: 250px;
+    height: 230px;
     background-color: #fff;
     cursor: pointer;
     border-radius: 8px;