享服务-帮助中心

src/router/index.js

@@ -143,6 +143,15 @@ const routes = [{
         },
         component: () => import('../views/Serve/TravelPlague.vue')
       },
+      {
+        path: '/layout/serve/help-center',
+        name: 'HelpCenter',
+        meta: {
+          myInd: 2,
+          myTitle: '帮助中心',
+        },
+        component: () => import('../views/Serve/HelpCenter.vue')
+      },
       /**
        * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */

src/views/Serve/HelpCenter.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="help-center">
+    <SearchBar class="search-bar" @search="onSearch"></SearchBar>
+    <TabbarSmall class="tabbar" :tabList="['常见问题', '服务电话']" @change="onTabbarChange"></TabbarSmall>
+    <div class="question-list" v-if="activeTabbarIdx === 0">
+      <div class="question-item" 
+        v-for="(item, index) in questionList"
+        :key="index"
+      >
+        <h2>{{item.title}}</h2>
+        <span class="time">{{item.time}}</span>
+      </div>
+    </div>
+    <div class="phone-list" v-if="activeTabbarIdx === 1">
+      <div class="phone-item" 
+        v-for="(item, index) in phoneList"
+        :key="index"
+      >
+        <h2>{{item.title}}</h2>
+        <a :href="`tel: ${item.phone}`" class="phone">{{item.phone}}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchBar from "@/components/SearchRedBtn.vue";
+import TabbarSmall from "@/components/TabbarSmall.vue";
+
+export default {
+  components: {
+    SearchBar,
+    TabbarSmall,
+  },
+  data() {
+    return {
+      activeTabbarIdx: 0,
+      questionList: [
+        {
+          title: '求推荐体育中心附近的停车场',
+          time: '2022-10-10',
+        },
+        {
+          title: '求推荐体育中心附近的停车场',
+          time: '2022-10-10',
+        },
+        {
+          title: '求推荐体育中心附近的停车场',
+          time: '2022-10-10',
+        },
+        {
+          title: '求推荐体育中心附近的停车场',
+          time: '2022-10-10',
+        },
+        {
+          title: '求推荐体育中心附近的停车场求推荐体育中心附近的停车场求推荐体育中心附近的停车场求推荐体育中心附近的停车场求推荐体育中心附近的停车场',
+          time: '2022-10-10',
+        },
+      ],
+      phoneList: [
+        {
+          title: '体育中心',
+          phone: '0431-85171079',
+        },
+        {
+          title: '体育中心',
+          phone: '0431-85171079',
+        },
+        {
+          title: '体育中心',
+          phone: '0431-85171079',
+        },
+        {
+          title: '体育中心',
+          phone: '0431-85171079',
+        },
+        {
+          title: '体育中心',
+          phone: '0431-85171079',
+        },
+      ]
+    }
+  },
+  methods: {
+    onSearch() {
+
+    },
+    onTabbarChange(idx) {
+      this.activeTabbarIdx = idx
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.help-center {
+  background-color: #fff;
+  height: calc(100% - 80px);
+  overflow: auto;
+  padding: 3.3vw 4.5vw;
+  display: flex;
+  flex-direction: column;
+  > .search-bar {
+    flex: 0 0 auto;
+    margin-bottom: 4.1vw;
+  }
+  > .tabbar {
+    flex: 0 0 auto;
+    margin-bottom: 8.5vw;
+  }
+  > .question-list {
+    flex: 1 0 1px;
+    overflow: auto;
+    > .question-item {
+      border-bottom: 1px solid #E5E5E5;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 13.5vw;
+      > h2 {
+        flex: 0 0 auto;
+        max-width: 75%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #333333;
+      }
+      > .time {
+        flex: 0 0 auto;
+        max-width: 20%;
+        font-size: 2.7vw;
+        color: #333333;
+      }
+    }
+  }
+  > .phone-list {
+    flex: 1 0 1px;
+    overflow: auto;
+    > .phone-item {
+      border-bottom: 1px solid #E5E5E5;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 13.5vw;
+      > h2 {
+        flex: 0 0 auto;
+        max-width: 50%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #333333;
+      }
+      > .phone {
+        flex: 0 0 auto;
+        max-width: 50%;
+        font-size: 2.7vw;
+        color: #333333;
+      }
+    }
+  }
+}
+</style>

src/views/Serve/index.vue

@@ -112,7 +112,7 @@
 
     <div class="help-center">
       <h3>帮助中心</h3>
-      <router-link class="more" to="/">更多  》</router-link>
+      <router-link class="more" :to="{name: 'HelpCenter'}">更多  》</router-link>
       <TabbarSmall :tabList="['常见问题', '服务电话']" @change="onHelpCenterTabbarChange"></TabbarSmall>
       <ul class="questions" v-show="helpCenterActiveIdx === 0">
         <div v-for="n in 10" :key="n">