From ece9b6bba5a44a06041a8ad4d5f5ac1f14560d3e Mon Sep 17 00:00:00 2001
From: 明梦爽 <2972214568@qq.com>
Date: 星期二, 09 八月 2022 09:42:12 +0800
Subject: [PATCH] 完善Readme

---
 src/components/page/introduce.vue |  124 +++++++++++++++++++++++++++++-----------
 1 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/src/components/page/introduce.vue b/src/components/page/introduce.vue
index a9a3ed1..5403c79 100644
--- a/src/components/page/introduce.vue
+++ b/src/components/page/introduce.vue
@@ -4,27 +4,27 @@
       <globalTitle />
     </el-row>
     <el-row class="mart10">
-     <el-col :span="4" class="marr10">
-       <ul>
-        <li
-          v-for="(item, index) in menuList"
-          :key="index"
-          class="liStylenone liPointer marb10"
-          @click="changeMenu(item.name)"
-        >
-          <b :class="cont == item.name?'ft-blue':'ft-black'">{{ item.name }}</b>
-        </li>
-      </ul>
-     </el-col>
-    <el-col :span="18">
-      <div v-html="cont"></div>
-    </el-col>
+      <!-- 灏忔爣棰� -->
+      <el-col :span="4" class="marr10">
+        <ul>
+          <li v-for="(item, index) in menuList" :key="index" class="liStylenone liPointer marb10" @click="changeMenu(item)">
+            <b :class="cont == item.name ? 'ft-blue' : 'ft-black'">{{ item.name }}</b>
+          </li>
+        </ul>
+      </el-col>
+      <!-- 鏂伴椈鍐呭 -->
+      <el-card class="box-card">
+        <el-col>
+          <div v-html="this.new.content" class="ql-editor"></div>
+        </el-col>
+      </el-card>
     </el-row>
   </div>
 </template>
 
 <script>
 import globalTitle from '../globalTitle.vue'
+import { getMinTitle, getNewsList, getnew } from '../../api/api'
 export default {
   name: 'introduce',
   components: {
@@ -32,42 +32,96 @@
   },
   data() {
     return {
-      cont:'',
-      menuList: [
-        { name: '绠�浠�' },
-        { name: '绔犵▼' },
-        { name: '缁勭粐鏈烘瀯' },
-        { name: '宸ヤ綔鑱岃矗' },
-        { name: '涓撹亴浜哄憳' }
-      ]
+      cont: '',
+      menuList: [],
+      newsList: [],
+      new: {} //鏂伴椈瀵硅薄
     }
   },
-  mounted(){
-    this.cont = this.menuList[0].name;
+  created() {},
+  mounted() {
+    this.getTitle()
   },
-  methods:{
-    changeMenu(val){
-      this.cont = val;
+  watch: {
+    menuList(n, o) {
+      this.cont = this.menuList[0].name
+      this.getnews(this.menuList[0]) //鏀瑰彉瀵硅薄锛岃彍鍗曟爮鐨勪笢瑗胯鍐欏埌鐩戝惉灞炴�ч噷杈�
+    }
+  },
+  methods: {
+    //鑾峰彇灏忔爣棰樼殑id
+    getTitle() {
+      const data = Number(this.$route.query.id)
+      getMinTitle(data)
+        .then(res => {
+          // console.log(res);
+          if (res.code == 200) {
+            this.menuList = res.data
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
     },
+    //灏忔爣棰樿彍鍗曠殑鐞冨垏鎹�
+    changeMenu(val) {
+      this.cont = val.name
+      this.getnews(val)
+    },
+    //鑾峰彇鍒颁簡鏂伴椈鍒楄〃锛岄噷杈瑰彧鏈変竴涓璞�
+    getnews(item) {
+      const data = {
+        current: 1,
+        newsCategoryId: item.id,
+        size: 5
+      }
+      getNewsList(data)
+        .then(res => {
+          // console.log(res);
+          if (res.code == 200) {
+            this.newsList = res.data.records
+            this.getalone(this.newsList[0].id)
+          }
+        })
+        .catch(error => {
+          console.log(error)
+        })
+    },
+    //鑾峰彇鏂伴椈鍐呭,寰楀埌涓�涓柊闂诲璞�
+    getalone(id) {
+      const data = id
+      getnew(data)
+        .then(res => {
+          // console.log(res);
+          if (res.code == 200) {
+            this.new = res.data
+            console.log(this.new.content)
+          }
+        })
+        .catch(error => {
+          console.log(error)
+        })
+    }
   }
 }
 </script>
 <style lang="less" scoped>
-
 ul {
-  // background-color: rgb(242, 243, 245 );
   width: 200px;
   li {
-    background-color: rgb(242, 243, 245 );
+    background-color: rgb(242, 243, 245);
     height: 50px;
     line-height: 50px;
     text-align: center;
   }
 }
-.ft-blue{
-  color:rgb(9, 143, 252);
+.ft-blue {
+  color: rgb(9, 143, 252);
 }
-.ft-black{
+.ft-black {
   color: #000;
 }
-</style>
\ No newline at end of file
+.ql-editor {
+  padding: 12px 0px !important;
+}
+</style>

--
Gitblit v1.8.0