title 总计简单封装

liuqimichale
1 parent 7e22e0a3
Showing 6 changed files with 74 additions and 4 deletions
index.html
src/components/titlesection.vue
src/components/total.vue
src/styles/reset.css
src/views/mainContainer.vue
src/views/pdasection.vue
@@ -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>
+<template>
+    <div class="title">
+      title
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'titlesection'
+}
+</script>
+
+<style scoped>
+  .title{
+    height: 30px;
+    line-height: 30px;
+    background: #f0f;
+  }
+</style>
+<template>
+    <div class="totalwrap">
+      总计：123213
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'total'
+}
+</script>
+
+<style scoped>
+.totalwrap{
+  height: 40px;
+  background: #00f;
+}
+</style>
@@ -90,4 +90,8 @@ table {
 .margin12-0 {
   margin: 12px 0;
 }
+.flexfm{
+  flex: 1;
+  background: #ff0;
+}
@@ -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) {
+<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>