|
|
@@ -1,377 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="list">
|
|
|
- <el-col :span="24" class="main">
|
|
|
- <el-col :span="5" class="menu">
|
|
|
- <el-image :src="squareImage"></el-image>
|
|
|
- <span>Menu</span>
|
|
|
- <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 :span="19" class="info" v-if="display == 1">
|
|
|
- <el-col v-if="menuIndex == '0'" class="leftInfo">
|
|
|
- <el-col :span="24" class="leftTop">
|
|
|
- <span>|</span> <span>{{ menuName }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
|
|
|
- <p>{{ item.publish_time }}</p>
|
|
|
- <p>
|
|
|
- <span class="textOver" @click="clickzhuanti(item.id)">{{ item.title }}</span>
|
|
|
- <span>{{ item.titlejj }}</span>
|
|
|
- </p>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- <el-col v-if="menuIndex == '1'" class="leftInfo">
|
|
|
- <el-col :span="24" class="leftTop">
|
|
|
- <span>|</span> <span>{{ menuName }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col class="infoRightList" :span="24" v-for="(item, index) in exportList" :key="index">
|
|
|
- <p>
|
|
|
- <span class="textOver" @click="clickjishu(item.id)">{{ item.title }}</span
|
|
|
- ><span class="textOver">{{ item.publish_time }}</span>
|
|
|
- </p>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- <el-col v-if="menuIndex == '2'" class="leftInfo">
|
|
|
- <el-col :span="24" class="leftTop">
|
|
|
- <span>|</span> <span>{{ menuName }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col class="infoRightList" :span="24" v-for="(item, index) in hangyeList" :key="index">
|
|
|
- <p>
|
|
|
- <span class="textOver" @click="clickhangye(item.id)">{{ item.title }}</span
|
|
|
- ><span class="textOver">{{ item.publish_time }}</span>
|
|
|
- </p>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- <el-col v-if="menuIndex == '3'" class="leftInfo">
|
|
|
- <el-col :span="24" class="leftTop">
|
|
|
- <span>|</span> <span>{{ menuName }}</span>
|
|
|
- </el-col>
|
|
|
- <el-col class="infoLeftList" :span="24" v-for="(item, index) in jiaoyuList" :key="index">
|
|
|
- <p>{{ item.publish_time }}</p>
|
|
|
- <p>
|
|
|
- <span class="textOver" @click="clickjiaoyu(item.id)">{{ item.title }}</span>
|
|
|
- <span>{{ item.titlejj }}</span>
|
|
|
- </p>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- <el-col class="page">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page.sync="currentPage"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total,prev, pager, next, jumper"
|
|
|
- :total="pageTotal"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- <el-col :span="19" v-if="display == 2" class="info">
|
|
|
- <semDetail :newsid="newsid"></semDetail>
|
|
|
- </el-col>
|
|
|
- <el-col :span="19" v-if="display == 3" class="info">
|
|
|
- <detail :newsid="newsid"></detail>
|
|
|
- </el-col>
|
|
|
- <el-col :span="19" v-if="display == 4" class="info">
|
|
|
- <eduDetail :newsid="newsid"></eduDetail>
|
|
|
- </el-col>
|
|
|
- <el-col :span="19" v-if="display == 5" class="info">
|
|
|
- <luyanDetail :newsid="newsid"></luyanDetail>
|
|
|
- </el-col>
|
|
|
- </el-col>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import _ from 'lodash';
|
|
|
-import semDetail from '@/layout/technical/semDetail.vue';
|
|
|
-import detail from '@/layout/technical/detail.vue';
|
|
|
-import eduDetail from '@/layout/technical/eduDetail.vue';
|
|
|
-import luyanDetail from '@/layout/technical/luyanDetail.vue';
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: news } = createNamespacedHelpers('news');
|
|
|
-const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
|
|
|
-const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
|
|
|
-export default {
|
|
|
- name: 'list',
|
|
|
- props: {},
|
|
|
- components: {
|
|
|
- semDetail,
|
|
|
- detail,
|
|
|
- eduDetail,
|
|
|
- luyanDetail,
|
|
|
- },
|
|
|
- data: () => ({
|
|
|
- newsid: '',
|
|
|
- display: '1',
|
|
|
- squareImage: require('@/assets/live/square_big.png'),
|
|
|
- menuList: [{ name: '专家问诊' }, { name: '行业研究' }, { name: '嘉宾访谈' }, { name: '项目路演' }],
|
|
|
- menuIndex: '0',
|
|
|
- menuName: '专题研讨',
|
|
|
- menuColor: 'rgb(254, 149, 14)',
|
|
|
- currentPage: 1,
|
|
|
- pageTotal: 0,
|
|
|
- pageSize: 10,
|
|
|
- limit: 10,
|
|
|
- zhuantiList: [],
|
|
|
- exportList: [],
|
|
|
- hangyeList: [],
|
|
|
- jiaoyuList: [],
|
|
|
- }),
|
|
|
- created() {
|
|
|
- this.searchList();
|
|
|
- this.search();
|
|
|
- },
|
|
|
- computed: {
|
|
|
- id() {
|
|
|
- return this.$route.query.id;
|
|
|
- },
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- ...news(['query']),
|
|
|
- ...newsguidance({ danceQuery: 'query' }),
|
|
|
- ...newsroadshow({ adshowQuery: 'query' }),
|
|
|
- async searchList({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
- if (this.$route.query.column_name == '专家问诊') {
|
|
|
- this.changeMenu(this.$route.query.column_name, 0);
|
|
|
- } else if (this.$route.query.column_name == '行业研究') {
|
|
|
- this.changeMenu(this.$route.query.column_name, 1);
|
|
|
- } else if (this.$route.query.column_name == '嘉宾访谈') {
|
|
|
- this.changeMenu(this.$route.query.column_name, 2);
|
|
|
- } else if (this.$route.query.column_name == '项目路演') {
|
|
|
- this.changeMenu(this.$route.query.column_name, 3);
|
|
|
- }
|
|
|
- },
|
|
|
- async changeMenu(name, index) {
|
|
|
- this.menuIndex = index;
|
|
|
- this.menuColor = 'rgb(254, 149, 14)';
|
|
|
- this.menuName = name;
|
|
|
- this.initList({ name });
|
|
|
- },
|
|
|
- async initList({ name, skip = 0, limit = 10, ...info } = {}) {
|
|
|
- this.display = 1;
|
|
|
- let res = [];
|
|
|
- if (name == '专家问诊') {
|
|
|
- this.pageSize = 5;
|
|
|
- res = await this.query({ skip, limit, column_name: '专家问诊', ...info });
|
|
|
- this.$set(this, `zhuantiList`, res.data);
|
|
|
- } else if (name == '行业研究') {
|
|
|
- this.pageSize = 10;
|
|
|
- res = await this.query({ skip, limit, column_name: '行业研究', ...info });
|
|
|
- this.$set(this, `exportList`, res.data);
|
|
|
- } else if (name == '嘉宾访谈') {
|
|
|
- this.pageSize = 10;
|
|
|
- res = await this.danceQuery({ skip, limit, column_name: '嘉宾访谈', ...info });
|
|
|
- this.$set(this, `hangyeList`, res.data);
|
|
|
- } else if (name == '项目路演') {
|
|
|
- this.pageSize = 5;
|
|
|
- res = await this.adshowQuery({ skip, limit, column_name: '项目路演', ...info });
|
|
|
- this.$set(this, `jiaoyuList`, res.data);
|
|
|
- }
|
|
|
- this.$set(this, `pageTotal`, res.total);
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- const name = this.menuName;
|
|
|
- if (name == '专题研讨' || name == '教育培训') {
|
|
|
- this.limit = 5;
|
|
|
- }
|
|
|
- this.initList({ name: name, skip: (val - 1) * this.limit, limit: this.limit });
|
|
|
- },
|
|
|
- async search() {
|
|
|
- this.display = this.$route.query.display;
|
|
|
- this.newsid = this.id;
|
|
|
- },
|
|
|
- clickzhuanti(id) {
|
|
|
- this.display = '3';
|
|
|
- this.newsid = id;
|
|
|
- },
|
|
|
- clickjishu(id) {
|
|
|
- this.display = '3';
|
|
|
- this.newsid = id;
|
|
|
- },
|
|
|
- clickhangye(id) {
|
|
|
- this.display = '4';
|
|
|
- this.newsid = id;
|
|
|
- },
|
|
|
-
|
|
|
- clickjiaoyu(id) {
|
|
|
- this.display = '5';
|
|
|
- this.newsid = id;
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.main {
|
|
|
- // width: 80%;
|
|
|
- width: 1200px;
|
|
|
- margin: 0 auto;
|
|
|
- float: none;
|
|
|
-}
|
|
|
-.menu {
|
|
|
- float: left;
|
|
|
- min-height: 600px;
|
|
|
- width: 20%;
|
|
|
- background: no-repeat bottom right;
|
|
|
- background-image: url(../../assets/live/menu_back.jpg);
|
|
|
- margin: 30px 0;
|
|
|
- padding: 10px 0 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- box-shadow: 0 0 10px #bbbaba;
|
|
|
-}
|
|
|
-.menu .el-image {
|
|
|
- width: 30px;
|
|
|
- display: inline-table;
|
|
|
- margin: 10px 5px;
|
|
|
-}
|
|
|
-.menu span {
|
|
|
- font-size: 24px;
|
|
|
- color: #92959a;
|
|
|
- font-weight: 600;
|
|
|
- margin-left: 3px;
|
|
|
- position: relative;
|
|
|
- top: 10px;
|
|
|
-}
|
|
|
-.menuList p {
|
|
|
- line-height: 60px;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 1px solid #2d64b3;
|
|
|
- color: #044b79;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-.info {
|
|
|
- width: 77%;
|
|
|
- float: right;
|
|
|
- margin: 30px 0 30px 2px;
|
|
|
- min-height: 600px;
|
|
|
- box-shadow: 0 0 10px #2d64b3;
|
|
|
- overflow: hidden;
|
|
|
- right: 0px;
|
|
|
- background: #ffffff;
|
|
|
-}
|
|
|
-.leftInfo {
|
|
|
- height: 500px;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.leftTop {
|
|
|
- font-size: 18px;
|
|
|
- width: 96%;
|
|
|
- height: 41px;
|
|
|
- line-height: 35px;
|
|
|
- border-bottom: 1px solid #e5e5e5;
|
|
|
- position: relative;
|
|
|
- bottom: 1px;
|
|
|
- margin: 10px;
|
|
|
- font-weight: 600;
|
|
|
- color: #22529a;
|
|
|
-}
|
|
|
-.infoLeftList {
|
|
|
- float: left;
|
|
|
- width: 95%;
|
|
|
- border-bottom: 1px dashed #ccc;
|
|
|
- padding: 10px 0 10px 10px;
|
|
|
- height: 87px;
|
|
|
- margin: 0 0 0 5px;
|
|
|
-}
|
|
|
-.infoLeftList:hover p:last-child span:first-child {
|
|
|
- -webkit-transform: translateY(-3px);
|
|
|
- -ms-transform: translateY(-3px);
|
|
|
- transform: translateY(-3px);
|
|
|
- -webkit-box-shadow: 0 0 6px #999;
|
|
|
- box-shadow: 0 0 6px #999;
|
|
|
- -webkit-transition: all 0.5s ease-out;
|
|
|
- transition: all 0.5s ease-out;
|
|
|
- color: #005293;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.infoLeftList p:first-child {
|
|
|
- float: left;
|
|
|
- width: 20%;
|
|
|
- font-size: 15px;
|
|
|
- background: #044b79;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- padding: 4px 0px;
|
|
|
- margin: 0 0 0 5px;
|
|
|
-}
|
|
|
-.infoLeftList p:last-child {
|
|
|
- float: right;
|
|
|
- width: 70%;
|
|
|
- padding: 0 0 0 10px;
|
|
|
-}
|
|
|
-.infoLeftList p:last-child span:first-child {
|
|
|
- float: left;
|
|
|
- width: 90%;
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-.infoLeftList p:last-child span:last-child {
|
|
|
- float: left;
|
|
|
- width: 90%;
|
|
|
- font-size: 16px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- word-break: break-all;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- margin: 5px 0 0 0;
|
|
|
- color: #666;
|
|
|
-}
|
|
|
-.page {
|
|
|
- text-align: center;
|
|
|
- margin: 10px 0;
|
|
|
-}
|
|
|
-.infoRightList {
|
|
|
- float: left;
|
|
|
- width: 95%;
|
|
|
- padding: 7px 0;
|
|
|
- margin: 0 0 0 5px;
|
|
|
-}
|
|
|
-.infoRightList:nth-child(6) {
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- padding: 0 0 17px 0;
|
|
|
-}
|
|
|
-.infoRightList:nth-child(7) {
|
|
|
- padding: 15px 0 0 0;
|
|
|
-}
|
|
|
-.infoRightList:nth-child(11) {
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- padding: 0 0 15px 0;
|
|
|
-}
|
|
|
-.infoRightList:hover p span:first-child {
|
|
|
- -webkit-transform: translateY(-3px);
|
|
|
- -ms-transform: translateY(-3px);
|
|
|
- transform: translateY(-3px);
|
|
|
- -webkit-box-shadow: 0 0 6px #999;
|
|
|
- box-shadow: 0 0 6px #999;
|
|
|
- -webkit-transition: all 0.5s ease-out;
|
|
|
- transition: all 0.5s ease-out;
|
|
|
- color: #005293;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.infoRightList p {
|
|
|
- font-size: 18px;
|
|
|
-}
|
|
|
-.infoRightList p span:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 70%;
|
|
|
- margin: 0 20px 0 10px;
|
|
|
-}
|
|
|
-.infoRightList p span:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: 21%;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-</style>
|
