feat:折叠面板元素显示问题

pages/material/inbound/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

pages/material/index/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <view>
+    <navbar-back title="实验室管理系统【试剂耗材管理】" titleWidth="800" :autoBack="false" leftIcon="" leftText="">
+      <u-icon @click="popupShow = true" size="28" color="#FFF" name="setting-fill" />
+    </navbar-back>
+
+    <up-grid :col="gridCol" :border="false">
+      <up-grid-item class="mb20 mt20" v-for="item in menuItemList" :key="item.id" @click="goTo(item.component)">
+        <u-icon :name="`/static/images/menus/${item.path}.png`" color="#0055A2" size="80" />
+        <view class="grid-text">{{ item.name }}</view>
+      </up-grid-item>
+    </up-grid>
+
+    <mePopup :show="popupShow" @update:show="val => (popupShow = val)" />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import nx from '@/nx'
+import { useGridCol } from '@/nx/hooks/useGridCol'
+import mePopup from '@/pages/index/me-popup.vue'
+
+// 响应式数据
+const popupShow = ref(false)
+
+const menuItemList = computed(() => {
+  let roleMenus = nx.$store('user').roleMenus
+  const result = roleMenus.find(item => item.path === 'material')
+  if (result) {
+    return result.children
+  } else {
+    return []
+  }
+})
+
+// 方法
+const goTo = url => {
+  nx.$router.go(url)
+}
+
+// 生命周期
+
+// 动态设置 grid 列数
+const { gridCol } = useGridCol([400], [2, 3])
+</script>
+
+<style scoped lang="scss">
+.grid-text {
+  font-size: 24px;
+}
+</style>