filter

liuqimichale
1 parent b54f2cd4
Showing 8 changed files with 88 additions and 23 deletions
src/assets/img/sectionsmall.png
src/assets/img/titlebg.png
src/assets/img/titletexticon.png
src/components/titlesection.vue
src/components/total.vue
src/utils/formatNum.js
src/views/mainContainer.vue
src/views/pdasection.vue
 <template>
-    <div class="title">
-      title
-    </div>
+  <div class="title">
+    <span>PDA</span>
+  </div>
 </template>
  
 <script>
 export default {
-    name: 'titlesection'
+  name: 'titlesection'
 }
 </script>
  
 <style scoped>
-  .title{
+  .title {
     height: 30px;
     line-height: 30px;
-    background: #f0f;
+    padding-left: 60px;
+    background: url("../assets/img/titlebg.png") no-repeat;
+    background-size: 100% 100%;
+    font-size: 14px;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+
+  }
+  .title span{
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+  }
+  .title span:before{
+    content: '';
+    position: absolute;
+    top:0;
+    left: -55px;
+    width: 50px;
+    height: 30px;
+    background: url("../assets/img/titletexticon.png") no-repeat 0 center;
+    background-size: 100% 35%;
+  }
+  .title span:after{
+    content: '';
+    position: absolute;
+    top:0;
+    right: -55px;
+    width: 50px;
+    height: 30px;
+    background: url("../assets/img/titletexticon.png") no-repeat 0 center;
+    background-size: 100% 35%;
   }
 </style>
 <template>
-    <div class="totalwrap">
-      总计：123213
-    </div>
+  <div class="totalwrap">
+    总计：{{initnum}}
+  </div>
 </template>
  
 <script>
+import {formatNum} from '../utils/formatNum'
+
 export default {
-    name: 'total'
+  name: 'total',
+  props: {
+    totalNum: String
+  },
+  data() {
+    return {
+      initnum: formatNum(this.totalNum)
+    }
+
+  }
 }
 </script>
  
 <style scoped>
-.totalwrap{
-  height: 40px;
-  background: #00f;
-}
+  .totalwrap {
+    height: 40px;
+    color: #fff;
+  }
 </style>
+export function formatNum(str) {
+  var newStr = "";
+  var count = 0;
+  for (var i = str.length - 1; i >= 0; i--) {
+    if (count % 3 == 0 && count != 0) {
+
+      newStr = str.charAt(i) + "," + newStr;
+    } else {
+      newStr = str.charAt(i) + newStr;
+    }
+    count++;
+  }
+  str = newStr;
+  return str;
+
+}
@@ -2,18 +2,19 @@
   <div class="maincontainer">
     <ul class="containerwrap clearfix">
       <li>
-        <pdasection class="heightsmall"></pdasection>
-        <div class="heightsmall margin12-0"></div>
-        <div class="heightsmall"></div>
+        <pdasection class="sectionsmall"></pdasection>
+
+        <div class="sectionsmall margin12-0"></div>
+        <div class="sectionsmall"></div>
       </li>
       <li class="margin0-12">
         <div class="heightper-top"></div>
         <div class="heightper-bottom"></div>
       </li>
       <li>
-        <div class="heightsmall"></div>
-        <div class="heightsmall margin12-0"></div>
-        <div class="heightsmall"></div>
+        <div class="sectionsmall"></div>
+        <div class="sectionsmall margin12-0"></div>
+        <div class="sectionsmall"></div>
       </li>
     </ul>
     <loadinggif :showLoading="showLoaddingGif"></loadinggif>
@@ -58,11 +59,12 @@ export default {
     flex: 1;
   }
  
-  .heightsmall {
+  .sectionsmall {
     flex: 1;
-    background: #f00;
     display: flex;
     flex-direction: column;
+    background: url("../assets/img/sectionsmall.png") no-repeat;
+    background-size: 100% 100%;
   }
  
   .containerwrap > li:nth-of-type(2) {
 <template>
   <div>
     <titlesection></titlesection>
-    <totalsection></totalsection>
+    <totalsection :totalNum="totalVal"></totalsection>
     <div class="flexfm"></div>
   </div>
 </template>
@@ -17,6 +17,11 @@ export default {
     titlesection,
     totalsection
   },
+  data() {
+    return {
+      totalVal: '1000',
+    }
+  },
   created() {
     this.getList()
   },