diff --git a/pages/component/button/button.uvue b/pages/component/button/button.uvue
index 6a1c378a70d59b394ca7ffd25826ba2857709860..6dbd077149c99fdcefef78f180b2556e5f477d9c 100644
--- a/pages/component/button/button.uvue
+++ b/pages/component/button/button.uvue
@@ -1,47 +1,119 @@
-<script>
-import { type ItemType } from '@/components/enum-data/enum-data.vue'
-export default {
-	data() {
-		return {
-      plain_boolean: false,
-      disabled_boolean: false,
-      size_enum: [{"value":0,"name":"default"},{"value":1,"name":"mini"}] as ItemType[],
-      size_enum_current: 0,
-      type_enum: [{"value":0,"name":"default"},{"value":1,"name":"primary"},{"value":2,"name":"warn"}] as ItemType[],
-      type_enum_current: 0
-		}
-	},
-	methods: {
-    change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
-    change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
-    radio_change_size_enum(checked : number) { this.size_enum_current = checked },
-    radio_change_type_enum(checked : number) { this.type_enum_current = checked }
-	}
-}
-</script>
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <button
+          :type="type"
+          :size="size"
+          :plain="plain"
+          :disabled="disabled"
+          class="button test-button"
+        >
+          页面主操作 Normal
+        </button>
+        <!-- <button type="primary" :loading="loading" class="button">页面主操作 Loading</button> -->
+        <button type="primary" :disabled="true" class="button">
+          页面主操作 Disabled
+        </button>
 
-<template>
-	<view class="uni-flex-row">
-<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" :type="type_enum[type_enum_current].name" :plain="plain_boolean">uni-app-x</button>
-	</view>
-<!-- #ifdef APP -->
-<scroll-view style="flex:1">
-<!-- #endif -->
-<view class="content nvue">
+        <button type="default" class="button default-button" @click="addCount">
+          页面次要操作 Normal
+        </button>
+        <button type="default" :disabled="true" class="button disabled-button">
+          页面次要操作 Disabled
+        </button>
 
-    <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
+        <button type="warn" class="button">警告类操作 Normal</button>
+        <button type="warn" :disabled="true" class="button">
+          警告类操作 Disabled
+        </button>
 
-    <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+        <view class="button-sp-area">
+          <button type="primary" :plain="true" class="button text-button">
+            {{ text }}
+          </button>
+          <button type="primary" :disabled="true" :plain="true" class="button">
+            不可点击的按钮
+          </button>
 
-    <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
+          <button type="default" :plain="true" class="button">
+            按钮 plain背景镂空
+          </button>
+          <button type="default" :disabled="true" :plain="true" class="button">
+            按钮 Disabled
+          </button>
 
-    <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
-</view>
-<!-- #ifdef APP -->
-</scroll-view>
-<!-- #endif -->
+          <view class="uni-flex uni-row">
+            <button class="button mini-btn" type="primary" size="mini">
+              按钮 mini
+            </button>
+            <button class="button mini-btn" type="default" size="mini">
+              按钮 mini
+            </button>
+            <button class="button mini-btn" type="warn" size="mini">
+              按钮 mini
+            </button>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
+<script lang="ts">
+export default {
+  data() {
+    return {
+      title: 'button',
+      loading: false,
+      _timer: 0,
+      text: '文字来自data绑定',
+      type: 'primary',
+      size: 'default',
+      plain: false,
+      disabled: false,
+      count: 0,
+    }
+  },
+  onShow() {
+    // this.clearTimer();
+    // this._timer = setTimeout(() => {
+    //     // this.loading = true;
+    // }, 300)
+  },
+  onUnload() {
+    // this.clearTimer();
+    // this.loading = false;
+  },
+  methods: {
+    // clearTimer() {
+    //     if (this._timer != 0) {
+    //         clearTimeout(this._timer);
+    //     }
+    // }
+    addCount() {
+      this.count++
+    },
+  },
+}
+</script>
 
 <style>
+.button {
+  margin-top: 30rpx;
+}
 
+.button-sp-area {
+  margin: 0 auto;
+  width: 90%;
+}
+
+.mini-btn {
+  margin-right: 10rpx;
+  margin-bottom: 30rpx;
+}
 </style>