feat: 帮助中心

src/components/head.vue

@@ -64,6 +64,7 @@ export default {
         { name: '价格', path: '/price' },
         { name: '需求痛点', path: '/demand_pain_point' },
         { name: '关于我们', path: '/about_us' },
+        { name: '帮助', path: '/help'},
       ],
     }
   },

src/router/index.js

@@ -6,6 +6,7 @@ import FunctionPage from '../views/function/functionPage.vue'
 import PricePage from '../views/price/pricePage.vue'
 import demandPage from '../views/demand/demandPage.vue'
 import aboutPage from '../views/aboutus/aboutPage'
+import helpPage from '../views/helpPage'
 
 Vue.use(VueRouter)
 
@@ -40,6 +41,11 @@ const routes = [
         path: '/about_us',
         name: 'aboutUs',
         component: aboutPage,
+      },
+      {
+        path: '/help',
+        name: 'help',
+        component: helpPage
       }
     ],
   },

src/views/helpPage.vue

+<template>
+  <div class="help-page">
+    <div class="header-banner">
+      <div class="image">
+        <img
+          src="../assets/images/help.png"
+          style="width: 100%; height: 100%; object-fit: cover" />
+      </div>
+      <div class="text">
+        <span>帮助中心</span>
+      </div>
+    </div>
+    <div class="content-body">
+      <div class="demonstration">
+        <div class="web-link">
+          <span class="label">演示链接:</span>
+          <a href="https://demo.jomalls.com" target="_blank">
+            https://demo.jomalls.com
+          </a>
+        </div>
+        <div class="web-user">
+          <span class="label">用户名:</span>
+          <span>admin</span>
+        </div>
+        <div class="web-password">
+          <span class="label">密码:</span>
+          <span>sg123456</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'help',
+}
+</script>
+<style lang="scss" scoped>
+.help-page {
+  height: calc(100vh - 61px);
+}
+.image {
+  height: 26vw;
+}
+
+.header-banner {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+}
+
+.text {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 48px;
+  color: #fff;
+  letter-spacing: 20px;
+}
+
+.demonstration {
+  max-width: 1280px;
+  margin: 0 auto;
+  line-height: 50px;
+  font-size: 28px;
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.web-link,
+.web-user,
+.web-password {
+  width: 500px;
+  display: inline-block;
+  text-align: left;
+}
+
+.label {
+  margin-right: 10px;
+  width: 120px;
+  display: inline-block;
+  text-align: left;
+}
+
+@media screen and (max-width: 1100px) {
+  .text {
+    font-size: 24px;
+    letter-spacing: 10px;
+  }
+  .help-page {
+    height: calc(100vh - 26vw - 97px);
+  }
+  .demonstration {
+    width: 100vw;
+    font-size: 18px;
+    padding: 20px;
+    margin-top: 0;
+  }
+  .web-link,
+  .web-user,
+  .web-password {
+    width: 90vw;
+  }
+  .label {
+    width: 80px;
+  }
+}
+</style>