首页堆叠调整

quickapp/src/pages/Home/device.ux

@@ -21,6 +21,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
 }
 .title {
   text-align: center;

quickapp/src/pages/Home/index.ux

@@ -1,13 +1,19 @@
 <import name="my-tabbar" src="./tabbar"></import>
 <import name="device" src="./device"></import>
-<import name="key" src="./device"></import>
+<import name="key" src="./key"></import>
 <import name="message" src="./device"></import>
 <import name="settings" src="./device"></import>
 <template>
   <div class="wrapper">
-    <div>
-      <component is="{{ tabbarData[currentPageIndex].compName }}"></component>
-    </div>
+    <stack class="stack">
+      <image class="deer-background" src="/assets/images/home-background.png" />
+      <!-- <text
+      >stack容器排列方式为层叠，每个子组件按照先后顺序依次堆叠，覆盖前面的组件</text
+    > -->
+      <div class="container">
+        <component is="{{ tabbarData[currentPageIndex].compName }}"></component>
+      </div>
+    </stack>
     <my-tabbar tabbar="{{tabbarData}}" onemit-evt="emitEvt"></my-tabbar>
   </div>
 </template>
@@ -70,8 +76,22 @@ export default {
 .wrapper {
   .flex-box-mixins(column, center, center);
 
-  .container {
-    height: 100%;
+  .stack {
+    /* width: 100%; */
+    flex-grow: 1;
+    align-items: flex-end;
+
+    .container {
+      width: 100%;
+      height: 100%;
+    }
+
+    .deer-background {
+      /* position: fixed; */
+      width: 100%;
+      margin-bottom: 20px;
+      /* bottom: 200px; */
+    }
   }
 }
 </style>

quickapp/src/pages/Home/key.ux

@@ -0,0 +1,30 @@
+<template>
+  <div class="wrapper">
+    <text class="title">{{ title }}</text>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    title: "Hello World. Quickapp Component 'Key'."
+  },
+  
+  props: [],
+  
+  onInit() {}
+}
+</script>
+
+<style>
+.wrapper {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.title {
+  text-align: center;
+  color: #212121;
+}
+</style>

quickapp/src/pages/Home/tabbar.ux

@@ -1,16 +1,12 @@
 <template>
-  <div class="{{tabbar.length !== 0 ? 'wrap' : ''}}">
-    <slot content="content"></slot>
-    <div class="tab-bar" if="{{tabbar.length !== 0}}">
-      <div class="shadow"></div>
-      <div class="tab tab-recommend">
-        <div for="{{tab in tabbar}}">
-          <image
-            @click="changePage($idx)"
-            src="{{tab.active?tab.selectedIconPath:tab.iconPath}}"
-            if="{{tab.iconPath}}"
-          ></image>
-        </div>
+  <div if="{{tabbar.length !== 0 }}" class="tabbar">
+    <div class="shadow"></div>
+    <div class="tab">
+      <div for="{{tab in tabbar}}">
+        <image
+          @click="changePage($idx)"
+          src="{{tab.active?tab.selectedIconPath:tab.iconPath}}"
+        ></image>
       </div>
     </div>
   </div>
@@ -26,36 +22,26 @@ export default {
     this.$emit('emitEvt', {
       idx
     });
-    // router.push({
-    //   uri: e.target.dataset.path,
-    //   params: {
-    //     ___PARAM_LAUNCH_FLAG___: "clearTask"
-    //   }
-    // });
   }
 };
 </script>
 
 
 <style lang="less">
-.wrap {
-  padding-bottom: 108px;
-}
-
-.tab-bar {
+.tabbar {
   .shadow {
     position: fixed;
     bottom: 108px;
-    height: 9px;
+    height: 12px;
     width: 100%;
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
   }
 
   .tab {
     background-color: rgba(255, 255, 255, 0.98);
-    position: fixed;
-    bottom: 0;
-    flex-direction: row;
+    /* position: fixed; */
+    /* bottom: 0; */
+    /* flex-direction: row; */
     height: 108px;
     width: 100%;
     justify-content: space-around;
@@ -76,7 +62,7 @@ export default {
     }
   }
 
-  .selected {
+  /* .selected {
     color: #0091ff;
   }
 
@@ -86,6 +72,6 @@ export default {
 
   .tab-mine {
     right: 0;
-  }
+  } */
 }
 </style>