完善我的页面

Yi.Vue3.x.Vant/src/App.vue

@@ -1,14 +1,16 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
+
 
 <template>
+
+  <!-- <HelloWorld msg="123"></HelloWorld> -->
   <router-view></router-view>
 
 </template>
+<script setup lang="ts">
 
+
+
+</script>
 <style scoped>
 
 </style>

Yi.Vue3.x.Vant/src/components/AppGrid.vue

@@ -0,0 +1,31 @@
+<template>
+    <van-row>
+        <van-col span="24">
+          <p >  {{data.head}}</p>
+        </van-col>
+        <van-col class="col-body" span="6"  v-for="item in data.body"><van-icon name="chat-o" size="2rem" /> <br>{{item.title}}</van-col>
+    </van-row>
+
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import {AppGridData} from '@/type/class/AppGridData.ts'
+defineProps<{ data: AppGridData }>()
+const count = ref(0)
+</script>
+<style scoped>
+.col-body
+{
+text-align: center;
+
+}
+.col-body .van-icon
+{
+    margin-bottom: 0.6rem;
+}
+p{
+font-size: large;
+font-weight: 545;
+}
+</style>
+

Yi.Vue3.x.Vant/src/type/class/AppGridData.ts

@@ -0,0 +1,11 @@
+export class AppGridData{
+    head!: string;
+    body!: AppGridBody[];
+}
+
+
+
+class AppGridBody{
+    icon!: string;
+    title!: string;
+}

Yi.Vue3.x.Vant/src/view/main/square.vue

@@ -1,16 +1,14 @@
 <template >
-    <van-row  >
-<van-col span="24">
-    <div class="test">这里是广场页面</div>
-</van-col>
 
-    </van-row>
-   
 
+  <van-row class="test ">
+    <van-col span="24">
+      <!-- <div class="test">这里是广场页面</div> -->
+    </van-col>
+
+  </van-row>
+
+  <van-col span="24"></van-col>
 </template>
 <style scoped>
-.test
-{
-
-}
 </style>

Yi.Vue3.x.Vant/src/view/my.vue

@@ -29,9 +29,46 @@
             <van-col span="12" >   <van-button class="btn" type="primary">我的签到</van-button></van-col>
         </van-row>
           </van-col >
+
+
+          <AppGrid class="grid" :data='data'></AppGrid>
+          <AppGrid class="grid" :data='data'></AppGrid>
+          <AppGrid class="grid" :data='data'></AppGrid>
     </van-row>
+
+
+
 </template>
+<script setup lang="ts">
+import AppGrid from '@/components/AppGrid.vue'
+import {AppGridData} from '@/type/class/AppGridData.ts'
+let data :AppGridData={
+  head:"你好压抑",
+  body:[
+  {
+    title:"你好",
+    icon:"123"
+  },
+  {
+    title:"你好2",
+    icon:"123"
+  },
+  {
+    title:"你好2",
+    icon:"123"
+  },
+  {
+    title:"你好2",
+    icon:"123"
+  },
+]
+};
+</script>
 <style scoped>
+.grid{
+    width: 100%;
+    margin-top: 1rem;
+}
 .headRow{
     padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 }