stylus 语法换成 saas 语法

web/src/components/Captcha.vue

@@ -1,8 +1,17 @@
 <template>
   <el-container class="captcha-box">
-    <el-dialog v-model="show" :close-on-click-modal="true" :show-close="isMobileInternal" style="width: 360px; --el-dialog-padding-primary: 5px 15px 15px 15px">
+    <el-dialog
+      v-model="show"
+      :close-on-click-modal="true"
+      :show-close="isMobileInternal"
+      style="width: 360px; --el-dialog-padding-primary: 5px 15px 15px 15px"
+    >
       <template #header>
-        <div class="text-center p-3" style="color: var(--el-text-color-primary)" v-if="isMobileInternal">
+        <div
+          class="text-center p-3"
+          style="color: var(--el-text-color-primary)"
+          v-if="isMobileInternal"
+        >
           <span>人机验证</span>
         </div>
       </template>
@@ -31,113 +40,111 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-import lodash from "lodash";
-import { validateEmail, validateMobile } from "@/utils/validate";
-import { httpGet, httpPost } from "@/utils/http";
-import CaptchaPlus from "@/components/CaptchaPlus.vue";
-import SlideCaptcha from "@/components/SlideCaptcha.vue";
-import { isMobile } from "@/utils/libs";
-import { showMessageError, showMessageOK } from "@/utils/dialog";
+import CaptchaPlus from '@/components/CaptchaPlus.vue'
+import SlideCaptcha from '@/components/SlideCaptcha.vue'
+import { showMessageError } from '@/utils/dialog'
+import { httpGet, httpPost } from '@/utils/http'
+import { isMobile } from '@/utils/libs'
+import lodash from 'lodash'
+import { ref } from 'vue'
 
-const show = ref(false);
-const maxDot = ref(5);
-const imageBase64 = ref("");
-const thumbBase64 = ref("");
-const captKey = ref("");
-const dots = ref(null);
-const isMobileInternal = isMobile();
+const show = ref(false)
+const maxDot = ref(5)
+const imageBase64 = ref('')
+const thumbBase64 = ref('')
+const captKey = ref('')
+const dots = ref(null)
+const isMobileInternal = isMobile()
 
-const emits = defineEmits(["success"]);
+const emits = defineEmits(['success'])
 const handleRequestCaptCode = () => {
-  httpGet("/api/captcha/get")
+  httpGet('/api/captcha/get')
     .then((res) => {
-      const data = res.data;
-      imageBase64.value = data.image;
-      thumbBase64.value = data.thumb;
-      captKey.value = data.key;
+      const data = res.data
+      imageBase64.value = data.image
+      thumbBase64.value = data.thumb
+      captKey.value = data.key
     })
     .catch((e) => {
-      showMessageError("获取人机验证数据失败：" + e.message);
-    });
-};
+      showMessageError('获取人机验证数据失败：' + e.message)
+    })
+}
 
 const handleConfirm = (dts) => {
   if (lodash.size(dts) <= 0) {
-    return showMessageError("请进行人机验证再操作");
+    return showMessageError('请进行人机验证再操作')
   }
 
-  let dotArr = [];
+  let dotArr = []
   lodash.forEach(dts, (dot) => {
-    dotArr.push(dot.x, dot.y);
-  });
-  dots.value = dotArr.join(",");
-  httpPost("/api/captcha/check", {
+    dotArr.push(dot.x, dot.y)
+  })
+  dots.value = dotArr.join(',')
+  httpPost('/api/captcha/check', {
     dots: dots.value,
     key: captKey.value,
   })
     .then(() => {
       // ElMessage.success('人机验证成功')
-      show.value = false;
-      emits("success", { key: captKey.value, dots: dots.value });
+      show.value = false
+      emits('success', { key: captKey.value, dots: dots.value })
     })
     .catch(() => {
-      showMessageError("人机验证失败");
-      handleRequestCaptCode();
-    });
-};
+      showMessageError('人机验证失败')
+      handleRequestCaptCode()
+    })
+}
 
 const loadCaptcha = () => {
-  show.value = true;
+  show.value = true
   // 手机用滑动验证码
   if (isMobile()) {
-    getSlideCaptcha();
+    getSlideCaptcha()
   } else {
-    handleRequestCaptCode();
+    handleRequestCaptCode()
   }
-};
+}
 
 // 滑动验证码
-const bgImg = ref("");
-const bkImg = ref("");
-const result = ref(0);
+const bgImg = ref('')
+const bkImg = ref('')
+const result = ref(0)
 
 const getSlideCaptcha = () => {
-  result.value = 0;
-  httpGet("/api/captcha/slide/get")
+  result.value = 0
+  httpGet('/api/captcha/slide/get')
     .then((res) => {
-      bkImg.value = res.data.bkImg;
-      bgImg.value = res.data.bgImg;
-      captKey.value = res.data.key;
+      bkImg.value = res.data.bkImg
+      bgImg.value = res.data.bgImg
+      captKey.value = res.data.key
     })
     .catch((e) => {
-      showMessageError("获取人机验证数据失败：" + e.message);
-    });
-};
+      showMessageError('获取人机验证数据失败：' + e.message)
+    })
+}
 
 const handleSlideConfirm = (x) => {
-  httpPost("/api/captcha/slide/check", {
+  httpPost('/api/captcha/slide/check', {
     key: captKey.value,
     x: x,
   })
     .then(() => {
-      result.value = 1;
-      show.value = false;
-      emits("success", { key: captKey.value, x: x });
+      result.value = 1
+      show.value = false
+      emits('success', { key: captKey.value, x: x })
     })
     .catch(() => {
-      result.value = 2;
-    });
-};
+      result.value = 2
+    })
+}
 
 // 导出方法以便父组件调用
 defineExpose({
   loadCaptcha,
-});
+})
 </script>
 
-<style lang="stylus">
-
+<style lang="scss">
 .captcha-box {
   .el-dialog {
     .el-dialog__header {