1

src/views/technical/detail/guidetail.vue

@@ -1,14 +1,31 @@
 <template>
-  <div id="expdetail">
-    <p>expdetail</p>
+  <div id="guidetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="detailtop">
+          <span>{{ detailinfo.title }}</span>
+        </div>
+        <div class="detailtopleft">
+          <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+        </div>
+        <div class="detailimage" v-if="detailinfo.picture">
+          <img :src="detailinfo.picture" class="detailimg" />
+        </div>
+        <div class="detailcontext">
+          <p v-html="detailinfo.content"></p>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'expdetail',
-  props: {},
+  name: 'guidetail',
+  props: {
+    detailinfo: { type: Object },
+  },
   components: {},
   data: function() {
     return {};
@@ -24,4 +41,54 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .detailtop {
+    padding: 20px 0px;
+    font-size: 18px;
+    line-height: 40px;
+    font-weight: normal;
+    text-align: left;
+    margin: 0;
+    text-align: center;
+    color: #005293;
+  }
+  .detailtopleft {
+    text-align: center;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #ccc;
+    font-size: 16px;
+    color: #666666;
+  }
+  .detailimage {
+    text-align: center;
+    padding: 20px 0 0 0;
+  }
+  .detailimg {
+    width: 500px;
+    height: 300px;
+  }
+  .detailcontext {
+    padding: 20px 0;
+    min-height: 370px;
+  }
+  .development {
+    height: 50px;
+    border: 1px dashed red;
+    padding: 0 30px;
+    p:first-child {
+      text-align: center;
+      font-size: 18px;
+      color: red;
+      font-weight: bold;
+    }
+    p:last-child {
+      text-align: center;
+      height: 25px;
+      line-height: 25px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/technical/detail/roadetail.vue

@@ -1,14 +1,31 @@
 <template>
-  <div id="expdetail">
-    <p>expdetail</p>
+  <div id="inddetail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <div class="detailtop">
+          <span>{{ detailinfo.title }}</span>
+        </div>
+        <div class="detailtopleft">
+          <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
+        </div>
+        <div class="detailimage" v-if="detailinfo.picture">
+          <img :src="detailinfo.picture" class="detailimg" />
+        </div>
+        <div class="detailcontext">
+          <p v-html="detailinfo.content"></p>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  name: 'expdetail',
-  props: {},
+  name: 'inddetail',
+  props: {
+    detailinfo: { type: Object },
+  },
   components: {},
   data: function() {
     return {};
@@ -24,4 +41,54 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .detailtop {
+    padding: 20px 0px;
+    font-size: 18px;
+    line-height: 40px;
+    font-weight: normal;
+    text-align: left;
+    margin: 0;
+    text-align: center;
+    color: #005293;
+  }
+  .detailtopleft {
+    text-align: center;
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #ccc;
+    font-size: 16px;
+    color: #666666;
+  }
+  .detailimage {
+    text-align: center;
+    padding: 20px 0 0 0;
+  }
+  .detailimg {
+    width: 500px;
+    height: 300px;
+  }
+  .detailcontext {
+    padding: 20px 0;
+    min-height: 370px;
+  }
+  .development {
+    height: 50px;
+    border: 1px dashed red;
+    padding: 0 30px;
+    p:first-child {
+      text-align: center;
+      font-size: 18px;
+      color: red;
+      font-weight: bold;
+    }
+    p:last-child {
+      text-align: center;
+      height: 25px;
+      line-height: 25px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/technical/list.vue

@@ -47,7 +47,7 @@
                   <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                 </el-col>
                 <el-col :span="24">
-                  <guidetail></guidetail>
+                  <guidetail :detailinfo="guidetail"></guidetail>
                 </el-col>
               </span>
               <span v-else-if="column_name == '项目路演'">
@@ -55,7 +55,7 @@
                   <el-button type="primary" size="mini" @click="display = 'list'">返回</el-button>
                 </el-col>
                 <el-col :span="24">
-                  <roadetail></roadetail>
+                  <roadetail :detailinfo="roadetail"></roadetail>
                 </el-col>
               </span>
             </span>
@@ -127,6 +127,10 @@ export default {
       expdetail: {},
       // 行业研究
       inddetail: {},
+      // 嘉宾访谈
+      guidetail: {},
+      // 项目路演
+      roadetail: {},
     };
   },
   async created() {
@@ -136,8 +140,8 @@ export default {
   methods: {
     ...column({ columnList: 'query', columnInfo: 'fetch' }),
     ...news({ newsList: 'query', newsFetch: 'fetch' }),
-    ...newsguidance({ danceQuery: 'query' }),
-    ...newsroadshow({ adshowQuery: 'query' }),
+    ...newsguidance({ danceQuery: 'query', danceFetch: 'fetch' }),
+    ...newsroadshow({ adshowQuery: 'query', adshowFetch: 'fetch' }),
     // 查询栏目，列表，详情
     async searchColumn() {
       if (this.type == 1) {
@@ -207,6 +211,17 @@ export default {
         if (this.$checkRes(res)) {
           this.$set(this, `inddetail`, res.data);
         }
+      } else if (columnName == '嘉宾访谈') {
+        let res = await this.danceFetch(id);
+        if (this.$checkRes(res)) {
+          console.log(res.data);
+          // this.$set(this, `guidetail`, res.data);
+        }
+      } else if (columnName == '项目路演') {
+        let res = await this.adshowFetch(id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `roadetail`, res.data);
+        }
       }
     },
     // 点击查看详情