Merge remote-tracking branch 'origin/master'

# Conflicts:
#	apps/pages/article/article.vue

 import Layout from './layout';
 import LayoutHeader from './layout-header';
-import LayoutFooter from './layout-footer';
 
 export default [
   Layout,
   LayoutHeader,
-  LayoutFooter,
 ];

-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-  name: 'LayoutFooter'
-};
-</script>

 <template>
-  <div></div>
+  <div class="layout-header">
+    <div class="back flex">
+      <slot name="back">
+        <i class="iconfont icon-back"></i>
+      </slot>
+    </div>
+    <div class="title flex">
+      {{title}}
+    </div>
+    <div class="opts flex">
+      <i class="iconfont icon-back"></i>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'LayoutHeader'
+  name: 'LayoutHeader',
+  props: {
+    title: String
+  }
 };
 </script>
+
+<style lang="scss" scoped>
+.layout-header {
+  width: 100%;
+  height: 45PX;
+  overflow: hidden;
+  display: flex;
+
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .iconfont {
+    width: 70px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .back {
+    width: 150px;
+  }
+
+  .title {
+    flex: 1;
+    justify-content: center;
+    font-size: 30px;
+  }
+
+  .opts {
+    width: 150px;
+    justify-content: flex-end;
+  }
+}
+</style>

 <template>
-  <div></div>
+  <div class="layout">
+    <slot name="header" v-if="hasHeader"></slot>
+    <div class="layout-content">
+      <Scroll ref="scroll" :options="scrollOption" @pulling-up="onPullingUp" @pulling-down="onPullingDown">
+        <slot></slot>
+      </Scroll>
+    </div>
+  </div>
 </template>
 
 <script>
+import {Scroll} from 'cube-ui';
+
 export default {
-  name: 'Layout'
+  name: 'Layout',
+  props: {
+    scrollOption: {
+      type: Object,
+      default() {
+        return {
+          pullDownRefresh: true,
+          observeDOM: false,
+          pullUpLoad: true
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      hasHeader: false,
+    };
+  },
+  mounted() {
+    if (this.$slots.header) {
+      this.hasHeader = true;
+    }
+  },
+  methods: {
+    onPullingUp(evt) {
+      this.$emit('pulling-up', evt);
+    },
+    onPullingDown(evt) {
+      this.$emit('pulling-down', evt);
+    },
+  },
+  components: {Scroll}
 };
 </script>
+
+<style lang="scss" scoped>
+.layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+
+  .layout-content {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>

@@ -11,7 +11,6 @@ import yoho from 'common/yoho';
 import sdk from 'yoho-activity-sdk';
 import 'statics/scss/common.scss';
 import 'statics/font/iconfont.css';
-import 'statics/font/ufofont.css';
 
 const $app = document.getElementById('app');
 

-@font-face {
-  font-family: "ufofont";
-  src: url("ufofont.ttf") format("truetype");
-}
-
-.ufo-font {
-  font-family: "ufofont", "PingFang SC", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
-}

@@ -530,6 +530,13 @@ body {
     font-family: "PingFang SC", "HiraginoSansGB-W3", "SanFranciscoText-Regular", Helvetica, Roboto, "Heiti SC", "黑体", Arial;
     line-height: 1.4;
     scroll-behavior: smooth;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
 }
 
 body {
@@ -588,19 +595,15 @@ ul {
 }
 
 .right {
-    float: right;
+  float: right;
 }
 
 .left {
-    float: right;
-}
-
-.hide {
-    display: none;
+  float: right;
 }
 
 .mr50 {
-    margin-right: 1.25rem;
+  margin-right: 1.25rem;
 }
 
 .ellipsis {
@@ -671,8 +674,7 @@ img[lazy=loaded] {
     pointer-events: none;
 }
 
-
 .cube-toast-icon {
     display: flex;
     align-items: center;
-}
\ No newline at end of file
+}