新增个人首页

 <template>
 <template>
-  <div class="person-index-page"></div>
+  <div class="person-index-page">
+    <div class="header-wrapper">
+      <div class="info">
+        <van-row>
+          <van-col>
+            <van-image round width="50" height="50" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+              style="padding-right: 1rem;" />
+          </van-col>
+          <van-col class="text-wrapper" span="18">
+            <div>
+              <div class="username">瑟日古娜</div>
+              <div class="toggle-user" @click="toggleUser"><van-icon name="plus" />&nbsp;关注</div>
+            </div>
+            <div class="address">呼和浩特市新城区蒙古族幼儿园</div>
+          </van-col>
+        </van-row>
+      </div>
+
+      <div class="sub-data">
+        <van-row>
+          <van-col span="11" offset="1" class="un-tap-color">
+            <p>获赞</p>
+            <p>25478</p>
+          </van-col>
+          <van-col span="1" class="divide">|</van-col>
+          <van-col span="11" class="un-tap-color">
+            <p>粉丝</p>
+            <p>45</p>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+    <div style="padding: 0 1rem; background-color: #F7F7F7;">
+      <van-row>
+        <van-col span="6">
+          <div style="color: #222222; font-size: 1.1rem; border-bottom: 2px solid #F9D95C; padding: 0.5rem; text-align: center;">发布作品</div>
+        </van-col>
+        <van-col span="12" offset="6" style="text-align: right; color: #626262;">
+          <div style="padding-top: 0.5rem;">6个作品</div>
+        </van-col>
+      </van-row>
+    </div>
+    <div>
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+        <template v-for="item in dataList" :key="item" style="height: 3rem;">
+          <video-card :item="item"></video-card>
+        </template>
+      </van-list>
+    </div>
+  </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
+import dataList from '@/mock/video_list'
+import VideoCard from '@/components/VideoCard/index.vue'
+
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
@@ -11,9 +63,32 @@ import { Toast } from 'vant';
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 
 
-  onMounted(() => {
+// 处理书籍下作品列表
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 20; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 100) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
+onMounted(() => {
 
 
-  })
+})
 </script>
 </script>
 
 
 <script>
 <script>
@@ -21,12 +96,12 @@ import mixin from 'common/mixin';
 
 
 export default {
 export default {
   mixins: [mixin.init],
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
     return {
 
 
     }
     }
   },
   },
-  mounted () {
+  mounted() {
 
 
   },
   },
   methods: {
   methods: {
@@ -36,5 +111,59 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-.person-index-page {}
+.person-index-page {
+  .header-wrapper {
+    background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
+
+    .info {
+      padding: 2rem;
+      padding-right: 0;
+
+      .text-wrapper {
+        line-height: 1.5;
+
+        .username {
+          display: inline-block;
+          overflow: auto;
+          font-size: 1.15rem;
+          color: #222222;
+        }
+
+        .toggle-user {
+          float: right;
+          font-size: 0.8rem;
+          background-color: white;
+          border-radius: 15px;
+          padding: 5px 10px;
+          color: #713610;
+        }
+      }
+
+      .address {
+        font-size: 0.85rem;
+        color: #999999;
+      }
+    }
+
+    .sub-data {
+      text-align: center;
+      overflow: auto;
+      padding-bottom: 1rem;
+
+      .un-tap-color {
+        color: #666666;
+      }
+
+      .tap-color {
+        color: #713610;
+      }
+
+      .divide {
+        line-height: 2.5;
+        color: #999999;
+        font-size: 1rem;
+      }
+    }
+  }
+}
 </style>
 </style>
\ No newline at end of file