From 4a03b4d4cbe2fca11436481ea87f39da59f00670 Mon Sep 17 00:00:00 2001
From: xiebing <xiebing@zkr.com>
Date: Tue, 16 Dec 2025 16:51:56 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E6=96=B0=E5=A2=9E=E4=B8=80=E4=BD=93?=
 =?UTF-8?q?=E6=9C=BA=E6=94=AF=E4=BB=98=E5=AE=9D=E6=89=AB=E7=A0=81=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.js                      |    4 +-
 pages/login/login.vue          | 1029 ++++++++++++++++++++++++--------
 static/icon/qrcode-example.png |  Bin 0 -> 2880 bytes
 3 files changed, 787 insertions(+), 246 deletions(-)
 create mode 100644 static/icon/qrcode-example.png

diff --git a/config.js b/config.js
index 502066f..b005721 100644
--- a/config.js
+++ b/config.js
@@ -1,6 +1,6 @@
 export default {
-    baseUrl: 'https://fw.rc.qingdao.gov.cn/rgpp-api/api', // 内网
-    // baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
+    // baseUrl: 'https://fw.rc.qingdao.gov.cn/rgpp-api/api', // 内网
+    baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
     // baseUrl: 'http://192.168.3.29:8081',
     // baseUrl: 'http://10.213.6.207:19010/api',
     // 语音转文字
diff --git a/pages/login/login.vue b/pages/login/login.vue
index 202c28b..c5bf118 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,130 +1,169 @@
 <template>
-    <AppLayout title="就业服务程序">
-        <tabcontrolVue :current="tabCurrent">
-            <template v-slot:tab0>
-                <view class="login-content">
-                    <image class="logo" src="@/static/logo.png"></image>
-                    <view class="logo-title">就业</view>
+  <AppLayout title="就业服务程序">
+    <!-- 扫码登录-->
+    <view class="alipay-login-container" v-if="isMachineEnv">
+      <view class="login-scan-area">
+        <view class="login-title">支付宝扫码登录</view>
+        <view class="qrcode-container">
+          <view class="qrcode-wrapper" @click="refreshQrcode">
+            <view class="qrcode-border">
+              <view class="qrcode-content">
+                <view class="qrcode-pattern">
+                  <image class="qrcode-img" src="@/static/icon/qrcode-example.png" mode="scaleToFill" />
+                  <view class="qrcode-corner top-left"></view>
+                  <view class="qrcode-corner top-right"></view>
+                  <view class="qrcode-corner bottom-left"></view>
+                  <view class="scan-line" :style="{ top: scanLineTop + 'rpx' }"></view>
                 </view>
-                <view class="btns">
-                    <button class="wxlogin" @click="loginTest">内测登录</button>
-                    <view class="wxaddress">青岛市公共就业和人才服务中心</view>
+
+                <!-- 二维码过期提示 -->
+                <view v-if="qrcodeExpired" class="expired-overlay">
+                  <text class="expired-text">二维码已过期</text>
+                  <view class="refresh-btn" @click.stop="refreshQrcode">
+                    <text class="refresh-text">点击刷新</text>
+                  </view>
                 </view>
-            </template>
-            <template v-slot:tab1>
-                <view class="content-one">
-                    <view>
-                        <view class="content-title">
-                            <view class="title-lf">
-                                <view class="lf-h1">请您完善求职名片</view>
-                                <view class="lf-text">个人信息仅用于推送优质内容</view>
-                            </view>
-                            <view class="title-ri">
-                                <text style="color: #256bfa">1</text>
-                                <text>/2</text>
-                            </view>
-                        </view>
-                        <view class="content-input" @click="changeExperience">
-                            <view class="input-titile">工作经验</view>
-                            <input
-                                class="input-con"
-                                v-model="state.experienceText"
-                                disabled
-                                placeholder="请选择您的工作经验"
-                            />
-                        </view>
-                        <view class="content-sex">
-                            <view class="sex-titile">求职区域</view>
-                            <view class="sext-ri">
-                                <view
-                                    class="sext-box"
-                                    :class="{ 'sext-boxactive': fromValue.sex === 0 }"
-                                    @click="changeSex(0)"
-                                >
-                                    男
-                                </view>
-                                <view
-                                    class="sext-box"
-                                    :class="{ 'sext-boxactive': fromValue.sex === 1 }"
-                                    @click="changeSex(1)"
-                                >
-                                    女
-                                </view>
-                            </view>
-                        </view>
-                        <view class="content-input" @click="changeEducation">
-                            <view class="input-titile">学历</view>
-                            <input class="input-con" v-model="state.educationText" disabled placeholder="本科" />
-                        </view>
-                    </view>
-                    <view class="next-btn" @tap="nextStep">下一步</view>
-                </view>
-            </template>
-            <template v-slot:tab2>
-                <view class="content-one">
-                    <view>
-                        <view class="content-title">
-                            <view class="title-lf">
-                                <view class="lf-h1">请您完善求职名片</view>
-                                <view class="lf-text">个人信息仅用于推送优质内容</view>
-                            </view>
-                            <view class="title-ri">
-                                <text style="color: #256bfa">2</text>
-                                <text>/2</text>
-                            </view>
-                        </view>
-                        <view class="content-input" @click="changeArea">
-                            <view class="input-titile">求职区域</view>
-                            <input
-                                class="input-con"
-                                v-model="state.areaText"
-                                disabled
-                                placeholder="请选择您的求职区域"
-                            />
-                        </view>
-                        <view class="content-input" @click="changeJobs">
-                            <view class="input-titile">求职岗位</view>
-                            <input
-                                class="input-con"
-                                disabled
-                                v-if="!state.jobsText.length"
-                                placeholder="请选择您的求职岗位"
-                            />
-                            <view class="input-nx" @click="changeJobs" v-else>
-                                <view class="nx-item" v-for="item in state.jobsText">{{ item }}</view>
-                            </view>
-                        </view>
-                        <view class="content-input" @click="changeSalay">
-                            <view class="input-titile">期望薪资</view>
-                            <input
-                                class="input-con"
-                                v-model="state.salayText"
-                                disabled
-                                placeholder="请选择您的期望薪资"
-                            />
-                        </view>
-                    </view>
-                    <view class="next-btn" @tap="complete">开启求职之旅</view>
-                </view>
-            </template>
-        </tabcontrolVue>
-        <SelectJobs ref="selectJobsModel"></SelectJobs>
-        <!-- 后门 -->
-               <view class="backdoor" @click="loginbackdoor">
-            <my-icons type="gift-filled" size="60"></my-icons>
+              </view>
+            </view>
+
+            <view class="qrcode-tips">
+              <text class="tips-text">使用支付宝扫一扫登录</text>
+              <text class="tips-subtext">扫一扫后点击确认完成登录</text>
+            </view>
+          </view>
         </view>
-    </AppLayout>
+        <!-- 刷新提示 -->
+        <view class="refresh-tips" v-if="countdown > 0">
+          <view class="countdown-text"><span class="countdown-num">{{ countdown }}</span> 秒后二维码过期</view>
+        </view>
+      </view>
+      <!-- 扫码成功提示 -->
+      <view v-if="showSuccessTip" class="success-tip">
+        <view class="success-content">
+          <view class="success-icon">✓</view>
+          <text class="success-text">登录成功！</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 正常登录-->
+    <tabcontrolVue v-else :current="tabCurrent">
+      <template v-slot:tab0>
+        <view class="login-content">
+          <image class="logo" src="@/static/logo.png"></image>
+          <view class="logo-title">就业</view>
+        </view>
+        <view class="btns">
+          <button class="wxlogin" @click="loginTest">内测登录</button>
+          <view class="wxaddress">青岛市公共就业和人才服务中心</view>
+        </view>
+      </template>
+      <template v-slot:tab1>
+        <view class="content-one">
+          <view>
+            <view class="content-title">
+              <view class="title-lf">
+                <view class="lf-h1">请您完善求职名片</view>
+                <view class="lf-text">个人信息仅用于推送优质内容</view>
+              </view>
+              <view class="title-ri">
+                <text style="color: #256bfa">1</text>
+                <text>/2</text>
+              </view>
+            </view>
+            <view class="content-input" @click="changeExperience">
+              <view class="input-titile">工作经验</view>
+              <input
+                class="input-con"
+                v-model="state.experienceText"
+                disabled
+                placeholder="请选择您的工作经验"
+              />
+            </view>
+            <view class="content-sex">
+              <view class="sex-titile">求职区域</view>
+              <view class="sext-ri">
+                <view
+                  class="sext-box"
+                  :class="{ 'sext-boxactive': fromValue.sex === 0 }"
+                  @click="changeSex(0)"
+                >
+                  男
+                </view>
+                <view
+                  class="sext-box"
+                  :class="{ 'sext-boxactive': fromValue.sex === 1 }"
+                  @click="changeSex(1)"
+                >
+                  女
+                </view>
+              </view>
+            </view>
+            <view class="content-input" @click="changeEducation">
+              <view class="input-titile">学历</view>
+              <input class="input-con" v-model="state.educationText" disabled placeholder="本科" />
+            </view>
+          </view>
+          <view class="next-btn" @tap="nextStep">下一步</view>
+        </view>
+      </template>
+      <template v-slot:tab2>
+        <view class="content-one">
+          <view>
+            <view class="content-title">
+              <view class="title-lf">
+                <view class="lf-h1">请您完善求职名片</view>
+                <view class="lf-text">个人信息仅用于推送优质内容</view>
+              </view>
+              <view class="title-ri">
+                <text style="color: #256bfa">2</text>
+                <text>/2</text>
+              </view>
+            </view>
+            <view class="content-input" @click="changeArea">
+              <view class="input-titile">求职区域</view>
+              <input class="input-con" v-model="state.areaText" disabled placeholder="请选择您的求职区域" />
+            </view>
+            <view class="content-input" @click="changeJobs">
+              <view class="input-titile">求职岗位</view>
+              <input
+                class="input-con"
+                disabled
+                v-if="!state.jobsText.length"
+                placeholder="请选择您的求职岗位"
+              />
+              <view class="input-nx" @click="changeJobs" v-else>
+                <view class="nx-item" v-for="item in state.jobsText">{{ item }}</view>
+              </view>
+            </view>
+            <view class="content-input" @click="changeSalay">
+              <view class="input-titile">期望薪资</view>
+              <input class="input-con" v-model="state.salayText" disabled placeholder="请选择您的期望薪资" />
+            </view>
+          </view>
+          <view class="next-btn" @tap="complete">开启求职之旅</view>
+        </view>
+      </template>
+    </tabcontrolVue>
+    <SelectJobs ref="selectJobsModel"></SelectJobs>
+    <!-- 后门 -->
+    <view class="backdoor" @click="loginbackdoor">
+      <my-icons type="gift-filled" size="60"></my-icons>
+    </view>
+  </AppLayout>
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia';
 import tabcontrolVue from './components/tabcontrol.vue';
 import SelectJobs from '@/components/selectJobs/selectJobs.vue';
-import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { reactive, inject, watch, ref, onMounted, onUnmounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import useUserStore from '@/stores/useUserStore';
 import useDictStore from '@/stores/useDictStore';
 const { $api, navTo } = inject('globalFunction');
 const { loginSetToken, getUserResume } = useUserStore();
+const { isMachineEnv } = storeToRefs(useUserStore());
 const { getDictSelectOption, oneDictData } = useDictStore();
 const openSelectPopup = inject('openSelectPopup');
 // status
@@ -132,185 +171,687 @@ const selectJobsModel = ref();
 const tabCurrent = ref(1);
 const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
 const state = reactive({
-    station: [],
-    stationCateLog: 1,
-    lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
-    risalay: JSON.parse(JSON.stringify(salay)),
-    areaText: '',
-    educationText: '',
-    experienceText: '',
-    salayText: '',
-    jobsText: [],
+  station: [],
+  stationCateLog: 1,
+  lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
+  risalay: JSON.parse(JSON.stringify(salay)),
+  areaText: '',
+  educationText: '',
+  experienceText: '',
+  salayText: '',
+  jobsText: [],
 });
 const fromValue = reactive({
-    sex: 1,
-    education: '4',
-    salaryMin: 2000,
-    salaryMax: 2000,
-    area: 0,
-    jobTitleId: '',
-    experience: '1',
+  sex: 1,
+  education: '4',
+  salaryMin: 2000,
+  salaryMax: 2000,
+  area: 0,
+  jobTitleId: '',
+  experience: '1',
 });
 
+// 扫码登录相关状态
+const qrcodeExpired = ref(false);
+const scanLineTop = ref(0);
+const countdown = ref(0);
+let scanInterval = null;
+let countdownTimer = null;
+// 登录成功提示
+const showSuccessTip = ref(false);
+
 onLoad((parmas) => {
-    getTreeselect();
-    $api.msg('请完善微简历');
+  getTreeselect();
+  if(!isMachineEnv.value) $api.msg('请完善微简历');
 });
 
-onMounted(() => {});
+onMounted(() => {
+  startScanAnimation();
+  resetCountdown();
+  // 模拟扫码成功
+  setTimeout(() => {
+    //   showSuccessTip.value=true
+  }, 5000);
+});
+onUnmounted(() => {
+  showSuccessTip.value = false;
+  stopScanAnimation();
+  clearInterval(countdownTimer);
+});
+
+// 刷新二维码
+const refreshQrcode = () => {
+  qrcodeExpired.value = false;
+  resetCountdown();
+  startScanAnimation();
+  // TODO
+};
+
+// 重置倒计时
+const resetCountdown = () => {
+  countdown.value = 60;
+  clearInterval(countdownTimer);
+
+  countdownTimer = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value--;
+    } else {
+      qrcodeExpired.value = true;
+      clearInterval(countdownTimer);
+      stopScanAnimation()
+    }
+  }, 1000);
+};
+
+// 开始扫描动画
+const startScanAnimation = () => {
+  clearInterval(scanInterval);
+
+  scanInterval = setInterval(() => {
+    scanLineTop.value = (scanLineTop.value + 2) % 300;
+  }, 30);
+};
+
+// 停止扫描动画
+const stopScanAnimation = () => {
+  clearInterval(scanInterval);
+};
 
 function changeSex(sex) {
-    fromValue.sex = sex;
+  fromValue.sex = sex;
 }
 function changeExperience() {
-    openSelectPopup({
-        title: '工作经验',
-        maskClick: true,
-        data: [oneDictData('experience')],
-        success: (_, [value]) => {
-            fromValue.experience = value.value;
-            state.experienceText = value.label;
-        },
-        change(_, [value]) {
-            // this.setColunm(1, [123, 123]);
-            console.log(this);
-        },
-    });
+  openSelectPopup({
+    title: '工作经验',
+    maskClick: true,
+    data: [oneDictData('experience')],
+    success: (_, [value]) => {
+      fromValue.experience = value.value;
+      state.experienceText = value.label;
+    },
+    change(_, [value]) {
+      // this.setColunm(1, [123, 123]);
+      console.log(this);
+    },
+  });
 }
 
 function changeEducation() {
-    openSelectPopup({
-        title: '学历',
-        maskClick: true,
-        data: [oneDictData('education')],
-        success: (_, [value]) => {
-            fromValue.area = value.value;
-            state.educationText = value.label;
-        },
-    });
+  openSelectPopup({
+    title: '学历',
+    maskClick: true,
+    data: [oneDictData('education')],
+    success: (_, [value]) => {
+      fromValue.area = value.value;
+      state.educationText = value.label;
+    },
+  });
 }
 
 function changeArea() {
-    openSelectPopup({
-        title: '区域',
-        maskClick: true,
-        data: [oneDictData('area')],
-        success: (_, [value]) => {
-            fromValue.area = value.value;
-            state.areaText = '青岛市-' + value.label;
-        },
-    });
+  openSelectPopup({
+    title: '区域',
+    maskClick: true,
+    data: [oneDictData('area')],
+    success: (_, [value]) => {
+      fromValue.area = value.value;
+      state.areaText = '青岛市-' + value.label;
+    },
+  });
 }
 
 function changeSalay() {
-    let leftIndex = 0;
-    openSelectPopup({
-        title: '薪资',
-        maskClick: true,
-        data: [state.lfsalay, state.risalay],
-        unit: 'k',
-        success: (_, [min, max]) => {
-            fromValue.salaryMin = min.value * 1000;
-            fromValue.salaryMax = max.value * 1000;
-            state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
-        },
-        change(e) {
-            const salayData = e.detail.value;
-            if (leftIndex !== salayData[0]) {
-                const copyri = JSON.parse(JSON.stringify(salay));
-                const [lf, ri] = e.detail.value;
-                const risalay = copyri.slice(lf, copyri.length);
-                this.setColunm(1, risalay);
-                leftIndex = salayData[0];
-            }
-        },
-    });
+  let leftIndex = 0;
+  openSelectPopup({
+    title: '薪资',
+    maskClick: true,
+    data: [state.lfsalay, state.risalay],
+    unit: 'k',
+    success: (_, [min, max]) => {
+      fromValue.salaryMin = min.value * 1000;
+      fromValue.salaryMax = max.value * 1000;
+      state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
+    },
+    change(e) {
+      const salayData = e.detail.value;
+      if (leftIndex !== salayData[0]) {
+        const copyri = JSON.parse(JSON.stringify(salay));
+        const [lf, ri] = e.detail.value;
+        const risalay = copyri.slice(lf, copyri.length);
+        this.setColunm(1, risalay);
+        leftIndex = salayData[0];
+      }
+    },
+  });
 }
 
 function changeJobs() {
-    selectJobsModel.value?.open({
-        title: '添加岗位',
-        success: (ids, labels) => {
-            fromValue.jobTitleId = ids;
-            state.jobsText = labels.split(',');
-        },
-    });
+  selectJobsModel.value?.open({
+    title: '添加岗位',
+    success: (ids, labels) => {
+      fromValue.jobTitleId = ids;
+      state.jobsText = labels.split(',');
+    },
+  });
 }
 
 function nextStep() {
-    tabCurrent.value += 1;
+  tabCurrent.value += 1;
 }
 
 // 获取职位
 function getTreeselect() {
-    const LoadCache = (resData) => {
-        state.station = resData.data;
-    };
-    $api.createRequestWithCache('/app/common/jobTitle/treeselect', {}, 'GET', false, LoadCache).then(LoadCache);
+  const LoadCache = (resData) => {
+    state.station = resData.data;
+  };
+  $api.createRequestWithCache('/app/common/jobTitle/treeselect', {}, 'GET', false, LoadCache).then(LoadCache);
 }
 
 function loginbackdoor() {
-    $api.createRequest('/app/mock/login', {}, 'post').then((resData) => {
-        $api.msg('模拟帐号密码测试登录成功');
-        loginSetToken(resData.token).then((resume) => {
-            if (resume.data.jobTitleId) {
-                // 设置推荐列表，每次退出登录都需要更新
-                useUserStore().initSeesionId();
-                uni.reLaunch({
-                    url: '/pages/index/index',
-                });
-            } else {
-                nextStep();
-            }
+  $api.createRequest('/app/mock/login', {}, 'post').then((resData) => {
+    $api.msg('模拟帐号密码测试登录成功');
+    loginSetToken(resData.token).then((resume) => {
+      if (resume.data.jobTitleId) {
+        // 设置推荐列表，每次退出登录都需要更新
+        useUserStore().initSeesionId();
+        uni.reLaunch({
+          url: '/pages/index/index',
         });
+      } else {
+        nextStep();
+      }
     });
+  });
 }
 
 // 登录
 function loginTest() {
-    // uni.share({
-    //     provider: 'weixin',
-    //     scene: 'WXSceneSession',
-    //     type: 2,
-    //     imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
-    //     success: function (res) {
-    //         console.log('success:' + JSON.stringify(res));
-    //     },
-    //     fail: function (err) {
-    //         console.log('fail:' + JSON.stringify(err));
-    //     },
-    // });
-    const params = {
-        username: 'test',
-        password: 'test',
-    };
-    $api.createRequest('/app/login', params, 'post').then((resData) => {
-        $api.msg('模拟帐号密码测试登录成功， 测试环境使用模拟定位');
-        loginSetToken(resData.token).then((resume) => {
-            if (resume.data.jobTitleId) {
-                // 设置推荐列表，每次退出登录都需要更新
-                useUserStore().initSeesionId();
-                uni.reLaunch({
-                    url: '/pages/index/index',
-                });
-            } else {
-                nextStep();
-            }
+  // uni.share({
+  //     provider: 'weixin',
+  //     scene: 'WXSceneSession',
+  //     type: 2,
+  //     imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
+  //     success: function (res) {
+  //         console.log('success:' + JSON.stringify(res));
+  //     },
+  //     fail: function (err) {
+  //         console.log('fail:' + JSON.stringify(err));
+  //     },
+  // });
+  const params = {
+    username: 'test',
+    password: 'test',
+  };
+  $api.createRequest('/app/login', params, 'post').then((resData) => {
+    $api.msg('模拟帐号密码测试登录成功， 测试环境使用模拟定位');
+    loginSetToken(resData.token).then((resume) => {
+      if (resume.data.jobTitleId) {
+        // 设置推荐列表，每次退出登录都需要更新
+        useUserStore().initSeesionId();
+        uni.reLaunch({
+          url: '/pages/index/index',
         });
+      } else {
+        nextStep();
+      }
     });
+  });
 }
 
 function complete() {
-    $api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
-        $api.msg('完成');
-        getUserResume();
-        uni.reLaunch({
-            url: '/pages/index/index',
-        });
+  $api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
+    $api.msg('完成');
+    getUserResume();
+    uni.reLaunch({
+      url: '/pages/index/index',
     });
+  });
 }
 </script>
 
+<style lang="scss" scoped>
+.alipay-login-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 扫码登录区域样式 */
+.login-scan-area {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 40rpx;
+}
+
+.login-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #1677ff;
+  margin-bottom: 40rpx;
+  text-align: center;
+}
+
+.qrcode-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40rpx;
+}
+
+.qrcode-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qrcode-border {
+  width: 400rpx;
+  height: 400rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  box-shadow: 0 8rpx 30rpx rgba(22, 119, 255, 0.1);
+  margin-bottom: 30rpx;
+  position: relative;
+}
+
+.qrcode-content {
+  width: 100%;
+  height: 100%;
+  background-color: #f8f8f8;
+  border-radius: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.qrcode-pattern {
+  width: 300rpx;
+  height: 300rpx;
+  background-color: #fff;
+  position: relative;
+}
+.qrcode-img{
+    width: 100%;
+    height:100%;
+}
+
+.qrcode-corner {
+  position: absolute;
+  width: 60rpx;
+  height: 60rpx;
+  border: 6rpx solid #1677ff;
+
+  &.top-left {
+    top: 0;
+    left: 0;
+    border-right: none;
+    border-bottom: none;
+    border-radius: 10rpx 0 0 0;
+  }
+
+  &.top-right {
+    top: 0;
+    right: 0;
+    border-left: none;
+    border-bottom: none;
+    border-radius: 0 10rpx 0 0;
+  }
+
+  &.bottom-left {
+    bottom: 0;
+    left: 0;
+    border-right: none;
+    border-top: none;
+    border-radius: 0 0 0 10rpx;
+  }
+}
+
+.scan-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6rpx;
+  background: linear-gradient(90deg, transparent, #1677ff, transparent);
+  z-index: 10;
+}
+
+.expired-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 10rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+}
+
+.expired-text {
+  font-size: 32rpx;
+  color: #fff;
+  margin-bottom: 30rpx;
+}
+
+.refresh-btn {
+  padding: 16rpx 40rpx;
+  background-color: #1677ff;
+  border-radius: 50rpx;
+}
+
+.refresh-text {
+  font-size: 28rpx;
+  color: #fff;
+}
+
+.qrcode-tips {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tips-text {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.tips-subtext {
+  font-size: 24rpx;
+  color: #666;
+}
+
+.refresh-tips {
+  margin-bottom: 40rpx;
+}
+
+.countdown-text {
+  font-size: 24rpx;
+  color: #999;
+  display: flex;
+  align-items: center;
+}
+.countdown-num{
+    margin-right: 5rpx;
+    color: #1677ff;
+    font-size: 30rpx;
+}
+
+.switch-method {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx 0;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.switch-text {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.switch-btn {
+  display: flex;
+  align-items: center;
+}
+
+.btn-text {
+  font-size: 28rpx;
+  color: #1677ff;
+  margin-right: 10rpx;
+}
+
+.icon-arrow {
+  font-size: 28rpx;
+  color: #1677ff;
+}
+
+/* 账号密码登录区域样式 */
+.login-password-area {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 40rpx;
+}
+
+.password-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 60rpx;
+}
+
+.back-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+}
+
+.icon-back {
+  font-size: 36rpx;
+  color: #333;
+}
+
+.login-form {
+  width: 100%;
+}
+
+.form-item {
+  margin-bottom: 40rpx;
+  position: relative;
+}
+
+.item-label {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.item-input {
+  width: 100%;
+  height: 80rpx;
+  background-color: #f8f8f8;
+  border-radius: 10rpx;
+  padding: 0 24rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.input-placeholder {
+  color: #999;
+  font-size: 28rpx;
+}
+
+.forget-password {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 26rpx;
+  color: #1677ff;
+}
+
+.login-btn {
+  width: 100%;
+  height: 90rpx;
+  background-color: #1677ff;
+  border-radius: 50rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 60rpx;
+
+  &.disabled {
+    background-color: #a0cfff;
+  }
+}
+
+.login-btn-text {
+  font-size: 32rpx;
+  color: #fff;
+  font-weight: 500;
+}
+
+.agreement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 40rpx;
+  flex-wrap: wrap;
+}
+
+.agreement-checkbox {
+  margin-right: 10rpx;
+}
+
+.checkbox-icon {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 6rpx;
+  border: 2rpx solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.checked {
+    background-color: #1677ff;
+    border-color: #1677ff;
+  }
+}
+
+.checkmark {
+  font-size: 24rpx;
+  color: #fff;
+}
+
+.agreement-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-right: 6rpx;
+}
+
+.agreement-link {
+  font-size: 24rpx;
+  color: #1677ff;
+  margin-right: 6rpx;
+}
+
+.other-login {
+  margin-top: 80rpx;
+}
+
+.other-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 50rpx;
+}
+
+.title-line {
+  flex: 1;
+  height: 1rpx;
+  background-color: #eee;
+}
+
+.title-text {
+  font-size: 24rpx;
+  color: #999;
+  margin: 0 20rpx;
+}
+
+.login-methods {
+  display: flex;
+  justify-content: center;
+  gap: 100rpx;
+}
+
+.method-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.method-icon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #fff;
+  margin-bottom: 20rpx;
+
+  &.scan-icon {
+    background-color: #1677ff;
+  }
+
+  &.sms-icon {
+    background-color: #52c41a;
+  }
+}
+
+.method-text {
+  font-size: 24rpx;
+  color: #666;
+}
+
+/* 登录成功提示 */
+.success-tip {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.success-content {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 60rpx 80rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.success-icon {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  background-color: #52c41a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 60rpx;
+  color: #fff;
+  margin-bottom: 30rpx;
+}
+
+.success-text {
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+
 <style lang="stylus" scoped>
 .backdoor{
     position: fixed;
diff --git a/static/icon/qrcode-example.png b/static/icon/qrcode-example.png
new file mode 100644
index 0000000000000000000000000000000000000000..75609c552b703afc0224b7aad751c32ecb2ee49c
GIT binary patch
literal 2880
zcmeAS@N?(olHy`uVBq!ia0y~yV2S`?4kn<8Aq#&ukm4-xh%9Dc;5!1sj8nDwq!}2v
zK6$!0hE&XXd);xJin@S<WAfF%>*vJ%k34h2DECE`AiD!+$amrFw0}$utM>czGcc%g
zDl%j`aX8EpV49%T!mwmeb8i(_HN>yo>eqjO(YUy(rT@lP+xJ%Ux1T#)zVq$(cdj(?
zh3#_oA5&&p+BzMIdi{k%eq(n0?tO>1&-<)b_x^wX_PX{sngklir?){q{U8YOX=!}E
zt$f}2_j^xv3pAK0vMBg+FnS0(F<fe)4!7EmpTYX<nU{if5!rL)7=JM9Q_pN9XTG(x
zWq7mY+O19J&ctjzr?>kY`@JJH^H9NVV7xK0ui3h7&Ewxc_1>+fUD$ol%wBt0`NPq)
zw9{6=^bz}c&(!<Y|69drlDWRkk$VshOcpHrX1ssCdxw7B1KK40wZPyz><$XP;@dy(
zY+Jwm+~(7{_s{FS`};lb_Vwufhhz6pHxWV;%9iI}7;3fyEkDG+{p{w`QQ4=hw$JUa
z{d+I>ca=8H(&d5m*P@oY|46)UW4t+a?(I8e@w?CcT>JgswcoqWMt}c$?LLiSb6eW8
zFFf|3P~HqITb|u~x~=wS-M-V&=bvw@-TSrv@mksivM8u*kuN*D8I&P&pBLZWmp40o
zdhG98PuD)*19ZW0+GNdWptWo_($;QGoxA;?-kkI0H%sGp@A-OfFKtqjsqymkABk&A
zt62DUytUqQHg|t_?DtZjUq4?f-bbf;Bm8!$-R^zQV?W<1dk;*@mHWDBS2UD?ilUk$
zXXeN~RL<MIKKA*Z?08T<%KiN2)3y6Ab7_~JHe5cF6PXT**Vucz)^9I5cmF7DQV^)N
zDmi;*TIsc@=xaAk`Dthmq!RfLuKn%rn4Q<#{#UQ;?Bjj2Xcvt0H(j#=)>~(Q{=4_<
z?;ET6v3b_dZ=ZW^w)@@dZN=Y|s9yPl%H3;c=FDSc==(?;)2Y--L260B+CTpoZye;@
V_jH@PH?T>};OXk;vd$@?2>>g^dF=oI

literal 0
HcmV?d00001