邃芒慧语、照片说话(PC) https://photo.metavatar.cc/
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.
 
 
 
 
 

899 line
22 KiB

  1. <template>
  2. <div class="page flex">
  3. <!-- 左侧内容 -->
  4. <div class="left">
  5. <!-- 头像 -->
  6. <div class="left-one border flex justify-between flex-wrap">
  7. <div class="avatar">
  8. <img
  9. :src="
  10. localStorageAccountInfo.avatarUrl
  11. ? localStorageAccountInfo.avatarUrl
  12. : defaultAvater
  13. "
  14. alt=""
  15. />
  16. </div>
  17. <div class="info">
  18. <div class="name" v-if="localStorageAccountInfo.name">
  19. {{ localStorageAccountInfo.name }}
  20. </div>
  21. <span>{{ localStorageAccountInfo.email }}</span>
  22. <div>
  23. <span class="password pointer" @click="showEditInfoDialog = true">{{
  24. $t("account.editInfo")
  25. }}</span>
  26. <span
  27. class="password pointer"
  28. style="margin-right: 10px"
  29. @click.stop="resetPassWord"
  30. >{{ $t("account.reSetPwd") }}</span
  31. >
  32. </div>
  33. </div>
  34. </div>
  35. <!-- 剩余次数 -->
  36. <div class="left-two border">
  37. <div v-if="lanChange == 'en'" class="number">
  38. Free for a limited time
  39. </div>
  40. <div v-if="lanChange == 'zh-cn'" class="number">限时免费</div>
  41. <div class="time">{{ $t("account.until") }} 2023/7/31</div>
  42. <div class="getMore pointer" @click="routerTo('/myStore')">
  43. {{ $t("account.getMore") }}
  44. </div>
  45. </div>
  46. <!-- 我的邀请码 -->
  47. <div class="left-three border flex justify-between">
  48. <!-- <div class="codeImg">
  49. <img ref="codeImgRef" :src="defaultAvater" alt="" />
  50. </div> -->
  51. <div class="mask">
  52. <div class="title">
  53. <el-icon><i-ep-Lock /></el-icon>
  54. {{ $t("createVideo.comingSoon") }}
  55. </div>
  56. </div>
  57. <div class="other">
  58. <div v-if="lanChange == 'en'">
  59. <span>Invite friends to get</span>
  60. <span class="bigWord">free</span>
  61. <span>video</span>
  62. <span class="bigWord">Generation!</span>
  63. <p class="myInviteCode">
  64. your Invitation code:
  65. <span id="InviteCodeId">{{ myInviteCode }}</span>
  66. </p>
  67. </div>
  68. <div v-if="lanChange == 'zh-cn'">
  69. <span>邀请更多好友</span>
  70. <span class="bigWord">免费</span>
  71. <span>生成视频!</span>
  72. <p class="myInviteCode">
  73. 邀请码:
  74. <span id="InviteCodeId">{{ myInviteCode }}</span>
  75. </p>
  76. </div>
  77. <div class="btns">
  78. <span class="myBtn" @click="copyInviteCode">{{
  79. $t("account.copyCode")
  80. }}</span>
  81. <!-- <span class="myBtn" @click="DownloadCodeImg">{{
  82. $t("account.saveCode")
  83. }}</span> -->
  84. </div>
  85. </div>
  86. </div>
  87. <!-- 输入邀请码 !isUseState-->
  88. <div class="left-four border" v-if="false">
  89. <el-input
  90. class="w-50 m-2"
  91. v-model="inputCode"
  92. :placeholder="$t('account.inputCode')"
  93. />
  94. <span class="submitCodeBtn" @click="submitUseCode">{{
  95. $t("account.submit")
  96. }}</span>
  97. </div>
  98. </div>
  99. <!-- 右侧内容 -->
  100. <div class="right">
  101. <el-tabs type="border-card" class="tabs">
  102. <!-- ----------------------------- 1 -->
  103. <el-tab-pane :label="$t('account.buyHistory')">
  104. <div class="card scrolly">
  105. <div class="orderItem" v-for="item in 0" :key="item">
  106. <p>{{ $t("account.orderID") }}:123456</p>
  107. <div class="orderItem-content">
  108. <div class="orderCode"><img :src="defaultAvater" alt="" /></div>
  109. <div class="info">
  110. <h5>疯狂星期{{ item }}</h5>
  111. <p>{{ $t("account.price") }}:88$</p>
  112. <p>{{ $t("account.date") }}:2023/5/2</p>
  113. </div>
  114. <div class="state">{{ $t("account.successed") }}</div>
  115. </div>
  116. </div>
  117. <!-- 无数据时 -->
  118. <div v-if="InviteList.length == 0" class="noList">
  119. <div class="title">
  120. {{ $t("account.noListOrder") }}
  121. </div>
  122. </div>
  123. </div>
  124. </el-tab-pane>
  125. <!-- ------------------------ 2 -->
  126. <el-tab-pane :label="$t('account.inviteHistory')">
  127. <div class="card scrolly card2">
  128. <div v-if="InviteList.length != 0">
  129. <div class="orderItem" v-for="item in InviteList" :key="item">
  130. <div class="orderItem-content">
  131. <div class="orderCode">
  132. <img
  133. :src="item.avatarUrl ? item.avatarUrl : defaultAvater"
  134. alt=""
  135. />
  136. </div>
  137. <div class="info">
  138. <h5 v-if="item.name">{{ item.name }}</h5>
  139. <p>E-mail:{{ item.email }}</p>
  140. <p>
  141. {{ $t("account.date") }}:{{
  142. dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")
  143. }}
  144. </p>
  145. </div>
  146. <div class="state">{{ $t("account.msg1") }}</div>
  147. </div>
  148. </div>
  149. </div>
  150. <!-- 无数据时 -->
  151. <div v-if="InviteList.length == 0" class="noList">
  152. <div class="title">
  153. {{ $t("account.noListInvite") }}
  154. </div>
  155. </div>
  156. </div>
  157. </el-tab-pane>
  158. </el-tabs>
  159. </div>
  160. <!-- 修改个人信息弹窗 -->
  161. <el-dialog
  162. width="30%"
  163. class="editInfoDialog"
  164. v-model="showEditInfoDialog"
  165. :title="$t('account.editInfo')"
  166. destroy-on-close
  167. @close="closeInfoDialog"
  168. >
  169. <div class="LoadingBox" v-if="submitUserInfoLoading">
  170. <my-Loading-Icon v-if="submitUserInfoLoading"></my-Loading-Icon>
  171. </div>
  172. <el-row>
  173. <el-col :span="4"> {{ $t("public.avatar") }}: </el-col>
  174. <el-col :span="20">
  175. <div class="dialogAvatar">
  176. <input accept="image/*" type="file" @change="chooseImg" />
  177. <div class="add">+</div>
  178. <img v-if="dialogAvatarUrl" :src="dialogAvatarUrl" alt="" />
  179. </div>
  180. </el-col>
  181. </el-row>
  182. <el-row>
  183. <el-col :span="4"> {{ $t("public.username") }}: </el-col>
  184. <el-col :span="20">
  185. <el-input v-model="userNameinput" />
  186. </el-col>
  187. </el-row>
  188. <el-row>
  189. <div class="customBtn" @click="showEditInfoDialog = false">
  190. {{ $t("public.cancel") }}
  191. </div>
  192. <div class="customBtn" @click="submitUserInfo">
  193. {{ $t("public.confirm") }}
  194. </div>
  195. </el-row>
  196. </el-dialog>
  197. </div>
  198. </template>
  199. <script setup>
  200. //#region 导入文件
  201. import { useI18n } from "vue-i18n";
  202. import { useRouter } from "vue-router";
  203. import { userInfoModules } from "@/store/modules/userInfo";
  204. import dayjs from "dayjs";
  205. import imageCompression from "browser-image-compression"; //压缩图片插件
  206. import {
  207. inviteCodeApi,
  208. useCodeApi,
  209. isUseApi,
  210. useCodeUserApi,
  211. updUserInfoApi,
  212. } from "../../apis/myAccount";
  213. import { awsImgUpload } from "@/apis/createVideo";
  214. import defaultAvater from "../../assets/img/left-top-logo.png";
  215. //#endregion ---------------------------
  216. const { locale } = useI18n();
  217. const lanChange = ref(locale); //国际化
  218. const userInfoPinia = userInfoModules(); //pinia
  219. // const userInfoPinia = localStorage.getItem("AccountInfo");//pinia
  220. const localStorageAccountInfo = ref(
  221. JSON.parse(localStorage.getItem("AccountInfo"))
  222. );
  223. //#region 编辑个人信息
  224. const showEditInfoDialog = ref(false); //控制弹窗显隐
  225. const userNameinput = ref(null); //用户名输入框绑定
  226. const dialogAvatarUrl = ref(null); //图片回显地址
  227. const dialogAvatarData = ref(null); //图片上传数据
  228. const infoDialogLoad = ref(false); //load效果
  229. // 去重置密码
  230. function resetPassWord() {
  231. router.push({ name: "login", query: { type: 4 } });
  232. }
  233. // 选择图片
  234. async function chooseImg(e) {
  235. if (e.target.files[0]) {
  236. dialogAvatarUrl.value = null;
  237. dialogAvatarData.value = null;
  238. // 压缩配置
  239. const options = {
  240. maxSizeMB: 2, // 最大压缩大小为 2MB
  241. useWebWorker: false, // 使用 Web Worker 进行压缩,提高性能
  242. };
  243. const compressedFile = await imageCompression(e.target.files[0], options);
  244. dialogAvatarUrl.value = URL.createObjectURL(compressedFile);
  245. dialogAvatarData.value = compressedFile;
  246. // 不压缩图片
  247. // dialogAvatarUrl.value = e.target.files[0];
  248. // dialogAvatarData.value = e.target.files[0];
  249. } else {
  250. return;
  251. }
  252. }
  253. const submitUserInfoLoading = ref(false);
  254. // 上传编辑信息
  255. async function submitUserInfo() {
  256. submitUserInfoLoading.value = true;
  257. if (dialogAvatarData.value) {
  258. let formData = new FormData();
  259. const timestamp = Date.now();
  260. formData.append("file", dialogAvatarData.value, timestamp + ".png");
  261. const res1 = await awsImgUpload(formData);
  262. const data = {
  263. name: userNameinput.value,
  264. avatarUrl: res1.data.url,
  265. };
  266. try {
  267. const res2 = await updUserInfoApi(data);
  268. ElMessage.success(
  269. lanChange.value == "zh-cn" ? `修改成功` : `Modified successfully`
  270. );
  271. await userInfoPinia.getUserInfo();
  272. showEditInfoDialog.value = false;
  273. submitUserInfoLoading.value = false;
  274. router.go(0);
  275. } catch (error) {
  276. ElMessage.error(
  277. lanChange.value == "zh-cn"
  278. ? `修改失败,请稍后重试`
  279. : `The modification failed. Please try again later`
  280. );
  281. submitUserInfoLoading.value = false;
  282. }
  283. } else {
  284. const data = {
  285. name: userNameinput.value,
  286. };
  287. try {
  288. const res2 = await updUserInfoApi(data);
  289. ElMessage.success(
  290. lanChange.value == "zh-cn" ? `修改成功` : `Modified successfully`
  291. );
  292. await userInfoPinia.getUserInfo();
  293. showEditInfoDialog.value = false;
  294. submitUserInfoLoading.value = false;
  295. router.go(0);
  296. } catch (error) {
  297. ElMessage.error(
  298. lanChange.value == "zh-cn"
  299. ? `修改失败,请稍后重试`
  300. : `The modification failed. Please try again later`
  301. );
  302. submitUserInfoLoading.value = false;
  303. }
  304. }
  305. }
  306. // 关闭弹窗清空
  307. function closeInfoDialog() {
  308. userNameinput.value = localStorageAccountInfo.value.name;
  309. dialogAvatarUrl.value = localStorageAccountInfo.value.avatarUrl;
  310. dialogAvatarData.value = null;
  311. }
  312. //#endregion ---------------------------
  313. //#region 二维码邀请码区域
  314. const myInviteCode = ref(null); //我的邀请码
  315. async function getMyInviteCode() {
  316. const res = await inviteCodeApi();
  317. myInviteCode.value = res.data;
  318. }
  319. // 点击复制邀请码
  320. function copyInviteCode() {
  321. const inviteCode = document.getElementById("InviteCodeId").innerText;
  322. navigator.clipboard
  323. .writeText(inviteCode)
  324. .then(() => {
  325. ElMessage.success(
  326. lanChange.value == "zh-cn"
  327. ? "邀请码已复制到剪贴板"
  328. : `The invitation code has been copied to the clipboard`
  329. );
  330. })
  331. .catch((error) => {
  332. ElMessage.error(
  333. lanChange.value == "zh-cn"
  334. ? "无法复制邀请码:"
  335. : `Unable to copy invitation code`
  336. );
  337. });
  338. }
  339. // 下载二维码图片
  340. const codeImgRef = ref();
  341. function DownloadCodeImg() {
  342. const link = document.createElement("a");
  343. link.href = codeImgRef.value.src;
  344. link.download = "image.jpg";
  345. link.click();
  346. }
  347. //#endregion
  348. //#region 输入邀请码区
  349. const inputCode = ref(""); // 邀请码输入框内容
  350. const isUseState = ref(false); //用户是否填写过过邀请码
  351. // 提交邀请码
  352. async function submitUseCode() {
  353. try {
  354. const res = await useCodeApi(inputCode.value);
  355. console.log(res.code);
  356. if (res.code == 200) {
  357. ElMessage.success(
  358. lanChange.value == "zh-cn"
  359. ? `提交邀请码成功`
  360. : `The invitation code was submitted successfully`
  361. );
  362. }
  363. if (res.code == 1001) {
  364. ElMessage.error(
  365. lanChange.value == "zh-cn"
  366. ? `不能使用自己的邀请码`
  367. : `You cannot use your own invitation code`
  368. );
  369. } else {
  370. ElMessage.error(
  371. lanChange.value == "zh-cn"
  372. ? `提交邀请码成失败`
  373. : `Failed to submit the invitation code`
  374. );
  375. }
  376. await getIsUseState();
  377. } catch (error) {
  378. console.log(error);
  379. }
  380. }
  381. // 查询是否使用过邀请码
  382. async function getIsUseState() {
  383. const res = await isUseApi();
  384. isUseState.value = res.data;
  385. }
  386. //#endregion ---------------------------
  387. //#region 右侧列表
  388. const InviteList = ref([]); //邀请列表
  389. async function getInviteList() {
  390. const res = await useCodeUserApi();
  391. InviteList.value = res.data;
  392. }
  393. //#endregion ---------------------------
  394. //#region 页面初始化
  395. onMounted(() => {
  396. getMyInviteCode(); // 查询用户的邀请码
  397. getIsUseState(); //查询是否使用过邀请码
  398. getInviteList();
  399. userNameinput.value = localStorageAccountInfo.value.name;
  400. dialogAvatarUrl.value = localStorageAccountInfo.value.avatarUrl;
  401. });
  402. //#endregion ---------------------------
  403. //#region
  404. watch(localStorageAccountInfo.value, (newValue) => {
  405. console.log("LocalStorage 的值发生了变化:", newValue);
  406. });
  407. //#endregion ---------------------------
  408. //#region
  409. //#endregion ---------------------------
  410. const router = useRouter();
  411. function routerTo(url) {
  412. router.push(url);
  413. }
  414. </script>
  415. <style lang="scss" scoped>
  416. .page {
  417. height: calc(100vh - 80px);
  418. // height: calc(100vh - 84px);
  419. background-color: #fff;
  420. border-radius: 25px 0 0;
  421. }
  422. .left {
  423. width: 39%;
  424. height: 100%;
  425. padding: 30px;
  426. .border {
  427. padding: 10px;
  428. margin-bottom: 10px;
  429. border: 1px solid #000;
  430. border-radius: 15px;
  431. }
  432. &-one {
  433. .avatar {
  434. position: relative;
  435. width: 80px;
  436. height: 80px;
  437. margin-right: 10px;
  438. border-radius: 50%;
  439. border: 1px solid #ccc;
  440. overflow: hidden;
  441. img {
  442. position: absolute;
  443. top: 50%;
  444. left: 50%;
  445. transform: translate(-50%, -50%);
  446. width: 100%;
  447. height: 100%;
  448. object-fit: cover;
  449. }
  450. }
  451. .info {
  452. flex: 1;
  453. .name {
  454. height: 30px;
  455. margin-top: 10px;
  456. font-size: 20px;
  457. }
  458. .password {
  459. display: inline-block;
  460. float: right;
  461. padding: 2px 8px;
  462. border: 1px solid #000;
  463. border-radius: 5px;
  464. cursor: pointer;
  465. transition: all 0.3s;
  466. &:hover {
  467. color: #fff;
  468. background-color: #000;
  469. }
  470. }
  471. }
  472. }
  473. &-two {
  474. position: relative;
  475. height: 80px;
  476. text-align: center;
  477. overflow: hidden;
  478. .number {
  479. font-size: 30px;
  480. font-weight: 700;
  481. }
  482. .time {
  483. // position: absolute;
  484. // right: 90px;
  485. }
  486. .getMore {
  487. position: absolute;
  488. top: -1px;
  489. right: -1px;
  490. padding: 5px;
  491. width: 80px;
  492. height: 80px;
  493. line-height: 70px;
  494. text-align: center;
  495. background-color: #000;
  496. color: #fff;
  497. font-size: 14px;
  498. transition: all 0.3s;
  499. &:hover {
  500. background-color: #15d1b8;
  501. color: #fff;
  502. }
  503. }
  504. }
  505. &-three {
  506. position: relative;
  507. height: 200px;
  508. overflow: hidden;
  509. // &:hover {
  510. // .mask {
  511. // display: block;
  512. // }
  513. // }
  514. .mask {
  515. position: absolute;
  516. top: 0;
  517. left: 0;
  518. // display: none;
  519. width: 100%;
  520. height: 100%;
  521. line-height: 780px;
  522. font-size: 120px;
  523. font-weight: 900;
  524. text-align: center;
  525. background-color: rgba(0, 0, 0, 0.3);
  526. z-index: 9;
  527. .title {
  528. position: absolute;
  529. top: 50%;
  530. left: 50%;
  531. transform: translate(-50%, -50%);
  532. font-size: 30px;
  533. text-align: center;
  534. line-height: 80px;
  535. background-image: -webkit-linear-gradient(
  536. left,
  537. #4b61dc,
  538. #15d1b8 25%,
  539. #4b61dc 50%,
  540. #15d1b8 75%,
  541. #4b61dc
  542. ) !important;
  543. -webkit-text-fill-color: transparent !important;
  544. -webkit-background-clip: text !important;
  545. background-clip: text !important;
  546. -webkit-background-size: 200% 100% !important;
  547. background-size: 200% 100% !important;
  548. .el-icon {
  549. padding-top: -3px;
  550. color: #15d1b8;
  551. vertical-align: middle;
  552. font-size: 25px;
  553. }
  554. }
  555. }
  556. .codeImg {
  557. position: relative;
  558. padding: 10px;
  559. width: 120px;
  560. height: 120px;
  561. margin-right: 10px;
  562. border: 1px solid #ccc;
  563. border-radius: 10px;
  564. // background-color: red;
  565. img {
  566. position: absolute;
  567. top: 50%;
  568. transform: translateY(-50%);
  569. width: 100px;
  570. max-height: 100px;
  571. }
  572. }
  573. .other {
  574. position: relative;
  575. flex: 1;
  576. .btns {
  577. position: absolute;
  578. bottom: 10px;
  579. // padding: 0 80px;
  580. display: flex;
  581. justify-content: space-evenly;
  582. width: 100%;
  583. .myBtn {
  584. margin-right: 10px;
  585. cursor: pointer;
  586. transition: all 0.3s;
  587. &:hover {
  588. color: #fff;
  589. background-color: #000;
  590. }
  591. }
  592. }
  593. .myInviteCode {
  594. margin-top: 20px;
  595. }
  596. }
  597. }
  598. &-four {
  599. .el-input {
  600. width: 80%;
  601. }
  602. :deep(.el-input__wrapper.is-focus) {
  603. box-shadow: 0 0 0 1px #000 !important;
  604. }
  605. // padding: 30px 50px !important;
  606. div {
  607. margin-top: 5px;
  608. height: 40px;
  609. }
  610. .submitCodeBtn {
  611. display: inline-block;
  612. width: 15%;
  613. padding: 10px 15px;
  614. color: #000;
  615. border-radius: 10px;
  616. text-align: center;
  617. cursor: pointer;
  618. transition: all 0.3s;
  619. &:hover {
  620. color: #fff;
  621. background-color: #000;
  622. }
  623. }
  624. }
  625. }
  626. .right {
  627. background-color: #f1f2f6;
  628. padding: 30px;
  629. width: 61%;
  630. height: 100%;
  631. // height: 95%;
  632. border-radius: 30px 0 0 0;
  633. overflow: hidden;
  634. // element组件样式
  635. :deep(.el-tabs--border-card) {
  636. font-size: 20px;
  637. border: none;
  638. }
  639. .tabs {
  640. // height: 760px;
  641. height: 100%;
  642. padding: 20px;
  643. border-radius: 20px;
  644. overflow: hidden;
  645. .noList {
  646. .title {
  647. font-size: 30px;
  648. text-align: center;
  649. margin-top: 100px;
  650. background-image: -webkit-linear-gradient(
  651. left,
  652. #4b61dc,
  653. #15d1b8 25%,
  654. #4b61dc 50%,
  655. #15d1b8 75%,
  656. #4b61dc
  657. ) !important;
  658. -webkit-text-fill-color: transparent !important;
  659. -webkit-background-clip: text !important;
  660. background-clip: text !important;
  661. -webkit-background-size: 200% 100% !important;
  662. background-size: 200% 100% !important;
  663. }
  664. }
  665. .card {
  666. // height: 100%;
  667. height: 740px;
  668. padding: 10px;
  669. // height: 79vh;
  670. .orderItem {
  671. width: 100%;
  672. height: 110px;
  673. padding: 8px;
  674. margin-bottom: 10px;
  675. border: 1px solid #000;
  676. border-radius: 5px;
  677. p {
  678. font-size: 12px;
  679. }
  680. &-content {
  681. display: flex;
  682. width: 100%;
  683. // justify-content: space-between;
  684. .orderCode {
  685. position: relative;
  686. width: 70px;
  687. height: 70px;
  688. padding: 5px;
  689. border: 1px solid #ccc;
  690. border-radius: 5px;
  691. overflow: hidden;
  692. img {
  693. position: absolute;
  694. top: 50%;
  695. left: 50%;
  696. transform: translate(-50%, -50%);
  697. max-width: 60px;
  698. max-height: 60px;
  699. }
  700. }
  701. .info {
  702. // width: 50%;
  703. flex: 1;
  704. margin-left: 10px;
  705. h5 {
  706. margin: 0;
  707. }
  708. p {
  709. margin-top: 5px;
  710. }
  711. }
  712. .state {
  713. margin-right: 30px;
  714. }
  715. }
  716. }
  717. }
  718. .card2 {
  719. .orderItem {
  720. padding: 20px;
  721. &-content {
  722. .orderCode {
  723. position: relative;
  724. border: 1px solid #ccc;
  725. border-radius: 50%;
  726. overflow: hidden;
  727. img {
  728. position: absolute;
  729. top: 50%;
  730. left: 50%;
  731. transform: translate(-50%, -50%);
  732. max-width: 100%;
  733. max-height: 100%;
  734. }
  735. }
  736. .state {
  737. font-size: 14px;
  738. line-height: 60px;
  739. }
  740. }
  741. }
  742. }
  743. :deep(.el-tabs__item.is-active) {
  744. color: #fff;
  745. background-color: #000;
  746. }
  747. :deep(.el-tabs__nav) {
  748. width: 100%;
  749. }
  750. :deep(.el-tabs__item) {
  751. width: 34%;
  752. }
  753. :deep(.el-tabs__item:hover) {
  754. color: #909393;
  755. }
  756. :deep(.el-tabs__content) {
  757. height: 760px;
  758. // height: calc(100% - 60px);
  759. padding: 0;
  760. }
  761. }
  762. }
  763. .editInfoDialog {
  764. position: relative;
  765. overflow: hidden;
  766. .LoadingBox {
  767. position: absolute;
  768. top: 0;
  769. left: 0;
  770. width: 100%;
  771. height: 100%;
  772. z-index: 999;
  773. opacity: 0.8;
  774. border-radius: 30px;
  775. padding-top: 150px;
  776. background-color: #ccc;
  777. }
  778. .el-row {
  779. display: flex;
  780. justify-content: space-evenly;
  781. }
  782. .el-col {
  783. margin-bottom: 10px;
  784. text-align: right;
  785. line-height: 32px;
  786. padding-right: 20px;
  787. }
  788. .dialogAvatar {
  789. position: relative;
  790. width: 200px;
  791. height: 200px;
  792. background-color: rgba(204, 204, 204, 0.2);
  793. border-radius: 30px;
  794. overflow: hidden;
  795. &:hover {
  796. img {
  797. z-index: 0;
  798. }
  799. .add {
  800. background-color: rgba(0, 0, 0, 0.2);
  801. }
  802. }
  803. input {
  804. position: absolute;
  805. top: 0;
  806. left: 0;
  807. width: 100%;
  808. height: 100%;
  809. opacity: 0;
  810. z-index: 3;
  811. cursor: pointer;
  812. }
  813. .add {
  814. position: absolute;
  815. top: 0;
  816. left: 0;
  817. width: 100%;
  818. height: 100%;
  819. z-index: 1;
  820. text-align: center;
  821. line-height: 200px;
  822. font-size: 50px;
  823. font-weight: 700;
  824. color: #000;
  825. transition: all 0.3s;
  826. }
  827. img {
  828. position: absolute;
  829. top: 50%;
  830. left: 50%;
  831. transform: translate(-50%, -50%);
  832. padding: 10px;
  833. max-width: 100%;
  834. max-height: 100%;
  835. z-index: 2;
  836. transition: all 0.3s;
  837. }
  838. }
  839. }
  840. // 公共类名
  841. .bigWord {
  842. font-size: 30px;
  843. font-weight: 700;
  844. margin: 0 10px;
  845. }
  846. </style>