add article detail

+<template>
+  <div>
+    <ArticleBar></ArticleBar>
+    <ArticleFooter></ArticleFooter>
+  </div>
+</template>
+
+<script>
+
+import ArticleBar from './components2/article-bar';
+import ArticleFooter from './components2/article-footer';
+
+export default {
+  name: 'ArticleDetail',
+  components: {
+    ArticleBar,
+    ArticleFooter
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

@@ -12,6 +12,7 @@
       <div class="share">
         <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onCommentClick"></WidgetIconBtn>
         <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
+        <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onFavClick"></WidgetIconBtn>
       </div>
     </div>
   </div>

+<template>
+  <div class="bar-wrapper">
+    <div class="title">资讯详情</div>
+
+    <div class="close" @click="close">
+      <i class="iconfont icon-close icon"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleBar',
+  methods: {
+    close() {
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.bar-wrapper {
+  width: 100%;
+  height: 88px;
+  position: relative;
+  background-color: white;
+}
+
+.title {
+  font-size: 32px;
+  color: #444;
+  line-height: 88px;
+  text-align: center;
+}
+
+.close {
+  color: #444;
+  position: absolute;
+  top: 20px;
+  right: 40px;
+}
+
+.icon {
+  font-size: 50px;
+}
+
+</style>

+<template>
+  <div class="article-footer-wrapper">
+    <div class="tool-bar">
+      <WidgetIconBtn class="item" type="msg" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="fav" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+      <WidgetIconBtn class="item" type="star" text="100" :option="option" @click="onClick"></WidgetIconBtn>
+    </div>
+    <div class="close">收起</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleFooter',
+  data() {
+    return {
+      option: {
+        eventName: 'click'
+      }
+    };
+  },
+  methods: {
+    onClick() {
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.article-footer-wrapper {
+  display: flex;
+  height: 100px;
+}
+
+.tool-bar {
+  flex: 1;
+}
+
+.close {
+  width: 200px;
+  color: white;
+  font-size: 32px;
+  line-height: 100px;
+  background-color: #d0021b;
+  text-align: center;
+}
+
+</style>

@@ -3,5 +3,5 @@ export default [{
   path: '/mapp/showorder/:id',
   name: 'showorder',
 
-  component: () => import(/* webpackChunkName: "order" */ './order')
+  component: () => import(/* webpackChunkName: "order" */ './article-detail')
 }];