stylus 语法换成 saas 语法

web/src/components/BindMobile.vue

@@ -1,25 +1,25 @@
 <template>
   <el-dialog
-      v-model="showDialog"
-      :close-on-click-modal="true"
-      style="max-width: 400px"
-      @close="close"
-      :title="title"
+    v-model="showDialog"
+    :close-on-click-modal="true"
+    style="max-width: 400px"
+    @close="close"
+    :title="title"
   >
     <div class="form">
       <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
 
       <el-form label-position="top">
         <el-form-item label="手机号">
-          <el-input v-model="form.mobile"/>
+          <el-input v-model="form.mobile" />
         </el-form-item>
         <el-form-item label="验证码">
           <el-row :gutter="0">
             <el-col :span="16">
-              <el-input v-model="form.code" maxlength="6"/>
+              <el-input v-model="form.code" maxlength="6" />
             </el-col>
             <el-col :span="8" style="padding-left: 10px">
-              <send-msg :receiver="form.mobile" size="default" type="mobile"/>
+              <send-msg :receiver="form.mobile" size="default" type="mobile" />
             </el-col>
           </el-row>
         </el-form-item>
@@ -28,24 +28,22 @@
 
     <template #footer>
       <span class="dialog-footer">
-        <el-button type="primary" @click="save">
-          提交绑定
-        </el-button>
+        <el-button type="primary" @click="save"> 提交绑定 </el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script setup>
-import {computed, ref, watch} from "vue";
-import SendMsg from "@/components/SendMsg.vue";
-import {ElMessage} from "element-plus";
-import {httpPost} from "@/utils/http";
-import {checkSession} from "@/store/cache";
+import SendMsg from '@/components/SendMsg.vue'
+import { checkSession } from '@/store/cache'
+import { httpPost } from '@/utils/http'
+import { ElMessage } from 'element-plus'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
   show: Boolean,
-});
+})
 
 const showDialog = computed(() => {
   return props.show
@@ -55,56 +53,58 @@ const title = ref('绑定手机')
 const mobile = ref('')
 const form = ref({
   mobile: '',
-  code: ''
+  code: '',
 })
 
 watch(showDialog, (val) => {
   if (val) {
     form.value = {
       mobile: '',
-      code: ''
+      code: '',
     }
 
-    checkSession().then(user => {
+    checkSession().then((user) => {
       mobile.value = user.mobile
     })
   }
 })
 
-const emits = defineEmits(['hide']);
+const emits = defineEmits(['hide'])
 
 const save = () => {
   if (form.value.code === '') {
-    return ElMessage.error("请输入验证码");
+    return ElMessage.error('请输入验证码')
   }
 
-  httpPost('/api/user/bind/mobile', form.value).then(() => {
-    ElMessage.success("绑定成功")
-    emits('hide')
-  }).catch(e => {
-    ElMessage.error("绑定失败：" + e.message);
-  })
+  httpPost('/api/user/bind/mobile', form.value)
+    .then(() => {
+      ElMessage.success('绑定成功')
+      emits('hide')
+    })
+    .catch((e) => {
+      ElMessage.error('绑定失败：' + e.message)
+    })
 }
 
 const close = function () {
-  emits('hide');
+  emits('hide')
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 .form {
   .text-center {
-    text-align center
-    padding-bottom 15px
-    font-size 14px
-    color #a1a1a1
-    font-weight 700
+    text-align: center;
+    padding-bottom: 15px;
+    font-size: 14px;
+    color: #a1a1a1;
+    font-weight: 700;
   }
 
   .el-form-item__content {
     .el-row {
-      width 100%
+      width: 100%;
     }
   }
 }
-</style>
+</style>