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 | 129 +++++++++++++++++++++++++++++++++++-------
1 files changed, 106 insertions(+), 23 deletions(-)
diff --git a/src/components/page/introduce.vue b/src/components/page/introduce.vue
index c69ac1e..5403c79 100644
--- a/src/components/page/introduce.vue
+++ b/src/components/page/introduce.vue
@@ -2,43 +2,126 @@
<div>
<el-row>
<globalTitle />
- </el-row>
+ </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)">
+ <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:{
+ components: {
globalTitle
},
data() {
- return{
- menuList: [
- {name: '绠�浠�'},
- {name: '绔犵▼'},
- {name: '缁勭粐鏈烘瀯'},
- {name: '宸ヤ綔鑱岃矗'},
- {name: '涓撹亴浜哄憳'}
- ]
+ return {
+ cont: '',
+ menuList: [],
+ newsList: [],
+ new: {} //鏂伴椈瀵硅薄
+ }
+ },
+ created() {},
+ mounted() {
+ this.getTitle()
+ },
+ 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>
-.el-header {
- display: flex;
- justify-content: space-between;
- background-color: rgb(85, 81, 82);
- font-size: 20px;
- line-height: 60px;
- padding: 0px 4px;
-}
-.el-aside {
- background-color: rgb(242, 243, 245);
- .el-menu {
- border-right: none;
+ul {
+ width: 200px;
+ li {
+ background-color: rgb(242, 243, 245);
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
}
}
-</style>
\ No newline at end of file
+.ft-blue {
+ color: rgb(9, 143, 252);
+}
+.ft-black {
+ color: #000;
+}
+.ql-editor {
+ padding: 12px 0px !important;
+}
+</style>
--
Gitblit v1.8.0