task_arrive.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855
  1. <template>
  2. <view class="container">
  3. <view class="detail-desc">
  4. <view class="d-header">
  5. <text>派车单</text>
  6. </view>
  7. <view class="c-list">
  8. <view class="c-row b-b">
  9. <text class="tit">出发地</text>
  10. <view class="con-list">
  11. <text>{{carInfo.startPlace}}</text>
  12. </view>
  13. </view>
  14. <view class="c-row b-b">
  15. <text class="tit">目的地</text>
  16. <view class="con-list">
  17. <text>{{carInfo.endPlace}}</text>
  18. </view>
  19. </view>
  20. <view class="c-row b-b">
  21. <text class="tit">任务量</text>
  22. <view class="con-list">
  23. <text>{{numFilter(carInfo.num)}}</text>
  24. </view>
  25. </view>
  26. <view class="c-row b-b">
  27. <text class="tit">已发运量</text>
  28. <view class="con-list">
  29. <text>{{numFilter(carInfo.tranCount)}}</text>
  30. </view>
  31. </view>
  32. <view class="c-row b-b">
  33. <text class="tit">货名</text>
  34. <view class="con-list">
  35. <text>{{carInfo.goodsName}}</text>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="d-header">
  40. <text>发运数据</text>
  41. </view>
  42. <view class="c-list">
  43. <view class="c-row b-b">
  44. <text class="tit">下线费(元/吨)</text>
  45. <view class="con-list">
  46. <input placeholder="请填写下线费" name="input" v-model="offFee" @input="priceInput"></input>
  47. </view>
  48. </view>
  49. <view class="c-row b-b">
  50. <text class="tit">下线杂费(元/吨)</text>
  51. <view class="con-list">
  52. <input placeholder="请填写下线杂费" name="input" v-model="offOtherFee" @input="otherPriceInput"></input>
  53. </view>
  54. </view>
  55. <view class="c-row b-b">
  56. <text class="tit">车皮号</text>
  57. <view class="con-list">
  58. <input placeholder="请填写车皮号" name="input" v-model="carSkinNo" @input="carNoInput"></input>
  59. </view>
  60. </view>
  61. <view class="c-row b-b">
  62. <text class="tit">箱号</text>
  63. <view class="con-list">
  64. <input placeholder="请填写箱号" name="input" v-model="boxNo" @input="boxNoInput"></input>
  65. </view>
  66. </view>
  67. <view class="c-row b-b">
  68. <text class="tit">汽车号</text>
  69. <view class="con-list">
  70. <text>{{inPersonName}}</text>
  71. </view>
  72. <button class='cu-btn bg-green shadow' @click="selectPerson">选择汽车号</button>
  73. </view>
  74. <view>
  75. <view class='carwrap' v-for='(item,index) in carlist'>
  76. <text>{{item.carNo}}</text>
  77. <input class='trancount' type="text" v-model="item.count" name="input" @input="carInput(item,$event)">
  78. </view>
  79. </view>
  80. <view class="c-row b-b">
  81. <text class="tit">净重</text>
  82. <view class="con-list">
  83. <text>{{numFilter(suttleWeight)}}</text>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="cu-modal" :class="modalName=='workModal'?'show':''" @tap="hideModal">
  89. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  90. <view class="cu-list menu text-center" >
  91. <view class="cu-item" v-for="(item,index) in userList" :key="index" @click="nextPerson(item.id)">
  92. <label class="flex justify-between align-center flex-sub">
  93. <view class="flex-sub">{{item.userName}}</view>
  94. </label>
  95. </view>
  96. </view>
  97. </scroll-view>
  98. </view>
  99. <view class="cu-modal" :class="modalfieldName=='workModal'?'show':''" @tap="hideModal">
  100. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  101. <view class="cu-list menu text-center" >
  102. <view class="cu-item" v-for="(item,index) in fieldList" :key="index" @click="nextPerson2(item.id)">
  103. <label class="flex justify-between align-center flex-sub">
  104. <view class="flex-sub">{{item.userName}}</view>
  105. </label>
  106. </view>
  107. </view>
  108. </scroll-view>
  109. </view>
  110. <view class="cu-modal" :class="modalName=='userModal'?'show':''" @tap="hideModal">
  111. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  112. <view class="cu-list menu text-center" >
  113. <view class="cu-item" v-for="(item,index) in userList" :key="index" @click="mygaipai(item.id)">
  114. <label class="flex justify-between align-center flex-sub">
  115. <view class="flex-sub">{{item.userName}}</view>
  116. </label>
  117. </view>
  118. </view>
  119. </scroll-view>
  120. </view>
  121. <view class="page-bottom">
  122. <view class="action-btn-group">
  123. <button type="primary" class=" action-btn no-border buy-now-btn" @click="save">保存</button>
  124. <button type="primary" v-if="taskStatus == 1" class=" action-btn no-border add-cart-btn" @click="finish">完成</button>
  125. <button type="primary" v-if="taskStatus == 1" class=" action-btn no-border add-cart-btn" @click="gaipai">改派</button>
  126. </view>
  127. </view>
  128. <view class="cu-modal" :class="modalName=='inModal'?'show':''" @tap="hideModal">
  129. <scroll-view scroll-y class="cu-dialog" :style="userStyle" @tap.stop="">
  130. <view class="cu-list menu text-center" >
  131. <view class="cu-item" v-for="(item,index) in userList" :key="index" @click="selectInPerson(item)">
  132. <label class="flex justify-between align-center flex-sub">
  133. <view class="flex-sub">{{item.carNo}}<text v-if="paiCarType=='到站派车' "> ———— {{item.tranCount}}</text></view>
  134. </label>
  135. </view>
  136. </view>
  137. </scroll-view>
  138. </view>
  139. </view>
  140. </template>
  141. <script>
  142. import uploadImage from '@/components/ossutil/uploadFile.js';
  143. import Handwriting from '@/components/ossutil/signature.js';
  144. import {
  145. mapState
  146. } from 'vuex';
  147. export default {
  148. data() {
  149. return {
  150. carInfo:[],
  151. grossWeight:'',
  152. skinWeight:'',
  153. offFee:'',
  154. offOtherFee:'',
  155. carNo:'',
  156. carSkinNo:'',
  157. boxNo:'',
  158. taskStatus:'',
  159. userStyle:'',
  160. fieldList:[],
  161. modalName:'',
  162. modalfieldName:'',
  163. taskType:'',
  164. taskId:'',
  165. goodsValue:'',
  166. addNumStatus:false,
  167. wechatNo:'',
  168. lineColor:'black',
  169. slideValue:50,
  170. handwriting:'',
  171. selectColor:'black',
  172. color:'',
  173. userList:[],
  174. inPersonName:'',
  175. carlist:[],
  176. suttleWeight2:''
  177. };
  178. },
  179. computed: {
  180. ...mapState(['hasLogin','userInfo']),
  181. suttleWeight(){
  182. let num=0
  183. if(this.carlist.length>0){
  184. for(var i=0;i<this.carlist.length;i++){
  185. num=Number(num+Number(this.carlist[i].count))
  186. }
  187. }else{
  188. num=this.suttleWeight2
  189. }
  190. return num
  191. }
  192. },
  193. onShow() {
  194. },
  195. onLoad(options) {
  196. const that = this
  197. this.taskId = options.taskId
  198. this.taskType = options.taskType
  199. this.taskStatus = options.taskStatus
  200. uni.showLoading({
  201. title: '正在加载',
  202. mask:true
  203. })
  204. that.$api.request('tran', 'getTrainDetailInfo', {
  205. id: options.taskId
  206. }, failres => {
  207. that.$api.msg(failres.errmsg)
  208. uni.hideLoading()
  209. }).then(res => {
  210. that.carInfo = res.data
  211. console.log(that.carInfo)
  212. // that.inPersonName = res.data.receiver
  213. that.fee = that.carInfo.fee
  214. that.trainImg = that.carInfo.trainImg
  215. that.carNo = that.carInfo.carNos
  216. that.otherfee = that.carInfo.otherFee
  217. that.offFee = that.carInfo.offFee
  218. that.offOtherFee = that.carInfo.offOtherFee
  219. that.suttleWeight2=that.carInfo.netWeight
  220. that.insuranceFee= that.carInfo.insuranceFee
  221. that.rentboxFee= that.carInfo.rentBoxFee
  222. that.loadingFee= that.carInfo.loadingFee
  223. that.carSkinNo= that.carInfo.carSkinNo
  224. that.boxNo= that.carInfo.boxNo
  225. that.otherImg = that.carInfo.otherImg
  226. uni.hideLoading()
  227. })
  228. },
  229. onReady(){
  230. },
  231. methods: {
  232. priceInput(e){
  233. this.offFee = e.detail.value
  234. },
  235. otherPriceInput(e){
  236. this.offOtherFee = e.detail.value
  237. },
  238. insuranceFeeInput(e){
  239. console.log(this.insuranceFee)
  240. this.insuranceFee = e.detail.value
  241. },
  242. netWeightInput(e){
  243. this.netWeight = e.detail.value
  244. },
  245. carNoInput(e){
  246. this.carNo = e.detail.value
  247. },
  248. rentboxFeeInput(e){
  249. this.rentboxFee = e.detail.value
  250. },
  251. loadingFeeInput(e){
  252. this.loadingFee = e.detail.value
  253. },
  254. boxNoInput(e){
  255. this.boxNo = e.detail.value
  256. },
  257. numFilter (value) {
  258. if(!value){
  259. return 0
  260. }
  261. // 截取当前数据到小数点后两位
  262. let realVal = parseFloat(value).toFixed(2)
  263. return realVal
  264. },
  265. carInput(item,e){
  266. if(item.count>item.tranCount){
  267. uni.showToast({
  268. title: `当前车辆可载吨数为${item.tranCount},请不要超过`,
  269. icon:'none',
  270. duration: 2000
  271. })
  272. item.count = 0
  273. }else{
  274. item.count = e.detail.value
  275. }
  276. },
  277. selectInPerson(item){
  278. if(JSON.stringify(this.carlist).indexOf(JSON.stringify(item))==-1){
  279. this.carlist.push(item)
  280. }else{
  281. uni.showLoading({
  282. title: '正在加载',
  283. mask:true
  284. })
  285. }
  286. this.modalName = null
  287. },
  288. ChooseSignImage() {
  289. this.handwriting = new Handwriting({
  290. lineColor: this.lineColor,
  291. slideValue: this.slideValue, // 0, 25, 50, 75, 100
  292. canvasName: 'handWriting',
  293. })
  294. this.showAutograph = true
  295. },
  296. uploadScaleStart(event){
  297. this.handwriting.uploadScaleStart(event)
  298. },
  299. uploadScaleMove(event){
  300. this.handwriting.uploadScaleMove(event)
  301. },
  302. uploadScaleEnd(event){
  303. this.handwriting.uploadScaleEnd(event)
  304. },
  305. retDraw() {
  306. this.handwriting.retDraw()
  307. },
  308. hideModal(e) {
  309. this.modalName = null
  310. },
  311. ViewImage(e) {
  312. var img = [];
  313. img = e.currentTarget.dataset.url.split(' ')
  314. uni.previewImage({
  315. current:0,
  316. urls: img
  317. });
  318. },
  319. selectPerson(){
  320. const that = this
  321. uni.showLoading({
  322. title: '正在加载',
  323. mask:true
  324. })
  325. that.$api.request('tran', 'getCarList', {
  326. tranNo:that.carInfo.tranNo,
  327. taskId:that.taskId
  328. }, failres => {
  329. that.$api.msg(failres.errmsg)
  330. uni.hideLoading()
  331. }).then(res => {
  332. for(var i=0;i<res.data.length;i++){
  333. console.log(res.data[i].tranCount)
  334. res.data[i].count = res.data[i].tranCount
  335. }
  336. that.userList = res.data
  337. if(that.userList.length == 0){
  338. that.$api.msg('暂无汽车号')
  339. }
  340. else{
  341. var height = that.userList.length * 100
  342. var width = 500
  343. that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
  344. that.modalName = 'inModal'
  345. }
  346. uni.hideLoading()
  347. })
  348. },
  349. DelImg(e) {
  350. uni.showModal({
  351. title: '提示',
  352. content: '确定要删除该照片吗?',
  353. cancelText: '取消',
  354. confirmText: '确定',
  355. success: res => {
  356. if (res.confirm) {
  357. if(e.currentTarget.dataset.index == 0){
  358. this.poundImg = "";
  359. }
  360. else if(e.currentTarget.dataset.index == 1){
  361. this.otherImg = "";
  362. }
  363. }
  364. }
  365. })
  366. },
  367. ChooseImage() {
  368. uni.chooseImage({
  369. count: 1, //默认9
  370. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  371. sourceType: ['album','camera'], //从相册选择
  372. success: (res) => {
  373. //上传图片
  374. //图片路径可自行修改
  375. uploadImage(res.tempFilePaths[0], 'poundImg/',
  376. result => {
  377. this.trainImg = result
  378. uni.hideLoading();
  379. }
  380. )
  381. }
  382. });
  383. },
  384. ChooseImageOther() {
  385. uni.chooseImage({
  386. count: 1, //默认9
  387. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  388. sourceType: ['album','camera'], //从相册选择
  389. success: (res) => {
  390. //上传图片
  391. //图片路径可自行修改
  392. uploadImage(res.tempFilePaths[0], 'otherImg/',
  393. result => {
  394. this.otherImg = result
  395. uni.hideLoading();
  396. }
  397. )
  398. }
  399. });
  400. },
  401. goodsValueInput(e){
  402. this.goodsValue = e.detail.value
  403. },
  404. numInput(e){
  405. this.addNum = e.detail.value
  406. },
  407. wechatNoInput(e) {
  408. this.wechatNo = e.detail.value
  409. },
  410. save(){
  411. const that = this
  412. uni.showLoading({
  413. title: '正在加载',
  414. mask:true
  415. })
  416. var param = {};
  417. param.carSkinNo = that.carSkinNo
  418. param.boxNo = that.boxNo
  419. param.offFee = that.offFee
  420. param.offOtherFee = that.offOtherFee
  421. param.taskId = that.taskId
  422. param.netWeight = that.suttleWeight
  423. param.list = that.carlist
  424. that.$api.request('tran', 'saveOffTrainInfo', {
  425. trainDTO:JSON.stringify(param)
  426. }, failres => {
  427. that.$api.msg(failres.errmsg)
  428. uni.hideLoading()
  429. }).then(res => {
  430. that.$api.msg('保存成功')
  431. uni.hideLoading()
  432. })
  433. },
  434. finish(){
  435. var that =this
  436. var param = {};
  437. param.carSkinNo = that.carSkinNo
  438. param.boxNo = that.boxNo
  439. param.offFee = that.offFee
  440. param.boxNo = that.boxNo
  441. param.offOtherFee = that.offOtherFee
  442. param.taskId = that.taskId
  443. param.netWeight = that.suttleWeight
  444. param.list = that.carlist
  445. that.$api.request('tran', 'finishOffTrainInfo', {
  446. trainDTO:JSON.stringify(param),
  447. nextUserId: -1
  448. }, failres => {
  449. that.$api.msg(failres.errmsg)
  450. uni.hideLoading()
  451. }).then(res => {
  452. uni.hideLoading()
  453. that.$api.msg('完成成功')
  454. setTimeout(()=>{uni.navigateBack({})},1000);
  455. })
  456. },
  457. gaipai(){
  458. const that = this
  459. uni.showLoading({
  460. title: '正在加载',
  461. mask:true
  462. })
  463. that.$api.request('user', 'getUserList', {
  464. role:'外勤'
  465. }, failres => {
  466. that.$api.msg(failres.errmsg)
  467. uni.hideLoading()
  468. }).then(res => {
  469. that.userList = res.data
  470. if(that.userList.length == 0){
  471. that.$api.msg('暂无外勤信息')
  472. }
  473. else{
  474. var height = that.userList.length * 100
  475. var width = 500
  476. that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
  477. that.modalName = 'userModal'
  478. }
  479. uni.hideLoading()
  480. })
  481. },
  482. mygaipai(id){
  483. var that = this
  484. that.$api.request('tran', 'gaipai',{
  485. taskId: that.taskId,
  486. outPersonId:id,
  487. taskType:that.taskType
  488. },failres => {
  489. that.$api.msg(failres.errmsg)
  490. that.modalName = null
  491. uni.hideLoading()
  492. }).then(res => {
  493. that.modalName = null
  494. uni.navigateBack({
  495. delta: 2
  496. })
  497. uni.hideLoading()
  498. })
  499. },
  500. nextPerson(id){
  501. var that = this
  502. uni.showLoading({
  503. title: '正在加载',
  504. mask:true
  505. })
  506. that.$api.request('tran', 'finishTrainInfo', {
  507. taskId: that.taskId,
  508. price:!that.price?'':that.price,
  509. netWeight:that.netWeight,
  510. poundImg:!that.poundImg?'':that.poundImg,
  511. carNo:!that.carNo?'':that.carNo,
  512. otherPrice:!that.otherPrice?'':that.otherPrice,
  513. otherImg:!that.otherImg?'':that.otherImg,
  514. userId: id
  515. }, failres => {
  516. that.$api.msg(failres.errmsg)
  517. uni.hideLoading()
  518. }).then(res => {
  519. uni.hideLoading()
  520. that.$api.msg('完成成功')
  521. setTimeout(()=>{uni.navigateBack()},1000);
  522. })
  523. },
  524. nextPerson2(id){
  525. var that = this
  526. var param = {};
  527. param.carSkinNo = this.carSkinNo
  528. param.boxNo = this.boxNo
  529. param.fee = this.fee
  530. param.fee = this.fee
  531. param.boxNo = this.boxNo
  532. param.otherFee = this.otherFee
  533. param.otherFee = this.otherFee
  534. param.insuranceFee = this.insuranceFee
  535. param.rentboxFee = this.rentboxFee
  536. param.loadingFee = this.loadingFee
  537. param.taskId = this.taskId
  538. param.trainImg = this.trainImg
  539. param.otherImg = this.otherImg
  540. param.netWeight = this.suttleWeight
  541. param.list = this.carlist
  542. that.$api.request('tran', 'finishTrainInfo', {
  543. trainDTO:JSON.stringify(param),
  544. nextUserId: id
  545. }, failres => {
  546. that.$api.msg(failres.errmsg)
  547. uni.hideLoading()
  548. }).then(res => {
  549. uni.hideLoading()
  550. that.$api.msg('完成成功')
  551. setTimeout(()=>{uni.navigateBack({})},1000);
  552. })
  553. },
  554. },
  555. }
  556. </script>
  557. <style lang='scss' scoped="true">
  558. .container{
  559. padding-bottom: 160upx;
  560. }
  561. .detail-desc {
  562. background: #fff;
  563. margin-top: 16upx;
  564. width: 750upx;
  565. .d-header {
  566. display: flex;
  567. justify-content: center;
  568. align-items: center;
  569. height: 80upx;
  570. font-size: $font-base + 2upx;
  571. color: $font-color-dark;
  572. position: relative;
  573. text {
  574. padding: 0 20upx;
  575. background: #fff;
  576. position: relative;
  577. z-index: 1;
  578. }
  579. &:after {
  580. position: absolute;
  581. left: 50%;
  582. top: 50%;
  583. transform: translateX(-50%);
  584. width: 300upx;
  585. height: 0;
  586. content: '';
  587. border-bottom: 1px solid #ccc;
  588. }
  589. }
  590. }
  591. .carwrap{
  592. display: flex;
  593. justify-content: space-between;
  594. padding: 10px 26px 10px 15px;
  595. border-bottom:1px solid #f0f0f0;
  596. }
  597. .trancount{
  598. display: inline-block;
  599. vertical-align: middle;
  600. text-align: right;
  601. width: 100rpx;
  602. }
  603. .c-list {
  604. font-size: $font-sm + 2upx;
  605. color: $font-color-base;
  606. background: #fff;
  607. .c-row {
  608. display: flex;
  609. align-items: center;
  610. padding: 20upx 30upx;
  611. position: relative;
  612. }
  613. .tit {
  614. width: 220upx;
  615. }
  616. .con {
  617. flex: 1;
  618. color: $font-color-dark;
  619. .selected-text {
  620. margin-right: 10upx;
  621. }
  622. }
  623. .bz-list {
  624. height: 40upx;
  625. font-size: $font-sm+2upx;
  626. color: $font-color-dark;
  627. text {
  628. display: inline-block;
  629. margin-right: 30upx;
  630. }
  631. }
  632. .con-list {
  633. flex: 1;
  634. display: flex;
  635. flex-direction: column;
  636. color: $font-color-dark;
  637. line-height: 40upx;
  638. text-align: right;
  639. padding-right: 20upx;
  640. }
  641. .red {
  642. color: $uni-color-primary;
  643. }
  644. }
  645. /* 底部操作菜单 */
  646. .page-bottom {
  647. .action-btn-group {
  648. .action-btn {
  649. width: 33.3333%;
  650. }
  651. }
  652. }
  653. @mixin playcenter {
  654. display: flex;
  655. align-items: center;
  656. justify-content: center;
  657. }
  658. .xsh-start {
  659. width: 105rpx;
  660. height: 105rpx;
  661. background: #FFFFFF;
  662. border-radius: 50%;
  663. font-size: 29rpx;
  664. color: #4135EB;
  665. @include playcenter;
  666. flex-wrap: wrap;
  667. }
  668. .x-modal {
  669. width: 100%;
  670. .x-m-title {
  671. width: 100%;
  672. height: 90rpx;
  673. padding: 0 38rpx 0 31rpx;
  674. box-sizing: border-box;
  675. font-size: 29rpx;
  676. color: #333333;
  677. border-bottom: 1px dashed #999;
  678. @include playcenter;
  679. justify-content: space-between;
  680. .xm-t-clear {
  681. font-size: 25rpx;
  682. color: #341DB7;
  683. @include playcenter;
  684. >image {
  685. width: 28rpx;
  686. height: 28rpx;
  687. display: block;
  688. margin-right: 8rpx;
  689. }
  690. }
  691. }
  692. .x-m-con {
  693. width: 100%;
  694. padding: 0 31rpx 18rpx;
  695. margin-top: 5rpx;
  696. box-sizing: border-box;
  697. }
  698. }
  699. .wrapper {
  700. width: 100%;
  701. height: 100%;
  702. margin: 30upx 0;
  703. overflow: hidden;
  704. display: flex;
  705. align-content: center;
  706. flex-direction: column;
  707. justify-content: center;
  708. font-size: 28upx;
  709. }
  710. .handWriting {
  711. background: #fff;
  712. width: 100%;
  713. height: 350upx;
  714. }
  715. .handRight {
  716. align-items: center;
  717. }
  718. .handCenter {
  719. border: 4upx dashed #e9e9e9;
  720. flex: 5;
  721. overflow: hidden;
  722. box-sizing: border-box;
  723. width: 90%;
  724. margin: 0 auto;
  725. }
  726. .handTitle {
  727. flex: 1;
  728. color: #666;
  729. justify-content: center;
  730. font-size: 30upx;
  731. }
  732. .handBtn {
  733. flex-direction: column;
  734. padding: 40upx 20upx;
  735. }
  736. .buttons{
  737. width: 100%;
  738. margin-top: 20upx;
  739. justify-content: space-between;
  740. }
  741. .buttons>button{
  742. font-size: 30upx;
  743. height: 80upx;
  744. }
  745. .delBtn {
  746. background: #23df02;
  747. color: #fff;
  748. }
  749. .color{
  750. align-items: center;
  751. }
  752. .color>text{
  753. margin-right: 20upx;
  754. }
  755. .subBtn {
  756. background: #008ef6;
  757. color: #fff;
  758. text-align: center;
  759. justify-content: center;
  760. }
  761. .black-select {
  762. width: 60upx;
  763. height: 60upx;
  764. }
  765. .black-select.color_select {
  766. width: 90upx;
  767. height: 90upx;
  768. }
  769. .red-select {
  770. width: 60upx;
  771. height: 60upx;
  772. }
  773. .red-select.color_select {
  774. width: 90upx;
  775. height: 90upx;
  776. }
  777. .slide-wrapper {
  778. align-items: center;
  779. margin-bottom: 20upx;
  780. }
  781. .slider{
  782. width: 400upx;
  783. padding-left: 20upx;
  784. }
  785. .drop {
  786. width: 50upx;
  787. height: 50upx;
  788. border-radius: 50%;
  789. background: #FFF;
  790. position: absolute;
  791. left: 0upx;
  792. top: -10upx;
  793. box-shadow: 0px 1px 5px #888888;
  794. }
  795. .slide {
  796. width: 250upx;
  797. height: 30upx;
  798. }
  799. .showimg{
  800. border: 4upx solid #e9e9e9;
  801. overflow: hidden;
  802. width: 90%;
  803. margin: 0 auto;
  804. background: #eee;
  805. height: 350upx;
  806. margin-top: 40upx;
  807. align-items: center;
  808. justify-content: center;
  809. }
  810. .showimg>image{
  811. width: 100%;
  812. height: 100%;
  813. }
  814. .showimg>text{
  815. font-size: 40upx;
  816. color: #888;
  817. }
  818. .indexFixed{
  819. position: fixed;
  820. left:0;
  821. bottom:0;
  822. right:0;
  823. }
  824. </style>