add AppBar sample

fix some errors

src/components/flutter/AppBar.vue

@@ -1,15 +1,22 @@
 <template>
-  <div id="#appBar">
-
+  <div id="appBar">
+      {{title}}
   </div>
 </template>
 
 <script>
 export default {
-  name: "AppBar"
+  name: "AppBar",
+  props: [
+    'title',
+    'backgroundColor',
+    'textColor',
+  ],
 }
 </script>
 
 <style scoped>
+#appBar {
 
+}
 </style>

src/components/pages/MainAppPage.vue

@@ -4,10 +4,6 @@
     <div id="main">
       <div class="container">
         <div id="mobile" :style="'width:'+display.width * display.scale+'px;height:'+display.height * display.scale+'px'">
-          <span class="material-icons-outlined">360</span>
-          <span class="material-icons-round">home</span>
-          <span class="material-icons-sharp">home</span>
-          <span class="material-icons-two-tone">home</span>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur error ipsum placeat quam? Ad alias
           commodi debitis distinctio doloribus illo necessitatibus neque nesciunt nobis optio quo reprehenderit, sed,
           sequi voluptatum!
@@ -90,7 +86,6 @@ import property from '../elements/PropertyElement';
 import compo from '../elements/ComponentElement';
 import appMenu from '../elements/AppMenuElement';
 
-
 export default {
   name: "MainAppPage",
   components: {page, property, compo, appMenu},
@@ -118,8 +113,10 @@ export default {
       //
       console.log(e.message);
     }
-
-
+  },methods:{
+    getcomponent (x) {
+      return () => import(`../flutter/${component}`);
+    }
   }
 }
 </script>

src/main.js

@@ -7,7 +7,7 @@ import  "script-loader!jquery.nicescroll/dist/jquery.nicescroll.min";
 import  "script-loader!semantic-ui-css/semantic.min";
 /*eslint-enable */
 Vue.config.productionTip = false;
-require('@/assets/js/win_vars.js');
+require('@/assets/js/winVars.js');
 
 
 new Vue({
@@ -17,3 +17,4 @@ new Vue({
     // this.$router.push("/");
   }
 }).$mount("#app");
+