|
|
@@ -0,0 +1,224 @@
|
|
|
+<template>
|
|
|
+ <div id="listDetail">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="style">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <top></top>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="menu">
|
|
|
+ <div class="w_1200">
|
|
|
+ <menus></menus>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="5" class="left">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <i class="el-icon-s-unfold"></i>
|
|
|
+ <span>党建学苑</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="menu">
|
|
|
+ <el-col class="menuList" :span="24" v-for="(item, index) in menuList" :key="index">
|
|
|
+ <p @click="changeMenu(item.name, index)" :style="`color:${menuIndex == index ? menuColor : ''}`">
|
|
|
+ {{ item.name }}
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18" class="right">
|
|
|
+ <span v-if="displays == '0'">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <span></span>
|
|
|
+ <span>{{ columnName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <newsList :list="list" :total="total" @detailBtn="detailBtn"></newsList>
|
|
|
+ </el-col>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <newsDetail :details="details"></newsDetail>
|
|
|
+ </span>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="foot">
|
|
|
+ <div class="w_1200">
|
|
|
+ <foot></foot>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import top from '@/layout/common/top.vue';
|
|
|
+import menus from '@/layout/common/menus.vue';
|
|
|
+import foot from '@/layout/common/foot.vue';
|
|
|
+import newsList from './parts/newsList.vue';
|
|
|
+import newsDetail from './parts/newsDetail.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'listDetail',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ top,
|
|
|
+ menus,
|
|
|
+ foot,
|
|
|
+ newsList,
|
|
|
+ newsDetail,
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ menuList: [{ name: '图片新闻' }, { name: '党建工作' }, { name: '学习园地' }, { name: '党风廉政' }],
|
|
|
+ menuColor: 'rgb(5,73,130)',
|
|
|
+ menuIndex: '0',
|
|
|
+ columnName: '',
|
|
|
+ displays: '0',
|
|
|
+ // 列表
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ title: '标题',
|
|
|
+ date: '2020-02-02',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '十四数据',
|
|
|
+ date: '2020-02-02',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 总数
|
|
|
+ total: 10,
|
|
|
+ // 详情
|
|
|
+ details: {
|
|
|
+ title: '信息标题',
|
|
|
+ source: '信息部',
|
|
|
+ date: '2020-02-02',
|
|
|
+ content: '信息内容',
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.changeColumn();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择栏目
|
|
|
+ changeColumn() {
|
|
|
+ if (this.col_name == '图片新闻') {
|
|
|
+ this.menuIndex = 0;
|
|
|
+ this.columnName = this.col_name;
|
|
|
+ this.menuColor = 'rgb(5,73,130)';
|
|
|
+ this.$set(this, `displays`, this.display);
|
|
|
+ } else if (this.col_name == '党建工作') {
|
|
|
+ this.menuIndex = 1;
|
|
|
+ this.columnName = this.col_name;
|
|
|
+ this.menuColor = 'rgb(5,73,130)';
|
|
|
+ this.$set(this, `displays`, this.display);
|
|
|
+ } else if (this.col_name == '学习园地') {
|
|
|
+ this.menuIndex = 2;
|
|
|
+ this.columnName = this.col_name;
|
|
|
+ this.menuColor = 'rgb(5,73,130)';
|
|
|
+ this.$set(this, `displays`, this.display);
|
|
|
+ } else if (this.col_name == '党风廉政') {
|
|
|
+ this.menuIndex = 3;
|
|
|
+ this.columnName = this.col_name;
|
|
|
+ this.menuColor = 'rgb(5,73,130)';
|
|
|
+ this.$set(this, `displays`, this.display);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击选择菜单
|
|
|
+ changeMenu(name, index) {
|
|
|
+ this.menuIndex = index;
|
|
|
+ this.columnName = name;
|
|
|
+ this.menuColor = 'rgb(5,73,130)';
|
|
|
+ this.$set(this, `displays`, 0);
|
|
|
+ },
|
|
|
+ // 点击详情
|
|
|
+ detailBtn(id) {
|
|
|
+ this.$set(this, `displays`, 1);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ display() {
|
|
|
+ return this.$route.query.display;
|
|
|
+ },
|
|
|
+ col_name() {
|
|
|
+ return this.$route.query.col_name;
|
|
|
+ },
|
|
|
+ id() {
|
|
|
+ return this.$route.query.id;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.w_1200 {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.style {
|
|
|
+ .menu {
|
|
|
+ height: 70px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ min-height: 600px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .left {
|
|
|
+ min-height: 600px;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ .top {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ background-color: #054982;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .menuList {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ p {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 78%;
|
|
|
+ min-height: 600px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 20px;
|
|
|
+ .one {
|
|
|
+ height: 35px;
|
|
|
+ margin: 20px 0;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ span:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 20px;
|
|
|
+ background: #005293;
|
|
|
+ margin: 0 10px -3px 0;
|
|
|
+ }
|
|
|
+ span:nth-child(2) {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #005293;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .foot {
|
|
|
+ height: 135px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
