card.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="bg-model-content" :class="textCollection.type==1?'bg-color':'bg-color1'">
  3. <view class="box-pack-between">
  4. <view class="total">
  5. <view class="total-tip">
  6. {{date}}{{textCollection.title}}
  7. </view>
  8. <view class="total-num">
  9. {{ obj.total||0}}
  10. </view>
  11. </view>
  12. <navigator hover-class="none" class="total-more" v-if="textCollection.type==1" url="../data/data">
  13. <view class="flex-y-center">更多数据 <image src="../../static/images/more.png" class="more-icon">
  14. </image>
  15. </view>
  16. </navigator>
  17. </view>
  18. <view class="box-pack-between">
  19. <view class="total-bottom">
  20. <view class="total-bottom-title">
  21. {{textCollection.wx}}
  22. </view>
  23. <view class="total-bottom-price">
  24. {{obj.wx||0}}
  25. </view>
  26. </view>
  27. <view class="total-bottom">
  28. <view class="total-bottom-title">
  29. {{textCollection.ali}}
  30. </view>
  31. <view class="total-bottom-price">
  32. {{obj.zfb||0}}
  33. </view>
  34. </view>
  35. <view class="total-bottom" v-if="textCollection.money">
  36. <view class="total-bottom-title">
  37. {{textCollection.money}}
  38. </view>
  39. <view class="total-bottom-price">
  40. {{obj.cash||0}}
  41. </view>
  42. </view>
  43. <view class="total-bottom" v-if="textCollection.menber">
  44. <view class="total-bottom-title">
  45. {{textCollection.menber}}
  46. </view>
  47. <view class="total-bottom-price">
  48. {{obj.menber||0}}
  49. </view>
  50. </view>
  51. <view class="total-bottom" v-if="textCollection.juhe">
  52. <view class="total-bottom-title">
  53. {{textCollection.juhe}}
  54. </view>
  55. <view class="total-bottom-price">
  56. {{obj.juhe||0}}
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. </template>
  62. <script>
  63. export default {
  64. props: {
  65. obj: {
  66. type: Object,
  67. },
  68. textCollection: {
  69. type: Object,
  70. },
  71. date:{
  72. type:String
  73. }
  74. },
  75. data() {
  76. return {
  77. }
  78. },
  79. }
  80. </script>
  81. <style>
  82. .bg-color{
  83. color: #3387FF;
  84. }
  85. .bg-color1{
  86. color: #333;
  87. }
  88. .bg-model-content {
  89. position: relative;
  90. width: 690rpx;
  91. height: 361rpx;
  92. margin: 0 auto;
  93. padding: 50rpx 30rpx 30rpx 30rpx;
  94. }
  95. .total-tip {
  96. font-size: 24rpx;
  97. font-family: PingFang SC, PingFang SC-Regular;
  98. font-weight: 400;
  99. text-align: left;
  100. color: #a2a2a2;
  101. }
  102. .total-num {
  103. font-size: 64rpx;
  104. font-family: PingFang SC, PingFang SC-Medium;
  105. font-weight: 500;
  106. padding: 20rpx 0 40rpx 0;
  107. }
  108. .total-more {
  109. font-size: 22rpx;
  110. font-weight: 500;
  111. }
  112. .total-more .more-icon {
  113. width: 22rpx;
  114. height: 22rpx;
  115. margin-left: 10rpx;
  116. }
  117. .total-bottom-title {
  118. font-size: 24rpx;
  119. font-family: PingFang SC, PingFang SC-Regular;
  120. font-weight: 400;
  121. text-align: center;
  122. color: #a2a2a2;
  123. margin-bottom: 12rpx;
  124. }
  125. .total-bottom-price {
  126. font-size: 30rpx;
  127. font-family: PingFang SC, PingFang SC-Medium;
  128. font-weight: 500;
  129. text-align: center;
  130. }
  131. </style>