邃芒官网、邃芒慧影、口播(H5) https://m.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.
 
 
 
 

839 line
23 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <HeadTop />
  5. <!-- 顶部图 -->
  6. <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
  7. <!-- 展示列表 -->
  8. <div class="item">
  9. <div class="title">
  10. <div>
  11. <img src="../../assets/img/myVideo.png" alt="" />
  12. 我的视频作品
  13. </div>
  14. <div class="title-change">
  15. <div class="displayFlex">
  16. <span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span>
  17. <span v-show="listActive == 1" class="floatRight" :class="videoType == 2 ? 'wordColor' : ''" @click="getNewList(2)">只看横屏</span>
  18. <span v-show="listActive == 1" class="floatRight" @click="draftChange(2)">草稿箱</span>
  19. <span @click="draftChange(1)" v-show="listActive == 2" class="floatRight">返回视频列表</span>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="vantLoadingBox" style="height: 550px" v-show="showLoading">
  24. <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
  25. </div>
  26. <!-- 具体内容 -->
  27. <div v-show="!showLoading">
  28. <!-- 列表样式--大图 -->
  29. <div v-if="videoList.length == 0" :style="{ height: '250px', textAlign: 'center', lineHeight: '250px' }">暂无数据</div>
  30. <!-- 新 修改v-if videoList-->
  31. <div v-if="waterfallBug">
  32. <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList">
  33. <div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)">
  34. <div class="waterFall-item-paddding">
  35. <img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" />
  36. <!-- 渐变遮罩层 -->
  37. <div class="waterFall-item-mask">
  38. <div>{{ item.title || '无标题' }}</div>
  39. <div v-if="item.videoStatus == 5">视频时长:{{ formatSeconds(item.videoTime) }}</div>
  40. <div v-if="item.videoStatus == 5">视频容量:{{ bytesToSize(item.videoSize) }}</div>
  41. <div>创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div>
  42. </div>
  43. <!-- 视频状态 草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功-->
  44. <div class="waterFall-item-state" v-if="item.videoStatus != 5">
  45. <!-- <div class="waterFall-item-state" v-if="item.videoStatus == 2"> -->
  46. <div v-if="item.videoStatus == 0" class="cover">草稿</div>
  47. <div v-if="[1, 2, 4, 6].includes(item.videoStatus)" class="cover">视频生成中</div>
  48. <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
  49. </div>
  50. <!-- 删除 -->
  51. <!-- <div class="waterFall-item-del" @click.stop="goDelete(item.id)">
  52. <img src="../../assets/icon/icon-trash.png" alt="" />
  53. </div> -->
  54. <div class="waterFall-item-del" @click.stop="copyAndDel(item.id)">
  55. <img v-show="clickAction == item.id" src="../../assets/icon/icon-shang.png" alt="" />
  56. <img v-show="clickAction != item.id" src="../../assets/icon/icon-xia.png" alt="" />
  57. </div>
  58. <!-- 删除和拷贝 -->
  59. <div v-show="clickAction == item.id" class="copyAndDelBox">
  60. <div @click.stop="copyModel(item.id)">复制</div>
  61. <div @click.stop="goDelete(item.id)">删除</div>
  62. </div>
  63. </div>
  64. </div>
  65. </waterfall>
  66. </div>
  67. <!-- 列表样式--小图 -->
  68. <van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index">
  69. <div class="itemList">
  70. <!-- 每一项 -->
  71. <div v-if="videoList.length > 0" class="videoModel" :key="index">
  72. <!-- 左侧图片 -->
  73. <div class="videoPrv" @click="goDetail(item)">
  74. <!-- <img src="../../assets/img/BG@2x.png" /> -->
  75. <img src="../../assets/img/logoh.png" />
  76. <!-- <div v-if="item.videoStatus == 0" class="cover">草稿</div> -->
  77. <div v-if="item.videoStatus == 0" class="cover"></div>
  78. <div v-if="item.videoStatus == 1" class="cover">视频生成中</div>
  79. <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
  80. <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> -->
  81. </div>
  82. <!-- 中间文字 -->
  83. <div class="videoInfo" @click="goDetail(item)">
  84. <div class="videoName">
  85. {{ item.title || '无标题' }}
  86. </div>
  87. <!-- <div class="createTime">视频时长:{{ formatSeconds(item.videoTime) }}</div> -->
  88. <!-- <div class="createTime">视频容量:{{ bytesToSize(item.videoSize) }}</div> -->
  89. <div class="createTime">创建时间:{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div>
  90. </div>
  91. <!-- 右侧更多 -->
  92. <div class="showMore" @click.stop="showDialog(item.id)">
  93. <div></div>
  94. <div></div>
  95. <div></div>
  96. </div>
  97. <!-- 弹出层 -->
  98. <van-popup v-if="clickItem == item.id" v-model="showPopup">
  99. <!-- <div @click="closeDialog">
  100. <i class="el-icon-edit" />&nbsp;编辑
  101. </div> -->
  102. <div @click="goDelete(item.id)">
  103. <i class="el-icon-delete" />
  104. &nbsp;删除
  105. </div>
  106. </van-popup>
  107. </div>
  108. <!-- 无数据处理 -->
  109. <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div>
  110. </div>
  111. </van-swipe-cell>
  112. </div>
  113. </div>
  114. <!-- 分页 -->
  115. <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" />
  116. <!-- 创建新作品 -->
  117. <!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> -->
  118. <div class="goNewAdd" @click="checkInviteCode">
  119. <img src="../../assets/icon/icon-plus.png" alt="" />
  120. <!-- <i class="el-icon-plus"></i> -->
  121. </div>
  122. <div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover">
  123. <div class="message" id="message">
  124. <div class="connect" id="message">请添加微信与我们联系</div>
  125. <div class="qrCode" id="message">
  126. <img src="../../assets/img/SuiMangQRCode.png" alt="" />
  127. </div>
  128. <div class="phoneNum" id="message">或致电13260039498</div>
  129. <div class="clickToClose">点击空白处关闭</div>
  130. </div>
  131. </div>
  132. </div>
  133. </template>
  134. <script>
  135. // 组件
  136. import Vue from 'vue';
  137. import { Toast, Dialog, Loading } from 'vant';
  138. import { mapState, mapActions } from 'vuex';
  139. import HeadTop from '@/components/common/head.vue';
  140. // 工具
  141. import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../utils';
  142. // 接口
  143. import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage';
  144. Vue.use(Toast);
  145. Vue.use(Loading);
  146. export default {
  147. components: {
  148. HeadTop
  149. },
  150. data() {
  151. return {
  152. clickAction: -1, //右上角下拉
  153. hasToken: null, // 判断有没有token来判断有没有登录
  154. showLoading: true, // 加载处理
  155. waterfallBug: true, // 解决瀑布流不显示bug
  156. videoType: -1, //-1全部1竖屏2横屏
  157. showPopup: false, // 编辑和删除显示隐藏
  158. clickItem: -1, // 弹出层显示隐藏
  159. showTrue: true, // 弹出层显示隐藏
  160. showFalse: false, // 弹出层显示隐藏
  161. inPage: false,
  162. isShowMessageCover: false,
  163. videoList: [],
  164. currentPage: 1,
  165. pageSize: 6,
  166. prePage: '',
  167. total: '',
  168. // defaultImg: require('@/assets/img/BG@2x.png'), //默认图片
  169. // defaultImg1: require('@/assets/img/bg.png'), //默认图片
  170. defaultImg: require('@/assets/img/logoh.png'), //默认图片
  171. defaultImg1: require('@/assets/img/logoh.png'), //默认图片
  172. listActive: 1 // 显示列表样式
  173. };
  174. },
  175. computed: {
  176. ...mapState({
  177. characters: state => state.publicObj.characters
  178. })
  179. },
  180. methods: {
  181. ...mapActions(['setCharacters']),
  182. // 复制
  183. copyModel(id) {
  184. this.$router.push({
  185. path: '/editModel',
  186. query: {
  187. id: id,
  188. copy: true
  189. }
  190. });
  191. },
  192. // 点击右上角
  193. copyAndDel(id) {
  194. if (this.clickAction == id) {
  195. this.clickAction = -1;
  196. } else {
  197. this.clickAction = id;
  198. }
  199. },
  200. // 草稿箱切换
  201. draftChange(type) {
  202. this.listActive = type;
  203. this.videoType = -1;
  204. this.loadVideoList(1, this.pageSize, this.videoType);
  205. },
  206. // 横屏竖屏列表
  207. getNewList(videoType) {
  208. this.videoType = videoType;
  209. this.loadVideoList(1, this.pageSize, videoType);
  210. },
  211. closeDialog() {
  212. Dialog.close;
  213. },
  214. // 点击显示编辑删除
  215. showDialog(id) {
  216. this.showPopup = true;
  217. this.clickItem = id;
  218. },
  219. go(url) {
  220. this.$router.push(url);
  221. },
  222. changeTime(timestamp, form) {
  223. return timestampToTime(timestamp, form);
  224. },
  225. pageChange() {
  226. this.loadVideoList(this.currentPage, this.pageSize, this.videoType);
  227. },
  228. // 点击空白区域退出提示
  229. exitCover(e) {
  230. if (e.srcElement.id != 'message') {
  231. this.isShowMessageCover = false;
  232. }
  233. },
  234. // 秒转化时分秒
  235. formatSeconds(seconds) {
  236. if (seconds) {
  237. return formatSeconds(seconds);
  238. } else {
  239. return '暂未获取';
  240. }
  241. },
  242. // 将bytes转化
  243. bytesToSize(bytes) {
  244. if (bytes) {
  245. return bytesToSize(bytes);
  246. } else {
  247. return '暂未获取';
  248. }
  249. },
  250. // 查看详情
  251. goDetail(item) {
  252. console.log(item);
  253. const status = item.videoStatus;
  254. //草稿
  255. if (status == 0) {
  256. this.$router.push({
  257. path: '/editModel',
  258. query: {
  259. id: item.id
  260. }
  261. });
  262. }
  263. //生成中
  264. else if ([1, 2, 4, 6].includes(status)) {
  265. Toast.fail('视频生成中');
  266. this.$router.push('/videoCreate');
  267. return;
  268. }
  269. // 成功
  270. else if ([5].includes(status)) {
  271. const url = item.videoPathUri + item.videoPath;
  272. this.$router.push({
  273. // path: '/downloadVideo',
  274. path: '/videoDownload',
  275. query: {
  276. videoId: item.videoId,
  277. videoUrl: url,
  278. id: item.id
  279. }
  280. });
  281. }
  282. // 失败
  283. else if (status == 3) {
  284. this.$router.push({
  285. path: '/videoFail',
  286. query: {
  287. id: item.id
  288. }
  289. });
  290. }
  291. },
  292. // 删除作品
  293. goDelete(id) {
  294. Dialog.confirm({
  295. title: '删除作品',
  296. message: '您确定要删除该作品吗?'
  297. })
  298. .then(async () => {
  299. await this.deleteVideoById(id);
  300. await this.loadVideoList(this.currentPage, this.pageSize, this.videoType);
  301. })
  302. .catch(() => {
  303. return;
  304. });
  305. },
  306. /**
  307. * @description:获取作品列表
  308. */
  309. async loadVideoList(pageNum, pageSize, videoType) {
  310. if (!this.hasToken) {
  311. // this.$router.push('/login');
  312. // Toast.fail('请您先登录!');
  313. return;
  314. }
  315. try {
  316. this.showLoading = true;
  317. this.waterfallBug = false;
  318. // 根据listActive判断是不是看的草稿箱
  319. // let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3];
  320. let videoStatuss = this.listActive == 1 ? [1, 2, 3, 4, 5, 6] : [0];
  321. const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss);
  322. console.log(res, '获取作品列表');
  323. this.videoList = res.data.list;
  324. console.log(this.videoList);
  325. this.waterfallBug = true;
  326. console.log(this.waterfallBug);
  327. this.total = res.data.total;
  328. console.log(this.total);
  329. this.showLoading = false;
  330. console.log(this.showLoading);
  331. } catch (error) {
  332. console.log(error, 'error');
  333. // Toast.fail(error.message);
  334. }
  335. },
  336. /**
  337. * @description 通过视频id获取视频详情
  338. */
  339. async getVideoDetialById(id) {
  340. try {
  341. const res = await doGetVideoDetialById(id);
  342. console.log(res, '通过视频id获取视频详情');
  343. return res.data;
  344. } catch (error) {
  345. console.log(error, 'error');
  346. Toast.fail(error.message);
  347. }
  348. },
  349. /**
  350. * @description 根据id删除作品
  351. */
  352. async deleteVideoById(id) {
  353. try {
  354. const res = await deleteVideoById(id);
  355. console.log(res, '根据id删除作品');
  356. } catch (error) {
  357. console.log(error, 'error');
  358. Toast.fail(error.message);
  359. }
  360. },
  361. /**
  362. * @description:查询用户邀请码状态
  363. */
  364. async checkInviteCode() {
  365. this.$router.push('/chooseModel');
  366. return;
  367. if (!this.hasToken) {
  368. this.$router.push('/chooseModel');
  369. return;
  370. }
  371. try {
  372. const res = await doFindInviteCode();
  373. console.log(res, '查询用户邀请码数据');
  374. const status = res.data.status;
  375. // 当没有邀请码时
  376. if (status == 0) {
  377. scrollToID('top');
  378. this.isShowMessageCover = true;
  379. } else if (status == 1) {
  380. this.goCreateNew();
  381. }
  382. } catch (error) {
  383. console.log(error, 'error');
  384. Toast.fail(error.message);
  385. }
  386. },
  387. goCreateNew() {
  388. this.$router.push('/chooseModel');
  389. }
  390. },
  391. async mounted() {
  392. this.inPage = true;
  393. scrollToID('top');
  394. if (this.hasToken) {
  395. await this.loadVideoList(1, this.pageSize, this.videoType);
  396. } else {
  397. this.showLoading = false;
  398. }
  399. },
  400. created() {
  401. this.hasToken = localStorage.getItem('AccessToken');
  402. }
  403. };
  404. </script>
  405. <style lang="scss" scoped>
  406. .van-pagination {
  407. margin-top: 10px;
  408. }
  409. .floatRight {
  410. margin-left: 15px;
  411. img {
  412. vertical-align: bottom !important;
  413. margin-top: 2px !important;
  414. color: red;
  415. }
  416. }
  417. .page {
  418. // transform: translateX(30%);
  419. min-height: 100vh;
  420. opacity: 0;
  421. transition: all 0.5s; // global-transition
  422. padding-bottom: 25px;
  423. &.active {
  424. opacity: 1;
  425. transform: translateX(0);
  426. }
  427. .logoBox {
  428. display: flex;
  429. justify-content: space-between;
  430. align-items: center;
  431. overflow: hidden;
  432. cursor: pointer;
  433. background-color: #606060;
  434. .logo {
  435. float: left;
  436. width: 140px;
  437. height: 40px;
  438. }
  439. .userInfo {
  440. display: flex;
  441. justify-content: space-between;
  442. align-items: center;
  443. color: #fff;
  444. .userImg {
  445. float: right;
  446. width: 30px;
  447. height: 30px;
  448. margin-top: 3px;
  449. margin-right: 10px;
  450. margin-left: 15px;
  451. }
  452. }
  453. }
  454. .showIMG {
  455. padding: 10px;
  456. width: 100%;
  457. height: 140px;
  458. border-radius: 16px;
  459. }
  460. .item {
  461. width: 100%;
  462. padding: 15px 10px;
  463. .title {
  464. display: flex;
  465. justify-content: space-between;
  466. width: 100%;
  467. font-size: 16px;
  468. font-weight: 500;
  469. // margin-left: 15px;
  470. margin-bottom: 20px;
  471. img {
  472. margin-top: -5px;
  473. vertical-align: middle;
  474. width: 24px;
  475. height: 18px;
  476. background-size: 100% 100%;
  477. }
  478. &-change {
  479. display: inline-block;
  480. font-size: 12px;
  481. }
  482. }
  483. .itemList {
  484. .videoModel {
  485. position: relative;
  486. display: flex;
  487. justify-content: space-between;
  488. margin-bottom: 20px;
  489. .videoPrv {
  490. width: 140px;
  491. height: 100px;
  492. // background-color: #979797;
  493. img {
  494. position: absolute;
  495. top: 25px;
  496. width: 140px;
  497. height: 50px;
  498. border-radius: 6px;
  499. }
  500. .cover {
  501. position: absolute;
  502. width: 140px;
  503. height: 100px;
  504. line-height: 100px;
  505. background-color: #00000034;
  506. text-align: center;
  507. border-radius: 6px;
  508. color: #fff;
  509. }
  510. }
  511. .videoInfo {
  512. flex: 1;
  513. margin-left: 5px;
  514. white-space: nowrap;
  515. overflow: hidden;
  516. text-overflow: ellipsis;
  517. margin-top: 10px;
  518. .videoName {
  519. width: 100%;
  520. font-size: 16px;
  521. white-space: nowrap;
  522. overflow: hidden;
  523. text-overflow: ellipsis;
  524. font-weight: 600;
  525. }
  526. .createTime {
  527. font-size: 11px;
  528. color: #999999;
  529. margin-top: 5px;
  530. }
  531. }
  532. .showMore {
  533. width: 20px;
  534. display: flex;
  535. justify-content: space-between;
  536. align-items: center;
  537. // margin-left: 10px;
  538. div {
  539. width: 4px;
  540. height: 4px;
  541. background-color: #51d9ca;
  542. }
  543. }
  544. .dialog {
  545. i {
  546. margin-left: -10px;
  547. }
  548. }
  549. // 弹出层样式
  550. ::v-deep .van-popup {
  551. display: flex;
  552. flex-wrap: wrap;
  553. align-items: center;
  554. justify-content: center;
  555. top: 50%;
  556. left: 80%;
  557. width: 80px;
  558. height: 30px;
  559. border-radius: 12px;
  560. font-size: 14px;
  561. line-height: 28px;
  562. text-align: center;
  563. box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  564. }
  565. ::v-deep .van-overlay {
  566. background-color: rgba(0, 0, 0, 0);
  567. }
  568. ::v-deep .van-button {
  569. display: none;
  570. }
  571. .tag {
  572. position: absolute;
  573. right: 10px;
  574. top: 10px;
  575. padding: 1px 5px;
  576. border-radius: 5px;
  577. &.text {
  578. color: #fff;
  579. background-color: #a2a2a290;
  580. }
  581. &.generating {
  582. background-color: #ffa600c2;
  583. }
  584. &.finish {
  585. color: #ffffff;
  586. background-color: #00ff88;
  587. }
  588. &.fail {
  589. color: #ffffff;
  590. background-color: #ff0000c3;
  591. }
  592. }
  593. }
  594. .noWork {
  595. width: 100%;
  596. height: 450px;
  597. line-height: 450px;
  598. font-size: 14px;
  599. font-weight: 600;
  600. text-align: center;
  601. }
  602. }
  603. }
  604. .goAdd {
  605. position: sticky;
  606. bottom: 25px;
  607. left: 10px;
  608. width: 300px;
  609. height: 42px;
  610. line-height: 42px;
  611. font-size: 15px;
  612. color: #fff;
  613. text-align: center;
  614. transform: translateX(-50%);
  615. background-color: #0068b7;
  616. border-radius: 5px;
  617. box-shadow: #60606082 1px 1px 1px 1px;
  618. margin-top: 25px;
  619. margin-left: 190px;
  620. }
  621. .goNewAdd {
  622. position: sticky;
  623. left: 80%;
  624. bottom: 25px;
  625. width: 60px;
  626. height: 60px;
  627. border-radius: 50%;
  628. // font-size: 40px;
  629. // line-height: 60px;
  630. // text-align: center;
  631. color: #ffffff;
  632. background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
  633. box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25);
  634. display: flex;
  635. justify-content: space-around;
  636. align-items: center;
  637. z-index: 9999;
  638. img {
  639. width: 60%;
  640. height: 60%;
  641. }
  642. }
  643. .messageCover {
  644. position: fixed;
  645. top: 0;
  646. width: 100%;
  647. height: 100%;
  648. background-color: #00000091;
  649. transition: all 0.3s;
  650. opacity: 0;
  651. z-index: -1;
  652. .message {
  653. position: sticky;
  654. top: 48%;
  655. transform: translate(-50%, -50%);
  656. width: 272px;
  657. height: 290px;
  658. border-radius: 5px;
  659. background-color: #fff;
  660. text-align: center;
  661. transition: all 0.3s;
  662. margin-left: 50%;
  663. padding: 10px;
  664. .connect {
  665. font-size: 12px;
  666. margin: 19px 0 10px 0;
  667. }
  668. .qrCode {
  669. width: 203px;
  670. height: 213px;
  671. background-color: #ffffff;
  672. border-radius: 5px;
  673. border: solid 1px #595959;
  674. margin: auto;
  675. img {
  676. width: 100%;
  677. height: 100%;
  678. }
  679. }
  680. .phoneNum {
  681. float: left;
  682. font-size: 11px;
  683. margin-top: 8px;
  684. margin-left: 34px;
  685. }
  686. .close {
  687. position: absolute;
  688. top: 8px;
  689. right: 15px;
  690. font-size: 18px;
  691. color: #000;
  692. }
  693. .clickToClose {
  694. position: absolute;
  695. font-size: 14px;
  696. color: #fff;
  697. left: 50%;
  698. bottom: -20%;
  699. transform: translateX(-50%);
  700. }
  701. }
  702. &.active {
  703. z-index: 100;
  704. opacity: 1;
  705. }
  706. }
  707. .delete-button {
  708. position: relative;
  709. left: 1%;
  710. height: 100%;
  711. }
  712. }
  713. // 瀑布流
  714. .waterFall {
  715. // width: 350px;
  716. width: 100%;
  717. ::v-deep .vue-waterfall-column {
  718. width: 50% !important;
  719. margin: 0 !important;
  720. }
  721. &-item {
  722. padding: 5px;
  723. border-radius: 12px;
  724. overflow: hidden;
  725. &-paddding {
  726. position: relative;
  727. border-radius: 12px;
  728. overflow: hidden;
  729. // min-width: 200px;
  730. min-height: 100px;
  731. }
  732. img {
  733. max-width: 100%;
  734. max-height: 100%;
  735. object-fit: cover;
  736. }
  737. &-mask {
  738. position: absolute;
  739. bottom: 0;
  740. left: 0;
  741. display: flex;
  742. flex-direction: column;
  743. justify-content: flex-end;
  744. padding: 5px 8px 5px;
  745. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  746. height: 80px;
  747. width: 100%;
  748. color: #f7dcdc;
  749. div {
  750. overflow: hidden;
  751. white-space: nowrap;
  752. text-overflow: ellipsis;
  753. margin-bottom: 3px;
  754. }
  755. }
  756. &-state {
  757. position: absolute;
  758. top: 0px;
  759. left: 0px;
  760. width: 100%;
  761. height: 100%;
  762. // padding: 7.5px;
  763. border-radius: 12px;
  764. display: flex;
  765. justify-content: center;
  766. align-items: center;
  767. text-align: center;
  768. color: #f7dcdc;
  769. background-color: rgba(0, 0, 0, 0.3);
  770. }
  771. &-del {
  772. position: absolute;
  773. top: 0px;
  774. right: 0px;
  775. height: 30px;
  776. width: 30px;
  777. padding: 7.5px;
  778. border-radius: 0 0 0 12px;
  779. background-color: rgba(0, 0, 0, 0.3);
  780. img {
  781. height: 15px;
  782. width: 15px;
  783. }
  784. z-index: 999;
  785. }
  786. .copyAndDelBox {
  787. position: absolute;
  788. top: 0px;
  789. left: 0px;
  790. width: 100%;
  791. height: 100%;
  792. // padding: 7.5px;
  793. border-radius: 12px;
  794. display: flex;
  795. flex-direction: column;
  796. justify-content: center;
  797. align-items: center;
  798. text-align: center;
  799. color: #f7dcdc;
  800. background-color: rgba(0, 0, 0, 0.5);
  801. z-index: 99;
  802. transition: opacity 0.3s ease-out;
  803. div {
  804. font-size: 15px;
  805. margin-bottom: 20px;
  806. }
  807. }
  808. }
  809. }
  810. </style>