index.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  1. <template>
  2. <view class="registrationRecord-box">
  3. <view class="list-box">
  4. <u--form label-width="auto" ref="uForm" :model="form" labelAlign="right">
  5. <!-- <u-subsection :list="list" mode="subsection" :current="curNow" @change="sectionChange"></u-subsection> -->
  6. <u-tabs :list="tablist"
  7. :itemStyle="{
  8. width: '330rpx',
  9. height: '80rpx'
  10. }"
  11. :activeStyle="{
  12. color:'#4573FC'
  13. }"
  14. lineColor="#4573FC"
  15. @click="({index}) => {
  16. curNow = index
  17. anewQueryMyList()
  18. }"
  19. >
  20. </u-tabs>
  21. <u-cell-group customStyle="margin-top: 2px">
  22. <template>
  23. <u-cell title="任务开始时间" :border="true" :isLink="true"
  24. @click="calendarShow = true">
  25. <view slot="value">
  26. <u-form-item label="" prop="form.startTime">
  27. <template v-if="form.createTimeEnd">
  28. {{ form.createTimeBegin }} - {{ form.createTimeEnd
  29. }}</template>
  30. <template v-else></template>
  31. </u-form-item>
  32. </view>
  33. <u-icon v-if="form.createTimeEnd == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
  34. <view v-else slot="right-icon" @click.stop="() => {
  35. form.createTimeBegin = ''
  36. form.createTimeEnd = ''
  37. anewQueryMyList()
  38. }" style="margin-left: 20rpx;">
  39. <u-icon size="16" name="close-circle"></u-icon>
  40. </view>
  41. </u-cell>
  42. <!-- <tq-date-time ref="startTimeRef"
  43. :disEndDate="form.createTimeBegin"
  44. @confirm="(data) => {
  45. form.createTimeBegin = data
  46. }">
  47. </tq-date-time> -->
  48. </template>
  49. <!-- <template>
  50. <u-cell title="结束时间" :border="true" :isLink="true"
  51. @click="$refs.endTimeRef.show()">
  52. <view slot="value">
  53. <u-form-item label="" prop="form.endTime">
  54. {{ form.createTimeEnd }}
  55. </u-form-item>
  56. </view>
  57. </u-cell>
  58. <tq-date-time ref="endTimeRef"
  59. :disStartDate="form.createTimeEnd"
  60. @confirm="(data) => {
  61. form.createTimeEnd = data
  62. }">
  63. </tq-date-time>
  64. </template> -->
  65. <template>
  66. <u-cell title="选择任务状态" :border="true" :isLink="true"
  67. @click="$refs.selectRef.show()">
  68. <view slot="value">
  69. <u-form-item label="" prop="form.endTime">
  70. {{ form.exStsName }}
  71. </u-form-item>
  72. </view>
  73. <u-icon v-if="form.exStsName == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
  74. <view v-else slot="right-icon" @click.stop="() => {
  75. form.exSts = ''
  76. form.exStsName = ''
  77. anewQueryMyList()
  78. }" style="margin-left: 20rpx;">
  79. <u-icon size="16" name="close-circle"></u-icon>
  80. </view>
  81. </u-cell>
  82. <tq-select ref="selectRef"
  83. :columns="taskStatus"
  84. @confirm="(data) => {
  85. form.exSts = data.value
  86. form.exStsName = data.label
  87. anewQueryMyList()
  88. }">
  89. </tq-select>
  90. </template>
  91. <template v-if="curNow === 1">
  92. <u-cell title="车队类型" :border="true" :isLink="true"
  93. @click="$refs.selectOwnTypeRef.show()">
  94. <view slot="value">
  95. <u-form-item label="" prop="form.ownTypeName">
  96. {{ form.ownTypeName }}
  97. </u-form-item>
  98. </view>
  99. <u-icon v-if="form.ownTypeName == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
  100. <view v-else slot="right-icon" @click.stop="() => {
  101. form.ownType = ''
  102. form.ownTypeName = ''
  103. anewQueryMyList()
  104. }" style="margin-left: 20rpx;">
  105. <u-icon size="16" name="close-circle"></u-icon>
  106. </view>
  107. </u-cell>
  108. <tq-select ref="selectOwnTypeRef"
  109. :columns="ownTypeList"
  110. @confirm="(data) => {
  111. form.ownType = data.value
  112. form.ownTypeName = data.label
  113. anewQueryMyList()
  114. }">
  115. </tq-select>
  116. </template>
  117. <template v-if="curNow === 1">
  118. <u-cell title="司机" :border="true" :isLink="true"
  119. @click="$refs.caruserChooseRef.show()">
  120. <view slot="value">
  121. <u-form-item label="" prop="form.vehicleId">
  122. {{ form.driverName }}
  123. </u-form-item>
  124. </view>
  125. <u-icon v-if="form.driverName == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
  126. <view v-else slot="right-icon" @click.stop="() => {
  127. form.driverId = ''
  128. form.driverName = ''
  129. anewQueryMyList()
  130. }" style="margin-left: 20rpx;">
  131. <u-icon size="16" name="close-circle"></u-icon>
  132. </view>
  133. </u-cell>
  134. <tq-car-user ref="caruserChooseRef"
  135. :isGetIcon="true"
  136. :queryType="3"
  137. @confirm="(data) => {
  138. form.driverId = data.value
  139. form.driverName = data.label
  140. anewQueryMyList()
  141. }"
  142. @onDataLoad="">
  143. </tq-car-user>
  144. </template>
  145. <template>
  146. <u-cell title="车辆" :border="true" :isLink="true"
  147. @click="$refs.carChooseRef.show()">
  148. <view slot="value">
  149. <u-form-item label="" prop="form.vehicleId">
  150. {{ form.plate }}
  151. </u-form-item>
  152. </view>
  153. <u-icon v-if="form.plate == ''" slot="right-icon" size="16" name="arrow-right"></u-icon>
  154. <view v-else slot="right-icon" @click.stop="() => {
  155. form.vehicleId = ''
  156. form.plate = ''
  157. anewQueryMyList()
  158. }" style="margin-left: 20rpx;">
  159. <u-icon size="16" name="close-circle"></u-icon>
  160. </view>
  161. </u-cell>
  162. <tq-car-user ref="carChooseRef"
  163. :isGetIcon="true"
  164. @confirm="(data) => {
  165. form.vehicleId = data.value
  166. form.plate = data.label
  167. anewQueryMyList()
  168. }"
  169. @onDataLoad="">
  170. </tq-car-user>
  171. </template>
  172. <template>
  173. <!-- 重置按钮 -->
  174. <u-button customStyle="font-size: 24rpx;height: 64rpx;" :plain="false" size="mini" @click="resetData()">重置</u-button>
  175. </template>
  176. </u-cell-group>
  177. </u--form>
  178. </view>
  179. <view class="item-list-box">
  180. <view class="info-box" v-for="(item, index) in queryMyListdata" :key="index">
  181. <u-row customStyle="margin-bottom: 10px">
  182. <u-col span="6">
  183. <view class="demo-layout bg-purple-light">申请人:{{ item.applyName }}</view>
  184. </u-col>
  185. <u-col span="6">
  186. <view class="demo-layout bg-purple">部门:{{ item.deptName }}</view>
  187. </u-col>
  188. </u-row>
  189. <u-row customStyle="margin-bottom: 10px">
  190. <u-col span="12">
  191. <view class="demo-layout bg-purple-light">申请人联系电话:{{ item.applyTel }}</view>
  192. </u-col>
  193. </u-row>
  194. <u-row customStyle="margin-bottom: 10px">
  195. <u-col span="6">
  196. <view class="demo-layout bg-purple">用车类型:{{ item.matterType }}</view>
  197. </u-col>
  198. <!-- <u-col span="6">
  199. <view class="demo-layout bg-purple">任务状态:{{ item.exStsName }}</view>
  200. </u-col> -->
  201. </u-row>
  202. <u-row customStyle="margin-bottom: 10px">
  203. <u-col span="12">
  204. <view class="demo-layout bg-purple-light">预计执行时间:{{ item.startPlanTime }} — {{ item.endPlanTime
  205. }}
  206. </view>
  207. </u-col>
  208. </u-row>
  209. <u-row customStyle="margin-bottom: 10px" v-if="item.pointAddr">
  210. <u-col span="12">
  211. <view class="demo-layout bg-purple-light">起止点:{{ pointAddrParse(item.pointAddr) }}</view>
  212. </u-col>
  213. </u-row>
  214. <u-row customStyle="margin-bottom: 10px">
  215. <u-col span="6">
  216. <view class="demo-layout bg-purple-light">用车人数:{{ item.totalNum }}</view>
  217. </u-col>
  218. <u-col span="6">
  219. <view class="demo-layout bg-purple">任务状态:{{ item.exStsName }}</view>
  220. </u-col>
  221. </u-row>
  222. <view class="hide-warp" v-if="item.openOther">
  223. <u-row customStyle="margin-bottom: 10px">
  224. <u-col span="6">
  225. <view class="demo-layout bg-purple-light">车辆:{{ item.plate }}({{ item.ownType }})</view>
  226. </u-col>
  227. <u-col span="6">
  228. <view class="demo-layout bg-purple">车辆所属:{{ item.vehicleDeptName }}</view>
  229. </u-col>
  230. </u-row>
  231. <u-row customStyle="margin-bottom: 10px">
  232. <u-col span="6">
  233. <view class="demo-layout bg-purple-light">司机:{{ item.driverName }}({{ item.ownType }})</view>
  234. </u-col>
  235. <u-col span="6">
  236. <view class="demo-layout bg-purple">司机所属:{{ item.driverDeptName }}</view>
  237. </u-col>
  238. </u-row>
  239. <u-row customStyle="margin-bottom: 10px">
  240. <u-col span="12">
  241. <view class="demo-layout bg-purple-light">备注信息:{{ item.remark }}</view>
  242. </u-col>
  243. </u-row>
  244. </view>
  245. <view @click="item.openOther = !item.openOther" class="open-warp">
  246. {{ item.openOther?'收起':'展开' }}
  247. </view>
  248. <u-row customStyle="margin-bottom: 10px">
  249. <u-col span="12">
  250. <view style="display: flex; justify-content: center;">
  251. <u-button type="primary" icon="phone" @tap="phoneCall(item.driverTel)" :plain="true"
  252. color="#4573FC"
  253. v-if="$hasPermi('mobile:index:base:driverTask:driverPhone')"
  254. customStyle="width: 200rpx;height:64rpx" shape="circle"
  255. text="司机"></u-button>
  256. <u-button type="warning" icon="phone" @tap="phoneCall(item.applyTel)" :plain="true"
  257. color="#F7A254"
  258. v-if="$hasPermi('mobile:index:base:driverTask:applyPhone')"
  259. customStyle="width:200rpx;height:64rpx" shape="circle"
  260. text="申请人"></u-button>
  261. <u-button type="primary" icon="phone" @tap="phoneCall(item.userTel)" :plain="true"
  262. color="#4573FC"
  263. v-if="$hasPermi('mobile:index:base:driverTask:usePhone')"
  264. customStyle="width: 200rpx;height:64rpx" shape="circle"
  265. text="用车人"></u-button>
  266. </view>
  267. </u-col>
  268. </u-row>
  269. <u-row customStyle="margin-bottom: 10px">
  270. <u-col span="9" style="color: #4573FC;font-size: 28rpx;">
  271. <view v-for="(fitem,findex) in item.listCost" :key="findex">
  272. {{fitem.costName}}:{{fitem.price}} ;{{fitem.processStatusName}}
  273. </view>
  274. </u-col>
  275. <u-col span="3">
  276. <view
  277. style="color: #4573FC;display: flex;font-size: 28rpx;text-decoration: underline;justify-content: flex-end;"
  278. @click="goFlow(item)"
  279. >
  280. <u-icon name="plus" color="#4573FC" size="14"></u-icon>
  281. 费用报销
  282. </view>
  283. </u-col>
  284. </u-row>
  285. <!-- <u-button type="warning" customStyle="margin-left: 2rpx;" text="退回"
  286. @click="rebutConfirmation('rebut', item)"></u-button> -->
  287. <u-row customStyle="margin-bottom: 10px;" v-if="curNow === 0">
  288. <u-col span="12">
  289. <view style="display: flex;">
  290. <!-- exSts 车辆调度状态:1.未派车、2.已派车、3.已结束、4.已中止 -->
  291. <!-- 任务操作类型:approve.出发和结束、rebut.驳回,可用值:addSignature,approve,cancel,cc,claim,delSignature,delegate,hold,move,msg,postSignature,preSignature,read,rebut,resubmit,start,stop,submit,takeBack,turnInto,unclaim -->
  292. <u-button type="primary" text="出发" @click="postTaskOperate('approve', item)"
  293. v-if="item.exSts === '1'"></u-button>
  294. <u-button type="error" text="结束" @click="postTaskOperate('approve', item)"
  295. v-if="item.exSts === '2'"></u-button>
  296. <u-button type="warning" customStyle="margin-left: 2rpx;" text="退回"
  297. @click="rebutConfirmation('rebut', item)"
  298. v-if="item.exSts === '1'"></u-button>
  299. <u-button :plain="true" :disabled="true" text="已结束" v-if="item.exSts === '3'"></u-button>
  300. <u-button type="error" :plain="true" :disabled="true" text="已中止"
  301. v-if="item.exSts === '4'"></u-button>
  302. </view>
  303. </u-col>
  304. </u-row>
  305. </view>
  306. </view>
  307. <u-loadmore :status="status" />
  308. <u-toast ref="uToast" />
  309. <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
  310. monthNum="24"
  311. @confirm="calendarChange" @close="calendarShow = false"></u-calendar>
  312. <u-modal :show="modalshow" @confirm="modalconfirm" showCancelButton @cancel="modalcancel" :title="title">
  313. <view class="slot-content">
  314. <u--textarea
  315. placeholder="请输入退回原因"
  316. border="surround"
  317. v-model="operateMessage"></u--textarea>
  318. </view>
  319. </u-modal>
  320. </view>
  321. </template>
  322. <script>
  323. import { drivertaskList, taskOperate } from "@/api/wfApi/index.js";
  324. export default {
  325. data() {
  326. return {
  327. calendarShow: false, // 日历
  328. calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
  329. calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
  330. defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
  331. maxDate: this.dayjs().add(365, 'day').format('YYYY-MM-DD'),
  332. list: ['我的', '全部'],
  333. tablist: [
  334. { name: '我的'},
  335. { name: '全部'},
  336. ],
  337. curNow: 0,
  338. queryMyListdata: [],
  339. form: {
  340. createTimeBegin: '',//开始时间
  341. createTimeEnd: '', //结束时间
  342. exSts: '', //车辆调度状态:
  343. exStsName: '',
  344. vehicleId: '',
  345. plate: '',
  346. driverId: '',
  347. driverName: '',
  348. ownType: '',//车队类型
  349. ownTypeName: '',
  350. },
  351. // 车辆调度状态:1.未派车、2.已派车、3.已结束、4.已中止
  352. taskStatus: [
  353. { label: '未开始', value: 1 },
  354. { label: '执行中', value: 2 },
  355. { label: '已结束', value: 3 },
  356. { label: '已终止', value: 4 },
  357. ],
  358. // 车队类型:1.内部车队、2.外部车队
  359. ownTypeList: [
  360. { label: '内部车队', value: 1 },
  361. { label: '外部车队', value: 2 },
  362. ],
  363. operateMessage: '',//退回原因
  364. modalshow: false,
  365. modalItem: {},
  366. title: '请输入退回原因',
  367. content: '请输入退回原因',
  368. pageIndex: 1,
  369. total: 0,
  370. status: 'nomore', //loading nomore loadmore
  371. openOther:false
  372. }
  373. },
  374. onShow(option) {
  375. this.queryMyListdata = []
  376. this.pageIndex = 1
  377. this.queryMyList();
  378. },
  379. methods: {
  380. resetData(){
  381. this.form = {
  382. createTimeBegin: '',//开始时间
  383. createTimeEnd: '', //结束时间
  384. exSts: '', //车辆调度状态:
  385. exStsName: '',
  386. vehicleId: '',
  387. plate: '',
  388. driverId: '',
  389. driverName: '',
  390. ownType: '',//车队类型
  391. ownTypeName:''
  392. }
  393. this.anewQueryMyList()
  394. },
  395. calendarChange(e) {
  396. console.info('选择的时间', e)
  397. // 修改日期
  398. this.form.createTimeBegin = e[0]; // 开始时间
  399. this.form.createTimeEnd = e[e.length - 1]; // 结束时间
  400. this.defaultDate = [e[0], e[e.length - 1]]
  401. this.calendarShow = false;
  402. this.anewQueryMyList();
  403. },
  404. anewQueryMyList() {
  405. this.pageIndex = 1;
  406. this.queryMyListdata = [];
  407. this.queryMyList();
  408. },
  409. phoneCall(e) {
  410. uni.makePhoneCall({
  411. phoneNumber: e //仅为示例
  412. });
  413. },
  414. pointAddrParse(e) {
  415. let arr = JSON.parse(e)
  416. let arrStg = ''
  417. for (let item of arr) {
  418. arrStg += item.address + '-'
  419. }
  420. return arrStg.slice(0, -1);
  421. },
  422. sectionChange(index) {
  423. this.curNow = index;
  424. this.anewQueryMyList()
  425. },
  426. toRealMap(item) {
  427. let obj = {
  428. routeId: item.routeId,
  429. classId: item.classId,
  430. startAndEnd: item.startAndEnd
  431. }
  432. let objst = encodeURIComponent(JSON.stringify(obj))
  433. uni.navigateTo({
  434. url: '/newdriversub/setClassPlan/details?item=' + objst
  435. });
  436. },
  437. async queryMyList() {
  438. this.loading = 'loading'
  439. let obj = {
  440. ...this.form,
  441. pageIndex: this.pageIndex,
  442. pageSize: 3,
  443. queryType: this.curNow + 1 //查询类型:1.本人、2.全部
  444. }
  445. for (let key in obj) {
  446. if (obj[key] === '') delete obj[key]
  447. }
  448. let { data, code, page } = await drivertaskList(obj)
  449. if (code == "0") {
  450. let list = data.map(item=>
  451. {
  452. return {
  453. ...item,
  454. openOther:false
  455. }
  456. }
  457. )
  458. this.queryMyListdata = this.queryMyListdata.concat(list)
  459. this.total = Number(page.totalCount)
  460. this.loading = 'loadmore'
  461. if (this.queryMyListdata.length >= this.total) {
  462. this.status = 'nomore'
  463. }
  464. console.log('数据', this.queryMyListdata)
  465. }
  466. },
  467. rebutConfirmation(e, item) {
  468. //请输入原因
  469. this.modalshow = true
  470. this.modalItem = item
  471. },
  472. modalcancel(e){
  473. this.modalshow = false
  474. this.operateMessage=''
  475. },
  476. modalconfirm(e) {
  477. if (this.operateMessage === '') {
  478. return uni.showToast({
  479. title: '请输入退回原因',
  480. icon: 'none'
  481. });
  482. } else {
  483. this.modalshow = false
  484. this.postTaskOperate('rebut', this.modalItem)
  485. }
  486. },
  487. // 操作
  488. async postTaskOperate(e, item) {
  489. let { data, code, msg } = await taskOperate(
  490. {
  491. taskOperate: e,
  492. taskId: item.taskId, //任务id
  493. processInstanceId: item.processInstanceId,//流程实例id
  494. operateMessage: this.operateMessage, //操作原因
  495. })
  496. if (code == "0") {
  497. this.operateMessage = ''
  498. uni.showToast({
  499. title: msg || '操作成功',
  500. duration: 2000
  501. });
  502. this.anewQueryMyList();
  503. }
  504. },
  505. async goFlow(item) {
  506. const {id} = item
  507. uni.navigateTo({
  508. url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&workflowKey=system_cost&fromKey=system_flow_veh&fromId=${id}`,
  509. })
  510. /* let res
  511. let isDetails = false
  512. let defaultTitle
  513. let processInstanceId
  514. if(type == 'technologySafe') {
  515. res = await getStartTechnologySafeFormInfo()
  516. if(item.tsProcessInstanceId) isDetails=true
  517. processInstanceId = item.tsProcessInstanceId
  518. } else if (type == 'behaviorSafe') {
  519. res = await getStartBehaviorSafeFormInfo()
  520. if(item.bsProcessInstanceId) isDetails=true
  521. processInstanceId = item.bsProcessInstanceId
  522. }
  523. let {code,data} = res
  524. if(code == 0 && data) {
  525. if(isDetails) {
  526. uni.navigateTo({
  527. url: `/pages/flow/diboot?routes=/workflow/mobile/dealTask&taskId=${-1}&processInstanceId=${processInstanceId}&category=${'cc'}&withDealTask=true&fromMobile=true`,
  528. })
  529. } else {
  530. uni.navigateTo({
  531. url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&id=${data}&taskId=${id}&taskType=${type}`
  532. })
  533. }
  534. } */
  535. }
  536. },
  537. // 触底
  538. onReachBottom() {
  539. console.log('当前条数', this.queryMyListdata.length, '总条数', this.total)
  540. if (this.queryMyListdata.length >= this.total) return;
  541. this.pageIndex++
  542. this.queryMyList();
  543. }
  544. }
  545. </script>
  546. <style lang="scss" scoped>
  547. .registrationRecord-box {
  548. padding: 0 0 10rpx 0;
  549. overflow: unset;
  550. .list-box {
  551. border-radius: 10rpx;
  552. background: #fff;
  553. // padding: 20rpx;
  554. position: sticky;
  555. // align-items: center;
  556. // display: flex;
  557. top: 0px;
  558. width: 100%;
  559. z-index: 999;
  560. /deep/ {
  561. .u-form-item__body {
  562. padding: 0;
  563. }
  564. }
  565. }
  566. .item-list-box {
  567. padding: 10rpx 0 0 0;
  568. // background: #fff;
  569. position: relative;
  570. .info-box {
  571. margin-bottom: 20rpx;
  572. border: none;
  573. width: 100%;
  574. // border-radius: 20rpx;
  575. box-shadow: 2rpx 2rpx 5rpx rgba(169, 169, 169, 0.34901960784313724);
  576. // height: 150rpx;
  577. background-color: rgba(255, 255, 255, 1);
  578. display: flex;
  579. align-items: center;
  580. flex-wrap: wrap;
  581. padding: 20rpx;
  582. box-sizing: border-box;
  583. position: relative;
  584. font-size: 24rpx;
  585. }
  586. }
  587. .slot-content {
  588. width: 100%;
  589. }
  590. .hide-warp{
  591. width: 100%;
  592. }
  593. .open-warp{
  594. width: 100%;
  595. padding: 20rpx;
  596. display: flex;
  597. justify-content: flex-end;
  598. color: #4573FC;
  599. }
  600. }
  601. </style>