diff --git a/components/Default/SilderVerify.vue b/components/Default/SilderVerify.vue
new file mode 100644
index 0000000..236e899
--- /dev/null
+++ b/components/Default/SilderVerify.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="silder-range" :class="rangeStatus ? 'success' : ''">
+    <i
+      @mousedown="rangeMove"
+      :class="rangeStatus ? successIcon : startIcon"
+    ></i>
+    {{ rangeStatus ? successText : startText }}
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    //成功图标
+    successIcon: {
+      type: String,
+      default: "el-icon-success",
+    },
+    //成功文字
+    successText: {
+      type: String,
+      default: "验证成功",
+    },
+    //开始的图标
+    startIcon: {
+      type: String,
+      default: "el-icon-d-arrow-right",
+    },
+    //开始的文字
+    startText: {
+      type: String,
+      default: "拖动滑块到最右侧",
+    },
+  },
+  name: "SilderVerify",
+  data() {
+    return {
+      rangeStatus: "",
+    };
+  },
+  methods: {
+    rangeMove(e) {
+      let ele = e.target;
+      let startX = e.clientX;
+      let eleWidth = ele.offsetWidth;
+      let parentWidth = ele.parentElement.offsetWidth;
+      let MaxX = parentWidth - eleWidth;
+      if (this.rangeStatus) {
+        //不运行
+        return false;
+      }
+      document.onmousemove = (e) => {
+        let endX = e.clientX;
+        this.disX = endX - startX;
+        if (this.disX <= 0) {
+          this.disX = 0;
+        }
+        if (this.disX >= MaxX - eleWidth) {
+          //减去滑块的宽度,体验效果更好
+          this.disX = MaxX;
+        }
+        ele.style.transition = ".1s all";
+        ele.style.transform = "translateX(" + this.disX + "px)";
+        e.preventDefault();
+      };
+      document.onmouseup = () => {
+        if (this.disX !== MaxX) {
+          ele.style.transition = ".5s all";
+          ele.style.transform = "translateX(0)";
+
+          this.$emit("failed", this.rangeStatus);
+        } else {
+          this.rangeStatus = true;
+
+          this.$emit("success", this.rangeStatus);
+        }
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    },
+  },
+};
+</script>
+<style scoped>
+.silder-range {
+  background-color: #e3e4e6;
+  position: relative;
+  transition: 1s all;
+  user-select: none;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 45px; /*no*/
+}
+.silder-range i {
+  position: absolute;
+  left: 0;
+  width: 60px; /*no*/
+  height: 100%;
+  color: #919191;
+  background-color: #fff;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.silder-range.success {
+  background-color: #7ac23c;
+  color: #fff;
+}
+.silder-range.success i {
+  color: #7ac23c;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index acd1565..1d8d5bf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,14 +1,12 @@
-<template slot-scope><!--主页面-->
- <Head>
-      <Title>FreePotato Server</Title>
-      <Meta name="description" content="免费服务器~"/>
-</Head>
-    <ElRow :gutter="10" align="middle" style="height: 900px;">
-        <ElCol :span="24"><IndexNewsCarouel/></ElCol>
-        <ElCol :span="24"><IndexNewsStatus/></ElCol>
-    </ElRow>
+<template slot-scope>
+  <!--主页面-->
+  <Head>
+    <Title>FreePotato Server</Title>
+    <Meta name="description" content="免费服务器~" />
+  </Head>
+  <ElRow :gutter="10" align="middle" style="height: 900px">
+    <ElCol :span="24"><IndexNewsCarouel /></ElCol>
+    <ElCol :span="24"><IndexNewsStatus /></ElCol>
+  </ElRow>
 </template>
-<script setup lang="ts">
-
-
-</script>
\ No newline at end of file
+<script setup lang="ts"></script>
diff --git a/pages/register/index.vue b/pages/register/index.vue
index 612bb1c..c32674c 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -1,11 +1,11 @@
-<template>
+<template slot-scope>
   <!--注册页面-->
   <Head>
     <Title>注册页面</Title>
     <Meta name="description" />
   </Head>
   <div
-    style="width: 25%; margin: auto"
+    class="formbox"
     :style="{
       boxShadow: `var(--el-box-shadow-light)`,
     }"
@@ -18,7 +18,7 @@
         :model-value="form"
         @update:model-value="form = $event"
         validate-on="change"
-        style="padding: 30px"
+        style="padding: 5%"
       >
         <StaticElement tag="h4" align="center" content="注册" name="static" />
         <TextElement
@@ -29,7 +29,7 @@
           placeholder="昵称"
           :columns="{ container: 12, label: 3, wrapper: 8 }"
           rules="required|min:3|max:64"
-          @blur="Check()"
+          @input="Check()"
         />
         <PhoneElement
           ref="phone$"
@@ -43,9 +43,19 @@
           placeholder="+86"
           :columns="{ container: 12, label: 3, wrapper: 10 }"
           rules="required|min:14|max:14"
-          @blur="Check()"
+          @input="Check()"
           :disabled="phoneChecked"
         />
+        <StaticElement
+          name="static"
+          :columns="{ container: 12, label: 3, wrapper: 12 }"
+        >
+          <DefaultSilderVerify
+            @success="sliderHandleSuccess"
+            @failed="sliderHandleError"
+          />
+        </StaticElement>
+
         <TextElement
           name="code"
           label="验证码"
@@ -58,7 +68,7 @@
         />
         <ButtonElement
           name="button"
-          :columns="{ container: 4, label: 3, wrapper: 12 }"
+          :columns="{ container: 4, label: 4, wrapper: 12 }"
           @click="Send()"
           :button-label="codeBtnRef.text"
           :disabled="codeBtnRef.disabled || phoneChecked"
@@ -113,6 +123,14 @@ const username$ = ref(null);
 const phone$ = ref(null);
 const code$ = ref(null);
 const canSubmit = ref(false);
+let isBot = true;
+function sliderHandleSuccess() {
+  ElMessage({ message: "人机验证已通过", type: "success" });
+  isBot = false;
+}
+function sliderHandleError() {
+  ElMessage({ message: "人机验证未通过", type: "warning" });
+}
 function Check() {
   const query = {
     username: form.value.username,
@@ -145,7 +163,12 @@ function Check() {
   });
 }
 function Send() {
+  if (isBot) {
+    ElMessage({ message: "人机验证未通过", type: "warning" });
+    return;
+  }
   Check();
+
   if (!canSubmit.value) {
     $fetch("/api/test/sms", {
       method: "POST",
@@ -209,3 +232,14 @@ function CheckCode() {
   }
 }
 </script>
+<style>
+.formbox {
+  width: 25%;
+  margin: auto;
+}
+@media screen and (max-width: 1200px) {
+  .formbox {
+    width: 100%;
+  }
+}
+</style>
