order-list.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721
  1. <template>
  2. <view class="container mine clearfix">
  3. <view class="tui-header-box first">
  4. <view class="tui-header-search" @click.stop="rDrawer">
  5. <view class="inner">
  6. <text class="iconfont icon-sousuo"></text>
  7. <view class="input">筛选我的订单</view>
  8. </view>
  9. </view>
  10. </view>
  11. <view class="user-section">
  12. <view :class="{'tui-order-list':scrollTop >= 0}" class="clearfix">
  13. <!-- 空白页 -->
  14. <view class="empty-container" v-if="isEmpty">
  15. <image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AcewRAAEtqt4jZmU397.png"></image>
  16. <text class="error-text">暂无数据^_^</text>
  17. </view>
  18. <!-- 列表 -->
  19. <view v-else class="tui-order-content">
  20. <view class="tui-order-item" v-for="(order,orderIndex) in orderData" :key="orderIndex" @click.stop="detail(order.shopOrderID)">
  21. <view class="order-title">
  22. <view class="order-title-n">
  23. <view class="order-title-name">收货人:{{order.userInfo.shouHuoRen}}</view>
  24. <view class="order-title-phone">手机号:{{order.userInfo.mobile}}</view>
  25. </view>
  26. <view class="order-title-t first">
  27. <view class="order-title-num">订单编号:{{ order.shopOrderNo }}</view>
  28. <view class="order-title-tip">结算状态:{{ order.payStatus | payStatusType }}</view>
  29. </view>
  30. <view class="order-title-t">
  31. <view class="order-title-num">下单时间:{{ order.orderTime }}</view>
  32. <view class="order-title-tip">发货状态:<text class="status">{{ order.sendOutStatus | sendOutStatusType }}</text></view>
  33. </view>
  34. </view>
  35. <view class="order-product">
  36. <view class="goods-pros-t clearfix" v-for="(pros,prosIndex) in order.orderProductList" :key="prosIndex">
  37. <view class="pros-product">
  38. <view class="pros-product-img">
  39. <image :src="pros.productImage" mode=""></image>
  40. </view>
  41. <view class="pros-product-msg">
  42. <view class="name">{{ pros.name }}</view>
  43. <view class="unit">规格:{{ pros.productUnit }}</view>
  44. <view class="price">
  45. <view class="red">¥{{ pros.price | NumFormat}}</view>
  46. <view class="count"><text class="small">X</text> {{ pros.num }}</view>
  47. </view>
  48. <view class="number">
  49. <text>已发货:{{ pros.shipmentsNum }}</text>
  50. <text v-if="order.returnedNum!=null&&order.returnedNum!=0">已退货:{{ pros.actualCancelNum }}</text>
  51. <text v-if="order.returnedNum!=null&&order.returnedNum!=0">取消:{{ pros.actualCancelNum }}</text>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="pros-product-uss">合计:<text class="text">¥{{ pros.price | NumFormat}}</text></view>
  56. </view>
  57. </view>
  58. <!-- 底部button -->
  59. <order-button ref="orderButton"
  60. :status="order.sendOutStatus"
  61. :orderInfo ="order"
  62. @buttonConfirm="handButtonConfirm">
  63. </order-button>
  64. </view>
  65. <!--加载loadding-->
  66. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  67. <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
  68. <!--加载loadding-->
  69. </view>
  70. </view>
  71. </view>
  72. <!--右抽屉-->
  73. <tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
  74. <view class="d-container clearfix" :style="{paddingTop:20+'px'}">
  75. <view class="d-label">订单编号:</view>
  76. <view class="d-input">
  77. <input class="input" type="text" value="" v-model="listQuery.shopOrderNo" placeholder="输入订单编号"/>
  78. </view>
  79. <view class="d-label">收货人姓名:</view>
  80. <view class="d-input">
  81. <input class="input" type="text" value="" v-model="listQuery.name" placeholder="输入收货人姓名"/>
  82. </view>
  83. <view class="d-label">结算状态:</view>
  84. <view class="d-input">
  85. <picker @change="bindPickerChange($event)" :value="index" :range="StatusArray" range-key="name">
  86. <input class="input" type="text" disabled="false" v-model="showSendOutStatus" value="" placeholder="请选择结算状态"/>
  87. <text class="iconfont icon-xiangyou"></text>
  88. </picker>
  89. </view>
  90. <view class="d-label">发货状态:</view>
  91. <view class="d-input">
  92. <picker @change="bindPickerChange1($event)" :value="index" :range="PayArray" range-key="name">
  93. <input class="input" type="text" disabled="false" v-model="showpayStatus" value="" placeholder="请选择发货状态"/>
  94. <text class="iconfont icon-xiangyou"></text>
  95. </picker>
  96. </view>
  97. <view class="d-input btn">
  98. <view class="d-btn comfrim" @click="handSearchList">确定</view>
  99. <view class="d-btn clear" @click="handSearchClear">重置</view>
  100. </view>
  101. </view>
  102. </tui-drawer>
  103. <!-- 分享弹窗 -->
  104. <share-alert :shopOrderID="btnoRderID"
  105. v-if="isShareModal"
  106. @shareConfirm ='onShareAppMessage'>
  107. </share-alert>
  108. </view>
  109. </template>
  110. <script>
  111. import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
  112. import tuiNomore from "@/components/tui-components/nomore/nomore"
  113. import orderButton from '@/components/cm-module/orderDetails/supplierListButton'//底部按钮
  114. import shareAlert from '@/components/cm-module/modelAlert/supplierShareAlert' //分享弹窗
  115. import modalLayer from "@/components/modal-layer"
  116. import empty from "@/components/empty";
  117. import { mapState,mapMutations } from 'vuex'
  118. const defaultListQuery = {
  119. shopID:'',
  120. pageNum: 1,
  121. pageSize: 10,
  122. sendOutStatus: '',//发货状态
  123. payStatus:'',//结算状态
  124. shopOrderNo:'',//订单编号
  125. name: '',//买家名称
  126. };
  127. export default{
  128. components: {
  129. tuiLoadmore,
  130. tuiNomore,
  131. empty,
  132. shareAlert,
  133. orderButton
  134. },
  135. data() {
  136. return{
  137. StatusArray:[
  138. {name:'所有',value:'0'},
  139. {name:'待发货',value:'1'},
  140. {name:'部分发货',value:'2'},
  141. {name:'已发货',value:'3'},
  142. ],
  143. PayArray:[
  144. {name:'所有',value:'0'},
  145. {name:'待结算',value:'1'},
  146. {name:'部分结算',value:'2'},
  147. {name:'已结算',value:'3'},
  148. ],
  149. shopID:0,
  150. showSendOutStatus:'',
  151. showpayStatus:'',
  152. CustomBar:this.CustomBar,// 顶部导航栏高度
  153. userID:0,
  154. openId:'',
  155. isShareModal:false,
  156. listQuery:Object.assign({}, defaultListQuery),
  157. orderData: [],
  158. btnoRderID: 0, //点击按钮传入的的订单ID
  159. scrollTop: 0,
  160. deteleType:'',
  161. skeletonShow: true,
  162. isEmpty: false,
  163. isDelete:false,
  164. isModalLayer: false,
  165. loadding: false,
  166. pullUpOn: true,
  167. pullFlag: true,
  168. hasNextPage: false,
  169. navbarHeight:'',
  170. nomoreText: '上拉显示更多',
  171. contentModalText:'',//操作文字提示语句
  172. modal:false,
  173. rightDrawer: false,
  174. OperationType:'',//操作类型
  175. }
  176. },
  177. onLoad(){
  178. },
  179. filters: {
  180. sendOutStatusType(value) {
  181. if (value === null) {
  182. return '未发货';
  183. } else if(value === '1') {
  184. return '待发货';
  185. } else if(value === '2') {
  186. return '部分发货';
  187. } else{
  188. return '已发货';
  189. }
  190. },
  191. payStatusType(value) {
  192. if (value === '1') {
  193. return '待结算';
  194. } else if (value === '2') {
  195. return '部分结算';
  196. } else {
  197. return '已结算';
  198. }
  199. },
  200. NumFormat:function(text) {//处理金额
  201. return Number(text).toFixed(2);
  202. },
  203. },
  204. computed: {
  205. ...mapState(['hasLogin','userInfo'])
  206. },
  207. methods:{
  208. getOrderDatainit(index){
  209. this.listQuery.pageNum = 1
  210. this.ShopService.GetSupplierMyOrderList(this.listQuery).then(response =>{
  211. let data = response.data
  212. this.hasNextPage = data.hasNextPage
  213. if(data.results && data.results.length > 0){
  214. this.isEmpty = false;
  215. this.orderData = [...data.results];
  216. if(hasNextPage){
  217. this.pullUpOn = false
  218. this.nomoreText = '上拉显示更多'
  219. }else{
  220. if(this.orderData.length < 5){
  221. this.pullUpOn = true
  222. }else{
  223. this.pullUpOn = false
  224. this.nomoreText = '已至底部'
  225. }
  226. }
  227. }else{
  228. this.isEmpty = true
  229. }
  230. }).catch(error =>{
  231. this.$util.msg(error.msg,2000);
  232. })
  233. },
  234. getOnReachBottomData(index){//上拉加载
  235. this.listQuery.pageNum += 1
  236. this.ShopService.GetSupplierMyOrderList(this.listQuery).then(response =>{
  237. let data = response.data
  238. this.hasNextPage = data.hasNextPage
  239. this.orderData = this.orderData.concat(data.results)
  240. this.pullFlag = false;// 防上拉暴滑
  241. setTimeout(()=>{this.pullFlag = true;},500)
  242. if(this.total > this.orderData.length){
  243. this.pullUpOn = false
  244. this.nomoreText = '上拉显示更多'
  245. }else{
  246. this.loadding = false
  247. this.pullUpOn = false
  248. this.nomoreText = '已至底部'
  249. }
  250. })
  251. },
  252. detail(shopOrderId) {//订单详情跳转
  253. this.isModalLayer = true;
  254. this.$api.navigateTo(`/supplier/pages/order/order-details?shopOrderId=${shopOrderId}`)
  255. },
  256. handButtonConfirm(data) {//获取点击
  257. console.log(data)
  258. this.btnoRderID = data.orderInfo.shopOrderID
  259. console.log(this.btnoRderID )
  260. this.OperationType = data.type
  261. this.handShowAlert(data)
  262. },
  263. handShowAlert(data){//判断点击的按钮类型并执行...
  264. switch(data.type){
  265. case 'record':
  266. this.$api.navigateTo('/supplier/pages/deliver/deliver-record?shopOrderId='+this.btnoRderID)
  267. break
  268. case 'deliver':
  269. this.$api.navigateTo('/supplier/pages/deliver/deliver-goods?shopOrderId='+this.btnoRderID)
  270. break
  271. }
  272. },
  273. rDrawer() {//弹出抽屉
  274. this.rightDrawer = true;
  275. },
  276. closeDrawer(e) {//关闭抽屉
  277. this.leftDrawer = false;
  278. this.rightDrawer = false;
  279. },
  280. bindPickerChange: function(e) {//选择结算状态筛选
  281. this.showSendOutStatus = this.StatusArray[e.target.value].name
  282. this.listQuery.sendOutStatus = this.StatusArray[e.target.value].value
  283. },
  284. bindPickerChange1: function(e) {//选择发货状态筛选
  285. this.showpayStatus = this.PayArray[e.target.value].name
  286. this.listQuery.payStatus = this.PayArray[e.target.value].value
  287. },
  288. handSearchList(){//搜索
  289. this.getOrderDatainit()
  290. this.leftDrawer = false;
  291. this.rightDrawer = false;
  292. },
  293. handSearchClear(){//重置搜索条件
  294. this.listQuery = Object.assign({}, defaultListQuery)
  295. this.listQuery.shopID = this.shopID
  296. this.showSendOutStatus='';
  297. this.showpayStatus='';
  298. this.listQuery.shopOrderNo='';
  299. this.listQuery.name='';
  300. },
  301. },
  302. onShareAppMessage(res){//分享转发
  303. this.isShareModal = false
  304. if (res.from === 'button') {
  305. // 来自页面内转发按钮
  306. }
  307. return {
  308. title: '您有订单待处理,请点击查看~',
  309. path: `/supplier/pages/login/share-info?authority=3&shopOrderId=${this.btnoRderID}`,
  310. imageUrl:'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
  311. }
  312. },
  313. onReachBottom() {
  314. if(this.hasNextPage){
  315. this.loadding = true
  316. this.pullUpOn = true
  317. this.getOnReachBottomData()
  318. }
  319. },
  320. onPullDownRefresh() {
  321. setTimeout(() => {
  322. this.listQuery.pageNum = 1
  323. this.listQuery.payStatus=''
  324. this.listQuery.showSendOutStatus=''
  325. this.getOrderDatainit()
  326. uni.stopPullDownRefresh()
  327. }, 200)
  328. },
  329. onShow(){
  330. this.$api.getComStorage('userInfo').then((resolve) =>{
  331. this.listQuery.shopID = this.shopID = resolve.shopID
  332. this.getOrderDatainit()
  333. })
  334. }
  335. }
  336. </script>
  337. <style lang="scss">
  338. @import "@/uni.scss";
  339. page{
  340. background:#F7F7F7;
  341. }
  342. .d-container {
  343. width: 560rpx;
  344. padding: 80rpx 30rpx;
  345. .d-title{
  346. width: 100%;
  347. height:80rpx;
  348. line-height: 80rpx;
  349. text-align: center;
  350. color: #4688fa;
  351. font-size: $font-size-32;
  352. float: left;
  353. }
  354. .d-time{
  355. width: 100%;
  356. height: 70rpx;
  357. float: left;
  358. box-sizing: border-box;
  359. padding: 0 10rpx;
  360. border: 1px solid rgba(0,0,0,0.2);
  361. border-radius: 4rpx;
  362. margin-bottom: 30rpx;
  363. .iconfont{
  364. width:70rpx;
  365. height: 60rpx;
  366. display: block;
  367. float: left;
  368. font-size: 50rpx;
  369. color: #666666;
  370. line-height: 70rpx;
  371. text-align: left;
  372. }
  373. .input{
  374. width: 220rpx;
  375. height: 70rpx;
  376. line-height: 70rpx;
  377. float: left;
  378. box-sizing: border-box;
  379. font-size: $font-size-24;
  380. color: #333333;
  381. padding: 0 10rpx;
  382. }
  383. }
  384. .d-label{
  385. width: 100%;
  386. height: 44rpx;
  387. line-height: 44rpx;
  388. text-align: left;
  389. color: #666666;
  390. font-size: $font-size-26;
  391. float: left;
  392. }
  393. .d-input{
  394. width: 100%;
  395. height: 70rpx;
  396. float: left;
  397. box-sizing: border-box;
  398. padding: 0 10rpx;
  399. border: 1px solid rgba(0,0,0,0.2);
  400. border-radius: 4rpx;
  401. margin-bottom: 30rpx;
  402. position: relative;
  403. &.btn{
  404. border: none;
  405. margin-top: 40rpx;
  406. }
  407. .input{
  408. width: 100%;
  409. height: 70rpx;
  410. line-height: 70rpx;
  411. float: left;
  412. box-sizing: border-box;
  413. font-size: $font-size-24;
  414. color: #333333;
  415. padding: 0 10rpx;
  416. padding-right: 68rpx;
  417. }
  418. .iconfont{
  419. width: 50rpx;
  420. height: 68rpx;
  421. display: block;
  422. line-height: 68rpx;
  423. text-align: center;
  424. font-size: 30rpx;
  425. color: #999999;
  426. position: absolute;
  427. right: 0;
  428. top: 0;
  429. }
  430. .d-btn{
  431. width: 210rpx;
  432. height: 84rpx;
  433. border-radius: 42rpx;
  434. background: $btn-confirm;
  435. line-height: 84rpx;
  436. text-align: center;
  437. font-size: $font-size-26;
  438. color: #FFFFFF;
  439. float: right;
  440. &.comfrim{
  441. background: $btn-confirm;
  442. margin-left: 20rpx;
  443. }
  444. &.clear{
  445. background: #e1e1e1;
  446. }
  447. }
  448. }
  449. }
  450. .tui-header-box {
  451. width: 100%;
  452. height: 84rpx;
  453. box-sizing: border-box;
  454. padding:10rpx 24rpx;
  455. display: flex;
  456. align-items: center;
  457. position: fixed;
  458. top: 0;
  459. left: 0;
  460. z-index: 999;
  461. background-color: #FFFFFF;
  462. .tui-header-search{
  463. width: 100%;
  464. height: 100%;
  465. background: #F7F7F7;
  466. border-radius: 32rpx;
  467. position: relative;
  468. .inner{
  469. width: 210rpx;
  470. margin: 0 auto;
  471. .icon-sousuo{
  472. width: 64rpx;
  473. height: 64rpx;
  474. line-height: 64rpx;
  475. text-align: center;
  476. display: block;
  477. font-size: $font-size-38;
  478. float: left;
  479. color: #999999;
  480. }
  481. .input{
  482. height: 64rpx;
  483. float: left;
  484. line-height: 64rpx;
  485. color: #999999;
  486. font-size: $font-size-24;
  487. }
  488. }
  489. }
  490. }
  491. .tui-header {
  492. width: 100%;
  493. font-size: 16px;
  494. font-weight: 500;
  495. height: 32px;
  496. display: flex;
  497. align-items: center;
  498. justify-content: center;
  499. position: relative;
  500. padding: 0 40rpx;
  501. }
  502. .user-section{
  503. width: 100%;
  504. padding-top: 94rpx;
  505. }
  506. .tui-order-content{
  507. width: 100%;
  508. height: auto;
  509. }
  510. .tui-order-list {
  511. width: 100%;
  512. position: relative;
  513. }
  514. .tui-order-item {
  515. display: flex;
  516. flex-direction: column;
  517. width: 100%;
  518. padding:20rpx 24rpx 0 24rpx;
  519. background: #fff;
  520. border-bottom: 20rpx solid #F7F7F7;
  521. box-sizing: border-box;
  522. }
  523. .order-title{
  524. width: 100%;
  525. height: auto;
  526. .order-title-n{
  527. width: 100%;
  528. height: 70rpx;
  529. float: left;
  530. font-size: $font-size-28;
  531. line-height: 70rpx;
  532. border-bottom: 1px solid #e1e1e1;
  533. .order-title-name{
  534. float: left;
  535. text-align: left;
  536. color: $text-color;
  537. }
  538. .order-title-phone{
  539. float: right;
  540. text-align: right;
  541. font-size: $font-size-28;
  542. color: $text-color;
  543. }
  544. }
  545. .order-title-t{
  546. width: 100%;
  547. height: 50rpx;
  548. float: left;
  549. font-size: $font-size-28;
  550. line-height: 50rpx;
  551. &.first{
  552. padding-top: 20rpx;
  553. }
  554. .order-title-num{
  555. float: left;
  556. text-align: left;
  557. color: #666666;
  558. }
  559. .order-title-tip{
  560. float: right;
  561. text-align: right;
  562. font-size: $font-size-28;
  563. color: #666666;
  564. .status{
  565. color: $color-system;
  566. }
  567. }
  568. }
  569. .order-title-b{
  570. width: 100%;
  571. height: 40rpx;
  572. float: left;
  573. margin-top: 8rpx;
  574. font-size: $font-size-28;
  575. line-height: 40rpx;
  576. color: #999999;
  577. text-align: left;
  578. }
  579. }
  580. .order-product{
  581. width: 100%;
  582. height: auto;
  583. float: left;
  584. margin-top: 15rpx;
  585. .goods-pros-t{
  586. width: 100%;
  587. height: auto;
  588. padding: 15rpx 0;
  589. border-bottom: 1px solid #e1e1e1;
  590. .pros-product{
  591. width: 100%;
  592. height: 184rpx;
  593. float: left;
  594. .pros-product-img{
  595. width: 182rpx;
  596. height: 182rpx;
  597. border:1px solid #e1e1e1;
  598. border-radius: 6rpx;
  599. float: left;
  600. margin-right: 17rpx;
  601. image{
  602. width: 182rpx;
  603. height: 182rpx;
  604. display: block;
  605. border-radius: 6rpx;
  606. }
  607. }
  608. .pros-product-msg{
  609. width: 500rpx;
  610. height: 184rpx;
  611. float: left;
  612. .name{
  613. width: 100%;
  614. height: auto;
  615. float: left;
  616. font-size: $font-size-28;
  617. line-height: 38rpx;
  618. color: $text-color;
  619. text-align: left;
  620. white-space: normal;
  621. word-break: break-all;
  622. overflow: hidden;
  623. text-overflow: ellipsis;
  624. display: -webkit-box;
  625. -webkit-box-orient: vertical;
  626. -webkit-line-clamp: 2;
  627. }
  628. .unit{
  629. width: 100%;
  630. float: left;
  631. height: 38rpx;
  632. font-size: $font-size-22;
  633. color: #999999;
  634. line-height: 38rpx;
  635. }
  636. .price{
  637. width: 100%;
  638. float: left;
  639. height: 38rpx;
  640. font-size: $font-size-28;
  641. color: #666666;
  642. line-height: 38rpx;
  643. .red{
  644. color: #f94b4b;
  645. float: left;
  646. font-weight: bold;
  647. }
  648. .count{
  649. float: right;
  650. .small{
  651. font-size: $font-size-20;
  652. }
  653. }
  654. }
  655. .number{
  656. width: 100%;
  657. float: left;
  658. height: 38rpx;
  659. font-size: $font-size-24;
  660. color: #999999;
  661. line-height: 38rpx;
  662. text{
  663. margin-right: 30rpx;
  664. }
  665. }
  666. }
  667. }
  668. .pros-product-uss{
  669. width: 100%;
  670. float: left;
  671. height: 44rpx;
  672. font-size: $font-size-28;
  673. color: #999999;
  674. line-height: 44rpx;
  675. text-align: right;
  676. font-weight: bold;
  677. text{
  678. color: #f94b4b;
  679. margin-left: 10rpx;
  680. }
  681. }
  682. }
  683. }
  684. .order-footer{
  685. width: 100%;
  686. height: 78rpx;
  687. float: left;
  688. border-bottom: 1px solid #EFEFEF;
  689. .order-footer-top{
  690. width: 100%;
  691. height: 34rpx;
  692. line-height: 34rpx;
  693. font-size: $font-size-24;
  694. color: #999999;
  695. text-align: right;
  696. }
  697. .order-footer-bot{
  698. width: 100%;
  699. float: left;
  700. height: 48rpx;
  701. line-height: 48rpx;
  702. font-size: $font-size-28;
  703. color: #999999;
  704. .name{
  705. width: 50%;
  706. float: left;
  707. text-align: left;
  708. }
  709. .money{
  710. width: 50%;
  711. float: right;
  712. text-align: right;
  713. .txt{
  714. color: #FF5000;
  715. }
  716. }
  717. }
  718. }
  719. </style>