帮助中心详情信息适配手机

components/mobile/help/HelpFooter.vue

@@ -0,0 +1,27 @@
+<template>
+  <footer>
+      <div class=" text-center">
+        <p>
+          &copy; 2016 深圳市优软科技有限公司
+        </p>
+      </div>
+  </footer>
+</template>
+<script>
+  export default{
+    name: 'HelpFooter'
+  }
+</script>
+<style scoped>
+footer{
+  position: fixed;
+  bottom: 0;
+  background: #fff;
+  height: 40px;
+  line-height: 40px;
+}
+footer p{
+  font-size: 14px;
+  color: #000;
+}
+</style>

components/mobile/help/HelpHeader.vue

@@ -0,0 +1,39 @@
+<template>
+  <nav id="nav" class="navbar navbar-default">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <a class="navbar-brand pull-left" href="/" style="color: #fff; font-size: 16px;">返回首页</a>
+      </div>
+    </div>
+  </nav>
+</template>
+<script>
+  export default {
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/mobileCommon';
+  /* nav */
+  #nav {
+    background-color: #474443;
+    border-color: #474443;
+  }
+  .navbar {
+    margin-bottom: 0;
+    min-height: 40px;
+  }
+  .navbar-toggle {
+    padding: 4px 5px;
+  }
+  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
+    border-color: #666666;
+  }
+  .navbar-default .navbar-nav>li>a {
+    color: #dddddd;
+  }
+  .navbar-brand {
+    padding: 10px 15px;
+    height: 40px;
+  }
+
+</style>

components/mobile/help/index.js

@@ -0,0 +1,4 @@
+import HelpHeader from './HelpHeader.vue'
+import HelpFooter from './HelpFooter.vue'
+
+export { HelpHeader, HelpFooter }

layouts/help.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="main">
+    <header-view v-if="!isMobile"></header-view>
+    <main-header v-if="!isMobile"></main-header>
+    <main-nav v-if="!isMobile"></main-nav>
+    <help-header v-if="isMobile"></help-header>
+    <nuxt/>
+    <footer-view v-if="!isMobile"></footer-view>
+    <right-bar v-if="!isMobile"></right-bar>
+    <help-footer v-else></help-footer>
+  </div>
+</template>
+<script>
+  import { Header, Footer, RightBar } from '~components/default'
+  import { MainHeader, MainNav } from '~components/main'
+  import { HelpHeader, HelpFooter } from '~components/mobile/help'
+  export default {
+    name: 'help',
+    components: {
+      HeaderView: Header,
+      FooterView: Footer,
+      RightBar,
+      MainHeader,
+      MainNav,
+      HelpHeader,
+      HelpFooter
+    },
+    computed: {
+      isMobile: function () {
+        return this.$store.state.option.isMobile
+      }
+    }
+  }
+</script>

pages/mobile/help/_id.vue

@@ -0,0 +1,57 @@
+<template>
+  <!--文章详情-->
+  <div class="helper-center-details" style="color: #000">
+    <div class="ql-container ql-snow" v-html="helpDetail.article"></div>
+    <div v-if="helpDetail.length == 0" style="color: #999;">暂无数据！</div>
+  </div>
+</template>
+<script>
+  export default {
+    layout: 'help',
+    fetch ({ store, route }) {
+      return Promise.all([
+        store.dispatch('loadHelpDetail', route.params)
+      ])
+    },
+    computed: {
+      helpDetail () {
+        return this.$store.state.help.detail.data
+      }
+    }
+  }
+</script>
+<style>
+ .helper-center-details{
+   width: 100%;
+   margin-bottom: 50px;
+}
+ .helper-center-details .ql-container{
+   margin: 0 auto;
+   width: 95%;
+ }
+ .helper-center-details .ql-container .ql-size-20{
+   display: block;
+   margin-top: 15px;
+   font-weight: bold;
+ }
+ .helper-center-details .ql-container strong{
+   display: block;
+   margin-top: 15px;
+   font-size: 16px;
+ }
+ .helper-center-details p, .helper-center-details h3{
+   margin: 0 auto;
+   width: 100%;
+ }
+ .helper-center-details span{
+   font-size: 16px;
+ }
+ .helper-center-details span.ql-size-16 img{
+   width: 5%;
+ }
+ .helper-center-details img{
+   margin: 0 auto;
+   width: 100%;
+   text-align: center;
+ }
+</style>