diff --git a/index.html b/index.html
index 4b26cff..b10fab5 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,8 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
+    <meta name="viewport" content="width=1200">
     <title>监控</title>
   </head>
   <body>
diff --git a/src/components/titlesection.vue b/src/components/titlesection.vue
new file mode 100644
index 0000000..14dc989
--- /dev/null
+++ b/src/components/titlesection.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="title">
+      title
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'titlesection'
+}
+</script>
+
+<style scoped>
+  .title{
+    height: 30px;
+    line-height: 30px;
+    background: #f0f;
+  }
+</style>
diff --git a/src/components/total.vue b/src/components/total.vue
new file mode 100644
index 0000000..e2b7deb
--- /dev/null
+++ b/src/components/total.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="totalwrap">
+      总计：123213
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'total'
+}
+</script>
+
+<style scoped>
+.totalwrap{
+  height: 40px;
+  background: #00f;
+}
+</style>
diff --git a/src/styles/reset.css b/src/styles/reset.css
index f628c2b..a224e0b 100644
--- a/src/styles/reset.css
+++ b/src/styles/reset.css
@@ -90,4 +90,8 @@ table {
 .margin12-0 {
   margin: 12px 0;
 }
+.flexfm{
+  flex: 1;
+  background: #ff0;
+}
 
diff --git a/src/views/mainContainer.vue b/src/views/mainContainer.vue
index 06bc8e9..37edd11 100644
--- a/src/views/mainContainer.vue
+++ b/src/views/mainContainer.vue
@@ -2,7 +2,7 @@
   <div class="maincontainer">
     <ul class="containerwrap clearfix">
       <li>
-        <div class="heightsmall"></div>
+        <pdasection class="heightsmall"></pdasection>
         <div class="heightsmall margin12-0"></div>
         <div class="heightsmall"></div>
       </li>
@@ -22,10 +22,13 @@
 
 <script>
 import loadinggif from '../components/loading'
-
+import pdasection from '../views/pdasection'
 export default {
   name: 'mainContainer',
-  components: {loadinggif},
+  components: {
+    loadinggif,
+    pdasection
+  },
   data() {
     return {
       showLoaddingGif: false
@@ -58,6 +61,8 @@ export default {
   .heightsmall {
     flex: 1;
     background: #f00;
+    display: flex;
+    flex-direction: column;
   }
 
   .containerwrap > li:nth-of-type(2) {
diff --git a/src/views/pdasection.vue b/src/views/pdasection.vue
new file mode 100644
index 0000000..3f6b5dd
--- /dev/null
+++ b/src/views/pdasection.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+      <titlesection></titlesection>
+      <totalsection></totalsection>
+      <div class="flexfm"></div>
+    </div>
+</template>
+
+<script>
+import titlesection from '../components/titlesection'
+import totalsection from '../components/total'
+export default {
+    name: 'pdasection',
+  components: {
+    titlesection,
+    totalsection
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
