diff --git a/src/App.vue b/src/App.vue
index bc3baf3..5a37691 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -16,4 +16,8 @@
     console.log('App Hide');
   });
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+  page {
+    background-color: #f2f2f2;
+  }
+</style>
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index 2b9a0ff..4c706a3 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -1,7 +1,69 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import BasicButton from '@/components/BasicButton/index.vue';
+  import { router } from '@/utils/router';
+  import { useAuthStore } from '@/state/modules/auth';
+  import { ref } from 'vue';
+  import { onShow } from '@dcloudio/uni-app';
+  const authStore = useAuthStore();
+  const isLogin = ref(false);
+  onShow(() => {
+    isLogin.value = authStore.isLogin;
+  });
+  const handleJump = (url: string) => {
+    router.push(url);
+  };
+
+  // 登出
+  const handleLoginOut = () => {
+    authStore.loginOut().then((res) => {
+      isLogin.value = false;
+    });
+  };
+</script>
 
 <template>
-  <view> 页面模板 </view>
+  <view class="container">
+    <view class="head-wrap">
+      <view class="avatar">
+        <image class="img" src="/static/images/avatar.png"></image>
+      </view>
+      <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
+    </view>
+    <view class="cell"><BasicButton @click="handleJump('/pages/log/index')">log</BasicButton></view>
+    <view class="cell" v-if="isLogin"><BasicButton @click="handleLoginOut">登出</BasicButton></view>
+    <view class="cell" v-else
+      ><BasicButton @click="handleJump('/pages/login/index')">登入</BasicButton></view
+    >
+  </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .container {
+    padding: 96rpx 24rpx;
+    .head-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .avatar {
+        height: 120rpx;
+        width: 120rpx;
+        border: 2rpx solid #d1d5db;
+        border-radius: 120rpx;
+        overflow: hidden;
+        padding: 6rpx;
+        .img {
+          height: 100%;
+          width: 100%;
+        }
+      }
+      .desc {
+        font-size: 28rpx;
+        line-height: 120rpx;
+      }
+    }
+    .cell {
+      margin-top: 60rpx;
+      text-align: center;
+    }
+  }
+</style>
diff --git a/src/pages/log/index.vue b/src/pages/log/index.vue
index fa1b74e..01fc8c2 100644
--- a/src/pages/log/index.vue
+++ b/src/pages/log/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>log</view>
+  <view style="line-height: 88rpx; text-align: center">登录后访问log</view>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index d922778..f4d8272 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -15,7 +15,6 @@
   });
   const authStore = useAuthStore();
   const submit = (e: any) => {
-    console.log(e);
     authStore.login(e.detail.value).then((res) => {
       Toast('登录成功', { duration: 1500 });
       setTimeout(() => {
diff --git a/src/static/images/atom.png b/src/static/images/atom.png
deleted file mode 100644
index 754d0af..0000000
Binary files a/src/static/images/atom.png and /dev/null differ
diff --git a/src/static/images/avatar.png b/src/static/images/avatar.png
new file mode 100644
index 0000000..c46906d
Binary files /dev/null and b/src/static/images/avatar.png differ