login.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827
  1. <template>
  2. <div class="login-page">
  3. <div class="login-container">
  4. <div class="login-content">
  5. <div class="login-header">
  6. <h2>欢迎登录</h2>
  7. <p class="sub-title">请输入您的账号信息</p>
  8. </div>
  9. <a-form
  10. ref="loginForm"
  11. :model="formData"
  12. :rules="rules"
  13. layout="vertical"
  14. >
  15. <!-- 账号密码登录表单 -->
  16. <template v-if="loginType === 'account'">
  17. <a-form-item label="账号" name="username">
  18. <a-input
  19. v-model:value="formData.username"
  20. placeholder="请输入账号"
  21. size="large"
  22. >
  23. <template #prefix>
  24. <UserOutlined style="color: rgba(0,0,0,.25)" />
  25. </template>
  26. </a-input>
  27. </a-form-item>
  28. <a-form-item label="密码" name="password">
  29. <a-input-password
  30. v-model:value="formData.password"
  31. placeholder="请输入密码"
  32. size="large"
  33. >
  34. <template #prefix>
  35. <LockOutlined style="color: rgba(0,0,0,.25)" />
  36. </template>
  37. </a-input-password>
  38. </a-form-item>
  39. <a-form-item label="商户编码" name="merchant_code">
  40. <a-input
  41. v-model:value="formData.merchant_code"
  42. placeholder="请输入商户编码"
  43. size="large"
  44. ></a-input>
  45. </a-form-item>
  46. </template>
  47. <!-- 手机号登录表单 -->
  48. <template v-else-if="loginType === 'mobile'">
  49. <a-form-item label="手机号" name="mobile">
  50. <a-input
  51. v-model:value="formData.mobile"
  52. placeholder="请输入手机号"
  53. size="large"
  54. >
  55. <template #prefix>
  56. <MobileOutlined style="color: rgba(0,0,0,.25)" />
  57. </template>
  58. </a-input>
  59. </a-form-item>
  60. <a-form-item label="验证码" name="verification_code">
  61. <div class="verification-code-input">
  62. <a-input
  63. v-model:value="formData.verification_code"
  64. placeholder="请输入验证码"
  65. size="large"
  66. >
  67. <template #prefix>
  68. <SafetyCertificateOutlined style="color: rgba(0,0,0,.25)" />
  69. </template>
  70. </a-input>
  71. <a-button
  72. :disabled="!!countdown || !formData.mobile"
  73. @click="sendVerificationCode"
  74. size="large"
  75. >
  76. {{ countdown ? `${countdown}秒后重试` : '获取验证码' }}
  77. </a-button>
  78. </div>
  79. </a-form-item>
  80. </template>
  81. <!-- 微信登录表单 -->
  82. <template v-if="loginType === 'wechat'">
  83. <div class="wechat-login-container">
  84. <div v-if="wechatQrCode" class="wechat-qrcode-wrapper">
  85. <img
  86. :src="wechatQrCode"
  87. alt="微信登录二维码"
  88. class="wechat-qrcode"
  89. />
  90. <p class="qrcode-tip">请使用微信扫描二维码登录</p>
  91. <p class="qrcode-sub-tip">扫码后请在微信中确认登录</p>
  92. </div>
  93. <div v-else class="qrcode-loading">
  94. <a-spin tip="正在加载二维码..." />
  95. </div>
  96. </div>
  97. </template>
  98. <div class="form-options">
  99. <a-checkbox v-model:checked="rememberMe">记住账号</a-checkbox>
  100. <router-link to="/forget-password" class="forgot-password">忘记密码?</router-link>
  101. </div>
  102. <a-form-item>
  103. <a-button
  104. type="primary"
  105. :loading="loading"
  106. size="large"
  107. block
  108. @click="handleLogin"
  109. >
  110. 登录
  111. </a-button>
  112. </a-form-item>
  113. </a-form>
  114. <div class="login-footer">
  115. <!-- <p class="register-tip">
  116. 还没有账号?<router-link to="/register" class="register-link">立即注册</router-link>
  117. </p> -->
  118. <!-- 登录方式切换移动到这里 -->
  119. <!-- <div class="login-type-switch">
  120. <p class="switch-title">切换登录方式</p>
  121. <a-radio-group v-model:value="loginType" button-style="solid">
  122. <a-radio-button value="account">账号密码登录</a-radio-button>
  123. <a-radio-button value="mobile">手机验证码登录</a-radio-button>
  124. </a-radio-group>
  125. </div> -->
  126. <div class="other-login">
  127. <div class="divider">
  128. <span>其他登录方式</span>
  129. </div>
  130. <div class="social-login">
  131. <a-tooltip title="微信登录">
  132. <WechatOutlined
  133. class="social-icon"
  134. :class="{ active: loginType === 'wechat' }"
  135. @click="switchToWechatLogin"
  136. />
  137. </a-tooltip>
  138. <a-tooltip title="QQ登录">
  139. <QqOutlined class="social-icon" />
  140. </a-tooltip>
  141. <a-tooltip title="钉钉登录">
  142. <DingdingOutlined class="social-icon" />
  143. </a-tooltip>
  144. <a-tooltip v-if="loginType === 'account'" title="手机号登录">
  145. <MobileOutlined
  146. class="social-icon"
  147. @click="switchToMobileLogin"
  148. />
  149. </a-tooltip>
  150. <a-tooltip v-else title="账号密码登录">
  151. <UserOutlined
  152. class="social-icon"
  153. @click="switchToAccountLogin"
  154. />
  155. </a-tooltip>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. <!-- 微信登录弹窗 -->
  162. <a-modal
  163. v-model:visible="wechatLoginModal"
  164. title="微信扫码登录"
  165. :footer="null"
  166. @cancel="handleWechatLoginCancel"
  167. width="360px"
  168. centered
  169. >
  170. <div class="wechat-qrcode-container">
  171. <img
  172. :src="wechatQrCode"
  173. alt="微信登录二维码"
  174. class="wechat-qrcode"
  175. />
  176. <p class="qrcode-tip">请使用微信扫描二维码登录</p>
  177. </div>
  178. </a-modal>
  179. </div>
  180. </template>
  181. <script>
  182. import { defineComponent, reactive, ref, nextTick, onUnmounted } from 'vue';
  183. import { useRouter } from 'vue-router';
  184. import { useStore } from 'vuex';
  185. import axios from 'axios';
  186. import { message, Modal } from 'ant-design-vue';
  187. import {
  188. UserOutlined,
  189. LockOutlined,
  190. WechatOutlined,
  191. QqOutlined,
  192. DingdingOutlined,
  193. MobileOutlined,
  194. SafetyCertificateOutlined
  195. } from '@ant-design/icons-vue';
  196. export default defineComponent({
  197. name: 'login',
  198. components: {
  199. UserOutlined,
  200. LockOutlined,
  201. WechatOutlined,
  202. QqOutlined,
  203. DingdingOutlined,
  204. MobileOutlined,
  205. SafetyCertificateOutlined
  206. },
  207. setup() {
  208. const store = useStore();
  209. const router = useRouter();
  210. const loginForm = ref();
  211. const loading = ref(false);
  212. const rememberMe = ref(false);
  213. const loginType = ref('account'); // 登录方式:'account', 'mobile', 'wechat'
  214. const countdown = ref(0); // 验证码倒计时
  215. const formData = reactive({
  216. username: '',
  217. password: '',
  218. merchant_code: 'E20250212000624fd2a92',
  219. mobile: '',
  220. verification_code: ''
  221. });
  222. const rules = {
  223. username: [
  224. { required: true, message: '请输入账号' },
  225. { min: 4, message: '账号长度不能小于4位' }
  226. ],
  227. password: [
  228. { required: true, message: '请输入密码' },
  229. { min: 6, message: '密码长度不能小于6位' }
  230. ],
  231. merchant_code: [
  232. { required: true, message: '请输入商户编码' },
  233. { min: 1, message: '商户编码长度不能小于1位' }
  234. ],
  235. mobile: [
  236. { required: true, message: '请输入手机号' },
  237. { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
  238. ],
  239. verification_code: [
  240. { required: true, message: '请输入验证码' },
  241. { len: 6, message: '验证码长度必须为6位' }
  242. ]
  243. };
  244. // 发送验证码
  245. const sendVerificationCode = async () => {
  246. try {
  247. // 验证手机号
  248. await loginForm.value.validateFields(['mobile']);
  249. const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/send_verification_code`, {
  250. mobile: formData.mobile,
  251. merchant_code: formData.merchant_code
  252. });
  253. if (response.data.code === 200) {
  254. message.success('验证码发送成功');
  255. // 开始倒计时
  256. countdown.value = 60;
  257. const timer = setInterval(() => {
  258. countdown.value--;
  259. if (countdown.value <= 0) {
  260. clearInterval(timer);
  261. }
  262. }, 1000);
  263. } else {
  264. message.error(response.data.message || '验证码发送失败');
  265. }
  266. } catch (error) {
  267. console.error('验证码发送失败:', error);
  268. message.error(error.response?.data?.message || '验证码发送失败');
  269. }
  270. };
  271. // 处理登录
  272. const handleLogin = async () => {
  273. try {
  274. loading.value = true;
  275. await loginForm.value.validate();
  276. let response;
  277. if (loginType.value === 'account') {
  278. // 账号密码登录
  279. response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/login`, {
  280. username: formData.username,
  281. password: formData.password,
  282. merchant_code: formData.merchant_code
  283. });
  284. } else if (loginType.value === 'mobile') {
  285. // 手机验证码登录
  286. response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/mobile_login`, {
  287. mobile: formData.mobile,
  288. verification_code: formData.verification_code,
  289. merchant_code: formData.merchant_code
  290. });
  291. } else {
  292. // 微信登录
  293. response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/wechat_login`, {
  294. wechat_state: formData.wechat_state
  295. });
  296. }
  297. if (response.data.code === 200) {
  298. // 保存token到localStorage
  299. localStorage.setItem('token', response.data.data.token);
  300. // 获取用户详细信息
  301. try {
  302. const userInfoResponse = await axios.get(`${import.meta.env.VITE_BASE_AI_API}/user/info`, {
  303. headers: {
  304. 'Authorization': `JWT ${response.data.data.token}`
  305. }
  306. });
  307. console.log(userInfoResponse);
  308. if (userInfoResponse.data.code === 200) {
  309. // 存储用户信息和权限到 Vuex store
  310. store.commit('app/setUser', {
  311. user: userInfoResponse.data.data,
  312. permission: userInfoResponse.data.data || [],
  313. });
  314. // 同时存储到 localStorage
  315. localStorage.setItem('userInfo', JSON.stringify(userInfoResponse.data.data));
  316. localStorage.setItem('permissions', JSON.stringify(userInfoResponse.data.data || []));
  317. } else {
  318. message.warning('获取用户信息失败');
  319. }
  320. } catch (error) {
  321. console.error('获取用户信息失败:', error);
  322. message.warning('获取用户信息失败,请重新登录');
  323. return;
  324. }
  325. // 记住账号
  326. if (rememberMe.value) {
  327. if (loginType.value === 'account') {
  328. localStorage.setItem('username', formData.username);
  329. } else if (loginType.value === 'mobile') {
  330. localStorage.setItem('mobile', formData.mobile);
  331. }
  332. }
  333. message.success('登录成功');
  334. router.push('/');
  335. } else {
  336. message.error(response.data.message || '登录失败');
  337. }
  338. } catch (error) {
  339. console.error('登录失败:', error);
  340. message.error(error.response?.data?.message || '登录失败,请检查网络连接');
  341. } finally {
  342. loading.value = false;
  343. }
  344. };
  345. // 处理权限数据
  346. const processPermissions = (permissions = []) => {
  347. const auth = {};
  348. permissions.filter(item => item.type === 'btn').forEach(item => {
  349. if(auth[item.path]) {
  350. auth[item.path][item.key] = true;
  351. } else {
  352. auth[item.path] = {
  353. [item.key]: true
  354. };
  355. }
  356. });
  357. return auth;
  358. };
  359. // 初始化时从本地存储获取记住的信息
  360. if (localStorage.getItem('username')) {
  361. formData.username = localStorage.getItem('username');
  362. rememberMe.value = true;
  363. } else if (localStorage.getItem('mobile')) {
  364. formData.mobile = localStorage.getItem('mobile');
  365. loginType.value = 'mobile';
  366. rememberMe.value = true;
  367. }
  368. // 切换到手机号登录
  369. const switchToMobileLogin = () => {
  370. loginType.value = 'mobile';
  371. // 清空之前的登录表单数据
  372. formData.username = '';
  373. formData.password = '';
  374. // 如果之前保存过手机号,则自动填充
  375. const savedMobile = localStorage.getItem('mobile');
  376. if (savedMobile) {
  377. formData.mobile = savedMobile;
  378. }
  379. // 重置表单验证状态
  380. nextTick(() => {
  381. loginForm.value?.resetFields();
  382. });
  383. // 显示切换提示
  384. message.info('已切换到手机号登录模式');
  385. };
  386. // 切换到账号密码登录
  387. const switchToAccountLogin = () => {
  388. loginType.value = 'account';
  389. // 清空之前的登录表单数据
  390. formData.mobile = '';
  391. formData.verification_code = '';
  392. // 如果之前保存过手机号,则自动填充
  393. const savedMobile = localStorage.getItem('mobile');
  394. if (savedMobile) {
  395. formData.mobile = savedMobile;
  396. }
  397. // 重置表单验证状态
  398. nextTick(() => {
  399. loginForm.value?.resetFields();
  400. });
  401. // 显示切换提示
  402. message.info('已切换到账号密码登录模式');
  403. };
  404. // 切换到微信登录
  405. const switchToWechatLogin = async () => {
  406. loginType.value = 'wechat';
  407. // 清空之前的登录表单数据
  408. formData.username = '';
  409. formData.password = '';
  410. formData.mobile = '';
  411. formData.verification_code = '';
  412. // 获取微信二维码
  413. await getWechatQrCode();
  414. // 重置表单验证状态
  415. nextTick(() => {
  416. loginForm.value?.resetFields();
  417. });
  418. message.info('已切换到微信扫码登录模式');
  419. };
  420. // 微信登录相关状态
  421. const wechatLoginModal = ref(false);
  422. const wechatQrCode = ref('');
  423. const wechatState = ref('');
  424. let wechatLoginTimer = null;
  425. // 获取微信登录二维码
  426. const getWechatQrCode = async () => {
  427. try {
  428. const response = await axios.get(`${import.meta.env.VITE_BASE_AI_API}/api/user/wechat/qrcode`);
  429. if (response.data.code === 200) {
  430. wechatQrCode.value = response.data.data.qrcode_url;
  431. wechatState.value = response.data.data.state;
  432. startWechatLoginCheck();
  433. } else {
  434. message.error('获取微信二维码失败');
  435. }
  436. } catch (error) {
  437. console.error('获取微信二维码失败:', error);
  438. message.error('获取微信二维码失败,请稍后重试');
  439. }
  440. };
  441. // 开始轮询检查微信登录状态
  442. const startWechatLoginCheck = () => {
  443. wechatLoginTimer = setInterval(async () => {
  444. try {
  445. const response = await axios.get(`${import.meta.env.VITE_BASE_AI_API}/api/user/wechat/check_login`, {
  446. params: { state: wechatState.value }
  447. });
  448. if (response.data.code === 200) {
  449. // 登录成功
  450. clearInterval(wechatLoginTimer);
  451. wechatLoginModal.value = false;
  452. // 保存token
  453. localStorage.setItem('token', response.data.data.token);
  454. // 获取并保存用户信息
  455. await getUserInfo(response.data.data.token);
  456. message.success('微信登录成功');
  457. router.push('/');
  458. }
  459. } catch (error) {
  460. console.error('检查微信登录状态失败:', error);
  461. }
  462. }, 2000); // 每2秒检查一次
  463. };
  464. // 关闭微信登录弹窗
  465. const handleWechatLoginCancel = () => {
  466. wechatLoginModal.value = false;
  467. if (wechatLoginTimer) {
  468. clearInterval(wechatLoginTimer);
  469. wechatLoginTimer = null;
  470. }
  471. };
  472. // 获取用户信息的公共方法
  473. const getUserInfo = async (token) => {
  474. try {
  475. const userInfoResponse = await axios.get(`${import.meta.env.VITE_BASE_AI_API}/user/info`, {
  476. headers: {
  477. 'Authorization': `JWT ${token}`
  478. }
  479. });
  480. if (userInfoResponse.data.code === 200) {
  481. store.commit('app/setUser', {
  482. user: userInfoResponse.data.data.userInfo,
  483. permission: userInfoResponse.data.data.permissions || [],
  484. auth: processPermissions(userInfoResponse.data.data.permissions)
  485. });
  486. } else {
  487. message.warning('获取用户信息失败');
  488. }
  489. } catch (error) {
  490. console.error('获取用户信息失败:', error);
  491. message.warning('获取用户信息失败,请重新登录');
  492. throw error;
  493. }
  494. };
  495. // 组件卸载时清理定时器
  496. onUnmounted(() => {
  497. if (wechatLoginTimer) {
  498. clearInterval(wechatLoginTimer);
  499. wechatLoginTimer = null;
  500. }
  501. });
  502. return {
  503. loginForm,
  504. formData,
  505. rules,
  506. loading,
  507. rememberMe,
  508. loginType,
  509. countdown,
  510. handleLogin,
  511. sendVerificationCode,
  512. switchToMobileLogin,
  513. switchToAccountLogin,
  514. switchToWechatLogin,
  515. wechatLoginModal,
  516. wechatQrCode,
  517. getWechatQrCode,
  518. handleWechatLoginCancel
  519. };
  520. }
  521. });
  522. </script>
  523. <style lang="less" scoped>
  524. .login-page {
  525. display: flex;
  526. justify-content: center;
  527. align-items: center;
  528. min-height: 100vh;
  529. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  530. .login-container {
  531. width: 100%;
  532. max-width: 420px;
  533. margin: 0 20px;
  534. }
  535. .login-content {
  536. background: rgba(255, 255, 255, 0.95);
  537. padding: 40px;
  538. border-radius: 16px;
  539. box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  540. backdrop-filter: blur(8px);
  541. animation: slideUp 0.6s ease-out;
  542. }
  543. .login-header {
  544. text-align: center;
  545. margin-bottom: 32px;
  546. h2 {
  547. font-size: 28px;
  548. color: #1a1a1a;
  549. margin-bottom: 8px;
  550. font-weight: 600;
  551. }
  552. .sub-title {
  553. color: #666;
  554. font-size: 14px;
  555. }
  556. }
  557. .form-options {
  558. display: flex;
  559. justify-content: space-between;
  560. align-items: center;
  561. margin-bottom: 24px;
  562. .forgot-password {
  563. color: #667eea;
  564. font-size: 14px;
  565. transition: color 0.3s;
  566. &:hover {
  567. color: #764ba2;
  568. }
  569. }
  570. }
  571. .verification-code-input {
  572. display: flex;
  573. gap: 8px;
  574. .ant-input-affix-wrapper {
  575. flex: 1;
  576. }
  577. .ant-btn {
  578. min-width: 120px;
  579. }
  580. }
  581. .login-footer {
  582. margin-top: 32px;
  583. text-align: center;
  584. .register-tip {
  585. color: #666;
  586. font-size: 14px;
  587. margin-bottom: 24px;
  588. .register-link {
  589. color: #667eea;
  590. font-weight: 500;
  591. margin-left: 4px;
  592. &:hover {
  593. color: #764ba2;
  594. }
  595. }
  596. }
  597. // 更新登录方式切换的样式
  598. .login-type-switch {
  599. margin-bottom: 24px;
  600. .switch-title {
  601. color: #666;
  602. font-size: 14px;
  603. margin-bottom: 12px;
  604. }
  605. .ant-radio-group {
  606. display: flex;
  607. justify-content: center;
  608. gap: 12px;
  609. }
  610. .ant-radio-button-wrapper {
  611. border-radius: 4px;
  612. &:first-child {
  613. border-radius: 4px;
  614. }
  615. &:last-child {
  616. border-radius: 4px;
  617. }
  618. }
  619. }
  620. .divider {
  621. position: relative;
  622. text-align: center;
  623. margin: 16px 0;
  624. &::before,
  625. &::after {
  626. content: '';
  627. position: absolute;
  628. top: 50%;
  629. width: 30%;
  630. height: 1px;
  631. background: #e8e8e8;
  632. }
  633. &::before {
  634. left: 0;
  635. }
  636. &::after {
  637. right: 0;
  638. }
  639. span {
  640. background: #fff;
  641. padding: 0 12px;
  642. color: #999;
  643. font-size: 12px;
  644. }
  645. }
  646. .social-login {
  647. display: flex;
  648. justify-content: center;
  649. gap: 24px;
  650. margin-top: 16px;
  651. .social-icon {
  652. font-size: 24px;
  653. color: #666;
  654. cursor: pointer;
  655. transition: all 0.3s;
  656. &:hover {
  657. color: #667eea;
  658. transform: scale(1.1);
  659. }
  660. // 为手机图标添加特殊样式
  661. &.mobile-active {
  662. color: #667eea;
  663. }
  664. }
  665. }
  666. }
  667. }
  668. @keyframes slideUp {
  669. from {
  670. opacity: 0;
  671. transform: translateY(20px);
  672. }
  673. to {
  674. opacity: 1;
  675. transform: translateY(0);
  676. }
  677. }
  678. // 响应式适配
  679. @media (max-width: 480px) {
  680. .login-content {
  681. padding: 24px;
  682. }
  683. .login-header h2 {
  684. font-size: 24px;
  685. }
  686. }
  687. .wechat-qrcode-container {
  688. text-align: center;
  689. padding: 20px 0;
  690. .wechat-qrcode {
  691. width: 200px;
  692. height: 200px;
  693. margin-bottom: 16px;
  694. }
  695. .qrcode-tip {
  696. color: #666;
  697. font-size: 14px;
  698. }
  699. }
  700. .wechat-login-container {
  701. padding: 20px 0;
  702. text-align: center;
  703. .wechat-qrcode-wrapper {
  704. display: flex;
  705. flex-direction: column;
  706. align-items: center;
  707. padding: 20px;
  708. background: #f5f5f5;
  709. border-radius: 8px;
  710. .wechat-qrcode {
  711. width: 200px;
  712. height: 200px;
  713. margin-bottom: 16px;
  714. border-radius: 4px;
  715. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  716. }
  717. .qrcode-tip {
  718. color: #333;
  719. font-size: 16px;
  720. font-weight: 500;
  721. margin-bottom: 8px;
  722. }
  723. .qrcode-sub-tip {
  724. color: #666;
  725. font-size: 14px;
  726. }
  727. }
  728. .qrcode-loading {
  729. padding: 60px 0;
  730. }
  731. }
  732. // 修改社交图标样式
  733. .social-login {
  734. .social-icon {
  735. &.active {
  736. color: #667eea;
  737. }
  738. }
  739. }
  740. </style>