index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788
  1. <template>
  2. <view class="flex-col justify-start page">
  3. <cu-custom isBack="true" bgColor="#000000">
  4. <view slot="content" style="color: #FFFFFF">报警设置</view>
  5. </cu-custom>
  6. <!-- <time-slot-->
  7. <!-- ref="timeslot"-->
  8. <!-- :title="'选择时间段'"-->
  9. <!-- @confirm="confirmTime">-->
  10. <!-- </time-slot>-->
  11. <view class="flex-col justify-start section">
  12. <view class="flex-col section_2 space-y-32">
  13. <view class="flex-col">
  14. <text class="self-start font_1 text_2">心率异常提醒</text>
  15. <view class="flex-col section_6 view space-y-10">
  16. <view class="flex-row justify-between self-start equal-division">
  17. <view class="flex-row items-end space-x-4 items-center">
  18. <switch :checked="switchFrom.sign_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzSms"/>
  19. <text class="font_2">短信</text>
  20. </view>
  21. <view class="flex-row items-end space-x-4 items-center">
  22. <switch :checked="switchFrom.sign_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzVoice"/>
  23. <text class="font_2">电话</text>
  24. </view>
  25. <view class="flex-row items-end space-x-4 items-center">
  26. <switch :checked="switchFrom.sign_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzHorn"/>
  27. <text class="font_2">喇叭</text>
  28. </view>
  29. </view>
  30. <view class="flex-col">
  31. <view class="flex-row justify-between items-center list-item">
  32. <text class="font_2 text_3">心率过速提醒值</text>
  33. <view class="flex-row items-center group_3 space-x-6">
  34. <picker @change="pickerChange" :range="sleepWornList.rh_highList" data-target="1">
  35. <view class="uni-input">
  36. <text class="font_3">{{ sleepWorn.rh_high }}</text>
  37. <text class="font_4">次/分钟</text>
  38. <text class="icon-right text-white"></text>
  39. </view>
  40. </picker>
  41. </view>
  42. </view>
  43. <view class="flex-row justify-between items-center list-item">
  44. <text class="font_2 text_3">心率过缓提醒值</text>
  45. <view class="flex-row items-center group_3 space-x-6">
  46. <picker @change="pickerChange" :range="sleepWornList.rh_lowList" data-target="2">
  47. <view class="uni-input">
  48. <text class="font_3">{{ sleepWorn.rh_low }}</text>
  49. <text class="font_4">次/分钟</text>
  50. <text class="icon-right text-white"></text>
  51. </view>
  52. </picker>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <view class="flex-col group_5 space-y-14">
  59. <text class="self-start font_1">呼吸率异常提醒</text>
  60. <view class="flex-col section_6 space-y-10">
  61. <view class="flex-row justify-between self-start equal-division">
  62. <view class="flex-row items-end space-x-4 items-center">
  63. <switch :checked="switchFrom.sign_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzSms" />
  64. <text class="font_2">短信</text>
  65. </view>
  66. <view class="flex-row items-end space-x-4 items-center">
  67. <switch :checked="switchFrom.sign_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzVoice"/>
  68. <text class="font_2">电话</text>
  69. </view>
  70. <view class="flex-row items-end space-x-4 items-center">
  71. <switch :checked="switchFrom.sign_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchTzHorn"/>
  72. <text class="font_2">喇叭</text>
  73. </view>
  74. </view>
  75. <view class="flex-col">
  76. <view class="flex-row justify-between items-center list-item">
  77. <text class="font_2 text_3">呼吸率过速提醒值</text>
  78. <view class="flex-row items-center space-x-6">
  79. <picker @change="pickerChange" :range="sleepWornList.hx_highList" data-target="3">
  80. <view class="uni-input">
  81. <text class="font_3">{{ sleepWorn.hx_high }}</text>
  82. <text class="font_4">次/分钟</text>
  83. <text class="icon-right text-white"></text>
  84. </view>
  85. </picker>
  86. </view>
  87. </view>
  88. <view class="flex-row justify-between items-center list-item">
  89. <text class="font_2 text_3">呼吸率过缓提醒值</text>
  90. <view class="flex-row items-center space-x-6">
  91. <picker @change="pickerChange" :range="sleepWornList.hx_lowList" data-target="4">
  92. <view class="uni-input">
  93. <text class="font_3">{{ sleepWorn.hx_low }}</text>
  94. <text class="font_4">次/分钟</text>
  95. <text class="icon-right text-white"></text>
  96. </view>
  97. </picker>
  98. </view>
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="flex-col group_5">
  104. <view class="flex-row items-center group_6 space-x-30">
  105. <text class="font_1">离床预警提醒</text>
  106. <text class="font_5 text_4">注:离床预警生效需要用户在床超过1小时。</text>
  107. </view>
  108. <view class="flex-col section_7 space-y-24">
  109. <!-- <view class="flex-row justify-between self-start equal-division">-->
  110. <!-- <view class="flex-row items-end space-x-4 items-center">-->
  111. <!-- <switch :checked="switchFrom.falling_bed" color="#1E09DE" style="transform:scale(0.7)" @change="switchFallingBed" />-->
  112. <!-- <text class="font_2">坠床预警</text>-->
  113. <!-- </view>-->
  114. <!-- </view>-->
  115. <view class="flex-row justify-between self-start equal-division">
  116. <view class="flex-row items-end space-x-4 items-center">
  117. <switch :checked="switchFrom.out_of_bed_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutSms" />
  118. <text class="font_2">短信</text>
  119. </view>
  120. <view class="flex-row items-end space-x-4 items-center">
  121. <switch :checked="switchFrom.out_of_bed_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutVoice" />
  122. <text class="font_2">电话</text>
  123. </view>
  124. <view class="flex-row items-end space-x-4 items-center">
  125. <switch :checked="switchFrom.out_of_bed_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchOutHorn"/>
  126. <text class="font_2">喇叭</text>
  127. </view>
  128. </view>
  129. <view class="flex-col group_7">
  130. <view class="flex-row justify-between items-center group_8">
  131. <text class="font_2 text_3">离床预警区间</text>
  132. <view class="action">
  133. <picker mode="time" :value="sleepWorn.leave_start" start="00:00" end="23:59" @change="timeChange" data-target="leave_start">
  134. <view class="uni-input font_3">
  135. {{ sleepWorn.leave_start }}
  136. </view>
  137. </picker>
  138. </view>
  139. <text class="font_3">~</text>
  140. <view class="action">
  141. <picker mode="time" :value="sleepWorn.leave_end" start="00:00" end="23:59" @change="timeChange" data-target="leave_end">
  142. <view class="uni-input font_3">
  143. {{ sleepWorn.leave_end }}
  144. </view>
  145. </picker>
  146. </view>
  147. </view>
  148. <view class="flex-row justify-between items-center group_10">
  149. <text class="font_2 text_3">离床未归提醒</text>
  150. <view class="flex-row items-center group_11 space-x-8">
  151. <picker @change="pickerChange" :range="sleepWornList.leave_durationList" data-target="5">
  152. <view class="uni-input">
  153. <text class="font_3">{{sleepWorn.leave_duration }}</text>
  154. <text class="font_4">分钟</text>
  155. <text class="icon-right text-white"></text>
  156. </view>
  157. </picker>
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. </view>
  163. <view class="flex-col group_5 space-y-14">
  164. <text class="self-start font_1">紧急求助开关</text>
  165. <view class="flex-col justify-start items-start section_8">
  166. <view class="flex-row space-x-6">
  167. <view class="flex-row items-center equal-division-item space-x-4">
  168. <switch :checked="switchFrom.sos_sms_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosSms" />
  169. <text class="font_2">短信</text>
  170. </view>
  171. <view class="flex-row items-center equal-division-item space-x-4">
  172. <switch :checked="switchFrom.sos_voice_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosVoice" />
  173. <text class="font_2">电话</text>
  174. </view>
  175. <view class="flex-row items-end space-x-4 items-center">
  176. <switch :checked="switchFrom.sos_horn_switch" color="#1E09DE" style="transform:scale(0.7)" @change="switchSosHorn"/>
  177. <text class="font_2">喇叭</text>
  178. </view>
  179. </view>
  180. </view>
  181. </view>
  182. <view class="flex-col group_5 space-y-20">
  183. <view class="flex-col space-y-12">
  184. <text class="self-start font_1 text_5">语音短信提示手机号码设置</text>
  185. <view class="flex-col space-y-4">
  186. <text class="font_5 text_6">
  187. 注:设置提醒手机号需注册“守护之影”小程序,前往“我的”-“购买套餐”中领取短信语言套餐包,才能发送短信语音提醒。
  188. </text>
  189. <view class="flex-col section_9">
  190. <view class="flex-row justify-center items-center list-item space-x-6" @click="handleShareClick">
  191. <image class="image_9" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16878800827365047681.png"/>
  192. <text class="font_2">添加推送亲友</text>
  193. </view>
  194. </view>
  195. </view>
  196. </view>
  197. <view class="flex-col justify-start items-center self-center button">
  198. <text class="text_9" @click="saveSleepWarn">保存设置</text>
  199. </view>
  200. </view>
  201. </view>
  202. </view>
  203. <view class="cu-modal" :class="updateShow?'show':''">
  204. <view class="cu-dialog">
  205. <view class="cu-bar bg-white justify-end">
  206. <view style="color: black" class="content">编辑昵称</view>
  207. <view class="action" @tap="updateShow=false">
  208. <text class="cuIcon-close text-red"></text>
  209. </view>
  210. </view>
  211. <view class="">
  212. <form>
  213. <view class="cu-form-group solid-bottom">
  214. <view class="title">昵称</view>
  215. <input type="text" v-model="userInfo.nickname" class="text-left" placeholder="请输入昵称"/>
  216. </view>
  217. <view class="cu-form-group">
  218. <view class="text-df text-gray">设置昵称,以便播报,6字以内</view>
  219. </view>
  220. </form>
  221. </view>
  222. <view class="cu-bar bg-white justify-end">
  223. <view class="action">
  224. <button class="cu-btn bg-green margin-left" @tap="updateNickName">确定</button>
  225. </view>
  226. </view>
  227. </view>
  228. </view>
  229. </view>
  230. </template>
  231. <script>
  232. import { mapActions } from 'vuex'
  233. import Storage from '@/utils/storage'
  234. import * as API_SLEEP_REPORT from '@/api/sleep_report'
  235. import * as API_MEMBER_WARN_SWITCH from '@/api/member_warn_switch'
  236. export default {
  237. data() {
  238. return {
  239. title: 'picker',
  240. index: 0,
  241. sleepWorn : {
  242. rh_high: 110,
  243. rh_low: 60,
  244. hx_high: 30,
  245. hx_low: 10,
  246. leave_start: '22:00',
  247. leave_end: '06:00',
  248. leave_duration: 30,
  249. sn: ''
  250. },
  251. sleepWornList: {
  252. rh_highList: [],
  253. rh_lowList: [],
  254. hx_highList: [],
  255. hx_lowList: [],
  256. leave_durationList: []
  257. },
  258. switchFrom: {
  259. sign_sms_switch: false,
  260. sign_voice_switch: false,
  261. sign_horn_switch: false,
  262. out_of_bed_sms_switch: false,
  263. out_of_bed_voice_switch: false,
  264. out_of_bed_horn_switch: false,
  265. sos_sms_switch: false,
  266. sos_voice_switch: false,
  267. sos_horn_switch: false
  268. // falling_bed: false
  269. },
  270. userInfo: null,
  271. updateShow: false
  272. }
  273. },
  274. onLoad(options) {
  275. const { imei } = options
  276. this.sleepWorn.sn = imei
  277. console.log('imei===', imei)
  278. this.API_getWartResult()
  279. this.setWarn()
  280. this.userInfo = Storage.getItem('userInfo')
  281. if (this.userInfo) {
  282. this.API_getSwitch()
  283. this.switchFrom.member_union_id = this.userInfo.union_id
  284. if (this.userInfo.nickname.length > 6 || this.userInfo.mobile === this.userInfo.nickname || this.userInfo.nickname === '微信用户') {
  285. const _this = this
  286. uni.showModal({
  287. title: '提示',
  288. content: "您还未设置昵称,是否设置呢?",
  289. confirmText: "确定",
  290. showCancel: true,
  291. success: function(res) {
  292. if (res.confirm) {
  293. _this.updateShow = true
  294. }
  295. }
  296. })
  297. }
  298. }
  299. },
  300. methods: {
  301. // handleInput() {
  302. // this.$refs.inputDialog.open()
  303. // },
  304. // confirmTime(val) {
  305. // console.log(val)
  306. // },
  307. API_getWartResult() {
  308. const _this = this
  309. API_SLEEP_REPORT.getWarnResult(this.sleepWorn.sn).then(res => {
  310. if (res.data !== null) {
  311. res.data.leave_start = res.data.leave_start.substring(0, 5)
  312. res.data.leave_end = res.data.leave_end.substring(0, 5)
  313. _this.sleepWorn = res.data
  314. }
  315. })
  316. },
  317. API_getSwitch() {
  318. const _this = this
  319. API_MEMBER_WARN_SWITCH.getByMemberUnionId(this.userInfo.union_id).then(res => {
  320. if (res) {
  321. _this.switchFrom = res
  322. }
  323. })
  324. },
  325. setWarn() {
  326. this.sleepWornList.rh_highList = Array.from(Array(71).keys(), n => n + 1 + 89)
  327. this.sleepWornList.rh_lowList = Array.from(Array(31).keys(), n => n + 1 + 29)
  328. this.sleepWornList.hx_highList = Array.from(Array(21).keys(), n => n + 1 + 19)
  329. this.sleepWornList.hx_lowList = Array.from(Array(8).keys(), n => n + 1 + 4)
  330. this.sleepWornList.leave_durationList = Array.from(Array(51).keys(), n => n + 1 + 9)
  331. },
  332. pickerChange(e) {
  333. const index = e.detail.value
  334. switch (e.mp.target.dataset.target) {
  335. case '1':
  336. this.sleepWorn.rh_high = this.sleepWornList.rh_highList[index]
  337. break
  338. case '2':
  339. this.sleepWorn.rh_low = this.sleepWornList.rh_lowList[index]
  340. break
  341. case '3':
  342. this.sleepWorn.hx_high = this.sleepWornList.hx_highList[index]
  343. break
  344. case '4':
  345. this.sleepWorn.hx_low = this.sleepWornList.hx_lowList[index]
  346. break
  347. case '5':
  348. this.sleepWorn.leave_duration = this.sleepWornList.leave_durationList[index]
  349. break
  350. default:
  351. break
  352. }
  353. },
  354. timeChange(e) {
  355. switch (e.mp.target.dataset.target) {
  356. case 'leave_start':
  357. this.sleepWorn.leave_start = e.detail.value
  358. break
  359. case 'leave_end':
  360. this.sleepWorn.leave_end = e.detail.value
  361. break
  362. default:
  363. break
  364. }
  365. },
  366. saveSleepWarn() {
  367. const _this = this
  368. uni.showModal({
  369. title: '提示',
  370. content: "确定要提交设置吗?",
  371. confirmText: "确定",
  372. showCancel: true,
  373. success: function(res) {
  374. if (res.confirm) {
  375. API_SLEEP_REPORT.pushSleepWarn(_this.sleepWorn).then(res => {
  376. uni.showToast({
  377. title:"保存成功"
  378. })
  379. })
  380. if (_this.switchFrom.id) {
  381. // 修改
  382. API_MEMBER_WARN_SWITCH.edit(_this.switchFrom, _this.switchFrom.id)
  383. } else {
  384. // 新增
  385. API_MEMBER_WARN_SWITCH.add(_this.switchFrom)
  386. }
  387. }
  388. }
  389. })
  390. },
  391. switchTzSms(e) {
  392. this.switchFrom.sign_sms_switch = e.detail.value
  393. },
  394. switchTzVoice(e) {
  395. this.switchFrom.sign_voice_switch = e.detail.value
  396. },
  397. switchTzHorn(e) {
  398. this.switchFrom.sign_horn_switch = e.detail.value
  399. },
  400. switchFallingBed(e) {
  401. this.switchFrom.falling_bed = e.detail.value
  402. console.log(this.switchFrom.falling_bed)
  403. },
  404. switchOutSms(e) {
  405. this.switchFrom.out_of_bed_sms_switch = e.detail.value
  406. },
  407. switchOutVoice(e) {
  408. this.switchFrom.out_of_bed_voice_switch = e.detail.value
  409. },
  410. switchOutHorn(e) {
  411. this.switchFrom.out_of_bed_horn_switch = e.detail.value
  412. },
  413. switchSosSms(e) {
  414. this.switchFrom.sos_sms_switch = e.detail.value
  415. },
  416. switchSosVoice(e) {
  417. this.switchFrom.sos_voice_switch = e.detail.value
  418. },
  419. switchSosHorn(e) {
  420. this.switchFrom.sos_horn_switch = e.detail.value
  421. },
  422. updateNickName() {
  423. if (this.userInfo.nickname === '') {
  424. uni.showToast({
  425. title: '请输入昵称',
  426. icon: 'none'
  427. })
  428. return
  429. }
  430. if (this.nickname.length > 6) {
  431. uni.showToast({title: '昵称长度不能超过6个', icon: 'none', duration: 3000})
  432. return
  433. }
  434. this.updateShow = false
  435. const _this = this
  436. this.saveUserInfo({nickname: this.userInfo.nickname}).then(() => {
  437. uni.showToast({
  438. title: '修改成功',
  439. icon: 'none'
  440. })
  441. this.$store.dispatch('getUserDataAction').then((res)=>{
  442. _this.userInfo = res
  443. })
  444. })
  445. },
  446. handleShareClick() {
  447. uni.navigateTo({
  448. url: '/pages/user/shareUser/index'
  449. })
  450. },
  451. ...mapActions({
  452. saveUserInfo: 'saveUserInfoAction'
  453. })
  454. }
  455. }
  456. </script>
  457. <style lang="scss" scoped>
  458. .page {
  459. background-color: #000000;
  460. width: 100%;
  461. overflow-y: auto;
  462. overflow-x: hidden;
  463. height: 100%;
  464. background-image: url('http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png');
  465. background-repeat: no-repeat;
  466. background-size: cover ;
  467. background-attachment: fixed ;
  468. background-position: center center;
  469. .section {
  470. .section_2 {
  471. padding-bottom: 1.25rem;
  472. background-image: linear-gradient(180deg, rgba(103, 103, 226, 0.95) 0%, rgba(12, 117, 246, 0.61) 100%);
  473. backdrop-filter: blur(0.19rem);
  474. height: 100%;
  475. .font_1 {
  476. font-size: 1.13rem;
  477. font-family: PingFangSC;
  478. line-height: 1.03rem;
  479. color: #ffffff;
  480. }
  481. .text_2 {
  482. margin-left: 1.25rem;
  483. margin-top: 1.38rem;
  484. }
  485. .section_6 {
  486. padding: 0.94rem 0.63rem 0.13rem;
  487. background-color: #ffffff33;
  488. border-radius: 1rem;
  489. }
  490. .view {
  491. margin: 0.88rem 1.25rem 0;
  492. }
  493. .space-y-10 {
  494. & > view:not(:first-child),
  495. & > text:not(:first-child),
  496. & > image:not(:first-child) {
  497. margin-top: 0.63rem;
  498. }
  499. }
  500. .group_5 {
  501. padding: 0 1.25rem;
  502. .group_6 {
  503. padding-bottom: 0.88rem;
  504. .text_4 {
  505. line-height: 0.59rem;
  506. }
  507. }
  508. .space-x-30 {
  509. & > view:not(:first-child),
  510. & > text:not(:first-child),
  511. & > image:not(:first-child) {
  512. margin-left: 0.3rem;
  513. }
  514. }
  515. .section_7 {
  516. padding: 0.94rem 0.63rem 0;
  517. background-color: #ffffff33;
  518. border-radius: 1rem;
  519. .group_7 {
  520. border-bottom: solid 0.063rem #ffffff1a;
  521. .group_8 {
  522. padding-bottom: 0.88rem;
  523. border-bottom: solid 0.063rem #ffffff1a;
  524. .group_9 {
  525. margin-right: 0.19rem;
  526. }
  527. .space-x-20 {
  528. & > view:not(:first-child),
  529. & > text:not(:first-child),
  530. & > image:not(:first-child) {
  531. margin-left: 1.25rem;
  532. }
  533. }
  534. }
  535. .group_10 {
  536. padding: 0.88rem 0;
  537. .group_11 {
  538. margin-right: 0.19rem;
  539. }
  540. }
  541. }
  542. }
  543. .space-y-24 {
  544. & > view:not(:first-child),
  545. & > text:not(:first-child),
  546. & > image:not(:first-child) {
  547. margin-top: 1.5rem;
  548. }
  549. }
  550. .section_8 {
  551. padding: 0.63rem 0;
  552. background-color: #ffffff33;
  553. border-radius: 1rem;
  554. }
  555. .space-y-12 {
  556. & > view:not(:first-child),
  557. & > text:not(:first-child),
  558. & > image:not(:first-child) {
  559. margin-top: 0.75rem;
  560. }
  561. .text_5 {
  562. line-height: 1.06rem;
  563. }
  564. .space-y-4 {
  565. & > view:not(:first-child),
  566. & > text:not(:first-child),
  567. & > image:not(:first-child) {
  568. margin-top: 0.55rem;
  569. }
  570. .text_6 {
  571. line-height: 0.75rem;
  572. }
  573. .section_9 {
  574. padding: 0 0.63rem;
  575. background-color: #ffffff33;
  576. border-radius: 1rem;
  577. }
  578. }
  579. }
  580. .font_5 {
  581. font-size: 0.63rem;
  582. font-family: PingFangSC;
  583. color: red;
  584. }
  585. .space-x-8 {
  586. & > view:not(:first-child),
  587. & > text:not(:first-child),
  588. & > image:not(:first-child) {
  589. margin-left: 0.5rem;
  590. }
  591. .text_7 {
  592. color: #ffffff80;
  593. }
  594. .image_8 {
  595. width: 1.13rem;
  596. height: 1.13rem;
  597. }
  598. }
  599. .button {
  600. padding: 0.5rem 0;
  601. background-image: linear-gradient(90deg, #5611f780 0%, #1e1ef7f2 100%);
  602. border-radius: 1rem;
  603. width: 8.69rem;
  604. .text_9 {
  605. color: #ffffff;
  606. font-size: 1rem;
  607. font-family: PingFangSC;
  608. line-height: 0.94rem;
  609. }
  610. }
  611. }
  612. .space-y-14 {
  613. & > view:not(:first-child),
  614. & > text:not(:first-child),
  615. & > image:not(:first-child) {
  616. margin-top: 0.88rem;
  617. }
  618. }
  619. .equal-division {
  620. width: 12.5rem;
  621. }
  622. .font_2 {
  623. font-size: 0.88rem;
  624. font-family: PingFangSC;
  625. line-height: 0.81rem;
  626. color: #ffffff;
  627. }
  628. .text_3 {
  629. opacity: 0.8;
  630. }
  631. .font_3 {
  632. font-size: 1.13rem;
  633. font-family: PingFangSC;
  634. line-height: 0.81rem;
  635. color: #ffffff;
  636. }
  637. .image_7 {
  638. width: 0.38rem;
  639. height: 0.69rem;
  640. }
  641. .font_4 {
  642. font-size: 0.75rem;
  643. font-family: PingFangSC;
  644. line-height: 0.69rem;
  645. color: #ffffff;
  646. }
  647. .space-x-6 {
  648. & > view:not(:first-child),
  649. & > text:not(:first-child),
  650. & > image:not(:first-child) {
  651. margin-left: 0.38rem;
  652. }
  653. .equal-division-item {
  654. padding: 0.25rem 0.63rem;
  655. width: 6.84rem;
  656. }
  657. }
  658. .space-x-4 {
  659. & > view:not(:first-child),
  660. & > text:not(:first-child),
  661. & > image:not(:first-child) {
  662. margin-left: 0.25rem;
  663. }
  664. }
  665. .space-y-20 {
  666. & > view:not(:first-child),
  667. & > text:not(:first-child),
  668. & > image:not(:first-child) {
  669. margin-top: 1.25rem;
  670. }
  671. }
  672. .list-item {
  673. padding: 0.88rem 0;
  674. border-bottom: solid 0.063rem #ffffff1a;
  675. .group_3 {
  676. margin-right: 0.19rem;
  677. }
  678. .text_8 {
  679. line-height: 0.78rem;
  680. }
  681. .image_9 {
  682. width: 0.88rem;
  683. height: 0.88rem;
  684. }
  685. }
  686. }
  687. .space-y-32 {
  688. & > view:not(:first-child),
  689. & > text:not(:first-child),
  690. & > image:not(:first-child) {
  691. margin-top: 2rem;
  692. }
  693. }
  694. }
  695. }
  696. @mixin flex {
  697. /* #ifndef APP-NVUE */
  698. display: flex;
  699. /* #endif */
  700. flex-direction: row;
  701. }
  702. @mixin height {
  703. /* #ifndef APP-NVUE */
  704. height: 100%;
  705. /* #endif */
  706. /* #ifdef APP-NVUE */
  707. flex: 1;
  708. /* #endif */
  709. }
  710. .box {
  711. @include flex;
  712. }
  713. .button {
  714. @include flex;
  715. align-items: center;
  716. justify-content: center;
  717. flex: 1;
  718. height: 35px;
  719. margin: 0 5px;
  720. border-radius: 5px;
  721. }
  722. .text {
  723. font-size: 12px;
  724. color: #333;
  725. }
  726. </style>