实现平台动态自适应

src/api/bid/information.js

@@ -6,4 +6,11 @@ export function listInformation(query) {
     method: 'get',
     params: query
   })
+}
+
+export function getInformation(id) {
+  return request({
+    url: '/bid/information/front/' + id,
+    method: 'get'
+  })
 }

src/router/index.js

@@ -100,6 +100,10 @@ export const constantRoutes = [
         path: "/bid/list",
         component: (resolve) => require(['@/views/bid/list.vue'], resolve),
       },
+      {
+        path: "/bid/detail",
+        component: (resolve) => require(['@/views/bid/detail.vue'], resolve),
+      },
       {
         path: "/info/list",
         component: (resolve) => require(['@/views/information/list.vue'], resolve),

src/views/information/detail.vue

@@ -1,9 +1,25 @@
 <template>
-
+  <div>
+    <el-breadcrumb separator="/" style="margin-left: 20px;">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item><a href="/info/list">动态列表页</a></el-breadcrumb-item>
+      <el-breadcrumb-item><a href="/info/detail">动态详情</a></el-breadcrumb-item>
+    </el-breadcrumb>
+      <div class="concent">
+        <h1 class="concent-title">
+          {{ detail.title }}
+        </h1>
+        <div class="concent-time">
+          <span style="margin-right: 60px;">作者：{{ detail.createBy }}</span>
+          <span>发布时间：{{ detail.publishDatetime }}</span>
+        </div>
+        <div class="concent-content" v-html="detail.content"></div>
+      </div>
+  </div>
 </template>
 
 <script>
-
+import { getInformation } from "@/api/bid/information";
 export default {
   name: "detail",
   methods: {
@@ -11,19 +27,49 @@ export default {
   },
   data() {
     return {
-      
+      detail: {}
     }
   },
-  async created() {
-    
+  created() {
+    this.getDetail();  
   },
-  mounted() {
-   
-  },
-
+  methods: {
+    getDetail(){
+      getInformation(this.$route.query.id).then(res => {
+        this.detail = res.data;
+        console.log('new',this.detail);
+      })
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+  .concent{
+    margin: 20px 60px;
+    padding: 40px;
+    background-color: #ffffff;
+  }
+  .concent-content{
+    justify-content: left;
+    text-align: justify;
+  }
+  .concent-time{
+    margin: 40px 0;
+  }
 
+  @media screen and (max-width:765px){
+    .concent{
+      margin: 0;
+      padding: 20px;
+    }
+
+    .concent-time{
+      margin: 0;
+    }
+
+    .concent-title{
+      margin: 0;
+    }
+  }
 </style>

src/views/information/list.vue

@@ -2,11 +2,11 @@
   <div>
     <el-breadcrumb separator="/" style="margin-left: 20px;">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item><a href="/">动态列表页</a></el-breadcrumb-item>
+      <el-breadcrumb-item><a href="/info/list">动态列表页</a></el-breadcrumb-item>
     </el-breadcrumb>
 
     <div style="padding: 20px; background: #fff; margin: 10px;">
-      <el-table :data="tableData" style="width: 100%;" v-if="isShowWindows">
+      <el-table :data="tableData" style="width: 100%;" v-if="isShowWindows" @row-click="handleClick">
         <el-table-column type="index" label="序号" width="300">
         </el-table-column>
         <el-table-column prop="title" label="标题" width="800">
@@ -15,7 +15,7 @@
         </el-table-column>
       </el-table>
 
-      <el-table :data="tableData" style="width: 100%" :show-header="false" v-if="!isShowWindows">
+      <el-table :data="tableData" style="width: 100%" :show-header="false" v-if="!isShowWindows"  @row-click="handleClick">
         <el-table-column label="标题">
           <template slot-scope="scope">
             <div>
@@ -24,8 +24,6 @@
               {{ parseTime(scope.row.publishDatetime, '{y}-{m}-{d}') }}
           </template>
         </el-table-column>
-        <!-- <el-table-column prop="publishDatetime" label="日期">
-        </el-table-column> -->
       </el-table>
     </div>
 
@@ -73,6 +71,10 @@ export default {
     window.onresize = () => this.isShowWindows = document.body.clientWidth > 765;
   },
   methods: {
+    handleClick(row) {
+      console.log(row);
+      this.$router.push({ path: '/info/detail?id=' + row.id });
+    },
     getlist () {
       listInformation(this.query).then(res => {
         this.tableData = res.rows;