修改注册页面UI排版，添加手机验证码倒计时

src/views/Dashboard.vue

@@ -94,6 +94,33 @@
         <div class="col-span-12 mt-5">
           <div class="intro-y flex items-center h-10">
             <h2 class="text-lg font-medium truncate mr-5 mr-auto">我的财务</h2>
+
+            <div class="relative intro-y">
+              <div
+                class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
+              >
+                <CalendarIcon class="w-4 h-4" />
+              </div>
+              <LitePicker
+                v-model="daterange"
+                :options="{
+                  autoApply: false,
+                  singleMode: false,
+                  numberOfColumns: 2,
+                  numberOfMonths: 2,
+                  showWeekNumbers: true,
+                  dropdowns: {
+                    minYear: 1990,
+                    maxYear: null,
+                    months: true,
+                    years: true,
+                  },
+                }"
+                class="input w-64 border block mx-auto"
+                style="text-indent: 40px;"
+              />
+            </div>
+
             <!-- <div class="dropdown mt-3 sm:mt-0 mr-auto sm:mr-0">时间选择器</div> -->
           </div>
         </div>
@@ -258,6 +285,8 @@ export default {
   data() {
     return {
       salesReportFilter: "",
+      date: "",
+      daterange: "",
       CardData: {
         img: require("../assets/images/ios.png"),
       },

src/views/Datepicker.vue

@@ -97,7 +97,7 @@
                 <div
                   class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
-                  <CalendarIcon class="w-4 h-4" />
+                <CalendarIcon class="w-4 h-4" />
                 </div>
                 <LitePicker
                   v-model="date"
@@ -157,7 +157,7 @@
                 </Highlight>
               </div>
             </div>
-          </div>
+          </div>   
         </div>
         <!-- END: Input Group -->
       </div>

src/views/Register.vue

@@ -40,11 +40,9 @@
             <h2
               class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left"
             >
-              Sign Up
+              注册
             </h2>
-            <div
-              class="intro-x mt-2 text-gray-500 xl:hidden text-center"
-            >
+            <div class="intro-x mt-2 text-gray-500 xl:hidden text-center">
               A few more clicks to sign in to your account. Manage all your
               e-commerce accounts in one place
             </div>
@@ -52,24 +50,19 @@
               <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block"
-                placeholder="First Name"
+                placeholder="账号"
               />
-              <input
+              <!-- <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
                 placeholder="Last Name"
-              />
+              /> -->
               <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
-                placeholder="Email"
+                placeholder="密码"
               />
-              <input
-                type="text"
-                class="intro-x login__input input input--lg border border-gray-300 block mt-4"
-                placeholder="Password"
-              />
-              <div class="intro-x w-full grid grid-cols-12 gap-4 h-1 mt-3">
+              <!-- <div class="intro-x w-full grid grid-cols-12 gap-4 h-1 mt-3">
                 <div class="col-span-3 h-full rounded bg-theme-9"></div>
                 <div class="col-span-3 h-full rounded bg-theme-9"></div>
                 <div class="col-span-3 h-full rounded bg-theme-9"></div>
@@ -81,12 +74,23 @@
                 href=""
                 class="intro-x text-gray-600 block mt-2 text-xs sm:text-sm"
                 >What is a secure password?</a
-              >
+              > -->
               <input
                 type="text"
                 class="intro-x login__input input input--lg border border-gray-300 block mt-4"
-                placeholder="Password Confirmation"
+                placeholder="密码确认"
               />
+              <div class="phone-box">
+                <input
+                  type="text"
+                  class="intro-x login__input input input--lg border border-gray-300 block mt-4"
+                  placeholder="手机号"
+                  v-model="info.phone"
+                />
+                <span class="getYZM" @click="sendMobile">{{
+                  btnMsg == null ? countNum + "s后重新发送" : btnMsg
+                }}</span>
+              </div>
             </div>
             <div
               class="intro-x flex items-center text-gray-700 mt-4 text-xs sm:text-sm"
@@ -97,11 +101,9 @@
                 class="input border mr-2"
               />
               <label class="cursor-pointer select-none" for="remember-me"
-                >I agree to the Envato</label
+                >我同意保护</label
               >
-              <a class="text-theme-1 ml-1" href=""
-                >Privacy Policy</a
-              >.
+              <a class="text-theme-1 ml-1" href="">隐私政策</a>
             </div>
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
               <button
@@ -126,15 +128,90 @@
 
 <script>
 export default {
+  data() {
+    return {
+      // 倒计时周期
+      countNum: 60,
+      // 用于倒计时标记，true-正在倒计时
+      countFlag: false,
+      // 定时器
+      intervalBtn: {},
+      //默认按钮的值
+      btnMsg: "点击发送验证码",
+      info: {
+        phone: "",
+      },
+    };
+  },
   mounted() {
-    cash("body")
-      .removeClass("app")
-      .addClass("login");
+    cash("body").removeClass("app").addClass("login");
   },
   methods: {
-    getSignUp:function(){
-      this.$router.push('/')
-    }
-  }
+    getSignUp: function () {
+      this.$router.push("/");
+    },
+
+    // 倒计时
+    countDown() {
+      // 设置btn倒计时时显示的信息
+      this.btnMsg = null;
+      // 更改btn状态
+      this.countFlag = !this.countFlag;
+      // 设置倒计时
+      this.intervalBtn = setInterval(() => {
+        if (this.countNum <= 0) {
+          // 重置btn提示信息
+          this.btnMsg = "点击发送验证码";
+          // 清除定时器
+          clearInterval(this.intervalBtn);
+          // 更改btn状态
+          this.countFlag = !this.countFlag;
+          // 重置倒计时状态
+          this.countNum = 5;
+        }
+        // 倒计时
+        this.countNum--;
+      }, 1000);
+    },
+ 
+
+    // 获取验证码
+    sendMobile() {
+       
+      if(this.btnMsg === null) {
+        return
+      }
+      
+      //获取输入手机号码
+      let mobile = this.info.phone;
+      //正则校验手机号是否合法
+      if (!/^1(3|4|5|7|8)\d{9}$/.test(mobile)) {
+        alert("手机号错误");
+        return;
+      }
+      //触发定时器方法
+      this.countDown();
+    },
+  },
 };
 </script>
+
+
+<style scoped>
+.phone-box {
+  position: relative;
+  /* overflow: hidden; */
+}
+
+.getYZM {
+  position: absolute;
+  right: 13px;
+  top: 13px;
+  z-index: 999;
+  cursor: pointer;
+}
+
+.getYZM:active {
+  color: #1890ff;
+}
+</style>