games.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805
  1. <template>
  2. <view class="content">
  3. <header-title :title="'小游戏'+$test.$test"></header-title>
  4. <view class="main">
  5. <!-- <form @submit="Submit" data-type='2' > -->
  6. <view class="box-pack-between ft32 item flex-y-center">
  7. <text class="item_name">小游戏类型<text style="color:red">*</text></text>
  8. <picker class="ft30" :range="game_list" range-key="name" @change="bindGame">
  9. <view class="flex-y-center">
  10. <view v-if="game_index<=-1">{{game_name}}</view>
  11. <view v-else>{{game_list[game_index].name}}</view>
  12. <text class="iconfont icon-prev"></text>
  13. </view>
  14. </picker>
  15. </view>
  16. <view>
  17. <view class="box-pack-between ft32 item">
  18. <text>奖品设置</text>
  19. <view class="add-home flex-center ft24" @click="open">
  20. 添加
  21. </view>
  22. </view>
  23. <view class="item-bg" v-if="prize.length>0">
  24. <view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of prize" :key='index'>
  25. <view class="flex-y-center flex-grow-1 pdr-20">
  26. <text style="margin-right: 10rpx;">{{item.name}}/<text
  27. class="col-num">{{item.num}}张</text>/<text class="col-num">
  28. {{item.probability}}%</text></text>
  29. </view>
  30. <image class="item-del" @click="delprize" :data-index='index' src="../../static/images/del.png"
  31. mode=""></image>
  32. </view>
  33. </view>
  34. </view>
  35. <view>
  36. <view class="box-pack-between ft32 item">
  37. <text>抽奖次数</text>
  38. <view class="flex-center ft24">
  39. <input type="number" @input="bindgamenum" :value="info.game_num" placeholder="请填写抽奖次数(正整数)"
  40. name="game_num" />
  41. </view>
  42. </view>
  43. </view>
  44. <view>
  45. <view class="box-pack-between ft32 item">
  46. <text>{{$test.$test}}场景</text>
  47. <view class="add-home flex-center ft24">
  48. <picker @change="bindPickerChange" :range-key="'name'" :range="allwayList">
  49. 添加
  50. </picker>
  51. </view>
  52. </view>
  53. <view class="item-bg" v-if="arr.length>0">
  54. <view class="box-pack-between mar64 flex-y-center" v-for="(item,index) of arr" :key='index'>
  55. <view class="flex-y-center flex-grow-1 pdr-20">
  56. <text style="margin-right: 10rpx;">{{item.name}}</text>
  57. <input class="flex-grow-1" type="text" @input="getScene" :data-index="index"
  58. placeholder="请填写链接或内容" :value="item.way_power" maxlength="5000" />
  59. </view>
  60. <image class="item-del" @click="delScene" :data-index='index' src="../../static/images/del.png"
  61. mode=""></image>
  62. </view>
  63. </view>
  64. </view>
  65. <view>
  66. <view class="box-pack-between ft32 item">
  67. <text>配置微信文章分享</text>
  68. <view class="flex-center ft24">
  69. <switch name="wx_state" :checked="wx_state==1?true:false" @change="switch2"
  70. style="transform:scale(0.7)" />
  71. </view>
  72. </view>
  73. <view class="item-bg" v-if="wx_state==1">
  74. <view class="box-pack-between mgr57">
  75. <view class="flex-row">
  76. <text class="item-bg-32">分享标题</text>
  77. <input @input="bindwxtitle" type="text" name="wx_title" placeholder="请填写分享标题"
  78. :value="info.wx_title" />
  79. </view>
  80. </view>
  81. <view class=" flex-row mgr57">
  82. <text class="item-bg-32">分享描述</text>
  83. <input @input="bindwxdesc" type="text" name="wx_desc" placeholder="请填写分享描述"
  84. :value="info.wx_desc" />
  85. </view>
  86. <view class="box-pack-between flex-y-center">
  87. <text class="item-bg-32">分享图标</text>
  88. <image v-if="wx_img" @click="ChooseImage" :data-type="2" class="upimg" :src="URL+wx_img"
  89. mode="">
  90. </image>
  91. <image v-else @click="ChooseImage" :data-type="2" class="upimg"
  92. src="../../static/images/upimg.png" mode="">
  93. </image>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="box-pack-between ft32 descp ">
  98. <textarea :value='rule' @input="bindrule" placeholder-class="desc-placeholder" maxlength="200"
  99. placeholder="抽奖规则说明" name='description' />
  100. </view>
  101. <view class="hg200rpx">
  102. </view>
  103. <view class="bottom-bar">
  104. <block v-if="card_num">
  105. <button @click="getCode" type="2" class="btn2 flex-center">
  106. 确定修改
  107. </button>
  108. </block>
  109. <block v-else>
  110. <button @click="bangCode" data-type="1" class="btn1 flex-center">
  111. 绑定二维码
  112. </button>
  113. <button @click="getCode" data-type='2' form-type="submit" class="btn2 flex-center">
  114. 生成二维码
  115. </button>
  116. </block>
  117. </view>
  118. <!-- </form> -->
  119. </view>
  120. <zx-uni-popup ref="popup" type="center">
  121. <view class="games-model">
  122. <form @submit="sure">
  123. <view class="title">
  124. 设置奖品
  125. </view>
  126. <view class="flex-y-center item" @click="bindCoupon">
  127. <view style="min-width: 100rpx;">奖品<text class="red">*</text></view>
  128. <view class="flex-y-center box-pack-between flex-grow-1 ft28">
  129. <text></text>
  130. <view class="flex-y-center">
  131. <text>{{coupon_title}}</text>
  132. <text class="iconfont icon-prev"></text>
  133. </view>
  134. </view>
  135. </view>
  136. <view class="flex-y-center item">
  137. <view style="min-width: 100rpx;">数量<text class="red">*</text></view>
  138. <view class="border-b flex-grow-1">
  139. <input name="num" :value="num" type="number" value="" placeholder="输入抽奖次数(正整数)"/>
  140. </view>
  141. </view>
  142. <view class="flex-y-center item">
  143. <text style="min-width: 100rpx;"> 概率<text class="red">*</text></text>
  144. <view class="border-b flex-grow-1">
  145. <input name="probability" :value="probability" type="digit" value="" placeholder="输入抽奖概率"/>
  146. </view>
  147. <text>%</text>
  148. </view>
  149. <text class="ft20 red">*中奖概率封顶为100%,单个奖品占比概率设置,例:20%+30%+50%,</text>
  150. <button class="btn flex-center" form-type="submit">确定</button>
  151. </form>
  152. </view>
  153. </zx-uni-popup>
  154. </view>
  155. </template>
  156. <script>
  157. import headerTitle from '@/components/header/header-title.vue';
  158. import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue'
  159. export default {
  160. components: {
  161. headerTitle,
  162. zxUniPopup,
  163. },
  164. data() {
  165. return {
  166. $test: this.$test.$test,
  167. game_list: [
  168. // "抽奖", "砸金蛋",
  169. ],
  170. game_index: -1,
  171. game_name: "请选择小游戏类型",
  172. arr: [],
  173. allwayList: [],
  174. coupon_title: "",
  175. probability: "",
  176. num: "",
  177. prize: [],
  178. info: {},
  179. wx_state: 1,
  180. wx_img: "",
  181. URL: getApp().globalData.URL,
  182. card_num: "",
  183. result: "",
  184. id: "",
  185. rule: "",
  186. game_id: "",
  187. }
  188. },
  189. onLoad(e) {
  190. this.card_num = e.card_num;
  191. if (!this.card_num) {
  192. // this.allmuban();
  193. }
  194. this.gameList();
  195. },
  196. onShow() {
  197. uni.$on("handleFun", res => {
  198. console.log(res, "res")
  199. this.coupon_title = res.title;
  200. this.coupon_id = res.coupon_id;
  201. this.num = res.num;
  202. // 清除监听
  203. uni.$off('handleFun');
  204. })
  205. },
  206. methods: {
  207. bindgamenum(e) {
  208. this.game_num = e.detail.value;
  209. },
  210. bindwxtitle(e) {
  211. this.wx_title = e.detail.value;
  212. },
  213. bindwxdesc(e) {
  214. this.wx_desc = e.detail.value;
  215. },
  216. bindrule(e) {
  217. this.rule = e.detail.value;
  218. },
  219. switch2(e) {
  220. this.wx_state = e.target.value ? 1 : 0;
  221. },
  222. // 编辑修改返回的内容
  223. gameList() {
  224. this.request({
  225. url: "Youxifuneng/gameList",
  226. data: {},
  227. }).then(res => {
  228. console.log(res, "res")
  229. if (res.code === '200') {
  230. this.game_list = res.data;
  231. this.allways();
  232. }
  233. }).catch((res) => {});
  234. },
  235. open() {
  236. if (this.prize.length > 8) {
  237. uni.showToast({
  238. title: "奖品已超限制长度",
  239. icon: 'none'
  240. })
  241. return
  242. }
  243. this.$refs.popup.open();
  244. },
  245. sure(e) {
  246. let num = e.detail.value.num;
  247. if (!this.coupon_title || !num || !e.detail.value.probability) {
  248. uni.showToast({
  249. title: "必选项不能为空",
  250. icon: 'none'
  251. })
  252. return
  253. }
  254. if (e.detail.value.probability > 100) {
  255. uni.showToast({
  256. title: "概率不能大于100",
  257. icon: 'none'
  258. })
  259. return
  260. }
  261. if (e.detail.value.num > Number(this.num)) {
  262. uni.showToast({
  263. title: "数量不能大于优惠劵数量",
  264. icon: 'none'
  265. })
  266. return
  267. }
  268. let sum = this.prize.reduce((acc, curVal) => acc + Number(curVal.probability), 0);
  269. if ((sum + Number(e.detail.value.probability)) > 100) {
  270. uni.showToast({
  271. title: "奖品合计概率不能超过100%",
  272. icon: 'none'
  273. })
  274. return
  275. }
  276. if (this.prize.length > 0) {
  277. let hasGoodStudentType = this.prize.some((v, i) => v.coupon_id == this.coupon_id)
  278. console.log(hasGoodStudentType); // true
  279. if (hasGoodStudentType) {
  280. uni.showToast({
  281. title: "已有此优惠劵",
  282. icon: 'none'
  283. })
  284. return
  285. }
  286. }
  287. this.prize.push({
  288. coupon_id: this.coupon_id,
  289. name: this.coupon_title,
  290. num: e.detail.value.num,
  291. probability: e.detail.value.probability,
  292. })
  293. this.probability = "";
  294. this.num = "";
  295. this.coupon_title = ""
  296. this.$refs.popup.close();
  297. },
  298. ChooseImage(e) {
  299. let type = e.currentTarget.dataset.type;
  300. uni.chooseImage({
  301. count: 1, //默认9
  302. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  303. sourceType: ['album'], //从相册选择
  304. success: (res) => {
  305. console.log(res)
  306. var tempFilesSize = res.tempFiles[0].size; //获取图片的大小,单位B
  307. if (type == 2 && tempFilesSize > 1000000) { //图片小于或者等于2M时 可以执行获取图片
  308. uni.showToast({
  309. title: '上传图片不能大于1M!', //标题
  310. icon: 'none' //图标 none不使用图标,详情看官方文档
  311. })
  312. return
  313. }
  314. var path;
  315. // #ifdef MP-WEIXIN
  316. path = res.tempFiles[0].path;
  317. // #endif
  318. // #ifdef H5
  319. path = res.tempFiles[0].name;
  320. // #endif
  321. var formatImage = path.split(".")[(path.split(".")).length - 1];
  322. if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
  323. uni.showToast({
  324. title: '只能上传png、jpg、jpeg格式',
  325. icon: 'none',
  326. duration: 2000,
  327. mask: true,
  328. })
  329. return
  330. }
  331. res.tempFilePaths.forEach((v, i) => {
  332. this.Upload({
  333. url: "Spread/upload_img",
  334. data: {
  335. url: v,
  336. type: 0,
  337. token: uni.getStorageSync("token"),
  338. }
  339. }).then(res => {
  340. console.log(res, "res")
  341. type == 1 ? (
  342. this.mid_img = res.file,
  343. this.url = res.url
  344. ) : (
  345. this.wx_img = res.file
  346. )
  347. }).catch(err => {
  348. uni.showToast({
  349. title: err.message,
  350. icon: 'none'
  351. })
  352. });
  353. })
  354. },
  355. });
  356. },
  357. delprize(e) {
  358. var index = e.currentTarget.dataset.index;
  359. this.prize.splice(index, 1)
  360. },
  361. bindCoupon() {
  362. uni.navigateTo({
  363. url: "./CouponList"
  364. })
  365. },
  366. bindGame(e) {
  367. console.log(e.detail.value, "e.detail.value")
  368. this.game_index = e.detail.value;
  369. this.game_id = this.game_list[e.detail.value].id;
  370. },
  371. getScene(e) {
  372. var index = e.currentTarget.dataset.index;
  373. this.arr[index].way_power = e.detail.value
  374. },
  375. delScene(e) {
  376. var index = e.currentTarget.dataset.index;
  377. this.arr.splice(index, 1);
  378. },
  379. bindPickerChange(e) {
  380. if (this.arr.length > 0) {
  381. for (let i of this.arr) {
  382. if (i.id == this.allwayList[e.target.value].id) {
  383. uni.showToast({
  384. title: "场景重复",
  385. icon: 'none'
  386. })
  387. return
  388. }
  389. }
  390. }
  391. this.arr.push({
  392. id: this.allwayList[e.target.value].id,
  393. name: this.allwayList[e.target.value].name,
  394. super_id: this.allwayList[e.target.value].super_id,
  395. });
  396. },
  397. // 编辑修改返回的内容
  398. allways() {
  399. this.request({
  400. url: "funeng/allways",
  401. data: {},
  402. }).then(res => {
  403. console.log(res, "res")
  404. if (res.code === '200') {
  405. this.allwayList = res.data;
  406. this.arr.push({
  407. id: res.data[0].id,
  408. name: res.data[0].name,
  409. super_id: res.data[0].super_id,
  410. });
  411. if (this.card_num) {
  412. this.edit_detail();
  413. }
  414. }
  415. }).catch((res) => {});
  416. },
  417. edit_detail(e) {
  418. this.request({
  419. url: "funeng/edit_detail",
  420. data: {
  421. card_num: this.card_num,
  422. },
  423. }).then(res => {
  424. console.log(res, "res")
  425. if (res.code === '200') {
  426. this.info = res.data;
  427. this.arr = res.data.funeng;
  428. this.wx_state = res.data.wx_state;
  429. this.wx_img = res.data.wx_img;
  430. this.prize = res.data.prize;
  431. this.game_index = this.game_list.findIndex(item => item.id === res.data.game);
  432. this.id = res.data.id;
  433. this.game_id = res.data.game;
  434. this.rule = res.data.rule;
  435. }
  436. }).catch((res) => {});
  437. },
  438. bangCode(e) {
  439. console.log(e, "bangCode")
  440. // #ifdef MP-WEIXIN
  441. uni.scanCode({
  442. success: (res) => {
  443. console.log('条码类型:' + res.scanType);
  444. console.log('条码内容:' + res.result);
  445. var params = (() => {
  446. var search = res.result; //获取location的search属性,保存在search中
  447. var params = {}; //创建空对象params
  448. if (search != "") { //如果search不是空字符串
  449. search.slice(1).split("?")
  450. .forEach( //?username=zhangdong&pwd=123456;//search去开头?,按&切割为数组,forEach
  451. function(val) {
  452. var arr = val.split("="); //将当前元素值按=切割,保存在arr中
  453. params[arr[0]] = arr[
  454. 1]; //向params中添加一个元素,属性名为arr[0],值为arr[1]
  455. }
  456. );
  457. }
  458. return params; //返回params
  459. })();
  460. this.result = params.card_num;
  461. this.Submit(1)
  462. }
  463. });
  464. // #endif
  465. // #ifdef H5
  466. getWXSign().then(res => {
  467. console.log('wx_getLocation');
  468. this.$wx.scanQRCode({
  469. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  470. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  471. success: (res) => {
  472. console.log(res, "qrCode")
  473. // this.result = res.resultStr;
  474. var params = (() => {
  475. var search = res
  476. .resultStr; //获取location的search属性,保存在search中
  477. var params = {}; //创建空对象params
  478. if (search != "") { //如果search不是空字符串
  479. search.slice(1).split("?")
  480. .forEach( //?username=zhangdong&pwd=123456;//search去开头?,按&切割为数组,forEach
  481. function(val) {
  482. var arr = val.split("="); //将当前元素值按=切割,保存在arr中
  483. params[arr[0]] = arr[
  484. 1]; //向params中添加一个元素,属性名为arr[0],值为arr[1]
  485. }
  486. );
  487. }
  488. return params; //返回params
  489. })();
  490. this.result = params.card_num;
  491. this.Submit(1)
  492. }
  493. })
  494. })
  495. // #endif
  496. },
  497. getCode() {
  498. this.Submit(2);
  499. },
  500. Submit(save_type) {
  501. let arr = this.arr,
  502. url,
  503. way_id = [],
  504. way_power = [];
  505. for (let i of arr) {
  506. way_id.push(i.id);
  507. way_power.push(i.way_power)
  508. }
  509. if (way_id.length <= 0) {
  510. uni.showToast({
  511. title: "场景为空",
  512. icon: 'none'
  513. })
  514. return
  515. }
  516. var prized = [];
  517. for (let i of this.prize) {
  518. prized.push({
  519. coupon_id: i.coupon_id,
  520. name: i.name,
  521. num: i.num,
  522. probability: i.probability,
  523. })
  524. }
  525. if (this.game_num <= 0) {
  526. uni.showToast({
  527. title: "次数不能为空",
  528. icon: 'none'
  529. })
  530. return
  531. }
  532. if (!this.game_id) {
  533. uni.showToast({
  534. title: "请选择游戏类型",
  535. icon: 'none'
  536. })
  537. return
  538. }
  539. if (prized.length <= 0) {
  540. uni.showToast({
  541. title: "请设置游戏奖品",
  542. icon: 'none'
  543. })
  544. return
  545. }
  546. let data = {
  547. token: uni.getStorageSync("token"),
  548. way_id: way_id.join(","),
  549. prize: JSON.stringify(prized),
  550. way_power: way_power.join(","),
  551. game: this.game_id,
  552. wx_state: this.wx_state == 1 ? 1 : 2,
  553. wx_title: this.wx_state == 1 ? this.wx_title : "",
  554. wx_desc: this.wx_state == 1 ? this.wx_desc : "",
  555. wx_img: this.wx_state == 1 ? this.wx_img : "",
  556. type: 7,
  557. moshi: 1,
  558. game_num: this.game_num,
  559. save_type,
  560. qrcode: this.result,
  561. rule: this.rule,
  562. }
  563. this.card_num ? (data.id = this.id, url = "Youxifuneng/youxiEdit") : url = "Youxifuneng/youxi";
  564. this.request({
  565. url,
  566. data,
  567. }).then(res => {
  568. console.log(res, "res")
  569. if (res.code === '200') {
  570. this.card_num ? (
  571. uni.showToast({
  572. title: "设置成功",
  573. icon: 'none'
  574. }),
  575. setTimeout(() => {
  576. uni.navigateBack({
  577. delta: 1
  578. })
  579. }, 2e3)
  580. ) : (
  581. uni.showToast({
  582. title: "生成成功",
  583. icon: 'none'
  584. }),
  585. uni.redirectTo({
  586. url: "code?type=7" + '&card_num=' + res.data.card_num
  587. })
  588. )
  589. }
  590. }).catch((res) => {
  591. uni.showToast({
  592. title: res.message,
  593. icon: 'none'
  594. })
  595. });
  596. }
  597. },
  598. }
  599. </script>
  600. <style lang="scss">
  601. .col-num {
  602. color: #007AFF;
  603. }
  604. .item_name {
  605. -webkit-box-flex: 0;
  606. -webkit-flex: none;
  607. flex: none;
  608. width: 176rpx;
  609. }
  610. .content {
  611. word-wrap: break-word;
  612. word-break: break-all;
  613. }
  614. .pdr-20 {
  615. padding-right: 20rpx;
  616. }
  617. .item {
  618. padding: 32rpx 40rpx;
  619. }
  620. .item input {
  621. text-align: right;
  622. }
  623. .upimg {
  624. width: 126rpx;
  625. height: 126rpx;
  626. }
  627. .add-home {
  628. color: #FFFFFF;
  629. width: 126rpx;
  630. height: 54rpx;
  631. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  632. border-radius: 8rpx;
  633. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  634. }
  635. .item-bg {
  636. width: 670rpx;
  637. /* height: 298rpx; */
  638. background: #f6f8fe;
  639. border-radius: 12rpx;
  640. margin: 0 auto;
  641. font-size: 28rpx;
  642. font-family: PingFang SC, PingFang SC-Regular;
  643. font-weight: 400;
  644. color: #333333;
  645. padding: 36rpx 32rpx;
  646. }
  647. .item-del {
  648. width: 40rpx;
  649. height: 40rpx;
  650. min-width: 40rpx;
  651. }
  652. .item-bg-32 {
  653. margin-right: 32rpx;
  654. }
  655. .mgr57 {
  656. margin-bottom: 57rpx;
  657. }
  658. .hg200rpx {
  659. height: 100rpx;
  660. }
  661. .mar64 {
  662. margin-bottom: 64rpx;
  663. }
  664. .item-bg .mar64:last-child {
  665. margin-bottom: 0rpx;
  666. }
  667. .look-icon {
  668. width: 200rpx;
  669. height: 300rpx;
  670. display: block;
  671. }
  672. .por {
  673. position: relative;
  674. }
  675. .look-icon-left {
  676. font-size: 26rpx;
  677. text-align: center;
  678. }
  679. .look-icon-right {
  680. font-size: 26rpx;
  681. margin-left: 20rpx;
  682. text-align: center;
  683. }
  684. .mr-top24 {
  685. margin-top: 24rpx;
  686. color: #999;
  687. }
  688. .look-jiao {
  689. width: 50rpx;
  690. height: 50rpx;
  691. position: absolute;
  692. bottom: 0;
  693. right: 0;
  694. }
  695. .games-model {
  696. background: #FFFFFF;
  697. width: 500rpx;
  698. padding: 0rpx 40rpx 40rpx 40rpx;
  699. border-radius: 12rpx;
  700. .title {
  701. text-align: center;
  702. padding: 20rpx 0;
  703. }
  704. .item {
  705. padding: 20rpx 0;
  706. .border-b input {
  707. margin-left: 10rpx;
  708. text-align: center;
  709. }
  710. }
  711. .red {
  712. color: red;
  713. }
  714. .btn {
  715. margin: 0 auto;
  716. color: #FFFFFF;
  717. width: 250rpx;
  718. height: 60rpx;
  719. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  720. border-radius: 8rpx;
  721. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  722. margin-top: 30rpx;
  723. }
  724. }
  725. </style>