title.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!--
  2. 清单页头部个数组件
  3. -->
  4. <template>
  5. <div id="listHeader">
  6. <div class="border-main">
  7. <p class="list-name">项目名称: {{mess.perjectName}}</p>
  8. <div class="card-view">
  9. <div class="card" v-for="(i,index) in mess.name" :key="index">
  10. <p>{{index == 1 ? "已对应" : "全部"}}{{i.key}}</p>
  11. <p class="num">{{i.num |numFormat}}</p>
  12. </div>
  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 #ccc;
  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. .card {
  100. float: left;
  101. margin-top: 10px;
  102. height: 70px;
  103. width: 200px;
  104. border: 1px solid #a1a1a1;
  105. border-radius: 5px;
  106. background-color: #e4e4e4;
  107. padding: 10px;
  108. margin-right: 15px;
  109. p {
  110. color: #797979;
  111. font-size: 13px;
  112. }
  113. p.num {
  114. color: #3d3d3d;
  115. padding-left: 10px;
  116. padding-top: 5px;
  117. font-size: 17px;
  118. }
  119. }
  120. }
  121. }
  122. }
  123. </style>