BJ_web_developers / dyitoc

Commit 841f35d2b00bdf0b8457f841dadfc70d85a1c77e

Authored by liuqimichale
1 parent b54f2cd4

filter

Inline Side-by-side
Showing 8 changed files with 88 additions and 23 deletions
src/assets/img/sectionsmall.png 0 → 100644
View file @841f35d

1.58 KB
src/assets/img/titlebg.png 0 → 100644
View file @841f35d

2.18 KB
src/assets/img/titletexticon.png 0 → 100644
View file @841f35d

1.5 KB
src/components/titlesection.vue
  View file @841f35d
1 <template> 1 <template>
2 - <div class="title">  
3 - title  
4 - </div> 2 + <div class="title">
  3 + <span>PDA</span>
  4 + </div>
5 </template> 5 </template>
6 6
7 <script> 7 <script>
8 export default { 8 export default {
9 - name: 'titlesection' 9 + name: 'titlesection'
10 } 10 }
11 </script> 11 </script>
12 12
13 <style scoped> 13 <style scoped>
14 - .title{ 14 + .title {
15 height: 30px; 15 height: 30px;
16 line-height: 30px; 16 line-height: 30px;
17 - background: #f0f; 17 + padding-left: 60px;
  18 + background: url("../assets/img/titlebg.png") no-repeat;
  19 + background-size: 100% 100%;
  20 + font-size: 14px;
  21 + font-weight:500;
  22 + color:rgba(255,255,255,1);
  23 +
  24 + }
  25 + .title span{
  26 + position: relative;
  27 + display: inline-block;
  28 + box-sizing: border-box;
  29 + }
  30 + .title span:before{
  31 + content: '';
  32 + position: absolute;
  33 + top:0;
  34 + left: -55px;
  35 + width: 50px;
  36 + height: 30px;
  37 + background: url("../assets/img/titletexticon.png") no-repeat 0 center;
  38 + background-size: 100% 35%;
  39 + }
  40 + .title span:after{
  41 + content: '';
  42 + position: absolute;
  43 + top:0;
  44 + right: -55px;
  45 + width: 50px;
  46 + height: 30px;
  47 + background: url("../assets/img/titletexticon.png") no-repeat 0 center;
  48 + background-size: 100% 35%;
18 } 49 }
19 </style> 50 </style>
src/components/total.vue
  View file @841f35d
1 <template> 1 <template>
2 - <div class="totalwrap">  
3 - 总计：123213  
4 - </div> 2 + <div class="totalwrap">
  3 + 总计：{{initnum}}
  4 + </div>
5 </template> 5 </template>
6 6
7 <script> 7 <script>
  8 +import {formatNum} from '../utils/formatNum'
  9 +
8 export default { 10 export default {
9 - name: 'total' 11 + name: 'total',
  12 + props: {
  13 + totalNum: String
  14 + },
  15 + data() {
  16 + return {
  17 + initnum: formatNum(this.totalNum)
  18 + }
  19 +
  20 + }
10 } 21 }
11 </script> 22 </script>
12 23
13 <style scoped> 24 <style scoped>
14 -.totalwrap{  
15 - height: 40px;  
16 - background: #00f;  
17 -} 25 + .totalwrap {
  26 + height: 40px;
  27 + color: #fff;
  28 + }
18 </style> 29 </style>
src/utils/formatNum.js 0 → 100644
  View file @841f35d
  1 +export function formatNum(str) {
  2 + var newStr = "";
  3 + var count = 0;
  4 + for (var i = str.length - 1; i >= 0; i--) {
  5 + if (count % 3 == 0 && count != 0) {
  6 +
  7 + newStr = str.charAt(i) + "," + newStr;
  8 + } else {
  9 + newStr = str.charAt(i) + newStr;
  10 + }
  11 + count++;
  12 + }
  13 + str = newStr;
  14 + return str;
  15 +
  16 +}
src/views/mainContainer.vue
  View file @841f35d
@@ -2,18 +2,19 @@ @@ -2,18 +2,19 @@
2 <div class="maincontainer"> 2 <div class="maincontainer">
3 <ul class="containerwrap clearfix"> 3 <ul class="containerwrap clearfix">
4 <li> 4 <li>
5 - <pdasection class="heightsmall"></pdasection>  
6 - <div class="heightsmall margin12-0"></div>  
7 - <div class="heightsmall"></div> 5 + <pdasection class="sectionsmall"></pdasection>
  6 +
  7 + <div class="sectionsmall margin12-0"></div>
  8 + <div class="sectionsmall"></div>
8 </li> 9 </li>
9 <li class="margin0-12"> 10 <li class="margin0-12">
10 <div class="heightper-top"></div> 11 <div class="heightper-top"></div>
11 <div class="heightper-bottom"></div> 12 <div class="heightper-bottom"></div>
12 </li> 13 </li>
13 <li> 14 <li>
14 - <div class="heightsmall"></div>  
15 - <div class="heightsmall margin12-0"></div>  
16 - <div class="heightsmall"></div> 15 + <div class="sectionsmall"></div>
  16 + <div class="sectionsmall margin12-0"></div>
  17 + <div class="sectionsmall"></div>
17 </li> 18 </li>
18 </ul> 19 </ul>
19 <loadinggif :showLoading="showLoaddingGif"></loadinggif> 20 <loadinggif :showLoading="showLoaddingGif"></loadinggif>
@@ -58,11 +59,12 @@ export default { @@ -58,11 +59,12 @@ export default {
58 flex: 1; 59 flex: 1;
59 } 60 }
60 61
61 - .heightsmall { 62 + .sectionsmall {
62 flex: 1; 63 flex: 1;
63 - background: #f00;  
64 display: flex; 64 display: flex;
65 flex-direction: column; 65 flex-direction: column;
  66 + background: url("../assets/img/sectionsmall.png") no-repeat;
  67 + background-size: 100% 100%;
66 } 68 }
67 69
68 .containerwrap > li:nth-of-type(2) { 70 .containerwrap > li:nth-of-type(2) {
src/views/pdasection.vue
  View file @841f35d
1 <template> 1 <template>
2 <div> 2 <div>
3 <titlesection></titlesection> 3 <titlesection></titlesection>
4 - <totalsection></totalsection> 4 + <totalsection :totalNum="totalVal"></totalsection>
5 <div class="flexfm"></div> 5 <div class="flexfm"></div>
6 </div> 6 </div>
7 </template> 7 </template>
@@ -17,6 +17,11 @@ export default { @@ -17,6 +17,11 @@ export default {
17 titlesection, 17 titlesection,
18 totalsection 18 totalsection
19 }, 19 },
  20 + data() {
  21 + return {
  22 + totalVal: '1000',
  23 + }
  24 + },
20 created() { 25 created() {
21 this.getList() 26 this.getList()
22 }, 27 },