邃芒智像(Uniapp : WX、TT、H5)
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

841 lines
20 KiB

  1. <template>
  2. <view :class="pageClass">
  3. <!-- 背景图 -->
  4. <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> -->
  5. <!-- 毛玻璃 -->
  6. <view class="glass">
  7. <image src="../../assets/img/homeImg.png" mode="scaleToFill" />
  8. </view>
  9. <!-- 头像 -->
  10. <view class="avatarBox">
  11. <image
  12. class="avatar"
  13. :src="userInfoModulesPinia.myAvatar"
  14. mode="aspectFill"
  15. />
  16. <view @click="chooseAvatar" class="changeAvatar">
  17. <image src="../../assets/img/reset.png" mode="aspectFit" />
  18. </view>
  19. </view>
  20. <!-- 金币 -->
  21. <view class="coinBox">
  22. 我的金币:&nbsp; &nbsp;{{ userInfoModulesPinia.myGlod }}
  23. <image src="../../assets/icon/icon.png" mode="scaleToFill" />
  24. <text @click="goOtherPage('buyCoin')">购买金币</text></view
  25. >
  26. <!-- tab栏 -->
  27. <view class="tabsBox">
  28. <view
  29. class="tabItem"
  30. v-for="item in tabList"
  31. :key="item.id"
  32. :class="showListActive == item.id ? 'active' : ''"
  33. @click="clickTabHandle(item)"
  34. >
  35. {{ item.name }}</view
  36. >
  37. </view>
  38. <!-- 显示写真列表内容 -->
  39. <scroll-view
  40. @scrolltolower="getMorePhotoList"
  41. :scroll-y="true"
  42. v-show="showListActive == 1"
  43. class="showStyleList"
  44. >
  45. <view
  46. v-for="item in PhotoList"
  47. :key="item.id"
  48. class="showListItem"
  49. @click="goOtherPage(`/pages/lookPhoto/index?id=${item.id}`)"
  50. >
  51. <view class="top">
  52. <text class="name">风格名称</text>
  53. <view class="time">
  54. <text
  55. >生成时间
  56. {{ dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss") }}</text
  57. >
  58. <!-- 更多 -->
  59. <view class="moreBox" @click="clickDel(item)">
  60. <image src="../../assets/icon/more.png" mode="widthFix" />
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 成功时 -->
  65. <scroll-view
  66. v-if="item.status == 2"
  67. :scroll-x="true"
  68. class="imgListBox"
  69. >
  70. <view v-for="item2 in item.photoList" :key="item2.id" class="item">
  71. <image :src="item2.image" class="cover" mode="aspectFill"></image>
  72. </view>
  73. </scroll-view>
  74. <!-- 生产中时 -->
  75. <scroll-view
  76. v-if="item.status != 2"
  77. :scroll-x="true"
  78. class="imgListBox"
  79. >
  80. <view class="creating">
  81. <image
  82. src="../../assets/img/logo-4.png"
  83. class="cover"
  84. mode="widthFix"
  85. ></image>
  86. <text>生成中,请稍后</text>
  87. </view>
  88. </scroll-view>
  89. </view>
  90. <!-- 空处理 -->
  91. <view v-show="PhotoList.length == 0" class="noData"
  92. >暂无数据 ,
  93. <text
  94. @click="goOtherPage('/pages/closeStyle/closeStyle')"
  95. class="goCreate"
  96. >去生成!</text
  97. >
  98. </view>
  99. </scroll-view>
  100. <!-- 显示视频列表内容 -->
  101. <scroll-view
  102. :scroll-y="true"
  103. v-show="showListActive == 2"
  104. class="showVideoList"
  105. >
  106. <view v-for="item in 7" :key="item" class="showListItem">
  107. <image
  108. class="showImg"
  109. src="../../assets/img/avatar.png"
  110. mode="aspectFit"
  111. />
  112. <view class="videoInfo">
  113. <view class="name">视频名称</view>
  114. <view class="time">生成时间</view>
  115. </view>
  116. <!-- 播放按钮 -->
  117. <view class="playIcon">
  118. <image src="../../assets/icon/play.png" mode="aspectFit" />
  119. </view>
  120. <!-- 更多 -->
  121. <view class="moreBox">
  122. <image src="../../assets/icon/more.png" mode="widthFix" />
  123. </view>
  124. </view>
  125. </scroll-view>
  126. <!-- 显示邀请列表内容 -->
  127. <view class="InviteBox" v-show="showListActive == 3">
  128. <scroll-view :scroll-y="true" class="showInviteList">
  129. <view v-for="item in 9" :key="item" class="InviteList">
  130. <up-avatar :src="avatarUrl" size="50"></up-avatar>
  131. <view class="info">
  132. <view class="name">猕猴桃</view>
  133. <view class="time">2023/7/29</view>
  134. </view>
  135. <view class="getCoin"> 金币+2 </view>
  136. </view>
  137. </scroll-view>
  138. <view class="inviteBtn">继续邀请好友</view>
  139. </view>
  140. <!-- 显示消费列表内容 -->
  141. <view v-show="showListActive == 4" class="showOrderList">
  142. <view class="top">
  143. <text>名称</text>
  144. <text>时间</text>
  145. <text>金币</text>
  146. </view>
  147. <scroll-view :scroll-y="true" class="bottom">
  148. <view class="OrderListItem" v-for="item in ConsumeList" :key="item.id">
  149. <view class="name">{{ getConsumeName(item.type) }}</view>
  150. <view class="time">{{
  151. dayjs(item.createDate).format("YYYY-MM-DD HH:mm:ss")
  152. }}</view>
  153. <view class="coin">{{ getSymbol(item.type) }}{{ item.goldNum }}</view>
  154. </view>
  155. <!-- 空处理 -->
  156. <view v-show="ConsumeList.length == 0" class="noData">暂无数据</view>
  157. </scroll-view>
  158. </view>
  159. <!-- 弹出层 -->
  160. <view v-if="showPopup" class="mask">
  161. <view class="myPopup">
  162. <image
  163. @click="showPopup = false"
  164. src="../../assets/icon/close.png"
  165. mode="scaleToFill"
  166. />
  167. <view class="text">确定要删除这个写真吗?</view>
  168. <view class="del" @click="deletePhoto">删除</view>
  169. <view class="cancel" @click="showPopup = false">取消</view>
  170. </view>
  171. </view>
  172. </view>
  173. </template>
  174. <script setup>
  175. //#region 导入
  176. import dayjs from "dayjs";
  177. import { onLoad } from "@dcloudio/uni-app";
  178. import { ref, reactive, computed, inject } from "vue";
  179. // import App from "../../App.vue";
  180. import {
  181. findImageApi,
  182. findGlodApi,
  183. getPhotoListApi,
  184. getConsumeListApi,
  185. deleteApi,
  186. } from "../../api/home.js";
  187. import { userInfoModules } from "@/store/modules/userInfo";
  188. import imageCompression from "browser-image-compression"; //压缩图片插件
  189. //#endregion
  190. //#region 定义,杂项
  191. const userInfoModulesPinia = userInfoModules();
  192. const pageClass = computed(() => {
  193. if (userInfoModulesPinia.platForm == 1) {
  194. return "page pageH5";
  195. } else {
  196. return "page";
  197. }
  198. });
  199. // console.log(userInfoModulesPinia.token, "token123123");
  200. //#endregion
  201. //#region 头像
  202. const avatarUrl = ref(null);
  203. function chooseAvatar() {
  204. uni.switchTab({
  205. url: "/pages/uploadPhoto/uploadPhoto",
  206. });
  207. return;
  208. uni.chooseImage({
  209. count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片
  210. success: async (res) => {
  211. // avatarUrl.value = res.tempFilePaths[0];
  212. // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器
  213. // 示例代码:
  214. // uploadImageToServer(tempFilePaths[0]);
  215. // 图片压缩
  216. console.log(res.tempFiles[0].size);
  217. if (userInfoModulesPinia.platForm != 1) {
  218. uni.compressImage({
  219. src: res.tempFilePaths[0],
  220. quality: 20,
  221. success: (res2) => {
  222. avatarUrl.value = res2.tempFilePath;
  223. console.log(res2.tempFilePath);
  224. },
  225. });
  226. } else {
  227. const options = {
  228. maxSizeMB: 2, // 最大压缩大小为 4MB
  229. useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
  230. };
  231. const compressedFile = await imageCompression(
  232. res.tempFiles[0],
  233. options
  234. );
  235. //compressedFile是一个blob对象
  236. avatarUrl.value = URL.createObjectURL(compressedFile);
  237. console.log(compressedFile);
  238. // avatarUrl.value = compressedFile;
  239. console.log("压缩图片h5");
  240. }
  241. },
  242. fail: (err) => {
  243. console.error("选择图片失败", err);
  244. },
  245. });
  246. }
  247. function goOtherPage(url) {
  248. uni.navigateTo({
  249. url: url,
  250. });
  251. }
  252. //#endregion
  253. //#region tab
  254. const tabList = ref([
  255. { name: "我的写真", id: 1 },
  256. { name: "我的视频", id: 2 },
  257. { name: "我的邀请", id: 3 },
  258. { name: "消费记录", id: 4 },
  259. ]);
  260. const showListActive = ref(1);
  261. function clickTabHandle(e) {
  262. showListActive.value = e.id;
  263. }
  264. //#endregion
  265. //#region 获取写真列表
  266. const pageSize1 = ref(8);
  267. const pageNum1 = ref(1);
  268. const PhotoList = ref(7);
  269. async function getPhotoList(pageSize, pageNum) {
  270. try {
  271. const res = await getPhotoListApi(pageSize, pageNum);
  272. PhotoList.value = res.data.list;
  273. } catch (error) {}
  274. }
  275. async function getMorePhotoList() {
  276. try {
  277. pageNum1.value += 1;
  278. const res = await getPhotoListApi(pageSize1.value, pageNum1.value);
  279. if (res.data.list.length == 0) {
  280. pageNum1.value -= 1;
  281. }
  282. PhotoList.value.push(...res.data.list);
  283. } catch (error) {
  284. uni.showToast({
  285. title: "获取数据失败,请重试",
  286. icon: "none",
  287. });
  288. }
  289. }
  290. //#endregion 获取图片,金币,
  291. //#region 获取消费记录
  292. const pageSize2 = ref(20);
  293. const pageNum2 = ref(1);
  294. const ConsumeList = ref(20);
  295. async function getConsumeList(pageSize, pageNum) {
  296. try {
  297. const res = await getConsumeListApi(pageSize, pageNum);
  298. ConsumeList.value = res.data.list;
  299. } catch (error) {}
  300. }
  301. async function getMoreConsumeList() {
  302. try {
  303. pageNum2.value += 1;
  304. const res = await getConsumeList(pageSize2.value, pageNum2.value);
  305. if (res.data.list.length == 0) {
  306. pageNum2.value -= 1;
  307. }
  308. ConsumeList.value.push(...res.data.list);
  309. } catch (error) {
  310. uni.showToast({
  311. title: "获取数据失败,请重试",
  312. icon: "none",
  313. });
  314. }
  315. }
  316. // 判断消费名称
  317. function getConsumeName(type) {
  318. if (type == 1) {
  319. return "注册";
  320. } else if (type == 2) {
  321. return "邀请";
  322. } else if (type == 3) {
  323. return "充值";
  324. } else if (type == 10) {
  325. return "生成照片";
  326. } else if (type == 11) {
  327. return "照片超分";
  328. }
  329. }
  330. // 判断正负
  331. function getSymbol(type) {
  332. if ([1, 2, 3].includes(type)) {
  333. return "+";
  334. } else {
  335. return "-";
  336. }
  337. }
  338. //#endregion 获取图片,金币,
  339. const myAvatar = ref(
  340. "https://suimang.oss-accelerate.aliyuncs.com/capi/2023-08-25/03b58cd2f52c49829435addbf1ec435a.jpg?x-oss-process=image/resize,w_10000/quality,q_60"
  341. );
  342. const myGlod = ref(0);
  343. async function findImage() {
  344. try {
  345. const res = await findImageApi();
  346. myAvatar.value = res.data.image;
  347. } catch (error) {}
  348. }
  349. async function findGlod() {
  350. try {
  351. const res = await findGlodApi();
  352. if (!res.data) {
  353. myGlod.value = 0;
  354. } else {
  355. myGlod.value = res.data.coin;
  356. }
  357. } catch (error) {}
  358. }
  359. //#endregion ---------------------------
  360. //#region 删除弹出框
  361. const showPopup = ref(false);
  362. const temporarily = ref(null); //暂存的
  363. // const delModalContent = "确定要删除这个写真吗?";
  364. function clickDel(item) {
  365. showPopup.value = true;
  366. temporarily.value = item;
  367. }
  368. async function deletePhoto() {
  369. try {
  370. const data = {
  371. id: temporarily.value.id,
  372. };
  373. const res = await deleteApi(data);
  374. pageNum1.value = 1;
  375. await getPhotoList(pageSize1.value, pageNum1.value);
  376. showPopup.value = false;
  377. console.log(res);
  378. // if (res.data.code == 200) {
  379. // } else {
  380. // uni.showToast({
  381. // title: "删除失败,请重试",
  382. // icon: "none",
  383. // });
  384. // }
  385. } catch (error) {
  386. console.log(error, "删除失败");
  387. }
  388. }
  389. //#endregion ---------------------------
  390. //#region 初始化和卸载
  391. function init() {
  392. if (userInfoModulesPinia.token == 1) {
  393. getPhotoList(pageSize1.value, pageNum1.value);
  394. } else {
  395. setTimeout(init, 500); // 继续等待 0.5 秒后再次执行函数
  396. }
  397. }
  398. onLoad(async () => {
  399. setTimeout(() => {
  400. getPhotoList(pageSize1.value, pageNum1.value);
  401. getConsumeList(pageSize2.value, pageNum2.value);
  402. // findImage();
  403. // findGlod();
  404. // getPhotoList();
  405. }, 2000);
  406. });
  407. //#endregion ---------------------------
  408. //#region
  409. //#endregion ---------------------------
  410. </script>
  411. <style lang="scss">
  412. .page {
  413. position: relative;
  414. height: 100vh;
  415. background-color: rgba(0, 0, 0, 0.8);
  416. // background: url("../../assets/img/avatar.png");
  417. .bgc {
  418. position: absolute;
  419. width: 750rpx;
  420. height: 750rpx;
  421. transform: scale(1.5);
  422. top: 187rpx;
  423. left: 0;
  424. object-fit: cover;
  425. z-index: -2;
  426. backdrop-filter: blur(3px);
  427. // backdrop-filter: blur(20px);
  428. }
  429. }
  430. .pageH5 {
  431. height: calc(100vh - 44px);
  432. }
  433. .avatarBox {
  434. position: relative;
  435. width: 260rpx;
  436. height: 260rpx;
  437. .avatar {
  438. width: 260rpx;
  439. height: 260rpx;
  440. border-radius: 130rpx;
  441. }
  442. .changeAvatar {
  443. position: absolute;
  444. right: -20rpx;
  445. bottom: 0;
  446. width: 66rpx;
  447. height: 66rpx;
  448. image {
  449. width: 100%;
  450. height: 100%;
  451. }
  452. }
  453. }
  454. .coinBox {
  455. margin-top: 38rpx;
  456. line-height: 50rpx;
  457. image {
  458. width: 33rpx;
  459. height: 33rpx;
  460. vertical-align: middle;
  461. }
  462. text {
  463. margin-left: 28rpx;
  464. display: inline-block;
  465. width: 160rpx;
  466. height: 50rpx;
  467. border-radius: 50rpx;
  468. font-size: 26rpx;
  469. text-align: center;
  470. // font-weight: 700;
  471. background-color: rgba(255, 255, 255, 0.1);
  472. }
  473. }
  474. // tab栏样式
  475. .tabsBox {
  476. display: flex;
  477. justify-content: space-between;
  478. margin-top: 50rpx;
  479. .tabItem {
  480. margin: 0 9rpx;
  481. width: 160rpx;
  482. height: 80rpx;
  483. line-height: 80rpx;
  484. text-align: center;
  485. border-radius: 12rpx;
  486. background-color: rgba(255, 255, 255, 0.1);
  487. }
  488. .active {
  489. background-color: rgba(255, 79, 0, 1);
  490. }
  491. }
  492. // 写真列表
  493. .showStyleList {
  494. flex: 1;
  495. overflow: hidden;
  496. margin-top: 30rpx;
  497. width: 690rpx;
  498. .showListItem {
  499. margin-top: 30rpx;
  500. .top {
  501. display: flex;
  502. justify-content: space-between;
  503. padding: 0 10rpx;
  504. margin-bottom: 20rpx;
  505. .name {
  506. font-weight: 900;
  507. }
  508. .time {
  509. display: inline-block;
  510. font-size: 22rpx;
  511. font-weight: 100;
  512. line-height: 33rpx;
  513. text {
  514. margin-right: 50rpx;
  515. }
  516. .moreBox {
  517. padding: 0 0 0 40rpx;
  518. display: inline-block;
  519. width: 48rpx;
  520. height: 33rpx;
  521. image {
  522. vertical-align: top;
  523. width: 100%;
  524. }
  525. }
  526. }
  527. }
  528. .imgListBox {
  529. white-space: nowrap;
  530. display: flex;
  531. justify-content: space-between;
  532. flex-wrap: nowrap;
  533. height: 200rpx;
  534. .item {
  535. width: 150rpx;
  536. height: 200rpx;
  537. border-radius: 30rpx;
  538. margin-right: 30rpx;
  539. display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
  540. flex-direction: column;
  541. align-items: center;
  542. .cover {
  543. width: 150rpx;
  544. height: 200rpx;
  545. border-radius: 30rpx;
  546. }
  547. }
  548. .creating {
  549. position: relative;
  550. width: 200rpx;
  551. height: 200rpx;
  552. border-radius: 30rpx;
  553. margin-right: 30rpx;
  554. display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
  555. flex-direction: column;
  556. align-items: center;
  557. .cover {
  558. width: 200rpx;
  559. height: 200rpx;
  560. border-radius: 30rpx;
  561. }
  562. text {
  563. position: absolute;
  564. top: 50%;
  565. left: 150%;
  566. transform: translate(-50%, -50%);
  567. width: 100%;
  568. font-weight: 900;
  569. text-align: center;
  570. color: #ff4f00;
  571. }
  572. }
  573. }
  574. }
  575. .noData {
  576. text-align: center;
  577. .goCreate {
  578. color: #ff4f00;
  579. text-decoration: dashed;
  580. }
  581. }
  582. }
  583. // 视频列表
  584. .showVideoList {
  585. flex: 1;
  586. overflow: hidden;
  587. margin-top: 30rpx;
  588. width: 690rpx;
  589. padding: 15rpx;
  590. display: flex;
  591. flex-wrap: wrap;
  592. justify-content: flex-start;
  593. word-break: keep-all;
  594. .showListItem {
  595. position: relative;
  596. display: inline-block;
  597. width: 330rpx;
  598. height: 440rpx;
  599. background-color: #000;
  600. margin-bottom: 25rpx;
  601. border-radius: 25rpx;
  602. overflow: hidden;
  603. .showImg {
  604. position: absolute;
  605. top: 0;
  606. z-index: 1;
  607. width: 100%;
  608. }
  609. .videoInfo {
  610. position: absolute;
  611. bottom: 0;
  612. width: 100%;
  613. height: 100rpx;
  614. padding: 10rpx 20rpx;
  615. // background-color: red;
  616. // background-color: #393b3d;
  617. z-index: 2;
  618. .name {
  619. font-weight: 900;
  620. margin-bottom: 10rpx;
  621. }
  622. .time {
  623. font-size: 22rpx;
  624. font-weight: 100;
  625. }
  626. }
  627. .playIcon {
  628. position: absolute;
  629. top: 50%;
  630. left: 50%;
  631. transform: translate(-50%, -50%);
  632. z-index: 2;
  633. image {
  634. width: 72rpx;
  635. height: 72rpx;
  636. }
  637. }
  638. .moreBox {
  639. position: absolute;
  640. top: 23rpx;
  641. right: 26rpx;
  642. width: 8rpx;
  643. height: 33rpx;
  644. image {
  645. width: 100%;
  646. }
  647. }
  648. }
  649. .showListItem:nth-child(odd) {
  650. margin-right: 30rpx;
  651. }
  652. }
  653. // 邀请列表
  654. .InviteBox {
  655. width: 100%;
  656. position: relative;
  657. flex: 1;
  658. display: flex;
  659. flex-direction: column;
  660. align-items: center;
  661. overflow: hidden;
  662. .inviteBtn {
  663. position: absolute;
  664. bottom: 20rpx;
  665. left: 50%;
  666. transform: translate(-50%, 0);
  667. width: 520rpx;
  668. height: 100rpx;
  669. line-height: 100rpx;
  670. text-align: center;
  671. font-size: 30rpx;
  672. background-color: rgba(255, 79, 0, 1);
  673. border-radius: 50rpx;
  674. }
  675. }
  676. .showInviteList {
  677. position: relative;
  678. margin-top: 15rpx;
  679. flex: 1;
  680. overflow: hidden;
  681. width: 100%;
  682. .InviteList {
  683. display: flex;
  684. justify-content: flex-start;
  685. margin-bottom: 12rpx;
  686. width: 100%;
  687. height: 120rpx;
  688. border-radius: 24rpx;
  689. background-color: rgba(255, 255, 255, 0.1);
  690. .u-avatar {
  691. margin: 0 30rpx;
  692. height: 120rpx !important;
  693. }
  694. .info {
  695. flex: 1;
  696. display: flex;
  697. flex-direction: column;
  698. justify-content: space-evenly;
  699. .name {
  700. font-weight: bold;
  701. }
  702. .time {
  703. font-size: 22rpx;
  704. }
  705. }
  706. .getCoin {
  707. width: 145rpx;
  708. height: 120rpx;
  709. line-height: 120rpx;
  710. text-align: center;
  711. margin-right: 30rpx;
  712. }
  713. }
  714. .InviteList:last-child::after {
  715. content: "";
  716. width: 1rpx;
  717. height: 130rpx;
  718. padding-bottom: 130rpx;
  719. }
  720. }
  721. // 消费列表
  722. .showOrderList {
  723. position: relative;
  724. flex: 1;
  725. margin-top: 30rpx;
  726. background-color: rgba(255, 255, 255, 0.1);
  727. border-radius: 24rpx;
  728. width: 100%;
  729. box-sizing: border-box;
  730. padding: 15rpx 20rpx;
  731. // padding-top: 80rpx;
  732. overflow: hidden;
  733. display: flex;
  734. flex-direction: column;
  735. align-items: center;
  736. .top {
  737. width: 100%;
  738. padding: 0 50rpx;
  739. height: 64rpx;
  740. line-height: 64rpx;
  741. border-radius: 40rpx;
  742. display: flex;
  743. justify-content: space-between;
  744. background-color: rgba(0, 0, 0, 0.2);
  745. font-size: 22rpx;
  746. }
  747. .bottom {
  748. // flex: 1;
  749. width: 100%;
  750. overflow: hidden;
  751. .OrderListItem {
  752. display: flex;
  753. justify-content: space-between;
  754. padding: 0 50rpx;
  755. height: 65rpx;
  756. line-height: 65rpx;
  757. .name,
  758. .coin {
  759. font-weight: 900;
  760. }
  761. .time {
  762. font-weight: 100;
  763. }
  764. }
  765. }
  766. }
  767. // 弹出层遮罩层
  768. .mask {
  769. position: absolute;
  770. width: 100%;
  771. height: 100%;
  772. background-color: rgba(0, 0, 0, 0.3);
  773. z-index: 999;
  774. }
  775. // 弹出层
  776. .myPopup {
  777. display: flex;
  778. flex-direction: column;
  779. align-items: center;
  780. position: absolute;
  781. top: 50%;
  782. left: 50%;
  783. transform: translate(-50%, -50%);
  784. width: 600rpx;
  785. height: 500rpx;
  786. padding: 30rpx;
  787. background: #000000;
  788. border-radius: 24rpx;
  789. font-size: 30rpx;
  790. font-weight: bold;
  791. text-align: center;
  792. image {
  793. position: absolute;
  794. top: -20rpx;
  795. right: -20rpx;
  796. width: 70rpx;
  797. height: 70rpx;
  798. }
  799. .text {
  800. height: 250rpx;
  801. line-height: 250rpx;
  802. }
  803. .del {
  804. width: 70%;
  805. height: 80rpx;
  806. line-height: 80rpx;
  807. border-radius: 80rpx;
  808. background-color: #ff4f00;
  809. margin-bottom: 30rpx;
  810. }
  811. .cancel {
  812. width: 70%;
  813. height: 80rpx;
  814. line-height: 80rpx;
  815. border-radius: 80rpx;
  816. border: #ff4f00 2rpx solid;
  817. }
  818. }
  819. </style>