邃芒慧影管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1437 lines
40 KiB

  1. <template>
  2. <div class="login-container">
  3. <div class="Version">Version 1.0.8 test</div>
  4. <div class="videoBox">
  5. <video
  6. src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4"
  7. muted
  8. autoplay
  9. loop
  10. ></video>
  11. </div>
  12. <!-- 正常登录 isLogin == 1-->
  13. <el-form
  14. v-if="isLogin == 1"
  15. ref="loginFormRef"
  16. :model="loginData"
  17. :rules="loginRules"
  18. class="login-form"
  19. >
  20. <div class="flex text-white items-center">
  21. <span class="flex-1 text-center">{{
  22. $t("login.title") + " " + $t("login.login")
  23. }}</span>
  24. <el-tooltip
  25. class="box-item"
  26. effect="dark"
  27. :content="$t('navbar.LanguageChange')"
  28. placement="top-start"
  29. >
  30. <lang-select class="navItem" style="color: #ffffff" />
  31. </el-tooltip>
  32. </div>
  33. <el-form-item prop="username">
  34. <div class="text-white">
  35. <svg-icon icon-class="user" />
  36. </div>
  37. <el-input
  38. class="flex-1"
  39. ref="email"
  40. size="large"
  41. v-model="loginData.username"
  42. :placeholder="$t('login.username')"
  43. name="email"
  44. />
  45. </el-form-item>
  46. <el-form-item prop="password">
  47. <span class="text-white">
  48. <svg-icon icon-class="password" />
  49. </span>
  50. <el-input
  51. class="flex-1"
  52. v-model="loginData.password"
  53. :placeholder="$t('login.password')"
  54. :type="passwordVisible === false ? 'password' : 'input'"
  55. size="large"
  56. name="password"
  57. @keyup.enter="handleLogin"
  58. />
  59. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  60. <svg-icon
  61. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  62. class="text-white cursor-pointer"
  63. />
  64. </span>
  65. </el-form-item>
  66. <!-- 验证码 -->
  67. <el-form-item prop="captcha">
  68. <span class="text-white">
  69. <svg-icon icon-class="verify_code" />
  70. </span>
  71. <el-input
  72. v-model="loginData.captcha"
  73. auto-complete="off"
  74. :placeholder="$t('login.captcha')"
  75. class="flex-1"
  76. @keyup.enter="handleLogin"
  77. />
  78. <span class="captcha">
  79. <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
  80. </span>
  81. </el-form-item>
  82. <el-button
  83. size="default"
  84. :loading="loading"
  85. type="primary"
  86. class="loginBtn"
  87. @click.prevent="handleLogin"
  88. >
  89. <el-icon
  90. v-if="isLogining"
  91. style="margin-right: 10px"
  92. class="is-loading"
  93. >
  94. <svg
  95. viewBox="0 0 1024 1024"
  96. xmlns="http://www.w3.org/2000/svg"
  97. data-v-ea893728=""
  98. >
  99. <path
  100. fill="currentColor"
  101. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  102. ></path>
  103. </svg>
  104. </el-icon>
  105. {{ $t("login.loginBtn") }}
  106. </el-button>
  107. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  108. <div style="margin-bottom: 5px">
  109. <span class="join" @click="loginFlag(7)">{{
  110. $t("login.SMSLogin")
  111. }}</span>
  112. </div>
  113. <div>
  114. <span class="join" @click="loginFlag(3)">{{
  115. $t("login.forgetPwd")
  116. }}</span>
  117. </div>
  118. </div>
  119. </el-form>
  120. <!-- 注册账户之后输入短信验证码 isLogin == 6-->
  121. <!-- 忘记密码 isLogin == 3-->
  122. <el-form
  123. v-if="isLogin == 3"
  124. ref="loginFormRef"
  125. :model="loginData3"
  126. :rules="loginRules"
  127. class="login-form"
  128. >
  129. <div class="flex text-white items-center">
  130. <span class="flex-1 text-center">{{
  131. $t("login.title") + " " + $t("login.forgetPwdTitle")
  132. }}</span>
  133. <el-tooltip
  134. class="box-item"
  135. effect="dark"
  136. :content="$t('navbar.LanguageChange')"
  137. placement="top-start"
  138. >
  139. <lang-select class="navItem" style="color: #ffffff" />
  140. </el-tooltip>
  141. </div>
  142. <el-form-item prop="email">
  143. <div class="text-white">
  144. <svg-icon icon-class="user" />
  145. </div>
  146. <el-input
  147. class="flex-1"
  148. ref="email"
  149. size="large"
  150. v-model="loginData3.email"
  151. :placeholder="$t('login.email')"
  152. name="email"
  153. />
  154. </el-form-item>
  155. <!-- 验证码 -->
  156. <el-form-item prop="code">
  157. <span class="text-white">
  158. <svg-icon icon-class="verify_code" />
  159. </span>
  160. <el-input
  161. v-model="loginData3.code"
  162. auto-complete="off"
  163. :placeholder="$t('login.verifyCode')"
  164. class="flex-1"
  165. @keyup.enter="handleLogin"
  166. />
  167. <span class="captcha">
  168. <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
  169. </span>
  170. </el-form-item>
  171. <el-button
  172. size="default"
  173. :loading="loading"
  174. type="primary"
  175. class="loginBtn"
  176. @click.prevent="sendEmailforgetPwd"
  177. >
  178. <el-icon
  179. v-if="isRegistering"
  180. style="margin-right: 10px"
  181. class="is-loading"
  182. >
  183. <svg
  184. viewBox="0 0 1024 1024"
  185. xmlns="http://www.w3.org/2000/svg"
  186. data-v-ea893728=""
  187. >
  188. <path
  189. fill="currentColor"
  190. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  191. ></path>
  192. </svg>
  193. </el-icon>
  194. {{ $t("login.SendEmail") }}
  195. </el-button>
  196. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  197. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  198. <span class="join">{{ $t("login.signIn") }}</span>
  199. </div>
  200. </div>
  201. </el-form>
  202. <!-- 重置密码 isLogin == 4-->
  203. <el-form
  204. v-if="isLogin == 4"
  205. ref="loginFormRef"
  206. :model="loginData4"
  207. :rules="loginRules"
  208. class="login-form"
  209. >
  210. <div class="flex text-white items-center">
  211. <span class="flex-1 text-center">{{
  212. $t("login.title") + " " + $t("login.resetPassword")
  213. }}</span>
  214. <el-tooltip
  215. class="box-item"
  216. effect="dark"
  217. :content="$t('navbar.LanguageChange')"
  218. placement="top-start"
  219. >
  220. <lang-select class="navItem" style="color: #ffffff" />
  221. </el-tooltip>
  222. </div>
  223. <el-form-item prop="verifyCode">
  224. <span class="text-white">
  225. <svg-icon icon-class="password" />
  226. </span>
  227. <el-input
  228. class="flex-1"
  229. v-model="loginData4.verifyCode"
  230. :placeholder="$t('login.SMSCode')"
  231. :type="'input'"
  232. size="large"
  233. name="password"
  234. />
  235. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  236. <svg-icon
  237. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  238. class="text-white cursor-pointer"
  239. />
  240. </span>
  241. </el-form-item>
  242. <el-form-item prop="password">
  243. <span class="text-white">
  244. <svg-icon icon-class="password" />
  245. </span>
  246. <el-input
  247. class="flex-1"
  248. v-model="loginData4.password"
  249. :placeholder="$t('login.newPwd')"
  250. :type="passwordVisible === false ? 'password' : 'input'"
  251. size="large"
  252. name="password"
  253. />
  254. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  255. <svg-icon
  256. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  257. class="text-white cursor-pointer"
  258. />
  259. </span>
  260. </el-form-item>
  261. <el-form-item prop="confirmPassword4">
  262. <span class="text-white">
  263. <svg-icon icon-class="password" />
  264. </span>
  265. <el-input
  266. class="flex-1"
  267. v-model="loginData4.confirmPassword4"
  268. :placeholder="$t('login.confirmNewPwd')"
  269. :type="passwordVisible === false ? 'password' : 'input'"
  270. size="large"
  271. name="confirmPassword4"
  272. />
  273. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  274. <svg-icon
  275. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  276. class="text-white cursor-pointer"
  277. />
  278. </span>
  279. </el-form-item>
  280. <el-button
  281. size="default"
  282. :loading="loading"
  283. type="primary"
  284. class="loginBtn"
  285. @click.prevent="resetPwdForm"
  286. >
  287. <el-icon
  288. v-if="isRegistering"
  289. style="margin-right: 10px"
  290. class="is-loading"
  291. >
  292. <svg
  293. viewBox="0 0 1024 1024"
  294. xmlns="http://www.w3.org/2000/svg"
  295. data-v-ea893728=""
  296. >
  297. <path
  298. fill="currentColor"
  299. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  300. ></path>
  301. </svg>
  302. </el-icon>
  303. {{ $t("login.confirm") }}
  304. </el-button>
  305. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  306. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  307. <span class="join">{{ $t("login.signIn") }}</span>
  308. </div>
  309. <!-- <div>
  310. <span
  311. class="join"
  312. @click="router.push({ path: 'createVideo', params: {} })"
  313. >{{ $t("login.gohome") }}</span
  314. >
  315. </div> -->
  316. </div>
  317. </el-form>
  318. <!-- 忘记密码邮件返回 isLogin == 5-->
  319. <el-form
  320. v-if="isLogin == 5"
  321. ref="loginFormRef"
  322. :model="loginData5"
  323. :rules="loginRules"
  324. class="login-form"
  325. >
  326. <div class="flex text-white items-center">
  327. <span class="flex-1 text-center">{{
  328. $t("login.title") + " " + $t("login.setNewPwd")
  329. }}</span>
  330. <el-tooltip
  331. class="box-item"
  332. effect="dark"
  333. :content="$t('navbar.LanguageChange')"
  334. placement="top-start"
  335. >
  336. <lang-select class="navItem" style="color: #ffffff" />
  337. </el-tooltip>
  338. </div>
  339. <el-form-item prop="newPwd">
  340. <div class="text-white">
  341. <svg-icon icon-class="password" />
  342. </div>
  343. <el-input
  344. class="flex-1"
  345. ref="email"
  346. size="large"
  347. v-model="loginData5.newPwd"
  348. :placeholder="$t('login.newPwd')"
  349. :type="passwordVisible === false ? 'password' : 'input'"
  350. name="password"
  351. />
  352. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  353. <svg-icon
  354. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  355. class="text-white cursor-pointer"
  356. />
  357. </span>
  358. </el-form-item>
  359. <el-form-item prop="confirmNewPwd">
  360. <div class="text-white">
  361. <svg-icon icon-class="password" />
  362. </div>
  363. <el-input
  364. class="flex-1"
  365. ref="email"
  366. size="large"
  367. v-model="loginData5.confirmNewPwd"
  368. :placeholder="$t('login.confirmNewPwd')"
  369. name="password"
  370. :type="passwordVisible === false ? 'password' : 'input'"
  371. />
  372. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  373. <svg-icon
  374. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  375. class="text-white cursor-pointer"
  376. />
  377. </span>
  378. </el-form-item>
  379. <el-button
  380. size="default"
  381. :loading="loading"
  382. type="primary"
  383. class="loginBtn"
  384. @click.prevent="resetPwdEmail"
  385. >
  386. <el-icon
  387. v-if="isRegistering"
  388. style="margin-right: 10px"
  389. class="is-loading"
  390. >
  391. <svg
  392. viewBox="0 0 1024 1024"
  393. xmlns="http://www.w3.org/2000/svg"
  394. data-v-ea893728=""
  395. >
  396. <path
  397. fill="currentColor"
  398. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  399. ></path>
  400. </svg>
  401. </el-icon>
  402. {{ $t("login.confirm") }}
  403. </el-button>
  404. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  405. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  406. <span class="join">{{ $t("login.signIn") }}</span>
  407. </div>
  408. </div>
  409. </el-form>
  410. <!-- 短信登录 isLogin == 7-->
  411. <el-form
  412. v-if="isLogin == 7"
  413. ref="loginFormRef"
  414. :model="loginData7"
  415. :rules="loginRules"
  416. class="login-form"
  417. >
  418. <div class="flex text-white items-center">
  419. <span class="flex-1 text-center">{{
  420. $t("login.title") + " " + $t("login.login")
  421. }}</span>
  422. <el-tooltip
  423. class="box-item"
  424. effect="dark"
  425. :content="$t('navbar.LanguageChange')"
  426. placement="top-start"
  427. >
  428. <lang-select class="navItem" style="color: #ffffff" />
  429. </el-tooltip>
  430. </div>
  431. <el-form-item prop="email">
  432. <div class="text-white">
  433. <svg-icon icon-class="user" />
  434. </div>
  435. <el-input
  436. class="flex-1"
  437. ref="email"
  438. size="large"
  439. v-model="loginData7.email"
  440. :placeholder="$t('login.email')"
  441. name="email"
  442. />
  443. </el-form-item>
  444. <!-- 验证码 -->
  445. <el-form-item prop="verifyCode">
  446. <span class="text-white">
  447. <svg-icon icon-class="verify_code" />
  448. </span>
  449. <el-input
  450. v-model="loginData7.verifyCode"
  451. auto-complete="off"
  452. :placeholder="$t('login.SMSLogin')"
  453. class="flex-1"
  454. />
  455. <span class="captcha">
  456. <div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn">
  457. {{ $t("login.sendSMS") }}
  458. </div>
  459. <div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
  460. </span>
  461. </el-form-item>
  462. <el-button
  463. size="default"
  464. :loading="loading"
  465. type="primary"
  466. class="loginBtn"
  467. @click.prevent="handleLoginBySMS"
  468. >
  469. <el-icon
  470. v-if="isLogining"
  471. style="margin-right: 10px"
  472. class="is-loading"
  473. >
  474. <svg
  475. viewBox="0 0 1024 1024"
  476. xmlns="http://www.w3.org/2000/svg"
  477. data-v-ea893728=""
  478. >
  479. <path
  480. fill="currentColor"
  481. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  482. ></path>
  483. </svg>
  484. </el-icon>
  485. {{ $t("login.loginBtn") }}
  486. </el-button>
  487. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  488. <div style="margin-bottom: 5px">
  489. <span class="join" @click="loginFlag(1)">{{
  490. $t("login.pwsLogin")
  491. }}</span>
  492. </div>
  493. <div>
  494. <span class="join" @click="loginFlag(3)">{{
  495. $t("login.forgetPwd")
  496. }}</span>
  497. </div>
  498. </div>
  499. </el-form>
  500. <!-- 邀请码填写 isLogin == 8-->
  501. <el-form
  502. v-if="isLogin == 8"
  503. ref="loginFormRef"
  504. :model="loginData7"
  505. :rules="loginRules"
  506. class="login-form"
  507. >
  508. <div class="flex text-white items-center">
  509. <span class="flex-1 text-center">{{
  510. $t("login.title") + " " + $t("login.setInvitatioCode")
  511. }}</span>
  512. <el-tooltip
  513. class="box-item"
  514. effect="dark"
  515. :content="$t('navbar.LanguageChange')"
  516. placement="top-start"
  517. >
  518. <lang-select class="navItem" style="color: #ffffff" />
  519. </el-tooltip>
  520. </div>
  521. <el-form-item prop="verifyCode">
  522. <div class="text-white">
  523. <svg-icon icon-class="user" />
  524. </div>
  525. <el-input
  526. class="flex-1"
  527. ref="invitatioCode"
  528. size="large"
  529. v-model="loginData8.invitatioCode"
  530. :placeholder="$t('login.invitatioCode')"
  531. name="invitatioCode"
  532. />
  533. </el-form-item>
  534. <el-button
  535. size="default"
  536. :loading="loading"
  537. type="primary"
  538. class="loginBtn"
  539. @click.prevent="handleInvitatioCode"
  540. >
  541. <el-icon
  542. v-if="isLogining"
  543. style="margin-right: 10px"
  544. class="is-loading"
  545. >
  546. <svg
  547. viewBox="0 0 1024 1024"
  548. xmlns="http://www.w3.org/2000/svg"
  549. data-v-ea893728=""
  550. >
  551. <path
  552. fill="currentColor"
  553. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  554. ></path>
  555. </svg>
  556. </el-icon>
  557. {{ $t("login.confirm") }}
  558. </el-button>
  559. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  560. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  561. <span class="join">{{ $t("login.signIn") }}</span>
  562. </div>
  563. <div style="margin-bottom: 5px">
  564. <span class="join" @click="router.push('/createVideo')">{{
  565. $t("login.gohome")
  566. }}</span>
  567. </div>
  568. </div>
  569. </el-form>
  570. </div>
  571. </template>
  572. <script setup lang="ts">
  573. import LangSelect from "@/components/LangSelect/index.vue";
  574. import SvgIcon from "@/components/SvgIcon/index.vue";
  575. import {
  576. loginApi,
  577. sendRegisterEmail,
  578. getCodeImgUrl,
  579. sendUpdPwdEmailApi,
  580. doUpdPassApi,
  581. resetPwdEmailApi,
  582. resetPwdFormApi,
  583. getSMSToLoginApi,
  584. loginByMSMApi,
  585. doFindInviteCode,
  586. doUpdateInviteCode,
  587. } from "@/apis/login";
  588. import axios from "axios";
  589. // 状态管理依赖
  590. import { userInfoModules } from "@/store/modules/userInfo";
  591. // API依赖
  592. import {
  593. LocationQuery,
  594. LocationQueryValue,
  595. useRoute,
  596. useRouter,
  597. } from "vue-router";
  598. import { useI18n } from "vue-i18n";
  599. const { locale } = useI18n();
  600. const currentLan = ref(locale);
  601. const userInfoPinia = userInfoModules();
  602. const route = useRoute();
  603. const router = useRouter();
  604. /**
  605. * 按钮loading
  606. */
  607. const loading = ref(false);
  608. /**
  609. * 密码是否可见
  610. */
  611. const passwordVisible = ref(false);
  612. /**
  613. * 验证码图片Base64字符串
  614. */
  615. const verifyCodeUrl = ref();
  616. /**
  617. * 登录/注册 显示哪个表单
  618. */
  619. const isLogin = ref(1);
  620. const showCodeImg = ref(true);
  621. /**
  622. * 登录表单引用
  623. */
  624. const loginFormRef = ref(ElForm);
  625. const isLogining = ref(false);
  626. const isRegistering = ref(false);
  627. const loginData = ref({
  628. username: "",
  629. password: "",
  630. captcha: "",
  631. });
  632. const loginData2 = ref({
  633. email: "",
  634. password: "",
  635. confirmPassword: "",
  636. });
  637. const loginData3 = ref({
  638. email: "",
  639. code: "",
  640. });
  641. const loginData4 = ref({
  642. verifyCode: "",
  643. password: "",
  644. confirmPassword4: "",
  645. });
  646. const loginData5 = ref({
  647. newPwd: "",
  648. confirmNewPwd: "",
  649. });
  650. const loginData6 = ref({
  651. SMSCode: "",
  652. });
  653. const loginData7 = ref({
  654. email: "",
  655. verifyCode: "",
  656. });
  657. const loginData8 = ref({
  658. invitatioCode: "",
  659. });
  660. const loginRules = ref({
  661. username: [
  662. {
  663. required: true,
  664. trigger: "blur",
  665. validator: passwordValidator,
  666. },
  667. ],
  668. email: [
  669. {
  670. required: true,
  671. trigger: "blur",
  672. validator: emailValidator,
  673. },
  674. ],
  675. password: [{ required: true, trigger: "blur", validator: passwordValidator }],
  676. confirmPassword: [
  677. { required: true, trigger: "blur", validator: confirmPasswordValidator },
  678. ],
  679. captcha: [
  680. {
  681. required: true,
  682. trigger: "blur",
  683. message:
  684. currentLan.value == "zh-cn"
  685. ? "请输入验证码2"
  686. : "Please input verifyCode",
  687. },
  688. ],
  689. invitatioCode: [
  690. {
  691. required: true,
  692. trigger: "blur",
  693. message:
  694. currentLan.value == "zh-cn"
  695. ? "请输入邀请码"
  696. : "Please input invitation code",
  697. },
  698. ],
  699. oldPassword: [
  700. { required: true, trigger: "blur", validator: passwordValidator },
  701. ],
  702. confirmPassword4: [
  703. { required: true, trigger: "blur", validator: confirmPasswordValidator4 },
  704. ],
  705. newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
  706. confirmNewPwd: [
  707. { required: true, trigger: "blur", validator: confirmPasswordValidator5 },
  708. ],
  709. });
  710. watch(currentLan, (newValue, oldValue) => {
  711. const loginRule = loginRules.value;
  712. loginRule.captcha[0].message =
  713. newValue == "zh-cn" ? "请输入验证码1" : "Please input verifyCode";
  714. setTimeout(() => {
  715. loginFormRef.value.resetFields();
  716. getInfo();
  717. }, 100);
  718. // 切换语言刷新验证码
  719. getCode();
  720. });
  721. /**
  722. * @description: 切换登录/注册状态
  723. */
  724. function loginFlag(type: number) {
  725. isLogin.value = type;
  726. // 切换登录/注册状态刷新验证码
  727. getCode();
  728. setTimeout(() => {
  729. loginFormRef.value.resetFields();
  730. }, 100);
  731. }
  732. /**
  733. * @description: 将账户/密码存储在本地
  734. * @param:email,password
  735. */
  736. function saveInfo(data: any) {
  737. const userInfo = JSON.stringify({
  738. email: data.phone,
  739. password: data.password,
  740. });
  741. // 将用户信息加密
  742. const enCodeUserInfo = encodeURI(userInfo);
  743. localStorage.setItem("userInfo", enCodeUserInfo);
  744. }
  745. /**
  746. * @description: 将存储在本地的账户/密码恢复至登录表单
  747. */
  748. function getInfo() {
  749. const data = localStorage.getItem("userInfo");
  750. // 将用户信息解密
  751. const deCodeUserInfo = decodeURI(data as any);
  752. const userInfo = JSON.parse(deCodeUserInfo);
  753. if (userInfo) {
  754. loginData.value.username = userInfo.email ? userInfo.email : "";
  755. loginData.value.password = userInfo.password ? userInfo.password : "";
  756. }
  757. }
  758. //#region 密码校验部分
  759. /**
  760. * 邮箱校验器
  761. */
  762. function emailValidator(rule: any, value: any, callback: any) {
  763. const msg =
  764. currentLan.value == "zh-cn"
  765. ? "手机号不能为空!"
  766. : "The E-amil can not be empty";
  767. const msg2 =
  768. currentLan.value == "zh-cn"
  769. ? "手机号格式不正确!"
  770. : "Incorrect email format";
  771. const phoneReg = /^[1][3-9]\d{9}$/;
  772. const emailReg =
  773. /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  774. if (!value) {
  775. callback(new Error(msg));
  776. } else if (!phoneReg.test(value)) {
  777. callback(new Error(msg2));
  778. } else {
  779. callback();
  780. }
  781. }
  782. /**
  783. * 密码校验器
  784. */
  785. function passwordValidator(rule: any, value: any, callback: any) {
  786. const msg =
  787. currentLan.value == "zh-cn"
  788. ? "密码不能为空!"
  789. : "The password can not be empty";
  790. const msg2 =
  791. currentLan.value == "zh-cn"
  792. ? "密码至少为6位!"
  793. : "The password can not be less than 6 digits";
  794. if (!value) {
  795. callback(new Error(msg));
  796. } else if (value.length < 6) {
  797. callback(new Error(msg2));
  798. } else {
  799. callback();
  800. }
  801. }
  802. /**
  803. * 确认密码校验器
  804. */
  805. function confirmPasswordValidator(rule: any, value: any, callback: any) {
  806. const msg =
  807. currentLan.value == "zh-cn"
  808. ? "确认密码不能为空!"
  809. : "The Confirm password can not be empty";
  810. const msg2 =
  811. currentLan.value == "zh-cn"
  812. ? "两次输入密码不一致!"
  813. : "Confirm Passward entered should match";
  814. if (!value) {
  815. callback(new Error(msg));
  816. } else if (value !== loginData2.value.password) {
  817. callback(new Error(msg2));
  818. } else {
  819. callback();
  820. }
  821. }
  822. /**
  823. * 确认密码校验器
  824. */
  825. function confirmPasswordValidator4(rule: any, value: any, callback: any) {
  826. const msg =
  827. currentLan.value == "zh-cn"
  828. ? "确认密码不能为空!"
  829. : "The Confirm password can not be empty";
  830. const msg2 =
  831. currentLan.value == "zh-cn"
  832. ? "两次输入密码不一致!"
  833. : "Confirm Passward entered should match";
  834. if (!value) {
  835. callback(new Error(msg));
  836. } else if (value !== loginData4.value.password) {
  837. callback(new Error(msg2));
  838. } else {
  839. callback();
  840. }
  841. }
  842. function confirmPasswordValidator5(rule: any, value: any, callback: any) {
  843. const msg =
  844. currentLan.value == "zh-cn"
  845. ? "确认密码不能为空!"
  846. : "The Confirm password can not be empty";
  847. const msg2 =
  848. currentLan.value == "zh-cn"
  849. ? "两次输入密码不一致!"
  850. : "Confirm Passward entered should match";
  851. if (!value) {
  852. callback(new Error(msg));
  853. } else if (value !== loginData5.value.newPwd) {
  854. callback(new Error(msg2));
  855. } else {
  856. callback();
  857. }
  858. }
  859. //#endregion ----------------------------
  860. // 登录行为
  861. function handleLogin() {
  862. loginFormRef.value.validate((val: any) => {
  863. if (val) {
  864. const data = {
  865. username: loginData.value.username,
  866. password: loginData.value.password,
  867. captcha: loginData.value.captcha,
  868. };
  869. isLogining.value = true;
  870. doLogin(data);
  871. } else {
  872. const msg =
  873. currentLan.value == "zh-cn"
  874. ? "请检查信息格式!"
  875. : "Please check the format !";
  876. ElMessage.error(msg);
  877. return;
  878. }
  879. });
  880. }
  881. // 注册行为
  882. //#region 忘记密码 表单3
  883. function sendEmailforgetPwd() {
  884. const msg =
  885. currentLan.value == "zh-cn"
  886. ? "短信验证码已发送至您的手机,请注意查收"
  887. : "The SMS verification code has been sent to your mobile phone, please check it";
  888. loginFormRef.value.validate(async (val: any) => {
  889. if (val) {
  890. const data = {
  891. phone: loginData3.value.email,
  892. code: loginData3.value.code,
  893. };
  894. await sendUpdPwdEmailApi(data)
  895. .then((res) => {
  896. console.log(res, "res");
  897. ElMessage.success(msg);
  898. isLogin.value = 4;
  899. })
  900. .catch((err) => {
  901. console.log(err, "err");
  902. ElMessage.error(err.message);
  903. });
  904. } else {
  905. const msg =
  906. currentLan.value == "zh-cn"
  907. ? "请检查信息格式!"
  908. : "Please check the format !";
  909. ElMessage.error(msg);
  910. return;
  911. }
  912. });
  913. }
  914. //#endregion --------------------------
  915. //#region 忘记密码 表单5
  916. function resetPwdEmail() {
  917. loginFormRef.value.validate(async (val: any) => {
  918. if (val) {
  919. try {
  920. const res = await resetPwdEmailApi({
  921. pwd: loginData5.value.newPwd,
  922. ticket: route.query.ticket,
  923. });
  924. localStorage.removeItem("AccessToken");
  925. loginData.value.email = route.query.email + "";
  926. loginData.value.password = "";
  927. isLogin.value = 1;
  928. router.push({ path: "login", query: {} });
  929. } catch (error: any) {
  930. ElMessage.error(error);
  931. console.log(error);
  932. }
  933. } else {
  934. const msg =
  935. currentLan.value == "zh-cn"
  936. ? "请检查信息格式!"
  937. : "Please check the format !";
  938. ElMessage.error(msg);
  939. return;
  940. }
  941. });
  942. }
  943. //#endregion --------------------------
  944. //#region 重置密码 表单4
  945. function resetPwdForm() {
  946. loginFormRef.value.validate(async (val: any) => {
  947. if (val) {
  948. try {
  949. const res = await doUpdPassApi({
  950. phone: loginData3.value.email,
  951. code: loginData4.value.verifyCode,
  952. pwd: loginData4.value.password,
  953. });
  954. localStorage.removeItem("AccessToken");
  955. loginData.value.password = "";
  956. isLogin.value = 1;
  957. ElMessage.success(
  958. currentLan.value == "zh-cn"
  959. ? "重置密码成功!"
  960. : "Reset password successfully"
  961. );
  962. // router.push({ path: "login", query: {} });
  963. } catch (error: any) {
  964. ElMessage.error(error.message);
  965. console.log(error);
  966. }
  967. } else {
  968. const msg =
  969. currentLan.value == "zh-cn"
  970. ? "请检查信息格式!"
  971. : "Please check the format !";
  972. ElMessage.error(msg);
  973. return;
  974. }
  975. });
  976. }
  977. //#endregion --------------------------
  978. //#region 短信登录 表单7
  979. // 获取验证码
  980. const SMSTimeOut = ref(0);
  981. async function getSMSToLogin() {
  982. let phoneReg = /^[1][3-9]\d{9}$/;
  983. let phoneValide = phoneReg.test(loginData7.value.email);
  984. if (!phoneValide) {
  985. ElMessage.error(
  986. currentLan.value == "zh-cn"
  987. ? "请输入正确的手机号!"
  988. : "Please enter the correct phone number!"
  989. );
  990. return;
  991. }
  992. try {
  993. await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
  994. ElMessage.success(
  995. currentLan.value == "zh-cn"
  996. ? "短信验证码发送成功!"
  997. : "SMS verification code sent successfully!"
  998. );
  999. SMSTimeOut.value = 60;
  1000. const timer = setInterval(() => {
  1001. if (SMSTimeOut.value != 0) {
  1002. SMSTimeOut.value--;
  1003. } else {
  1004. clearInterval(timer);
  1005. }
  1006. }, 1000);
  1007. });
  1008. } catch (error: any) {
  1009. ElMessage.error(error.message);
  1010. }
  1011. }
  1012. // 登录行为
  1013. function handleLoginBySMS() {
  1014. loginFormRef.value.validate((val: any) => {
  1015. if (val) {
  1016. const data = {
  1017. phone: loginData7.value.email,
  1018. code: loginData7.value.verifyCode,
  1019. };
  1020. isLogining.value = true;
  1021. doLoginByMSM(data);
  1022. } else {
  1023. const msg =
  1024. currentLan.value == "zh-cn"
  1025. ? "请检查信息格式!"
  1026. : "Please check the format !";
  1027. ElMessage.error(msg);
  1028. return;
  1029. }
  1030. });
  1031. }
  1032. async function doLoginByMSM(data: any) {
  1033. const msg =
  1034. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1035. await loginByMSMApi(data)
  1036. .then(async (res: any) => {
  1037. console.log(res, "res");
  1038. localStorage.setItem("AccessToken", res.data.token);
  1039. saveInfo(data);
  1040. isLogining.value = false;
  1041. // await checkInviteCode();
  1042. ElMessage.success(msg);
  1043. router.push("/createVideo");
  1044. // 注册成功将账号密码保存到本地
  1045. })
  1046. .catch((err) => {
  1047. console.log(err, "err");
  1048. // 登录失败刷新验证码
  1049. getCode();
  1050. ElMessage.error(err.message);
  1051. isLogining.value = false;
  1052. if (err.code == 2112) {
  1053. reSendEmail(data.email);
  1054. }
  1055. });
  1056. }
  1057. //#endregion --------------------------
  1058. //#region 查询邀请码 表单8
  1059. /**
  1060. * @description:查询用户邀请码状态
  1061. */
  1062. async function checkInviteCode() {
  1063. try {
  1064. const res = await doFindInviteCode();
  1065. // console.log(res, '查询用户邀请码数据')
  1066. const status = res.data.status;
  1067. // 当没有邀请码时,切换输入验证码页面
  1068. if (status == 0) {
  1069. isLogin.value = 8;
  1070. // 有邀请码直接前往我的页面
  1071. } else if (status == 1) {
  1072. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1073. ElMessage.success(
  1074. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1075. );
  1076. router.push({
  1077. path: "/createVideo",
  1078. });
  1079. } else {
  1080. router.push("/createVideo");
  1081. }
  1082. } catch (error: any) {
  1083. console.log(error, "error");
  1084. ElMessage.error(error.message);
  1085. }
  1086. }
  1087. // 填写邀请码
  1088. async function handleInvitatioCode() {
  1089. const data = {
  1090. inviteCode: loginData8.value.invitatioCode,
  1091. };
  1092. try {
  1093. const res = await doUpdateInviteCode(data);
  1094. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1095. ElMessage.success(
  1096. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1097. );
  1098. router.push({
  1099. path: "/createVideo",
  1100. });
  1101. } catch (error: any) {
  1102. console.log(error, "error");
  1103. ElMessage.error(error.message);
  1104. }
  1105. }
  1106. //#endregion -----------------------
  1107. function getCode() {
  1108. showCodeImg.value = false;
  1109. axios({
  1110. url: getCodeImgUrl,
  1111. method: "get",
  1112. }).then(() => {
  1113. verifyCodeUrl.value = getCodeImgUrl;
  1114. showCodeImg.value = true;
  1115. });
  1116. }
  1117. /**
  1118. * @description:登录
  1119. * @param {Object} data
  1120. * @return: data
  1121. */
  1122. async function doLogin(data: any) {
  1123. const msg =
  1124. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1125. await loginApi(data)
  1126. .then(async (res) => {
  1127. console.log(res, "res");
  1128. localStorage.setItem("AccessToken", res.data.token);
  1129. // 注册成功将账号密码保存到本地
  1130. saveInfo(data);
  1131. isLogining.value = false;
  1132. // await checkInviteCode();
  1133. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1134. ElMessage.success(msg);
  1135. router.push("/createVideo");
  1136. })
  1137. .catch((err) => {
  1138. console.log(err, "err");
  1139. // 登录失败刷新验证码
  1140. getCode();
  1141. ElMessage.error(err.message);
  1142. isLogining.value = false;
  1143. if (err.code == 2112) {
  1144. reSendEmail(data.email);
  1145. }
  1146. });
  1147. }
  1148. /**
  1149. * @description:重新发送邮件
  1150. * @param {string} email
  1151. * @return: data
  1152. */
  1153. async function reSendEmail(email: string) {
  1154. const msg =
  1155. currentLan.value == "zh-cn"
  1156. ? "确认信息已发送至您的邮箱,请注意查收!"
  1157. : "An email has been send to you, Please pay attention to confirm !";
  1158. await sendRegisterEmail(email)
  1159. .then((res) => {
  1160. console.log(res, "res");
  1161. ElMessage.success(msg);
  1162. })
  1163. .catch((err) => {
  1164. console.log(err, "err");
  1165. ElMessage.error(err.message);
  1166. });
  1167. }
  1168. onMounted(() => {
  1169. getCode();
  1170. getInfo();
  1171. // 重置密码
  1172. // if (router.currentRoute.value.params.type) {
  1173. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1174. // isLogin.value = 4;
  1175. // }
  1176. // if (router.currentRoute.value.params.type) {
  1177. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1178. // isLogin.value = 4;
  1179. // }
  1180. if (route.query.type) {
  1181. isLogin.value = 4;
  1182. }
  1183. //有resetPwd则说明是重置密码邮件来的
  1184. if (route.query.resetPwd) {
  1185. isLogin.value = 5;
  1186. // route.query.ticket
  1187. }
  1188. });
  1189. </script>
  1190. <style lang="scss" scoped>
  1191. .login-container {
  1192. position: relative;
  1193. width: 100%;
  1194. // width: 1920px;
  1195. // height: 1080px;
  1196. min-height: 100%;
  1197. overflow: hidden;
  1198. // background-color: #2d3a4b;
  1199. .Version {
  1200. position: absolute;
  1201. bottom: 20px;
  1202. right: 20px;
  1203. color: #ffffff;
  1204. }
  1205. .login-form {
  1206. position: absolute;
  1207. top: 46%;
  1208. left: 10%;
  1209. width: 520px;
  1210. max-width: 100%;
  1211. padding: 20px;
  1212. overflow: hidden;
  1213. backdrop-filter: blur(3px);
  1214. background: linear-gradient(
  1215. 123.64deg,
  1216. rgba(188, 193, 196, 0.1) -22.71%,
  1217. rgba(255, 255, 255, 0.039) 70.04%
  1218. );
  1219. border-radius: 20px;
  1220. transform: translateY(-50%);
  1221. border: 1px solid #cacaca;
  1222. transition: all 0.15s;
  1223. .captcha {
  1224. position: absolute;
  1225. top: 0;
  1226. right: 0;
  1227. img {
  1228. width: 120px;
  1229. height: 48px;
  1230. cursor: pointer;
  1231. }
  1232. .sendSMSBtn {
  1233. width: 120px;
  1234. height: 48px;
  1235. line-height: 48px;
  1236. color: #fff;
  1237. text-align: center;
  1238. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1239. }
  1240. }
  1241. &:hover {
  1242. backdrop-filter: blur(7px);
  1243. }
  1244. .items-center {
  1245. padding: 20px;
  1246. font-size: 30px;
  1247. }
  1248. .el-form-item {
  1249. .text-white {
  1250. padding: 8px;
  1251. }
  1252. }
  1253. }
  1254. }
  1255. .loginBtn {
  1256. width: 100%;
  1257. height: 40px;
  1258. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1259. transition: all 0.3s;
  1260. &:hover {
  1261. transform: scale(1.02);
  1262. }
  1263. cursor: pointer;
  1264. }
  1265. .bottomBtnCN {
  1266. display: flex;
  1267. justify-content: space-between;
  1268. align-items: center;
  1269. padding: 0 10px;
  1270. color: #fff;
  1271. text-align: center;
  1272. margin-top: 20px;
  1273. .join {
  1274. cursor: pointer;
  1275. border-bottom: 2px solid #ffffff00;
  1276. padding: 0 3px;
  1277. padding-bottom: 2px;
  1278. transition: all 0.3s;
  1279. &:hover {
  1280. border-bottom: 2px solid #ffffff;
  1281. }
  1282. }
  1283. }
  1284. .bottomBtnEN {
  1285. padding: 0 10px;
  1286. color: #fff;
  1287. text-align: center;
  1288. margin-top: 20px;
  1289. .join {
  1290. cursor: pointer;
  1291. border-bottom: 2px solid #ffffff00;
  1292. padding: 0 3px;
  1293. padding-bottom: 2px;
  1294. transition: all 0.3s;
  1295. &:hover {
  1296. border-bottom: 2px solid #ffffff;
  1297. }
  1298. }
  1299. }
  1300. .videoBox {
  1301. position: absolute;
  1302. top: 0;
  1303. left: 0;
  1304. width: 100%;
  1305. height: 100%;
  1306. z-index: -1;
  1307. video {
  1308. width: 100%;
  1309. height: 100%;
  1310. object-fit: fill;
  1311. }
  1312. }
  1313. .el-form-item {
  1314. background: rgb(0 0 0 / 10%);
  1315. border: 1px solid #ffffff2d;
  1316. border-radius: 5px;
  1317. }
  1318. .el-input {
  1319. background: transparent;
  1320. // 子组件 scoped 无效,使用 :deep
  1321. :deep(.el-input__wrapper) {
  1322. padding: 0;
  1323. background: transparent;
  1324. box-shadow: none;
  1325. .el-input__inner {
  1326. color: #fff;
  1327. background: transparent;
  1328. border: 0;
  1329. border-radius: 0;
  1330. caret-color: #fff;
  1331. &:-webkit-autofill {
  1332. box-shadow: 0 0 0 1000px transparent inset !important;
  1333. -webkit-text-fill-color: #fff !important;
  1334. }
  1335. // 设置输入框自动填充的延迟属性
  1336. &:-webkit-autofill,
  1337. &:-webkit-autofill:hover,
  1338. &:-webkit-autofill:focus,
  1339. &:-webkit-autofill:active {
  1340. transition: color 99999s ease-out, background-color 99999s ease-out;
  1341. transition-delay: 99999s;
  1342. }
  1343. }
  1344. }
  1345. }
  1346. @keyframes rotate {
  1347. from {
  1348. transform: rotate(0deg);
  1349. }
  1350. to {
  1351. transform: rotate(360deg);
  1352. }
  1353. }
  1354. </style>