邃芒智像(Uniapp : WX、TT、H5)
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.
 
 
 
 

839 wiersze
22 KiB

  1. <template>
  2. <view :class="pageClass">
  3. <!-- mode="aspectFit" -->
  4. <image class="bgImg" src="../../assets/img/homeImg.jpg" />
  5. <!-- 视频,已废弃 -->
  6. <view v-show="false" class="videoBox">
  7. <!-- <video
  8. src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4"
  9. autoplay
  10. muted
  11. loop
  12. :controls="false"
  13. /> -->
  14. <!-- <video
  15. src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4"
  16. autoplay
  17. loop
  18. :controls="false"
  19. /> -->
  20. </view>
  21. <view class="bottomBox">
  22. <button
  23. v-if="!checkboxValue[0] && userInfoModulesPinia.platForm == 2"
  24. class="bottomBtn"
  25. type="default"
  26. id="getPhoneNumber"
  27. @click="toCreate"
  28. >
  29. 开始制作我的数字写真
  30. </button>
  31. <button
  32. v-if="checkboxValue[0] && userInfoModulesPinia.platForm == 2"
  33. class="bottomBtn"
  34. open-type="getPhoneNumber"
  35. type="default"
  36. id="getPhoneNumber"
  37. @getphonenumber="toCreate"
  38. >
  39. 开始制作我的数字写真
  40. </button>
  41. <!-- 抖音获取手机号 -->
  42. <!-- <button
  43. v-if="userInfoModulesPinia.platForm == 3"
  44. class="bottomBtn"
  45. open-type="getPhoneNumber"
  46. type="default"
  47. id="getPhoneNumber"
  48. @getphonenumber="dogetphonenumber"
  49. >
  50. 开始制作我的数字分身
  51. </button> -->
  52. <!-- 手机号登录 -->
  53. <button
  54. v-if="userInfoModulesPinia.platForm == 3"
  55. class="bottomBtn"
  56. type="default"
  57. id="getPhoneNumber"
  58. @click="showForm = true"
  59. >
  60. 开始制作我的数字分身
  61. </button>
  62. <!-- <view class="bottomBtn" @click="toCreate"> 开始制作我的数字写真 </view> -->
  63. <!-- 同意协议 -->
  64. <u-checkbox-group
  65. v-if="userInfoModulesPinia.platForm == 2"
  66. v-model="checkboxValue"
  67. placement="row"
  68. @change="changedCheckbox"
  69. >
  70. <u-checkbox
  71. labelColor="white"
  72. activeColor="red"
  73. v-for="(item, index) in checkboxList"
  74. :name="item.name"
  75. :key="index"
  76. >
  77. </u-checkbox>
  78. <text class="checkPro"
  79. >同意<text class="goPro" @click="goPro">《智像用户使用协议》</text>
  80. </text>
  81. </u-checkbox-group>
  82. </view>
  83. <!-- 抖音手机号验证码登录 -->
  84. <view
  85. class="phoneLoginForm"
  86. v-show="userInfoModulesPinia.platForm == 3 && showForm"
  87. >
  88. <u--form
  89. labelPosition="left"
  90. :model="formData"
  91. :rules="rules"
  92. ref="formRef"
  93. >
  94. <u-form-item
  95. labelWidth="80"
  96. label="手机号"
  97. prop="phoneNum"
  98. borderBottom
  99. ref="form1"
  100. >
  101. <u--input
  102. type="number"
  103. v-model="formData.phoneNum"
  104. border="none"
  105. ></u--input>
  106. </u-form-item>
  107. <!-- 获取验证码 -->
  108. <!-- 验证码 -->
  109. <view class="getCodeBtn" @click="getCode">
  110. {{ backwardsNum < 60 ? backwardsNum + "s" : "发送验证码" }}
  111. </view>
  112. <!-- <view v-if="backwardsNums <= 0" class="getCodeBtn">{{
  113. backwardsNum
  114. }}</view> -->
  115. <u-form-item labelWidth="80" label="验证码 " borderBottom ref="form2">
  116. <u--input
  117. type="number"
  118. v-model="formData.codeNum"
  119. border="none"
  120. ></u--input>
  121. </u-form-item>
  122. </u--form>
  123. <view class="loginBtn" @click="loginByCode">登录</view>
  124. </view>
  125. <view class="outSide" v-if="showPrivacy">
  126. <view class="showPrivacy">
  127. <view class="title">隐私协议更新</view>
  128. <view class="content">
  129. 感谢您一直以来对我们的信任和支持。为了更好地保护您的个人信息安全我们已经更新了隐私协议。如您继续使用我们的服务即表示同意并接受更新后的隐私协议。如您有任何疑问或意见,欢迎您联系我们的客户服务团队。
  130. </view>
  131. <button
  132. class="agree"
  133. type="primary"
  134. open-type="agreePrivacyAuthorization"
  135. @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
  136. >
  137. 同意
  138. </button>
  139. <button class="check" @click="handleOpenPrivacyContract">
  140. 查看《隐私保护指引》
  141. </button>
  142. <image
  143. @click="closePrivacy"
  144. class="delete"
  145. src="../../assets/icon/delete.png"
  146. mode=""
  147. />
  148. </view>
  149. </view>
  150. </view>
  151. </template>
  152. <script setup>
  153. //#region 导入
  154. import { ref, reactive, computed } from "vue";
  155. import { onLoad } from "@dcloudio/uni-app";
  156. import { findImageApi, findGlodApi } from "../../api/home";
  157. import {
  158. loginApi,
  159. loginPhoneApi,
  160. getCodeApi,
  161. loginByCodeApi,
  162. } from "../../api/login.js";
  163. import { userInfoModules } from "@/store/modules/userInfo";
  164. //#endregion
  165. const userInfoModulesPinia = userInfoModules();
  166. const showPrivacy = ref(false);
  167. const pageClass = computed(() => {
  168. if (userInfoModulesPinia.platForm == 1) {
  169. return "page pageH5";
  170. } else {
  171. return "page";
  172. }
  173. });
  174. //#region 勾选和手机号授权
  175. const checkboxValue = ref([]);
  176. const checkboxList = ref([
  177. {
  178. name: "同意智像相机用户使用协议",
  179. },
  180. ]);
  181. function changedCheckbox(e) {
  182. console.log(e);
  183. }
  184. async function dogetphonenumber(e) {
  185. console.log(e, "e");
  186. if (e.detail.errMsg.includes("ok")) {
  187. // if (e.detail.errMsg.includes("fail")) {
  188. //用户授权了手机号
  189. const data = {
  190. appId: userInfoModulesPinia.getAppId(),
  191. openId: userInfoModulesPinia.openId,
  192. encryptedData: e.detail.encryptedData,
  193. iv: e.detail.iv,
  194. uid: urlUid.value,
  195. };
  196. try {
  197. const res2 = await loginPhoneApi(data);
  198. uni.showToast({
  199. icon: "none",
  200. title: "获取成功",
  201. });
  202. userInfoModulesPinia.token = res2.data.token;
  203. uni.setStorageSync("token", userInfoModulesPinia.token);
  204. uni.switchTab({
  205. url: "/pages/uploadPhoto/uploadPhoto",
  206. });
  207. } catch (error) {
  208. uni.showToast({
  209. icon: "none",
  210. title: "获取手机号失败",
  211. });
  212. }
  213. } else {
  214. uni.showToast({
  215. icon: "none",
  216. title: "获取手机号失败",
  217. });
  218. //code已过期 重新拿code再授权
  219. }
  220. }
  221. async function toCreate(e) {
  222. console.log();
  223. if (checkboxValue.value[0]) {
  224. // await handleLogin();
  225. await dogetphonenumber(e);
  226. } else {
  227. uni.showModal({
  228. title: "提示",
  229. content: "同意智像相机用户使用协议?",
  230. success: function (res) {
  231. if (res.confirm) {
  232. checkboxValue.value = ["同意智像相机用户使用协议"];
  233. // handleLogin();
  234. dogetphonenumber(e);
  235. } else if (res.cancel) {
  236. }
  237. },
  238. fail: (err) => {},
  239. });
  240. }
  241. }
  242. const userInfo = ref(null);
  243. async function handleLogin() {
  244. // uni.getUserInfo({});
  245. // getPhoneNumber
  246. // getUserProfile
  247. uni.getUserProfile({
  248. desc: "用于完善用户信息",
  249. success: async (res1) => {
  250. console.log(res1);
  251. userInfo.value = res1.userInfo;
  252. userInfoModulesPinia.userInfo = res1.userInfo;
  253. console.log(userInfoModulesPinia.openId, "拿出openid");
  254. const data = {
  255. appId: "wx75cf14e3a0d45821",
  256. openId: userInfoModulesPinia.openId,
  257. encryptedData: res1.encryptedData,
  258. iv: res1.iv,
  259. };
  260. try {
  261. const res2 = await loginPhoneApi(data);
  262. uni.showToast({
  263. icon: "none",
  264. title: "获取成功",
  265. });
  266. } catch (error) {
  267. uni.showToast({
  268. icon: "none",
  269. title: "获取失败",
  270. });
  271. }
  272. },
  273. fail: (err) => {
  274. console.log(err);
  275. uni.showToast({
  276. icon: "none",
  277. title: "用户拒绝获取",
  278. });
  279. },
  280. });
  281. }
  282. const goPro = () => {
  283. uni.navigateTo({
  284. url: "/pages/protocol/user",
  285. });
  286. };
  287. //#endregion ---------------------
  288. //#region 抖音手机号登录
  289. const showForm = ref(false);
  290. const formData = ref({
  291. phoneNum: null,
  292. codeNum: null,
  293. });
  294. const rules = {
  295. phoneNum: [
  296. {
  297. required: true,
  298. message: "请填写手机号",
  299. trigger: ["blur"],
  300. },
  301. {
  302. // 自定义验证函数,见上说明
  303. validator: (rule, value, callback) => {
  304. // 上面有说,返回true表示校验通过,返回false表示不通过
  305. // uni.$u.test.mobile()就是返回true或者false的
  306. return uni.$u.test.mobile(value);
  307. },
  308. message: "手机号码不正确",
  309. // 触发器可以同时用blur和change
  310. trigger: ["blur"],
  311. },
  312. ],
  313. };
  314. const formRef = ref(null);
  315. const form1 = ref(null);
  316. const backwardsNum = ref(60);
  317. const countdownTimer = ref(null); // 倒计时的计时器
  318. const timerFlag = ref(false);
  319. function getCode() {
  320. if (timerFlag.value) {
  321. return; // 如果倒计时尚未结束,不执行倒计时操作
  322. }
  323. timerFlag.value = true;
  324. formRef.value
  325. .validate()
  326. .then(async (res0) => {
  327. try {
  328. uni.showLoading({
  329. title: "请稍后",
  330. mask: true,
  331. });
  332. console.log("duanxing1");
  333. const res = await getCodeApi(formData.value.phoneNum);
  334. console.log(res.code, "duanxing2");
  335. uni.hideLoading();
  336. if (res.code != 200) {
  337. uni.showToast({
  338. title: res.message,
  339. icon: "none",
  340. });
  341. }
  342. console.log(res);
  343. // 表单验证通过后开始倒计时
  344. countdownTimer.value = setInterval(() => {
  345. if (backwardsNum.value > 0) {
  346. backwardsNum.value--;
  347. } else {
  348. clearInterval(countdownTimer.value);
  349. countdownTimer.value = null;
  350. backwardsNum.value = 60;
  351. timerFlag.value = false;
  352. }
  353. }, 1000);
  354. } catch (error) {
  355. uni.hideLoading();
  356. uni.$u.toast("短信验证码获取失败");
  357. clearInterval(countdownTimer.value);
  358. countdownTimer.value = null;
  359. backwardsNum.value = 60;
  360. timerFlag.value = false;
  361. }
  362. })
  363. .catch((errors) => {
  364. console.log(errors);
  365. });
  366. }
  367. async function loginByCode() {
  368. uni.showLoading({
  369. title: "请稍后",
  370. mask: true,
  371. });
  372. const data = {
  373. appId: userInfoModulesPinia.getAppId(),
  374. openId: userInfoModulesPinia.openId,
  375. phone: formData.value.phoneNum,
  376. code: formData.value.codeNum,
  377. };
  378. try {
  379. const res = await loginByCodeApi(data);
  380. console.log(res);
  381. uni.hideLoading();
  382. userInfoModulesPinia.token = res.data.token;
  383. uni.setStorageSync("token", userInfoModulesPinia.token);
  384. console.log(res.code, "denglu");
  385. if (res.code != 200) {
  386. uni.showToast({
  387. title: res.message,
  388. icon: "none",
  389. });
  390. } else {
  391. uni.switchTab({
  392. url: "/pages/uploadPhoto/uploadPhoto",
  393. });
  394. }
  395. } catch (error) {
  396. uni.hideLoading();
  397. uni.showToast({
  398. title: "登录失败,请重试",
  399. icon: "none",
  400. });
  401. }
  402. }
  403. //#endregion ---------------------
  404. //#region 隐私协议
  405. const getPrivacySetting = (num) => {
  406. const canIUsePrivacy = wx.canIUse("getPrivacySetting");
  407. // console.log(canIUsePrivacy, "canIUse getPrivacySetting");
  408. if (canIUsePrivacy) {
  409. wx.getPrivacySetting({
  410. success: (res) => {
  411. // console.log(res, "getPrivacySetting"); // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
  412. if (res.needAuthorization) {
  413. // 需要弹出隐私协议
  414. showPrivacy.value = true;
  415. } else {
  416. // 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用已声明过的隐私接口
  417. if (num == 1) {
  418. // 返回token,直接跳转首页
  419. // uni.switchTab({
  420. // url: "/pages/uploadPhoto/uploadPhoto",
  421. // });
  422. } else if (num == 2) {
  423. // 没有返回token,无事发生
  424. }
  425. }
  426. },
  427. fail: () => {},
  428. complete: () => {},
  429. });
  430. }
  431. };
  432. // 关闭弹框直接退出小程序,仅对微信小程序生效
  433. const closePrivacy = () => {
  434. wx.exitMiniProgram();
  435. };
  436. const handleAgreePrivacyAuthorization = () => {
  437. // console.log("Privacy Agreed!");
  438. showPrivacy.value = false;
  439. // 用户同意隐私协议事件回调
  440. // 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了
  441. };
  442. const handleOpenPrivacyContract = () => {
  443. // 打开隐私协议页面
  444. wx.openPrivacyContract({
  445. success: () => {}, // 打开成功
  446. fail: () => {}, // 打开失败
  447. complete: () => {},
  448. });
  449. };
  450. //#endregion ---------------------------------
  451. //#region 初始化
  452. const urlUid = ref(""); //通过邀请来的会携带邀请人ID参数
  453. onLoad((options) => {
  454. // 获取平台及系统信息
  455. uni.getSystemInfo({
  456. success: function (res) {
  457. let uniPlatform = "";
  458. let osName = "";
  459. if (res.uniPlatform == "web") {
  460. uniPlatform = 1;
  461. } else if (res.uniPlatform == "mp-weixin") {
  462. uni.setStorageSync("plat", 1);
  463. uniPlatform = 2;
  464. } else if (res.uniPlatform == "mp-toutiao") {
  465. uni.setStorageSync("plat", 3);
  466. uniPlatform = 3;
  467. }
  468. if (res.osName == "windows") {
  469. osName = 1;
  470. } else if (res.osName == "ios") {
  471. osName = 2;
  472. } else if (res.osName == "android") {
  473. osName = 3;
  474. } else if (res.osName == "mac") {
  475. osName = 4;
  476. } else if (res.osName == "linux") {
  477. osName = 5;
  478. }
  479. userInfoModulesPinia.platForm = uniPlatform; // 平台
  480. userInfoModulesPinia.hostSystem = osName; // 系统
  481. console.log(res.uniPlatform, uniPlatform, "PlatForm");
  482. console.log(res.osName, osName, "System");
  483. // 原来的登录逻辑
  484. // 二维码扫描进入时
  485. if (options.scene) {
  486. const str = decodeURIComponent(options.scene);
  487. const regex = /_u:(\d+)/; // 正则表达式匹配_u:后面的数字
  488. const match = str.match(regex);
  489. urlUid.value = match[1];
  490. }
  491. // 分享链接进入时
  492. else if (options.userId) {
  493. urlUid.value = options.userId;
  494. } else {
  495. urlUid.value = null;
  496. }
  497. console.log(urlUid.value, "邀请人id");
  498. uni.hideHomeButton();
  499. // workId.value = options.id;
  500. if (options.type == "tokenFfalse") {
  501. uni.showToast({
  502. title: "登录失效,请重新登录",
  503. icon: "none",
  504. });
  505. }
  506. // 已有token时直接登录
  507. if (uni.getStorageSync("token")) {
  508. uni.switchTab({ url: "/pages/uploadPhoto/uploadPhoto" });
  509. }
  510. if (userInfoModulesPinia.platForm == 2) {
  511. uni.login({
  512. provider: "weixin", // 使用微信登录授权
  513. success: async (res) => {
  514. console.log(res, "uni.login");
  515. if (res.code) {
  516. try {
  517. uni.showLoading({
  518. title: "加载中...",
  519. mask: true,
  520. });
  521. const data = {
  522. appId: userInfoModulesPinia.getAppId(),
  523. code: res.code,
  524. };
  525. const res2 = await loginApi(data);
  526. userInfoModulesPinia.openId = res2.data.openId;
  527. if (res2.data.token) {
  528. userInfoModulesPinia.token = res2.data.token;
  529. uni.setStorageSync("token", userInfoModulesPinia.token);
  530. console.log(userInfoModulesPinia.openId, "获取openid");
  531. // 获取头像和金币
  532. const res3 = await findImageApi();
  533. if (res3.data) {
  534. uni.setStorageSync("userId", res3.data.id);
  535. }
  536. userInfoModulesPinia.myAvatar =
  537. res3.data && res3.data.image ? res3.data.image : "";
  538. const res4 = await findGlodApi();
  539. if (res4.data) {
  540. uni.setStorageSync("userId", res4.data.id);
  541. }
  542. if (!res4.data) {
  543. userInfoModulesPinia.myGlod = 0;
  544. } else {
  545. userInfoModulesPinia.myGlod = res4.data
  546. .digitalAvatarResidueGlod
  547. ? res4.data.digitalAvatarResidueGlod
  548. : 0;
  549. }
  550. uni.hideLoading();
  551. if (res2.data.token) {
  552. getPrivacySetting(1);
  553. } else {
  554. console.log("error1");
  555. uni.showToast({
  556. title: "登录失败,请重试",
  557. icon: "none",
  558. });
  559. }
  560. } else {
  561. getPrivacySetting(2);
  562. }
  563. uni.hideLoading();
  564. } catch (error) {
  565. // uni.redirectTo({
  566. // url: "pages/index/index",
  567. // });
  568. console.log(error, "error2");
  569. uni.showToast({
  570. title: "登录失败,请重试",
  571. icon: "none",
  572. });
  573. }
  574. } else {
  575. // uni.redirectTo({
  576. // url: "pages/index/index",
  577. // });
  578. console.log("error3");
  579. uni.showToast({
  580. title: "登录失败,请重试",
  581. icon: "none",
  582. });
  583. }
  584. },
  585. fail: (err) => {
  586. // uni.redirectTo({
  587. // url: "pages/index/index",
  588. // });
  589. console.log("error4");
  590. uni.showToast({
  591. title: "登录失败,请重试",
  592. icon: "none",
  593. });
  594. },
  595. });
  596. }
  597. // 抖音头条授权
  598. else if (userInfoModulesPinia.platForm == 3) {
  599. uni.login({
  600. provider: "toutiao", // 使用微信登录授权
  601. success: async (res) => {
  602. console.log(res, "uni.login");
  603. if (res.code) {
  604. try {
  605. uni.showLoading({
  606. title: "加载中...",
  607. mask: true,
  608. });
  609. const data = {
  610. appId: userInfoModulesPinia.getAppId(),
  611. code: res.code,
  612. };
  613. const res2 = await loginApi(data);
  614. userInfoModulesPinia.openId = res2.data.openId;
  615. if (res2.data.token) {
  616. userInfoModulesPinia.token = res2.data.token;
  617. // uni.setStorageSync("token", userInfoModulesPinia.token);
  618. console.log(userInfoModulesPinia.openId, "获取openid");
  619. uni.hideLoading();
  620. } else {
  621. uni.hideLoading();
  622. // uni.redirectTo({
  623. // url: "/pages/login/index",
  624. // });
  625. console.log("error1");
  626. uni.showToast({
  627. title: "登录失败,请重试",
  628. icon: "none",
  629. });
  630. }
  631. uni.hideLoading();
  632. } catch (error) {
  633. uni.hideLoading();
  634. console.log(error, "error2");
  635. uni.showToast({
  636. title: "登录失败,请重试",
  637. icon: "none",
  638. });
  639. }
  640. } else {
  641. console.log("error3");
  642. uni.showToast({
  643. title: "登录失败,请重试",
  644. icon: "none",
  645. });
  646. }
  647. },
  648. fail: (err) => {
  649. console.log("error4");
  650. uni.showToast({
  651. title: "登录失败,请重试",
  652. icon: "none",
  653. });
  654. },
  655. });
  656. }
  657. },
  658. });
  659. });
  660. //#endregion ---------------------------------
  661. //#region
  662. //#endregion ---------------------------------
  663. </script>
  664. <style lang="scss">
  665. .page {
  666. position: relative;
  667. padding: 0;
  668. min-height: 100vh;
  669. }
  670. .bgImg {
  671. width: 750rpx;
  672. height: 100vh;
  673. }
  674. .videoBox {
  675. width: 750rpx;
  676. height: 1120rpx;
  677. // aspect-ratio: 9/12;
  678. video {
  679. width: 100%;
  680. height: 100%;
  681. // aspect-ratio: 9/12;
  682. }
  683. }
  684. .bottomBox {
  685. position: absolute;
  686. bottom: 0;
  687. width: 100%;
  688. height: 345rpx;
  689. display: flex;
  690. flex-direction: column;
  691. align-items: center;
  692. background-color: rgba(0, 0, 0, 0.8);
  693. color: #fff !important;
  694. .bottomBtn {
  695. margin-top: 55rpx;
  696. margin-bottom: 65rpx;
  697. width: 520rpx;
  698. height: 100rpx;
  699. border-radius: 50rpx;
  700. line-height: 100rpx;
  701. text-align: center;
  702. color: #fff;
  703. background-color: rgba(255, 79, 0, 1);
  704. font-size: 30rpx;
  705. font-weight: 900;
  706. }
  707. .checkPro {
  708. display: inline-block;
  709. height: 27rpx;
  710. line-height: 54rpx;
  711. .goPro {
  712. color: #ff4f00;
  713. }
  714. }
  715. }
  716. .phoneLoginForm {
  717. position: absolute;
  718. top: 20%;
  719. left: 30rpx;
  720. width: 690rpx;
  721. z-index: 9;
  722. background-color: rgba(255, 255, 255, 0.6);
  723. padding: 50rpx 30rpx;
  724. border-radius: 30rpx;
  725. .u-code {
  726. width: 100%;
  727. height: 80rpx;
  728. background-color: green;
  729. color: #ff4f00;
  730. }
  731. .getCodeBtn {
  732. background-color: green;
  733. text-align: center;
  734. line-height: 50rpx;
  735. border-radius: 15rpx;
  736. }
  737. .loginBtn {
  738. background-color: #ff4f00;
  739. text-align: center;
  740. line-height: 50rpx;
  741. border-radius: 15rpx;
  742. }
  743. }
  744. .outSide {
  745. position: fixed;
  746. top: 0;
  747. left: 0;
  748. width: 100%;
  749. height: 100%;
  750. color: #000000;
  751. background-color: #00000059;
  752. .showPrivacy {
  753. position: fixed;
  754. width: 520rpx;
  755. background-color: #fff;
  756. left: 50%;
  757. top: 50%;
  758. transform: translate(-50%, -50%);
  759. padding: 60rpx 50rpx;
  760. border-radius: 20rpx;
  761. box-shadow: #00000047 2px 1px 2px 2px;
  762. .title {
  763. text-align: center;
  764. font-size: 30rpx;
  765. font-weight: 600;
  766. }
  767. .content {
  768. text-indent: 2em;
  769. margin: 40rpx 0;
  770. }
  771. button {
  772. width: 350rpx;
  773. &.agree {
  774. margin-bottom: 25rpx;
  775. background-color: #ff4f00;
  776. }
  777. &.check {
  778. background-color: #ffffff00;
  779. font-size: 21rpx;
  780. text-decoration: underline;
  781. padding: 0;
  782. &::after {
  783. border: none;
  784. }
  785. }
  786. }
  787. .delete {
  788. position: absolute;
  789. top: 15rpx;
  790. right: 15rpx;
  791. width: 65rpx;
  792. height: 65rpx;
  793. }
  794. }
  795. }
  796. </style>