From 3f747107835f019270a688a15aad4fd843cb8853 Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期五, 19 十一月 2021 16:53:47 +0800 Subject: [PATCH] SSH --- src/components/page/introduce.vue | 139 +++++++++++++++++++++++++++++++++++++++------- 1 files changed, 117 insertions(+), 22 deletions(-) diff --git a/src/components/page/introduce.vue b/src/components/page/introduce.vue index c69ac1e..65b8123 100644 --- a/src/components/page/introduce.vue +++ b/src/components/page/introduce.vue @@ -2,43 +2,138 @@ <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.categoryName ? 'ft-blue' : 'ft-black'">{{ + item.categoryName + }}</b> + </li> + </ul> + </el-col> + <!-- 鏂伴椈鍐呭 --> + <el-card class="box-card"> + <el-col :span="18"> + <div> + <el-row + class="marb10" + :key="index" + v-for="(item, index) in newsList" + > + {{ item.title }} + </el-row> + </div> + <!-- 鍒嗛〉 --> + <div> + <el-pagination + @current-change="handleCurrentChange" + :current-page.sync="currentPage" + :page-size="20" + layout="total, pager, next" + :total="total" + > + </el-pagination> + </div> + </el-col> + </el-card> + </el-row> </div> </template> <script> import globalTitle from '../globalTitle.vue' +import { getMinTitle, getNewsList } from '../../api/api' export default { name: 'introduce', - components:{ + components: { globalTitle }, data() { - return{ - menuList: [ - {name: '绠�浠�'}, - {name: '绔犵▼'}, - {name: '缁勭粐鏈烘瀯'}, - {name: '宸ヤ綔鑱岃矗'}, - {name: '涓撹亴浜哄憳'} - ] + return { + cont: '', + menuList: [], + newsList: [], + total: 0, + currentPage: 1 + } + }, + created() { + this.getMinTitleList() + }, + mounted() {}, + watch: { + menuList(newval, oldval) { + this.getAllNewsList(this.menuList[0]) + this.cont = this.menuList[0].categoryName + } + }, + methods: { + handleCurrentChange(val) { + console.log(`褰撳墠椤�: ${val}`) + }, + changeMenu(val) { + this.getAllNewsList(val) + this.cont = val.categoryName + }, + getMinTitleList() { + const data = { + contypeId: this.$route.query.id, + p: 1 } + getMinTitle(data) + .then((res) => { + console.log('res', res) + if (res.code == 200) { + this.menuList = res.data.records + } + }) + .catch((err) => { + console.log('err', err) + }) + }, + getAllNewsList(item) { + const data = { + categoryId: item.id, + contypeId: item.contypeId, + p: this.currentPage + } + getNewsList(data) + .then((res) => { + console.log('res', res) + if (res.code == 200) { + this.newsList = res.data.records + this.total = Number(res.data.total) + } + }) + .catch((err) => { + console.log('err', err) + }) + } } } </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; } } +.ft-blue { + color: rgb(9, 143, 252); +} +.ft-black { + color: #000; +} </style> \ No newline at end of file -- Gitblit v1.8.0