邃芒慧影管理端
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

1449 wiersze
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 { getMenuNavApi } from "@/apis/Permission.js";
  589. import axios from "axios";
  590. // 状态管理依赖
  591. import { userInfoModules } from "@/store/modules/userInfo";
  592. // API依赖
  593. import {
  594. LocationQuery,
  595. LocationQueryValue,
  596. useRoute,
  597. useRouter,
  598. } from "vue-router";
  599. import { useI18n } from "vue-i18n";
  600. const { locale } = useI18n();
  601. const currentLan = ref(locale);
  602. const userInfoPinia = userInfoModules();
  603. const route = useRoute();
  604. const router = useRouter();
  605. /**
  606. * 按钮loading
  607. */
  608. const loading = ref(false);
  609. /**
  610. * 密码是否可见
  611. */
  612. const passwordVisible = ref(false);
  613. /**
  614. * 验证码图片Base64字符串
  615. */
  616. const verifyCodeUrl = ref();
  617. /**
  618. * 登录/注册 显示哪个表单
  619. */
  620. const isLogin = ref(1);
  621. const showCodeImg = ref(true);
  622. /**
  623. * 登录表单引用
  624. */
  625. const loginFormRef = ref(ElForm);
  626. const isLogining = ref(false);
  627. const isRegistering = ref(false);
  628. const loginData = ref({
  629. username: "",
  630. password: "",
  631. captcha: "",
  632. });
  633. const loginData2 = ref({
  634. email: "",
  635. password: "",
  636. confirmPassword: "",
  637. });
  638. const loginData3 = ref({
  639. email: "",
  640. code: "",
  641. });
  642. const loginData4 = ref({
  643. verifyCode: "",
  644. password: "",
  645. confirmPassword4: "",
  646. });
  647. const loginData5 = ref({
  648. newPwd: "",
  649. confirmNewPwd: "",
  650. });
  651. const loginData6 = ref({
  652. SMSCode: "",
  653. });
  654. const loginData7 = ref({
  655. email: "",
  656. verifyCode: "",
  657. });
  658. const loginData8 = ref({
  659. invitatioCode: "",
  660. });
  661. const loginRules = ref({
  662. username: [
  663. {
  664. required: true,
  665. trigger: "blur",
  666. validator: passwordValidator,
  667. },
  668. ],
  669. email: [
  670. {
  671. required: true,
  672. trigger: "blur",
  673. validator: emailValidator,
  674. },
  675. ],
  676. password: [{ required: true, trigger: "blur", validator: passwordValidator }],
  677. confirmPassword: [
  678. { required: true, trigger: "blur", validator: confirmPasswordValidator },
  679. ],
  680. captcha: [
  681. {
  682. required: true,
  683. trigger: "blur",
  684. message:
  685. currentLan.value == "zh-cn"
  686. ? "请输入验证码2"
  687. : "Please input verifyCode",
  688. },
  689. ],
  690. invitatioCode: [
  691. {
  692. required: true,
  693. trigger: "blur",
  694. message:
  695. currentLan.value == "zh-cn"
  696. ? "请输入邀请码"
  697. : "Please input invitation code",
  698. },
  699. ],
  700. oldPassword: [
  701. { required: true, trigger: "blur", validator: passwordValidator },
  702. ],
  703. confirmPassword4: [
  704. { required: true, trigger: "blur", validator: confirmPasswordValidator4 },
  705. ],
  706. newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
  707. confirmNewPwd: [
  708. { required: true, trigger: "blur", validator: confirmPasswordValidator5 },
  709. ],
  710. });
  711. watch(currentLan, (newValue, oldValue) => {
  712. const loginRule = loginRules.value;
  713. loginRule.captcha[0].message =
  714. newValue == "zh-cn" ? "请输入验证码1" : "Please input verifyCode";
  715. setTimeout(() => {
  716. loginFormRef.value.resetFields();
  717. getInfo();
  718. }, 100);
  719. // 切换语言刷新验证码
  720. getCode();
  721. });
  722. /**
  723. * @description: 切换登录/注册状态
  724. */
  725. function loginFlag(type: number) {
  726. isLogin.value = type;
  727. // 切换登录/注册状态刷新验证码
  728. getCode();
  729. setTimeout(() => {
  730. loginFormRef.value.resetFields();
  731. }, 100);
  732. }
  733. /**
  734. * @description: 将账户/密码存储在本地
  735. * @param:email,password
  736. */
  737. function saveInfo(data: any) {
  738. const userInfo = JSON.stringify({
  739. email: data.phone,
  740. password: data.password,
  741. });
  742. // 将用户信息加密
  743. const enCodeUserInfo = encodeURI(userInfo);
  744. localStorage.setItem("userInfo", enCodeUserInfo);
  745. }
  746. /**
  747. * @description: 将存储在本地的账户/密码恢复至登录表单
  748. */
  749. function getInfo() {
  750. const data = localStorage.getItem("userInfo");
  751. // 将用户信息解密
  752. const deCodeUserInfo = decodeURI(data as any);
  753. const userInfo = JSON.parse(deCodeUserInfo);
  754. if (userInfo) {
  755. loginData.value.username = userInfo.email ? userInfo.email : "";
  756. loginData.value.password = userInfo.password ? userInfo.password : "";
  757. }
  758. }
  759. //#region 密码校验部分
  760. /**
  761. * 邮箱校验器
  762. */
  763. function emailValidator(rule: any, value: any, callback: any) {
  764. const msg =
  765. currentLan.value == "zh-cn"
  766. ? "手机号不能为空!"
  767. : "The E-amil can not be empty";
  768. const msg2 =
  769. currentLan.value == "zh-cn"
  770. ? "手机号格式不正确!"
  771. : "Incorrect email format";
  772. const phoneReg = /^[1][3-9]\d{9}$/;
  773. const emailReg =
  774. /^(([^<>()[\]\\.,;:\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,}))$/;
  775. if (!value) {
  776. callback(new Error(msg));
  777. } else if (!phoneReg.test(value)) {
  778. callback(new Error(msg2));
  779. } else {
  780. callback();
  781. }
  782. }
  783. /**
  784. * 密码校验器
  785. */
  786. function passwordValidator(rule: any, value: any, callback: any) {
  787. const msg =
  788. currentLan.value == "zh-cn"
  789. ? "密码不能为空!"
  790. : "The password can not be empty";
  791. const msg2 =
  792. currentLan.value == "zh-cn"
  793. ? "密码至少为6位!"
  794. : "The password can not be less than 6 digits";
  795. if (!value) {
  796. callback(new Error(msg));
  797. } else if (value.length < 6) {
  798. callback(new Error(msg2));
  799. } else {
  800. callback();
  801. }
  802. }
  803. /**
  804. * 确认密码校验器
  805. */
  806. function confirmPasswordValidator(rule: any, value: any, callback: any) {
  807. const msg =
  808. currentLan.value == "zh-cn"
  809. ? "确认密码不能为空!"
  810. : "The Confirm password can not be empty";
  811. const msg2 =
  812. currentLan.value == "zh-cn"
  813. ? "两次输入密码不一致!"
  814. : "Confirm Passward entered should match";
  815. if (!value) {
  816. callback(new Error(msg));
  817. } else if (value !== loginData2.value.password) {
  818. callback(new Error(msg2));
  819. } else {
  820. callback();
  821. }
  822. }
  823. /**
  824. * 确认密码校验器
  825. */
  826. function confirmPasswordValidator4(rule: any, value: any, callback: any) {
  827. const msg =
  828. currentLan.value == "zh-cn"
  829. ? "确认密码不能为空!"
  830. : "The Confirm password can not be empty";
  831. const msg2 =
  832. currentLan.value == "zh-cn"
  833. ? "两次输入密码不一致!"
  834. : "Confirm Passward entered should match";
  835. if (!value) {
  836. callback(new Error(msg));
  837. } else if (value !== loginData4.value.password) {
  838. callback(new Error(msg2));
  839. } else {
  840. callback();
  841. }
  842. }
  843. function confirmPasswordValidator5(rule: any, value: any, callback: any) {
  844. const msg =
  845. currentLan.value == "zh-cn"
  846. ? "确认密码不能为空!"
  847. : "The Confirm password can not be empty";
  848. const msg2 =
  849. currentLan.value == "zh-cn"
  850. ? "两次输入密码不一致!"
  851. : "Confirm Passward entered should match";
  852. if (!value) {
  853. callback(new Error(msg));
  854. } else if (value !== loginData5.value.newPwd) {
  855. callback(new Error(msg2));
  856. } else {
  857. callback();
  858. }
  859. }
  860. //#endregion ----------------------------
  861. // 注册行为
  862. //#region 忘记密码 表单3
  863. function sendEmailforgetPwd() {
  864. const msg =
  865. currentLan.value == "zh-cn"
  866. ? "短信验证码已发送至您的手机,请注意查收"
  867. : "The SMS verification code has been sent to your mobile phone, please check it";
  868. loginFormRef.value.validate(async (val: any) => {
  869. if (val) {
  870. const data = {
  871. phone: loginData3.value.email,
  872. code: loginData3.value.code,
  873. };
  874. await sendUpdPwdEmailApi(data)
  875. .then((res) => {
  876. console.log(res, "res");
  877. ElMessage.success(msg);
  878. isLogin.value = 4;
  879. })
  880. .catch((err) => {
  881. console.log(err, "err");
  882. ElMessage.error(err.message);
  883. });
  884. } else {
  885. const msg =
  886. currentLan.value == "zh-cn"
  887. ? "请检查信息格式!"
  888. : "Please check the format !";
  889. ElMessage.error(msg);
  890. return;
  891. }
  892. });
  893. }
  894. //#endregion --------------------------
  895. //#region 忘记密码 表单5
  896. function resetPwdEmail() {
  897. loginFormRef.value.validate(async (val: any) => {
  898. if (val) {
  899. try {
  900. const res = await resetPwdEmailApi({
  901. pwd: loginData5.value.newPwd,
  902. ticket: route.query.ticket,
  903. });
  904. localStorage.removeItem("AccessToken");
  905. // loginData.value.email = route.query.email + "";
  906. loginData.value.password = "";
  907. isLogin.value = 1;
  908. router.push({ path: "login", query: {} });
  909. } catch (error: any) {
  910. ElMessage.error(error);
  911. console.log(error);
  912. }
  913. } else {
  914. const msg =
  915. currentLan.value == "zh-cn"
  916. ? "请检查信息格式!"
  917. : "Please check the format !";
  918. ElMessage.error(msg);
  919. return;
  920. }
  921. });
  922. }
  923. //#endregion --------------------------
  924. //#region 重置密码 表单4
  925. function resetPwdForm() {
  926. loginFormRef.value.validate(async (val: any) => {
  927. if (val) {
  928. try {
  929. const res = await doUpdPassApi({
  930. phone: loginData3.value.email,
  931. code: loginData4.value.verifyCode,
  932. pwd: loginData4.value.password,
  933. });
  934. localStorage.removeItem("AccessToken");
  935. loginData.value.password = "";
  936. isLogin.value = 1;
  937. ElMessage.success(
  938. currentLan.value == "zh-cn"
  939. ? "重置密码成功!"
  940. : "Reset password successfully"
  941. );
  942. // router.push({ path: "login", query: {} });
  943. } catch (error: any) {
  944. ElMessage.error(error.message);
  945. console.log(error);
  946. }
  947. } else {
  948. const msg =
  949. currentLan.value == "zh-cn"
  950. ? "请检查信息格式!"
  951. : "Please check the format !";
  952. ElMessage.error(msg);
  953. return;
  954. }
  955. });
  956. }
  957. //#endregion --------------------------
  958. //#region 短信登录 表单7
  959. // 获取验证码
  960. const SMSTimeOut = ref(0);
  961. async function getSMSToLogin() {
  962. let phoneReg = /^[1][3-9]\d{9}$/;
  963. let phoneValide = phoneReg.test(loginData7.value.email);
  964. if (!phoneValide) {
  965. ElMessage.error(
  966. currentLan.value == "zh-cn"
  967. ? "请输入正确的手机号!"
  968. : "Please enter the correct phone number!"
  969. );
  970. return;
  971. }
  972. try {
  973. await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
  974. ElMessage.success(
  975. currentLan.value == "zh-cn"
  976. ? "短信验证码发送成功!"
  977. : "SMS verification code sent successfully!"
  978. );
  979. SMSTimeOut.value = 60;
  980. const timer = setInterval(() => {
  981. if (SMSTimeOut.value != 0) {
  982. SMSTimeOut.value--;
  983. } else {
  984. clearInterval(timer);
  985. }
  986. }, 1000);
  987. });
  988. } catch (error: any) {
  989. ElMessage.error(error.message);
  990. }
  991. }
  992. // 登录行为
  993. function handleLoginBySMS() {
  994. loginFormRef.value.validate((val: any) => {
  995. if (val) {
  996. const data = {
  997. phone: loginData7.value.email,
  998. code: loginData7.value.verifyCode,
  999. };
  1000. isLogining.value = true;
  1001. doLoginByMSM(data);
  1002. } else {
  1003. const msg =
  1004. currentLan.value == "zh-cn"
  1005. ? "请检查信息格式!"
  1006. : "Please check the format !";
  1007. ElMessage.error(msg);
  1008. return;
  1009. }
  1010. });
  1011. }
  1012. async function doLoginByMSM(data: any) {
  1013. const msg =
  1014. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1015. await loginByMSMApi(data)
  1016. .then(async (res: any) => {
  1017. console.log(res, "res");
  1018. localStorage.setItem("AccessToken", res.data.token);
  1019. saveInfo(data);
  1020. isLogining.value = false;
  1021. // await checkInviteCode();
  1022. ElMessage.success(msg);
  1023. router.push("/createVideo");
  1024. // 注册成功将账号密码保存到本地
  1025. })
  1026. .catch((err) => {
  1027. console.log(err, "err");
  1028. // 登录失败刷新验证码
  1029. getCode();
  1030. ElMessage.error(err.message);
  1031. isLogining.value = false;
  1032. if (err.code == 2112) {
  1033. reSendEmail(data.email);
  1034. }
  1035. });
  1036. }
  1037. //#endregion --------------------------
  1038. //#region 查询邀请码 表单8
  1039. /**
  1040. * @description:查询用户邀请码状态
  1041. */
  1042. async function checkInviteCode() {
  1043. try {
  1044. const res = await doFindInviteCode();
  1045. // console.log(res, '查询用户邀请码数据')
  1046. const status = res.data.status;
  1047. // 当没有邀请码时,切换输入验证码页面
  1048. if (status == 0) {
  1049. isLogin.value = 8;
  1050. // 有邀请码直接前往我的页面
  1051. } else if (status == 1) {
  1052. // userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1053. ElMessage.success(
  1054. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1055. );
  1056. router.push({
  1057. path: "/createVideo",
  1058. });
  1059. } else {
  1060. router.push("/createVideo");
  1061. }
  1062. } catch (error: any) {
  1063. console.log(error, "error");
  1064. ElMessage.error(error.message);
  1065. }
  1066. }
  1067. // 填写邀请码
  1068. async function handleInvitatioCode() {
  1069. const data = {
  1070. inviteCode: loginData8.value.invitatioCode,
  1071. };
  1072. try {
  1073. const res = await doUpdateInviteCode(data);
  1074. // userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1075. ElMessage.success(
  1076. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1077. );
  1078. router.push({
  1079. path: "/createVideo",
  1080. });
  1081. } catch (error: any) {
  1082. console.log(error, "error");
  1083. ElMessage.error(error.message);
  1084. }
  1085. }
  1086. //#endregion -----------------------
  1087. function getCode() {
  1088. showCodeImg.value = false;
  1089. axios({
  1090. url: getCodeImgUrl,
  1091. method: "get",
  1092. }).then((res) => {
  1093. verifyCodeUrl.value = getCodeImgUrl;
  1094. showCodeImg.value = true;
  1095. });
  1096. }
  1097. /**
  1098. * @description:登录
  1099. * @param {Object} data
  1100. * @return: data
  1101. */
  1102. /**
  1103. * @description:重新发送邮件
  1104. * @param {string} email
  1105. * @return: data
  1106. */
  1107. async function reSendEmail(email: string) {
  1108. const msg =
  1109. currentLan.value == "zh-cn"
  1110. ? "确认信息已发送至您的邮箱,请注意查收!"
  1111. : "An email has been send to you, Please pay attention to confirm !";
  1112. await sendRegisterEmail(email)
  1113. .then((res) => {
  1114. console.log(res, "res");
  1115. ElMessage.success(msg);
  1116. })
  1117. .catch((err) => {
  1118. console.log(err, "err");
  1119. ElMessage.error(err.message);
  1120. });
  1121. }
  1122. //#region 新登录
  1123. // 登录行为
  1124. function handleLogin() {
  1125. loginFormRef.value.validate((val: any) => {
  1126. if (val) {
  1127. const data = {
  1128. username: loginData.value.username,
  1129. password: loginData.value.password,
  1130. captcha: loginData.value.captcha,
  1131. };
  1132. isLogining.value = true;
  1133. doLogin(data);
  1134. } else {
  1135. const msg =
  1136. currentLan.value == "zh-cn"
  1137. ? "请检查信息格式!"
  1138. : "Please check the format !";
  1139. ElMessage.error(msg);
  1140. return;
  1141. }
  1142. });
  1143. }
  1144. async function doLogin(data: any) {
  1145. const msg =
  1146. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1147. await loginApi(data)
  1148. .then(async (res) => {
  1149. console.log(res, "res");
  1150. // localStorage.setItem("AccessToken", res.data.token);
  1151. // 注册成功将账号密码保存到本地
  1152. saveInfo(data);
  1153. await getMenuNavFunc();
  1154. isLogining.value = false;
  1155. // await checkInviteCode();
  1156. // userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1157. ElMessage.success(msg);
  1158. router.push("/home");
  1159. })
  1160. .catch((err) => {
  1161. console.log(err, "err");
  1162. // 登录失败刷新验证码
  1163. getCode();
  1164. ElMessage.error(err);
  1165. isLogining.value = false;
  1166. if (err.code == 2112) {
  1167. reSendEmail(data.email);
  1168. }
  1169. });
  1170. }
  1171. //#endregion
  1172. //#region 获取菜单导航路由
  1173. async function getMenuNavFunc() {
  1174. try {
  1175. const res = await getMenuNavApi();
  1176. } catch (error) {
  1177. console.log(error);
  1178. }
  1179. }
  1180. //#endregion --------------------------------
  1181. onMounted(() => {
  1182. getCode();
  1183. getInfo();
  1184. // 重置密码
  1185. // if (router.currentRoute.value.params.type) {
  1186. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1187. // isLogin.value = 4;
  1188. // }
  1189. // if (router.currentRoute.value.params.type) {
  1190. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1191. // isLogin.value = 4;
  1192. // }
  1193. if (route.query.type) {
  1194. isLogin.value = 4;
  1195. }
  1196. //有resetPwd则说明是重置密码邮件来的
  1197. if (route.query.resetPwd) {
  1198. isLogin.value = 5;
  1199. // route.query.ticket
  1200. }
  1201. });
  1202. </script>
  1203. <style lang="scss" scoped>
  1204. .login-container {
  1205. position: relative;
  1206. width: 100%;
  1207. // width: 1920px;
  1208. // height: 1080px;
  1209. min-height: 100%;
  1210. overflow: hidden;
  1211. // background-color: #2d3a4b;
  1212. .Version {
  1213. position: absolute;
  1214. bottom: 20px;
  1215. right: 20px;
  1216. color: #ffffff;
  1217. }
  1218. .login-form {
  1219. position: absolute;
  1220. top: 46%;
  1221. left: 10%;
  1222. width: 520px;
  1223. max-width: 100%;
  1224. padding: 20px;
  1225. overflow: hidden;
  1226. backdrop-filter: blur(3px);
  1227. background: linear-gradient(
  1228. 123.64deg,
  1229. rgba(188, 193, 196, 0.1) -22.71%,
  1230. rgba(255, 255, 255, 0.039) 70.04%
  1231. );
  1232. border-radius: 20px;
  1233. transform: translateY(-50%);
  1234. border: 1px solid #cacaca;
  1235. transition: all 0.15s;
  1236. .captcha {
  1237. position: absolute;
  1238. top: 0;
  1239. right: 0;
  1240. img {
  1241. width: 120px;
  1242. height: 48px;
  1243. cursor: pointer;
  1244. }
  1245. .sendSMSBtn {
  1246. width: 120px;
  1247. height: 48px;
  1248. line-height: 48px;
  1249. color: #fff;
  1250. text-align: center;
  1251. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1252. }
  1253. }
  1254. &:hover {
  1255. backdrop-filter: blur(7px);
  1256. }
  1257. .items-center {
  1258. padding: 20px;
  1259. font-size: 30px;
  1260. }
  1261. .el-form-item {
  1262. .text-white {
  1263. padding: 8px;
  1264. }
  1265. }
  1266. }
  1267. }
  1268. .loginBtn {
  1269. width: 100%;
  1270. height: 40px;
  1271. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1272. transition: all 0.3s;
  1273. &:hover {
  1274. transform: scale(1.02);
  1275. }
  1276. cursor: pointer;
  1277. }
  1278. .bottomBtnCN {
  1279. display: flex;
  1280. justify-content: space-between;
  1281. align-items: center;
  1282. padding: 0 10px;
  1283. color: #fff;
  1284. text-align: center;
  1285. margin-top: 20px;
  1286. .join {
  1287. cursor: pointer;
  1288. border-bottom: 2px solid #ffffff00;
  1289. padding: 0 3px;
  1290. padding-bottom: 2px;
  1291. transition: all 0.3s;
  1292. &:hover {
  1293. border-bottom: 2px solid #ffffff;
  1294. }
  1295. }
  1296. }
  1297. .bottomBtnEN {
  1298. padding: 0 10px;
  1299. color: #fff;
  1300. text-align: center;
  1301. margin-top: 20px;
  1302. .join {
  1303. cursor: pointer;
  1304. border-bottom: 2px solid #ffffff00;
  1305. padding: 0 3px;
  1306. padding-bottom: 2px;
  1307. transition: all 0.3s;
  1308. &:hover {
  1309. border-bottom: 2px solid #ffffff;
  1310. }
  1311. }
  1312. }
  1313. .videoBox {
  1314. position: absolute;
  1315. top: 0;
  1316. left: 0;
  1317. width: 100%;
  1318. height: 100%;
  1319. z-index: -1;
  1320. video {
  1321. width: 100%;
  1322. height: 100%;
  1323. object-fit: fill;
  1324. }
  1325. }
  1326. .el-form-item {
  1327. background: rgb(0 0 0 / 10%);
  1328. border: 1px solid #ffffff2d;
  1329. border-radius: 5px;
  1330. }
  1331. .el-input {
  1332. background: transparent;
  1333. // 子组件 scoped 无效,使用 :deep
  1334. :deep(.el-input__wrapper) {
  1335. padding: 0;
  1336. background: transparent;
  1337. box-shadow: none;
  1338. .el-input__inner {
  1339. color: #fff;
  1340. background: transparent;
  1341. border: 0;
  1342. border-radius: 0;
  1343. caret-color: #fff;
  1344. &:-webkit-autofill {
  1345. box-shadow: 0 0 0 1000px transparent inset !important;
  1346. -webkit-text-fill-color: #fff !important;
  1347. }
  1348. // 设置输入框自动填充的延迟属性
  1349. &:-webkit-autofill,
  1350. &:-webkit-autofill:hover,
  1351. &:-webkit-autofill:focus,
  1352. &:-webkit-autofill:active {
  1353. transition: color 99999s ease-out, background-color 99999s ease-out;
  1354. transition-delay: 99999s;
  1355. }
  1356. }
  1357. }
  1358. }
  1359. @keyframes rotate {
  1360. from {
  1361. transform: rotate(0deg);
  1362. }
  1363. to {
  1364. transform: rotate(360deg);
  1365. }
  1366. }
  1367. </style>