title.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!--
  2. 清单页头部个数组件
  3. -->
  4. <template>
  5. <div id="listHeader">
  6. <div class="border-main">
  7. <!-- <p class="list-name"><span style="padding-right: 12px;">项目名称</span>{{mess.perjectName}}</p> -->
  8. <div class="card-view">
  9. <span class="card" v-for="(i,index) in mess.name" :key="index">
  10. <span>{{index == 1 ? "已对应" : "全部"}}{{i.key}}</span>
  11. <span class="num">{{i.num |numFormat}}</span>
  12. </span>
  13. </div>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. props: {
  20. mess: {
  21. type: Object,
  22. default: function() {
  23. return {
  24. perjectName: "风雅苑",
  25. name: [
  26. {
  27. key: "测试",
  28. num: 1548514
  29. },
  30. {
  31. key: "测试",
  32. num: 154852145
  33. }
  34. ]
  35. };
  36. }
  37. }
  38. },
  39. data() {
  40. return {};
  41. },
  42. methods: {
  43. },
  44. filters: {
  45. numFormat(num) {
  46. if (num && num != null) {
  47. num = String(num);
  48. var left = num.split(".")[0],
  49. right = num.split(".")[1];
  50. right = right
  51. ? right.length >= 2
  52. ? "." + right.substr(0, 2)
  53. : "." + right + "0"
  54. : "";
  55. var temp = left
  56. .split("")
  57. .reverse()
  58. .join("")
  59. .match(/(\d{1,3})/g);
  60. return (
  61. (Number(num) < 0 ? "-" : "") +
  62. temp
  63. .join(",")
  64. .split("")
  65. .reverse()
  66. .join("") +
  67. right
  68. );
  69. } else if (num === 0) {
  70. // 注意===在这里的使用,如果传入的num为0,if中会将其判定为boolean类型,故而要另外做===判断
  71. return "0";
  72. } else {
  73. return "--";
  74. }
  75. }
  76. }
  77. };
  78. </script>
  79. <style lang="less" scoped>
  80. #listHeader {
  81. background-color: #fff;
  82. // width: calc(100% - 20px);
  83. // height: 120px;
  84. // margin: 10px;
  85. .border-main {
  86. // width: 100%;
  87. height: 100%;
  88. border: 1px solid #dfe6ec;
  89. // border-radius: 5px;
  90. padding-left: 10px;
  91. .list-name {
  92. line-height: 28px;
  93. font-size: 14px;
  94. margin-top: 10px;
  95. }
  96. .card-view {
  97. // height: 80px;
  98. // overflow: hidden;
  99. display: flex;
  100. margin-top: 10px;
  101. background-color: #e4e4e4;
  102. margin-right: 10px;
  103. .card {
  104. padding: 10px 0 10px 20px;
  105. width: 140px;
  106. text-align: left;
  107. span {
  108. color: #797979;
  109. font-size: 13px;
  110. }
  111. span.num {
  112. color: #3d3d3d;
  113. font-size: 17px;
  114. padding-left: 8px;
  115. }
  116. }
  117. }
  118. }
  119. }
  120. </style>