scancodeout.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891
  1. <!-- 出库扫码 -->
  2. <template>
  3. <view class="content">
  4. <view class="text-area">
  5. <scan @getCode="getScanCode" />
  6. </view>
  7. <view class="stripe"></view>
  8. <view class="roll">
  9. <view>
  10. <view @click="show =! show">
  11. <u-icon name="edit-pen"></u-icon>手动录入
  12. </view>
  13. <view class="lnput" v-if="show==false">
  14. <input type="text" v-model="number_a" :placeholder="content" clearable="true" focus="true" />
  15. <u-button type="primary" size="medium" @click="manualentry" throttle-time="2000">确认录入</u-button>
  16. </view>
  17. <view class="" v-else>
  18. <view>{{tips}}:{{number}}</view>
  19. </view>
  20. </view>
  21. <view>
  22. <view></view>
  23. <view></view>
  24. <view style="width: 94%;height: 20px;background-color: #FFFFFF;margin: 0 auto;margin-top: -3rpx;border-radius: 0;">
  25. <image src="../../../static/sailun/line.png" style="width: 96%;height: 1rpx;;" mode=""></image>
  26. </view>
  27. </view>
  28. <view class="generate">
  29. <u-table font-size="24" border-color="#ffffff" bg-color="#fff">
  30. <u-tr class="u-tr">
  31. <u-th class="u-th" width="30%">胎号</u-th>
  32. <u-th class="u-th">规格</u-th>
  33. <u-th class="u-th" width="15%">操作</u-th>
  34. </u-tr>
  35. <u-tr class="u-tr" v-for="(item, index) in lisi" :key="index">
  36. <u-td class="u-td" width="30%">{{item.tireNumber}}</u-td>
  37. <u-td class="u-td">{{item.maktx}}</u-td>
  38. <u-td class="u-td" width="15%"><text @click="confirm(index)" style="color: #FA3534;">删除</text></u-td>
  39. </u-tr>
  40. </u-table>
  41. <u-divider color="rgb(144, 147, 153)" half-width="200" border-color="rgb(144, 147, 153)" margin-top="40">没有更多啦</u-divider>
  42. </view>
  43. </view>
  44. <view class="determine">
  45. <u-button type="primary" shape="circle" @click="scancodein">扫码确认</u-button>
  46. </view>
  47. <view>
  48. </view>
  49. <u-toast ref="repeat" position="bottom" />
  50. <u-popup mode="bottom" v-model="show_s" :mask-close-able="false" :safe-area-inset-bottom="true">
  51. <view class="confrim-btn">
  52. <u-button @click="show_s = false;" style="float: left;border: none;" :hair-line="false" :plain="false">取消</u-button>
  53. <u-button @click="container" style="float: right;border: none;" :hair-line="false" :plain="false">确定</u-button>
  54. </view>
  55. <view class="content_s">
  56. <scroll-view scroll-y="true" style="height: 200rpx;">
  57. {{regular}}
  58. </scroll-view>
  59. </view>
  60. </u-popup>
  61. <u-popup mode="bottom" v-model="show_d" :mask-close-able="false" :safe-area-inset-bottom="true">
  62. <view class="confrim-btn">
  63. <u-button @click="show_d = false;" style="float: left;border: none;" :hair-line="false" :plain="false">取消</u-button>
  64. <u-button @click="container_s" style="float: right;border: none;" :hair-line="false" :plain="false">确定</u-button>
  65. </view>
  66. <view class="content_s">
  67. <scroll-view scroll-y="true" style="height: 200rpx;">
  68. {{regular}}
  69. </scroll-view>
  70. </view>
  71. </u-popup>
  72. </view>
  73. </template>
  74. <script>
  75. import {
  76. request
  77. } from '../../../common/request/request'
  78. require("promise.prototype.finally").shim()
  79. var QQMapWX = require('../../../components/mi-map/qqmap-wx-jssdk.min.js')
  80. var qqmapsdk = new QQMapWX({
  81. key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE'
  82. })
  83. export default {
  84. data() {
  85. return {
  86. tips: '提示',
  87. number: '请扫码出库',
  88. nbTitle: '扫码标题',
  89. content: '请输入轮胎胎号',
  90. number_s: '',
  91. number_a: '',
  92. regular: '轮胎非正规是否出库',
  93. lisi: [],
  94. background: {
  95. backgroundColor: '#0094fe',
  96. },
  97. show: true,
  98. show_s: false,
  99. show_d: false,
  100. res: '',
  101. position: '',
  102. point: '',
  103. coord: '',
  104. address: '',
  105. addd: ''
  106. }
  107. },
  108. onBackPress(options) {
  109. if (options.from == 'backbutton') {
  110. this.$u.route({
  111. type: 'switchTab',
  112. url: 'pages/home/index'
  113. })
  114. }
  115. return true;
  116. },
  117. onLaunch() {
  118. uni.$on('update', data => {
  119. this.lisi = data.lisi
  120. })
  121. },
  122. created() {
  123. uni.getNetworkType({
  124. success: function(res) {
  125. let none = res.networkType
  126. if (none == 'none') {
  127. uni.showToast({
  128. icon: 'none',
  129. title: '无网络,请连接网络后再试~',
  130. position: "bottom"
  131. })
  132. }
  133. }
  134. });
  135. uni.$on('data', res => {
  136. this.lisi = res.lisi
  137. })
  138. //开始扫码
  139. const innerAudioContext = uni.createInnerAudioContext();
  140. innerAudioContext.autoplay = true;
  141. innerAudioContext.src = '../../../static/mp3/start.mp3';
  142. innerAudioContext.onPlay(() => {
  143. });
  144. innerAudioContext.onError((res) => {
  145. });
  146. this.coord = ''
  147. },
  148. onShow() {
  149. this.mounteds()
  150. },
  151. methods: {
  152. mounteds() {
  153. let that = this
  154. uni.getLocation({
  155. type: 'gcj02', // 返回国测局坐标
  156. geocode: true,
  157. success: function(res) {
  158. that.tishi(res)
  159. },
  160. fail: function(e) {
  161. uni.showToast({
  162. icon: 'none',
  163. title: '获取地址失败, 请检查是否开启定位权限~~'
  164. })
  165. }
  166. })
  167. },
  168. async tishi(res) {
  169. let this_ = this
  170. this_.baidu = res
  171. qqmapsdk.reverseGeocoder({
  172. location: {
  173. latitude: res.latitude,
  174. longitude: res.longitude
  175. },
  176. success(res) {
  177. var newCity = ''
  178. // 取到用户的定位地址,赋值传递出去
  179. let aress = res.result.address_component.nation + res.result.address_component.province + res.result.address_component
  180. .city + res.result.formatted_addresses.recommend
  181. request({
  182. url: '/baseReq/getBaiDuMapMsg',
  183. method: 'get',
  184. params: {
  185. longitude: this_.baidu.longitude,
  186. latitude: this_.baidu.latitude
  187. }
  188. }).then(res => {
  189. if (res.data.code != 0) {
  190. uni.showToast({
  191. icon: 'none',
  192. title: '获取定位失败,请稍后再试~'
  193. })
  194. } else {
  195. this_.baidu = res.data.data.result
  196. this_.addreev(this_.baidu, aress)
  197. }
  198. }).catch(err => {
  199. uni.showToast({
  200. icon: 'none',
  201. title: '网络繁忙请稍后再试~'
  202. })
  203. }).finally(() => {
  204. // Loading.close()
  205. })
  206. }
  207. })
  208. },
  209. async addreev(res, x) {
  210. this.address = x
  211. this.degree = res
  212. },
  213. //手动录入调用
  214. manualentry() {
  215. if (this.number_a.length != 0) {
  216. if (this.degree == undefined) {
  217. uni.showToast({
  218. icon: 'none',
  219. title: '正在转换坐标,请稍候~',
  220. position: "bottom"
  221. })
  222. return
  223. } else {
  224. request({
  225. url: '/storeScan/storeScanGetTyre',
  226. method: 'Post',
  227. data: {
  228. storeId: this.$store.state.storeInfo.storeId,
  229. userId: this.$store.state.storeInfo.userId,
  230. tyreNum: this.number_a,
  231. scanType: 2,
  232. scanWay: 0,
  233. longitude: this.degree.x,
  234. latitude: this.degree.y,
  235. scanAddress: this.address
  236. }
  237. }).then(res => {
  238. console.log(res)
  239. switch (res.data.code) {
  240. case 513:
  241. {
  242. let name = 'regular'
  243. this.tipss(res, name)
  244. break;
  245. }
  246. case 514:
  247. {
  248. let name = 'nonoperating'
  249. this.tipss(res, name)
  250. break
  251. }
  252. case 515:
  253. {
  254. let name = 'warehousing'
  255. this.tipss(res, name)
  256. break
  257. }
  258. case 516:
  259. {
  260. let name = 'prohibit'
  261. this.tipss(res, name)
  262. break
  263. }
  264. case 518:
  265. {
  266. let name = 'gobeyond'
  267. this.tipss(res, name)
  268. break
  269. }
  270. case 519:
  271. {
  272. let name = 'notallow'
  273. this.tipss(res, name)
  274. break
  275. }
  276. case 520:
  277. {
  278. let name = 'repeat-out'
  279. this.tipss(res, name)
  280. break
  281. }
  282. case 500:
  283. {
  284. let name = 'error'
  285. this.tipss(res, name)
  286. break
  287. }
  288. case 0:
  289. {
  290. this.res = res
  291. for (let i = 0; i < this.lisi.length; i++) {
  292. if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
  293. let err = {
  294. "data": {
  295. "msg": "请勿重复录入",
  296. }
  297. }
  298. let name = 'duplicateentry'
  299. this.tipss(err, name)
  300. return
  301. }
  302. }
  303. this.container()
  304. break
  305. }
  306. }
  307. // if (res.data.code == 513) {
  308. // let name = 'regular'
  309. // this.tipss(res, name)
  310. // return
  311. // }
  312. // if (res.data.code == 514) {
  313. // let name = 'nonoperating'
  314. // this.tipss(res, name)
  315. // return
  316. // }
  317. // if (res.data.code == 515) {
  318. // let name = 'warehousing'
  319. // this.tipss(res, name)
  320. // return
  321. // }
  322. // if (res.data.code == 516) {
  323. // let name = 'prohibit'
  324. // this.tipss(res, name)
  325. // return
  326. // }
  327. // if (res.data.code == 517) {
  328. // let name = 'atypism'
  329. // this.tipss(res, name)
  330. // return
  331. // }
  332. // if (res.data.code == 518) {
  333. // let name = 'gobeyond'
  334. // this.tipss(res, name)
  335. // return
  336. // }
  337. // if (res.data.code == 519) {
  338. // let name = 'notallow'
  339. // this.tipss(res, name)
  340. // return
  341. // }
  342. // if (res.data.code == 520) {
  343. // let name = 'repeat-out'
  344. // this.tipss(res, name)
  345. // return
  346. // }
  347. // if (res.data.code == 500) {
  348. // let name = 'error'
  349. // this.tipss(res, name)
  350. // return
  351. // }
  352. // if (res.data.code == 0) {
  353. // this.res = res
  354. // for (let i = 0; i < this.lisi.length; i++) {
  355. // if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
  356. // let err = {
  357. // "data": {
  358. // "msg": "请勿重复录入",
  359. // }
  360. // }
  361. // let name = 'duplicateentry'
  362. // this.tipss(err, name)
  363. // return
  364. // }
  365. // }
  366. // this.container()
  367. // }
  368. }).catch(err => {
  369. // this.$refs.repeat.show({
  370. // title: "网络繁忙,请稍后再试",
  371. // type: 'default',
  372. // position: 'bottom'
  373. // })
  374. })
  375. .finally(() => {
  376. // Loading.close()
  377. })
  378. }
  379. } else {
  380. this.$refs.repeat.show({
  381. title: '请输入胎号',
  382. type: 'default',
  383. position: 'bottom'
  384. })
  385. }
  386. },
  387. tipss(res, name) {
  388. this.$refs.repeat.show({
  389. title: res.data.msg,
  390. type: 'default',
  391. position: 'bottom'
  392. })
  393. //提示语音
  394. const innerAudioContext = uni.createInnerAudioContext();
  395. innerAudioContext.autoplay = true;
  396. innerAudioContext.src = '../../../static/mp3/' + name + '.mp3';
  397. innerAudioContext.onPlay(() => {
  398. });
  399. innerAudioContext.onError((res) => {
  400. });
  401. },
  402. container() {
  403. this.$refs.repeat.show({
  404. title: '录入成功',
  405. type: 'success',
  406. position: 'bottom'
  407. })
  408. //录入成功语音
  409. const innerAudioContext = uni.createInnerAudioContext();
  410. innerAudioContext.autoplay = true;
  411. innerAudioContext.src = '../../../static/mp3/entered.mp3';
  412. innerAudioContext.onPlay(() => {
  413. });
  414. innerAudioContext.onError((res) => {
  415. });
  416. this.show_s = false
  417. this.number_a = ''
  418. this.lisi.push({
  419. specs: this.res.data.data[0].specs,
  420. flagRegular: this.res.data.data[0].isRegular,
  421. diameter: this.res.data.data[0].diameter,
  422. maktx: this.res.data.data[0].maktx,
  423. pattern: this.res.data.data[0].pattern,
  424. soldToPartyKunnr: this.res.data.data[0].soldToPartyKunnr,
  425. matnr: this.res.data.data[0].matnr,
  426. tireNumber: this.res.data.data[0].tirenumber,
  427. brand: this.res.data.data[0].brand,
  428. shippedDate: this.res.data.data[0].shippedDate,
  429. plyRating: this.res.data.data[0].plyRating,
  430. scanWay: '0'
  431. })
  432. },
  433. //获取扫码控件
  434. getScanCode(val) {
  435. uni.getNetworkType({
  436. success: function(res) {
  437. let none = res.networkType
  438. if (none == 'none') {
  439. uni.showToast({
  440. icon: 'none',
  441. title: '无网络,请连接网络后再试',
  442. position: "bottom"
  443. })
  444. const innerAudioContext = uni.createInnerAudioContext();
  445. innerAudioContext.autoplay = true;
  446. innerAudioContext.src = '../../../static/mp3/failure.mp3';
  447. innerAudioContext.onPlay(() => {
  448. });
  449. innerAudioContext.onError((res) => {
  450. });
  451. }
  452. }
  453. });
  454. this.number = val
  455. this.number_s = val
  456. if (this.degree == undefined) {
  457. uni.showToast({
  458. icon: 'none',
  459. title: '获取地址失败, 请检查是否开启定位权限~~',
  460. position: "bottom"
  461. })
  462. return
  463. } else {
  464. request({
  465. url: '/storeScan/storeScanGetTyre',
  466. method: 'Post',
  467. data: {
  468. storeId: this.$store.state.storeInfo.storeId,
  469. userId: this.$store.state.storeInfo.userId,
  470. tyreNum: val,
  471. scanType: 2,
  472. scanWay: 1,
  473. longitude: this.degree.x,
  474. latitude: this.degree.y,
  475. scanAddress: this.address
  476. }
  477. }).then(res => {
  478. this.res_s = res
  479. this.tips = "胎号"
  480. switch (res.data.code) {
  481. case 513:
  482. {
  483. let name = 'regular'
  484. this.tipss(res, name)
  485. break;
  486. }
  487. case 514:
  488. {
  489. let name = 'nonoperating'
  490. this.tipss(res, name)
  491. break
  492. }
  493. case 515:
  494. {
  495. let name = 'warehousing'
  496. this.tipss(res, name)
  497. break
  498. }
  499. case 516:
  500. {
  501. let name = 'prohibit'
  502. this.tipss(res, name)
  503. break
  504. }
  505. case 518:
  506. {
  507. let name = 'gobeyond'
  508. this.tipss(res, name)
  509. break
  510. }
  511. case 519:
  512. {
  513. let name = 'notallow'
  514. this.tipss(res, name)
  515. break
  516. }
  517. case 520:
  518. {
  519. let name = 'repeat-out'
  520. this.tipss(res, name)
  521. break
  522. }
  523. case 500:
  524. {
  525. let name = 'error'
  526. this.tipss(res, name)
  527. break
  528. }
  529. case 0:
  530. {
  531. this.res = res
  532. for (let i = 0; i < this.lisi.length; i++) {
  533. if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
  534. let err = {
  535. "data": {
  536. "msg": "请勿重复录入",
  537. }
  538. }
  539. let name = 'duplicateentry'
  540. this.tipss(err, name)
  541. return
  542. }
  543. }
  544. this.container()
  545. break
  546. }
  547. }
  548. // if (res.data.code == 513) {
  549. // let name = 'regular'
  550. // this.tipss(res, name)
  551. // return
  552. // }
  553. // if (res.data.code == 514) {
  554. // let name = 'nonoperating'
  555. // this.tipss(res, name)
  556. // return
  557. // }
  558. // if (res.data.code == 515) {
  559. // let name = 'warehousing'
  560. // this.tipss(res, name)
  561. // return
  562. // }
  563. // if (res.data.code == 516) {
  564. // let name = 'prohibit'
  565. // this.tipss(res, name)
  566. // return
  567. // }
  568. // if (res.data.code == 517) {
  569. // let name = 'atypism'
  570. // this.tipss(res, name)
  571. // return
  572. // }
  573. // if (res.data.code == 518) {
  574. // let name = 'gobeyond'
  575. // this.tipss(res, name)
  576. // return
  577. // }
  578. // if (res.data.code == 519) {
  579. // let name = 'notallow'
  580. // this.tipss(res, name)
  581. // return
  582. // }
  583. // if (res.data.code == 520) {
  584. // let name = 'repeat-out'
  585. // this.tipss(res, name)
  586. // return
  587. // }
  588. // if (res.data.code == 500) {
  589. // let name = 'error'
  590. // this.tipss(res, name)
  591. // return
  592. // }
  593. // if (res.data.code == 0) {
  594. // this.res = res
  595. // for (let i = 0; i < this.lisi.length; i++) {
  596. // if (this.lisi[i].tireNumber == res.data.data[0].tirenumber) {
  597. // let err = {
  598. // "data": {
  599. // "msg": "请勿重复扫码",
  600. // }
  601. // }
  602. // let name = 'repeatcode'
  603. // this.tipss(err, name)
  604. // return
  605. // }
  606. // }
  607. // this.container_s()
  608. // }
  609. // //
  610. }).catch(err => {
  611. if (err.code == 400) { //谁给我删了......
  612. this.$refs.repeat.show({
  613. title: "无网络",
  614. type: 'default',
  615. position: 'bottom'
  616. })
  617. } else {
  618. this.$refs.repeat.show({
  619. title: "请重新扫码",
  620. type: 'default',
  621. position: 'bottom'
  622. })
  623. this.repeated()
  624. }
  625. })
  626. .finally(() => {
  627. // Loading.close()
  628. })
  629. }
  630. },
  631. container_s() {
  632. this.show_d = false
  633. this.number_s = ''
  634. this.lisi.push({
  635. specs: this.res_s.data.data[0].specs,
  636. flagRegular: this.res_s.data.data[0].isRegular,
  637. diameter: this.res_s.data.data[0].diameter,
  638. maktx: this.res_s.data.data[0].maktx,
  639. pattern: this.res_s.data.data[0].pattern,
  640. soldToPartyKunnr: this.res_s.data.data[0].soldToPartyKunnr,
  641. matnr: this.res_s.data.data[0].matnr,
  642. tireNumber: this.res_s.data.data[0].tirenumber,
  643. brand: this.res_s.data.data[0].brand,
  644. shippedDate: this.res_s.data.data[0].shippedDate,
  645. plyRating: this.res_s.data.data[0].plyRating,
  646. scanWay: '1'
  647. })
  648. const innerAudioContext = uni.createInnerAudioContext();
  649. innerAudioContext.autoplay = true;
  650. innerAudioContext.src = '../../../static/mp3/scansuccess.mp3';
  651. innerAudioContext.onPlay(() => {
  652. });
  653. innerAudioContext.onError((res) => {
  654. });
  655. this.$refs.repeat.show({
  656. title: '扫码成功',
  657. type: 'success',
  658. position: 'bottom'
  659. })
  660. },
  661. confirm(index) {
  662. this.lisi.splice(index, 1)
  663. },
  664. scancodein() {
  665. if (this.lisi == '') {
  666. this.$refs.repeat.show({
  667. title: '请扫码或录入后再点击!',
  668. type: 'default',
  669. position: 'bottom'
  670. })
  671. } else {
  672. this.$u.route({
  673. type: 'redirectTo',
  674. url: 'pages/home/Scan-code-out/index'
  675. })
  676. uni.$emit('update', {
  677. materialList: this.lisi,
  678. address: this.address,
  679. degree: this.degree
  680. })
  681. }
  682. },
  683. repeated() {
  684. const innerAudioContext = uni.createInnerAudioContext();
  685. innerAudioContext.autoplay = true;
  686. innerAudioContext.src = '../../../static/mp3/rescan.mp3';
  687. innerAudioContext.onPlay(() => {
  688. });
  689. innerAudioContext.onError((res) => {
  690. });
  691. }
  692. }
  693. }
  694. </script>
  695. <style lang="scss" scoped>
  696. .lnput>input {
  697. background-color: none;
  698. width: 60%;
  699. font-size: 42rpx;
  700. float: left;
  701. margin-top: 10rpx;
  702. margin-left: 20rpx;
  703. }
  704. .generate {
  705. width: 98%;
  706. height: 300rpx;
  707. overflow: auto;
  708. margin: 0 auto;
  709. margin-top: 120rpx;
  710. }
  711. .determine {
  712. width: 690rpx;
  713. margin-top: 30rpx;
  714. }
  715. .content {
  716. display: flex;
  717. flex-direction: column;
  718. align-items: center;
  719. justify-content: center;
  720. // background-color: #F29100;
  721. padding-top: 400px;
  722. }
  723. .content_s {
  724. padding: 24rpx;
  725. text-align: center;
  726. }
  727. .logo {
  728. height: 200rpx;
  729. width: 200rpx;
  730. margin-top: 200rpx;
  731. margin-left: auto;
  732. margin-right: auto;
  733. margin-bottom: 50rpx;
  734. }
  735. .stripe {
  736. width: 740rpx;
  737. height: 30rpx;
  738. background-color: #00A0EA;
  739. border-radius: 12rpx;
  740. margin: 0 auto;
  741. margin-top: -100rpx;
  742. }
  743. .text-area {
  744. width: 100%;
  745. display: flex;
  746. background-color: #000000;
  747. position: static;
  748. justify-content: center;
  749. padding-top: 180rpx;
  750. }
  751. .title {
  752. font-size: 36rpx;
  753. color: #8f8f94;
  754. }
  755. .roll {
  756. width: 710rpx;
  757. height: auto;
  758. background: #FFFFFF;
  759. margin: 0 auto;
  760. margin-top: -15rpx;
  761. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(101, 176, 249, 0.3);
  762. border-bottom-left-radius: 10rpx;
  763. border-bottom-right-radius: 10rpx;
  764. padding-top: 50rpx;
  765. padding-bottom: 50rpx;
  766. }
  767. .roll>view:nth-child(1)>view:nth-child(2) {
  768. font-size: 42rpx;
  769. font-weight: bold;
  770. color: #0192FD;
  771. text-align: center;
  772. margin-bottom: 50rpx;
  773. }
  774. .roll>view:nth-child(1)>view:nth-child(1) {
  775. width: 200rpx;
  776. color: #0094FE;
  777. position: relative;
  778. top: -40rpx;
  779. left: 500rpx;
  780. font-size: 32rpx;
  781. text-align: center;
  782. }
  783. .roll>view:nth-child(2)>view {
  784. width: 40rpx;
  785. height: 40rpx;
  786. background-color: #F4F4F4;
  787. border-radius: 100%;
  788. float: right;
  789. margin-right: -20rpx;
  790. }
  791. .roll>view:nth-child(2)>view:nth-child(1) {
  792. float: left;
  793. margin-left: -20rpx;
  794. }
  795. .status_bar {
  796. height: var(--status-bar-height);
  797. width: 100%;
  798. background-color: #0095FF;
  799. }
  800. </style>