123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <!--
- 清单页头部个数组件
- -->
- <template>
- <div id="listHeader">
- <div class="border-main">
- <p class="list-name">项目名称: {{mess.perjectName}}</p>
- <div class="card-view">
- <div class="card" v-for="(i,index) in mess.name" :key="index">
- <p>{{index == 1 ? "已对应" : "全部"}}{{i.key}}</p>
- <p class="num">{{i.num |numFormat}}</p>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- mess: {
- type: Object,
- default: function() {
- return {
- perjectName: "风雅苑",
- name: [
- {
- key: "测试",
- num: 1548514
- },
- {
- key: "测试",
- num: 154852145
- }
- ]
- };
- }
- }
- },
- data() {
- return {};
- },
- methods: {
- },
- filters: {
- numFormat(num) {
- if (num && num != null) {
- num = String(num);
- var left = num.split(".")[0],
- right = num.split(".")[1];
- right = right
- ? right.length >= 2
- ? "." + right.substr(0, 2)
- : "." + right + "0"
- : "";
- var temp = left
- .split("")
- .reverse()
- .join("")
- .match(/(\d{1,3})/g);
- return (
- (Number(num) < 0 ? "-" : "") +
- temp
- .join(",")
- .split("")
- .reverse()
- .join("") +
- right
- );
- } else if (num === 0) {
- // 注意===在这里的使用,如果传入的num为0,if中会将其判定为boolean类型,故而要另外做===判断
- return "0";
- } else {
- return "--";
- }
- }
- }
- };
- </script>
- <style lang="less" scoped>
- #listHeader {
- background-color: #fff;
- // width: calc(100% - 20px);
- // height: 120px;
- // margin: 10px;
- .border-main {
- // width: 100%;
- height: 100%;
- border: 1px solid #ccc;
- border-radius: 5px;
- padding-left: 10px;
- .list-name {
- line-height: 28px;
- font-size: 14px;
- margin-top: 10px;
- }
- .card-view {
- // height: 80px;
- // overflow: hidden;
- .card {
- float: left;
- margin-top: 10px;
- height: 70px;
- width: 200px;
- border: 1px solid #a1a1a1;
- border-radius: 5px;
- background-color: #e4e4e4;
- padding: 10px;
- margin-right: 15px;
- p {
- color: #797979;
- font-size: 13px;
- }
- p.num {
- color: #3d3d3d;
- padding-left: 10px;
- padding-top: 5px;
- font-size: 17px;
- }
- }
- }
- }
- }
- </style>
|