content告诉

packages/components/HContent/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-  import { detectOS } from '../../common/utils/index'
+import { detectOS } from '../../common/utils/index'
 export default {
   name: 'HContent',
   props: {
@@ -23,12 +23,14 @@ export default {
       default: true,
     },
   },
-  mounted () {
-    if (this.calContent) {
-      this.contentHeight()
+  data () {
+    return {
+      fontSize: Number(window.document.documentElement.style.fontSize.replace('px', '')),
+      winHeight: window.innerHeight,
+      winWidth: window.innerWidth,
     }
   },
-  activated () {
+  mounted () {
     if (this.calContent) {
       this.contentHeight()
     }
@@ -48,40 +50,40 @@ export default {
       return $el
     },
     getNextElementHeight () {
-      //let nextElement = this.getHeader()
-      let headerElement = this.$el.previousElementSibling
-      let height = 0
-      if (headerElement) {
-        height = window.getComputedStyle(headerElement).height
-        if (height) {
-          height = Number(height.replace('px', ''))
+      let vm = this
+      let nextElement = this.$el.nextElementSibling
+      let nextHeight = 0
+      let paddingHeight = 0
+      if (nextElement) {
+        nextHeight = window.getComputedStyle(nextElement).height
+        if (nextHeight) {
+          nextHeight = Number(nextHeight.replace('px', ''))
+        }
+        if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
+          paddingHeight = vm.fontSize * 0.68
+        } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
+          paddingHeight = vm.fontSize * 0.68
         }
       }
-      return height
+      return nextHeight + paddingHeight
     },
     contentHeight () {
+      let vm = this
       const headerEl = this.$el.previousElementSibling
       const nextHeight = this.getNextElementHeight()
-       const winHeight = window.innerHeight
-         const winWidth = window.innerWidth
-         let paddingHeight = 0
+      let headerHeight = 0
       if (headerEl) {
-           if (detectOS() === 'ios' && winWidth === 375 && winHeight === 812) {
-             paddingHeight = 40
-           } else if (detectOS() === 'ios' && winWidth === 414 && winHeight === 896) {
-             paddingHeight = 44
+        headerHeight = vm.fontSize * 0.88
+        if (detectOS() === 'ios' && vm.winWidth === 375 && vm.winHeight === 812) {
+          headerHeight = headerHeight + 0.8 * vm.fontSize
+        } else if (detectOS() === 'ios' && vm.winWidth === 414 && vm.winHeight === 896) {
+          headerHeight = headerHeight + 0.8 * vm.fontSize
         } else if (detectOS() === 'ios') {
-             paddingHeight = 20
-           } else {
-             paddingHeight = 0
+          headerHeight = headerHeight + 0.4 * vm.fontSize
         }
       }
       let content = this.$el
-      /*let offsetTop = content.offsetTop
-      if (offsetTop >= window.innerHeight) {
-        offsetTop = 0
-      }*/
-      content.style.height = (window.innerHeight - nextHeight - paddingHeight) + 'px'
+      content.style.height = (window.innerHeight - nextHeight - headerHeight) + 'px'
     },
   },
 }

src/pages/home.vue

@@ -6,7 +6,6 @@
       </div>
       <div slot="center">小易</div>
     </h-header>
-
     <h-content id="home-content">
       <div v-for="item in message" class="message">
         <p v-show="false" class="message-time" v-text="item.time"/>
@@ -23,17 +22,8 @@
         </div>
       </div>
     </h-content>
-    <bottom-tab class="bar bar-footer bar-light">
-      <label class="item item-input footer-input">
-        <textarea
-          v-auto-size ref="textarea" v-model="robot_message.question" placeholder="请输入"
-          rows="1"/>
-      </label>
-      <div class="footer-btn-wrap" @click="sendMsg()">
-        <div class="send-button">
-          <p>发送</p>
-        </div>
-      </div>
+    <bottom-tab>
+
     </bottom-tab>
   </h-view>
 </template>
@@ -155,7 +145,6 @@ export default {
     .content {
       background-color: #eeeeee;
       //border: 1px solid red;
-      padding-bottom: 120px;
       .message {
         position: relative;
       }