更新

src/router/index.js

@@ -19,6 +19,14 @@ const live = [
         name: 'live_detail',
         component: () => import('../views/detail/detail.vue'),
       },
+      // 专题研讨
+
+      {
+        path: '/live/semDetail',
+        meta: { title: '信息详情', subSite: true },
+        name: 'live_semDetail',
+        component: () => import('../views/detail/semDetail.vue'),
+      },
       // 教育培训
       {
         path: '/live/eduDetail',

src/views/detail/semDetail.vue

@@ -0,0 +1,131 @@
+<template>
+  <div id="semDetail">
+    <el-row>
+      <div class="w_1200">
+        <el-col :span="24" class="semDetail">
+          <el-col :span="24" class="messInfo">
+            <el-col :span="6" class="left">
+              <el-image style="width:100%;height:238px;" v-if="detailinfo.picture" :src="detailinfo.picture"></el-image>
+              <el-image v-else style="width:100%;height:238px;" :src="pic"></el-image>
+              <p>{{ detailinfo.title }}</p>
+              <p>发布时间：{{ detailinfo.publish_time }}</p>
+              <p>来源：{{ detailinfo.orgin }}</p>
+            </el-col>
+            <el-col :span="18" class="right">
+              {{ detailinfo.content }}
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="chatInfo">
+            <el-col :span="24" class="message">
+              显示信息
+            </el-col>
+            <el-col :span="24" class="input">
+              <wang-editor v-model="inputInfo" ref="editor"></wang-editor>
+              <el-button type="primary">发布评论</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import wangEditor from '@/components/wang-editor.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: news } = createNamespacedHelpers('news');
+export default {
+  name: 'semDetail',
+  props: {},
+  components: {
+    wangEditor,
+  },
+  data: () => ({
+    detailinfo: {},
+    pic: require('@/assets/live/1.jpg'),
+    inputInfo: '',
+  }),
+  created() {
+    this.search();
+  },
+  computed: {
+    id() {
+      return this.$route.query.id;
+    },
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  methods: {
+    ...news(['fetch']),
+    async search() {
+      const res = await this.fetch(this.id);
+      this.$set(this, `detailinfo`, res.data);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 80%;
+  margin: 0 auto;
+}
+.semDetail {
+  float: left;
+  width: 100%;
+  min-height: 600px;
+  margin: 30px 0;
+}
+.semDetail .messInfo {
+  float: left;
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  border-bottom: 1px solid #ccc;
+}
+.messInfo .left p {
+  float: left;
+  width: 100%;
+  font-size: 18px;
+  padding: 5px 0 10px 0;
+}
+.messInfo .left p:nth-child(2) {
+  font-weight: bold;
+}
+.messInfo .right {
+  font-size: 18px;
+  line-height: 35px;
+  text-indent: 2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 11;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  padding: 0 30px;
+}
+.semDetail .chatInfo {
+  float: left;
+  width: 100%;
+  min-height: 400px;
+}
+.chatInfo .message {
+  float: left;
+  border: 1px solid red;
+  height: 400px;
+  overflow: hidden;
+  margin: 0 0 30px 0;
+}
+.chatInfo .input {
+  float: left;
+  height: 400px;
+  overflow: hidden;
+  text-align: center;
+  padding: 0 10%;
+}
+.chatInfo .input .el-button {
+  margin: 20px 0 0 0;
+}
+</style>

src/views/technical/index.vue

@@ -17,7 +17,7 @@
           <el-col class="infoLeftList" :span="24" v-for="(item, index) in zhuantiList" :key="index">
             <p>{{ item.publish_time }}</p>
             <p>
-              <span @click="$router.push({ path: '/live/detail', query: { id: item.id } })" class="textOver">{{ item.title }}</span>
+              <span @click="$router.push({ path: '/live/semDetail', query: { id: item.id } })" class="textOver">{{ item.title }}</span>
               <span>{{ item.content }}</span>
             </p>
           </el-col>