问答中心列表

src/pages/technical-support/answer-center/index.vue

 <template>
   <div class="answer_container">
-    <div class="content">
-      <router-view class="content_box" />
-      <div class="user_info"></div>
+    <router-view class="left_content" />
+    <div class="right_content">
+      <div class="user_info">
+        <div class="user_img">
+          <img :src="require('../../../assets/imgs/img_head.png')" />
+        </div>
+        <p class="user_name">勒布朗</p>
+        <p class="user_level">普通用户</p>
+        <ul class="user_other">
+          <li style="cursor: pointer;" @click="intoListPage(0)">
+            <p>800</p>
+            <p>我的提问</p>
+          </li>
+          <li style="cursor: pointer;" @click="intoListPage(1)">
+            <p>800</p>
+            <p>我的回答</p>
+          </li>
+          <li>
+            <p>8.88万</p>
+            <p>浏览数</p>
+          </li>
+        </ul>
+      </div>
+      <div class="contributor_info">
+        <h3 class="contributor_title">
+          <span>本月回答贡献榜</span>
+        </h3>
+        <ul class="contributor_list">
+          <li
+            v-for="(item, index) in contributorAnswerList"
+            :key="'answer_' + index"
+          >
+            <span class="list_index" v-text="index + 1"></span>
+            <img class="list_img" :src="item.picture_path" />
+            <span class="list_text text_clip" v-text="item.content"></span>
+            <span class="list_count" v-text="item.answer_num"></span>
+          </li>
+        </ul>
+      </div>
+      <div class="contributor_info">
+        <h3 class="contributor_title">
+          <span>本月提问贡献榜</span>
+        </h3>
+        <ul class="contributor_list">
+          <li
+            v-for="(item, index) in contributorQuizList"
+            :key="'quiz_' + index"
+          >
+            <span class="list_index" v-text="index + 1"></span>
+            <img class="list_img" :src="item.picture_path" />
+            <span class="list_text text_clip" v-text="item.content"></span>
+            <span class="list_count" v-text="item.answer_num"></span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -10,30 +62,301 @@
 <script>
 export default {
   components: {},
-  data: () => ({}),
-  watch: {},
-  methods: {},
-  mounted() {},
+  data() {
+    return {
+      contributorAnswerList: [],
+      contributorQuizList: [],
+    };
+  },
+  created() {
+    this.getAnwerList();
+  },
+  methods: {
+    getAnwerList() {
+      this.contributorAnswerList = [
+        {
+          id: 1,
+          title: "平台的流程引擎怎么样", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 2,
+          title: "平台的流程引擎怎么样6666", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 3,
+          title: "平台的流程引擎怎么样23233333", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 4,
+          title: "平台的流程引擎怎么样23233333", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 5,
+          title: "平台的流程引擎怎么样23233333", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+      ];
+      this.contributorQuizList = [
+        {
+          id: 1,
+          title: "平台的流程引擎怎么样", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 2,
+          title: "平台的流程引擎怎么样6666", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 3,
+          title: "平台的流程引擎怎么样23233333", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 4,
+          title: "平台的流程引擎怎么样23233333", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 2, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+        {
+          id: 5,
+          title: "平台的流程引擎怎么样23233333", // 标题
+          content: "我们想用流程引擎，不会用，求大神指点", // 内容
+          created_by: "abc", // 发布人的userid
+          created: "2020-10-21T14:28:10+08:00", // 发布时间
+          updated: "2020-10-21T14:28:10+08:00", // 更新时间
+          view: 0, // 浏览量
+          answer_num: 9999, // 回答数,
+          user_name: "普通neo", // 发布人
+          picture_path:
+            "http://pic1.win4000.com/tj/2017-07-11/596437562ae53.jpg",
+        },
+      ];
+    },
+    intoListPage(type) {
+      console.log(type === 0 ? "我的提问" : "我的回答");
+    },
+  },
 };
 </script>
 
 <style scoped>
-.content {
+.answer_container {
   width: 1200px;
   margin: 0 auto;
-  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
 }
-.content_box {
-  width: 856px;
-  height: calc(100vh - 58px);
+.left_content {
+  flex-grow: 1;
 }
-.user_info {
+.right_content {
   width: 328px;
-  height: 328px;
+  flex-shrink: 0;
+  margin-left: 20px;
+  margin-top: 46px;
+}
+.right_content > div {
   background-color: #fff;
   border-radius: 10px;
-  position: fixed;
-  top: 104px;
-  right: calc((100% - 1200px) / 2);
+}
+.right_content > div + div {
+  margin-top: 20px;
+}
+.user_info {
+  padding: 20px;
+  text-align: center;
+}
+.user_img {
+  font-size: 0;
+}
+.user_img > img {
+  border-radius: 50%;
+  border: 2px solid #e3e5ef;
+}
+.user_name {
+  font-size: 22px;
+  line-height: 45px;
+  color: #1d1e20;
+  margin-top: 10px;
+}
+.user_level {
+  font-size: 14px;
+  line-height: 24px;
+  color: #8890a7;
+}
+.user_other {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 25px;
+}
+.user_other > li {
+  flex-grow: 1;
+}
+.user_other > li + li {
+  border-left: 1px solid #e3e5ef;
+}
+.user_other > li {
+  font-size: 22px;
+  line-height: 1;
+}
+.user_other > li > p:nth-child(2) {
+  font-size: 14px;
+  color: #58617a;
+  margin-top: 15px;
+}
+.user_other > li:nth-child(1) {
+  color: #ef9433;
+}
+.user_other > li:nth-child(2) {
+  color: #25bdb1;
+}
+.user_other > li:nth-child(3) {
+  color: #38aef9;
+}
+.contributor_info {
+  padding: 0 15px 15px;
+}
+.contributor_title {
+  padding: 5px 0;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.contributor_title > span:nth-child(1) {
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 40px;
+  color: #58617a;
+  position: relative;
+  padding-left: 15px;
+}
+.contributor_title > span:nth-child(1)::before {
+  content: "";
+  width: 4px;
+  height: 18px;
+  background-color: #515fe7;
+  border-radius: 2px;
+  position: absolute;
+  top: 10px;
+  left: 0;
+}
+.contributor_list > li {
+  height: 42px;
+  padding: 0 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  color: #58617a;
+}
+.contributor_list > li:nth-child(1) > .list_index {
+  color: #e15260;
+}
+.contributor_list > li:nth-child(2) > .list_index {
+  color: #ff7800;
+}
+.contributor_list > li:nth-child(3) > .list_index {
+  color: #e15260;
+}
+.contributor_list > li > * + * {
+  margin-left: 10px;
+}
+.list_index {
+  flex-shrink: 0;
+  width: 20px;
+  text-align: right;
+}
+.list_img {
+  flex-shrink: 0;
+  height: 26px;
+  border-radius: 13px;
+}
+.list_text {
+  flex-grow: 1;
+  margin-left: 15px !important;
+}
+.list_count {
+  flex-shrink: 0;
+  width: 50px;
+  text-align: center;
 }
 </style>

src/pages/technical-support/answer-center/list.vue

@@ -14,24 +14,19 @@
       </el-breadcrumb>
     </div>
 
-    <div class="main_container"></div>
+    <div class="main_container">
+      <!--  -->
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {
-      answerList: [],
-    };
-  },
-  computed: {},
-  created() {
-    this.getAnwerList();
-  },
-  methods: {
-    getAnwerList() {},
+    return {};
   },
+  created() {},
+  methods: {},
 };
 </script>
 
@@ -40,9 +35,14 @@ export default {
   padding: 12px 0 11px;
 }
 .main_container {
-  min-height: calc(100% - 66px);
+  min-height: calc(100vh - 58px - 66px);
+  padding: 0 15px;
   background-color: #fff;
   border-radius: 10px;
   margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
 }
 </style>

src/pages/technical-support/doc-manage/index.vue

@@ -33,15 +33,24 @@ export default {
       this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
         if (response.data.success == 1) {
           let arr = response.data.data[0].Child;
-          let user_index = arr.findIndex(
-            (item) => item.visit_url == "/technical_support/doc-manage"
-          );
-          if (user_index != -1) {
-            this.navList = arr[user_index].Child;
-            this.navList.forEach((item) => {
-              item.name = item.menu_name;
-              item.path = item.visit_url;
-            });
+
+          for (let i = 0; i < arr.length; i++) {
+            let first = arr[i];
+
+            if (first.visit_url == "/technical_support") {
+              for (let j = 0; j < first.Child.length; j++) {
+                let second = first.Child[j];
+
+                if (second.visit_url == "/technical_support/doc_manage") {
+                  this.navList = second.Child.map((item) => ({
+                    name: item.menu_name,
+                    path: item.visit_url,
+                  }));
+                  break;
+                }
+              }
+              break;
+            }
           }
         }
       });

src/pages/technical-support/doc/index.vue

@@ -33,15 +33,24 @@ export default {
       this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
         if (response.data.success == 1) {
           let arr = response.data.data[0].Child;
-          let user_index = arr.findIndex(
-            (item) => item.visit_url == "/technical_support/doc"
-          );
-          if (user_index != -1) {
-            this.navList = arr[user_index].Child;
-            this.navList.forEach((item) => {
-              item.name = item.menu_name;
-              item.path = item.visit_url;
-            });
+
+          for (let i = 0; i < arr.length; i++) {
+            let first = arr[i];
+
+            if (first.visit_url == "/technical_support") {
+              for (let j = 0; j < first.Child.length; j++) {
+                let second = first.Child[j];
+
+                if (second.visit_url == "/technical_support/doc") {
+                  this.navList = second.Child.map((item) => ({
+                    name: item.menu_name,
+                    path: item.visit_url,
+                  }));
+                  break;
+                }
+              }
+              break;
+            }
           }
         }
       });