Skip to content

W
web-site
Commit 13c08a37 authored by 吴冠's avatar 吴冠
Browse files
Options

newList

parent fe1abdad
Show whitespace changes
Inline Side-by-side
Showing with 164 additions and 141 deletions
pages/index/message/news.vue
View file @ 13c08a37
<template> <template>
<div class="message" > <div>
<div class='sidebar'> <div class="message">
<div class="sidebar">
<div class="sidebar-title">信息公告</div> <div class="sidebar-title">信息公告</div>
<el-col :span="12"> <el-col :span="12">
<el-menu :default-active="activeName" class="el-menu-vertical-demo" @select="handleSelect"> <el-menu
<el-menu-item :index = "item.id +''" v-for="item in artList" :key="item.id" router> :default-active="activeName"
class="el-menu-vertical-demo"
@select="handleSelect"
>
<el-menu-item
:index="item.id + ''"
v-for="item in artList"
:key="item.id"
router
>
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">{{item.title}}</span> <span slot="title">{{ item.title }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
</div> </div>
<ul> <ul>
<li v-for="item in messageList" :key="item.id" @click="isClick(item.id)" v-show="isList"> <li
v-for="item in messageList"
:key="item.id"
@click="isClick(item.id)"
v-show="isList"
>
<!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}" class="flex-between link-style" >--> <!-- <nuxt-link :to="{name:'index-message-newsdetails',query:{id:(item.id)}}" class="flex-between link-style" >-->
<div class="flex-between link-style"> <div class="flex-between link-style">
<div class="t2">{{item.title}}</div> <div class="t2">{{ item.title }}</div>
<div class="t1">发布时间：{{item.createTime}}</div> <div class="t1">发布时间：{{ item.createTime }}</div>
</div> </div>
<!-- </nuxt-link> --> <!-- </nuxt-link> -->
</li> </li>
...@@ -25,27 +40,38 @@ ...@@ -25,27 +40,38 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:size ="size" :size="size"
:page-sizes="[10, 20, 30, 40]" :page-sizes="[10, 20, 30, 40]"
layout="total, prev, pager, next,sizes, jumper" layout="total, prev, pager, next,sizes, jumper"
:total="total"> :total="total"
</el-pagination > >
</el-pagination>
</div> </div>
</ul> </ul>
<div class="content" v-show="!isList"> <div class="content" v-show="!isList">
<div > <div>
<h1>{{detailList.title}}</h1> <h1>{{ detailList.title }}</h1>
<div class="flex-center pos"> <div class="flex-center pos">
<span style="margin-right:20px">发布时间:{{detailList.createTime}}</span> <span style="margin-right: 20px"
<span>作者:{{detailList.author}}</span> >发布时间:{{ detailList.createTime }}</span
>
<span>作者:{{ detailList.author }}</span>
</div>
<div
v-html="detailList.content"
style="width: 600px; margin: 0 auto"
></div>
<div class="flex-center" style="margin-buttom: 40px">
<el-button
type="primary"
@click="returnPrev"
style="margin-top: 50px"
>返回</el-button
>
</div> </div>
<div v-html="detailList.content" style="width:600px;margin:0 auto"></div>
<div class="flex-center" style="margin-buttom:40px">
<el-button type="primary" @click="returnPrev" style="margin-top:50px">返回</el-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -53,32 +79,32 @@ import { ...@@ -53,32 +79,32 @@ import {
getListContent, getListContent,
getCategoryList, getCategoryList,
getnewsdetails, getnewsdetails,
} from '@/common/list.js' } from "@/common/list.js";
import Cookies from "js-cookie" import Cookies from "js-cookie";
export default { export default {
name: 'cardApplyQuery', name: "cardApplyQuery",
mounted(){ mounted() {
this.getCategoryList() this.getCategoryList();
let message = {} let message = {};
message.currentPage = 1 message.currentPage = 1;
message.size = 10 message.size = 10;
let type = window.location.href.split("?id=")[1] let type = window.location.href.split("?id=")[1];
if(type){ if (type) {
this.activeName = type this.activeName = type;
message.cateId = this.activeName message.cateId = this.activeName;
}else{ } else {
message.cateId = this.activeName message.cateId = this.activeName;
} }
this.getListContent(message) this.getListContent(message);
let detailsType = Cookies.get("detailsType") let detailsType = Cookies.get("detailsType");
let detailsId = Cookies.get("detailsId") let detailsId = Cookies.get("detailsId");
let linkTo = Cookies.get("linktoUrl") let linkTo = Cookies.get("linktoUrl");
console.log(linkTo+'-------+++++++') console.log(linkTo + "-------+++++++");
//判断是否来自于首页底部三大模块 //判断是否来自于首页底部三大模块
if(detailsType =="1"){ if (detailsType == "1") {
this.isClick(detailsId) this.isClick(detailsId);
Cookies.remove("detailsType") Cookies.remove("detailsType");
Cookies.remove("detailsId") Cookies.remove("detailsId");
} }
}, },
/* async asyncData({route}){ /* async asyncData({route}){
...@@ -111,154 +137,151 @@ import Cookies from "js-cookie" ...@@ -111,154 +137,151 @@ import Cookies from "js-cookie"
}, */ }, */
data() { data() {
return { return {
detailList:{ detailList: {},
detailsId: "",
}, contentList: "",
detailsId:'', isList: true,
contentList:'', activeName: "124",
isList:true, conText: "",
activeName: '124', activeIndex: "",
conText:"", size: 10,
activeIndex: '', total: 0,
size:10, artId: 0,
total:0, artList: [],
artId:0, currentPage: 1,
artList:[], messageContext: "",
currentPage:1, messageList: [],
messageContext:'', };
messageList: [
]
}
}, },
methods:{ methods: {
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
let keyValue = key/* .slice(4) */ let keyValue = key; /* .slice(4) */
this.detailsId = key this.detailsId = key;
let message = {} let message = {};
message.cateId = keyValue message.cateId = keyValue;
this.getListContent(message) this.getListContent(message);
let contentStatus = Cookies.get("contentStatus") let contentStatus = Cookies.get("contentStatus");
if(contentStatus == '1'){ if (contentStatus == "1") {
this.isList = true this.isList = true;
this.getListContent(message) this.getListContent(message);
Cookies.remove("contentStatus") Cookies.remove("contentStatus");
} }
}, },
//分类列表 //分类列表
async getCategoryList(){ async getCategoryList() {
const {data} = await getCategoryList() const { data } = await getCategoryList();
this.artList = data this.artList = data;
}, },
// 文章列表 // 文章列表
async getListContent(params){ async getListContent(params) {
const {data,total} = await getListContent(params) const { data, total } = await getListContent(params);
this.messageList = data this.messageList = data;
this.total = total this.total = total;
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.size = val this.size = val;
let mes = { let mes = {
currentPage:this.currentPage, currentPage: this.currentPage,
size:val size: val,
} };
this.getListContent(mes) this.getListContent(mes);
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentPage = val this.currentPage = val;
let mes = { let mes = {
currentPage:val, currentPage: val,
size:this.size size: this.size,
} };
this.getListContent(mes) this.getListContent(mes);
}, },
//点击之后存储id 获取详情 //点击之后存储id 获取详情
async isClick(id){ async isClick(id) {
const {data} = await getnewsdetails(id) const { data } = await getnewsdetails(id);
this.detailList= data this.detailList = data;
this.isList = false this.isList = false;
Cookies.set("contentStatus",1) Cookies.set("contentStatus", 1);
}, },
//返回 //返回
returnPrev(){ returnPrev() {
this.isList = true this.isList = true;
let mess = { let mess = {
cateId:this.detailsId cateId: this.detailsId,
} };
this.getListContent(mess) this.getListContent(mess);
}, },
} },
} };
</script> </script>
<style scoped> <style scoped>
.pagination{ .pagination {
position: absolute; position: absolute;
bottom: 5%; bottom: 5%;
left: 50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
} }
.message { .message {
border: 1px solid rgba(219, 219, 219, 1); border: 1px solid rgba(219, 219, 219, 1);
min-height:6.98rem; min-height: 6.98rem;
position: relative; position: absolute;
right:-15%; left:33%;
width:9.2rem width: 9.2rem;
} }
.message>ul>li { .message > ul > li {
width: 9.23rem; width: 9.23rem;
height: .61rem; height: 0.61rem;
line-height: .61rem; line-height: 0.61rem;
box-sizing: border-box; box-sizing: border-box;
padding-left: 0.3rem; padding-left: 0.3rem;
padding-right: 0.55rem; padding-right: 0.55rem;
border-bottom: 1px solid rgba(219, 219, 219, 1); border-bottom: 1px solid rgba(219, 219, 219, 1);
} }
.message>ul>li div:last-child{ .message > ul > li div:last-child {
color:rgba(151,152,153,1); color: rgba(151, 152, 153, 1);
} }
.message>.pagination{ .message > .pagination {
margin-top: 4rem; margin-top: 4rem;
} }
.sidebar { .sidebar {
width: 2.4rem; width: 2.4rem;
border: 1px solid rgba(219, 219, 219, 1); border: 1px solid rgba(219, 219, 219, 1);
position: absolute; position: absolute;
left:-217px left: -30%
} }
.sidebar>.sidebar-title { .sidebar > .sidebar-title {
width: 2.4rem; width: 2.4rem;
height: .60rem; height: 0.6rem;
line-height: .6rem; line-height: 0.6rem;
background: rgba(245, 246, 247, 1); background: rgba(245, 246, 247, 1);
text-align: center; text-align: center;
font-size: .20rem; font-size: 0.2rem;
color: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
font-weight: bold; font-weight: bold;
} }
.el-menu-vertical-demo{ .el-menu-vertical-demo {
width: 2.4rem; width: 2.4rem;
} }
.el-col-12 { .el-col-12 {
width: 100%; width: 100%;
} }
.content{ .content {
width:9.2rem; width: 9.2rem;
height:100%; height: 100%;
} }
h1{ h1 {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.pos{ .pos {
margin-bottom: 50px; margin-bottom: 50px;
} }
.link-style{ .link-style {
cursor:pointer cursor: pointer;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment