feat: update pages

src/app.vue

@@ -10,6 +10,7 @@ watch(active, name => router.push({ name }))
 </script>
 
 <template>
+  <van-nav-bar title="微智护" />
   <router-view />
   <van-tabbar v-model="active">
     <van-tabbar-item name="index" icon="wap-home-o">首页</van-tabbar-item>

src/main.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import App from './app.vue'
 import Vant from 'vant'
 import 'vant/lib/index.css'
+import './style.css'
 
 const modules = import.meta.glob('./pages/*.vue')
 const router = createRouter({

src/pages/index.vue

@@ -1,3 +1,9 @@
 <template>
-  <h1>微智护</h1>
-</template>
+  <van-steps>
+    <van-step>本机</van-step>
+    <van-step>网关</van-step>
+    <van-step>终端</van-step>
+  </van-steps>
+  <div class="subtitle">设备列表</div>
+  <van-skeleton row="5" />
+</template>

src/pages/live.vue

@@ -1,3 +1,3 @@
 <template>
-  实况
+  <van-skeleton row="5" />
 </template>

src/pages/profile.vue

@@ -1,3 +1,31 @@
 <template>
-  我的
-</template>
+  <div class="profile">
+    <div class="avatar">
+      <van-icon name="user-o" size="30" color="white" />
+    </div>
+    <div class="name">测试用户</div>
+  </div>
+  <van-cell-group>
+    <van-cell title="用户名" value="admin" />
+  </van-cell-group>
+  <van-button type="danger" block>退出登录</van-button>
+</template>
+
+<style scoped>
+.profile {
+  display: flex;
+  padding: 10px;
+  gap: 10px;
+}
+
+.name {
+  font-size: 0.9rem;
+}
+
+.avatar {
+  display: inline-block;
+  padding: 10px;
+  border-radius: 100%;
+  background-color: lightgray;
+}
+</style>

src/pages/stats.vue

@@ -1,3 +1,3 @@
 <template>
-  统计
+  <van-skeleton row="5" />
 </template>

src/style.css

@@ -0,0 +1,10 @@
+.van-button--block {
+  width: calc(100% - 20px);
+  margin: auto;
+}
+
+.subtitle {
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin: 10px;
+}