实现平台动态自适应

package.json

@@ -73,7 +73,7 @@
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
-    "sass": "3.32.0",
+    "sass": "1.32.0",
     "sass-loader": "10.1.0",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",

src/api/bid/information.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+export function listInformation(query) {
+  return request({
+    url: '/bid/information/front/list',
+    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

@@ -1,25 +1,96 @@
 <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>
+
+    <div style="padding: 20px; background: #fff; margin: 10px;">
+      <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">
+        </el-table-column>
+        <el-table-column prop="publishDatetime" label="日期">
+        </el-table-column>
+      </el-table>
+
+      <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>
+              <b>{{ scope.row.title }}</b>
+            </div>
+              {{ parseTime(scope.row.publishDatetime, '{y}-{m}-{d}') }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin-top: 40px;">
+      <el-pagination :page-sizes="[20, 30, 50, 100]" :page-size="query.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="query.total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" :current-page="query.pageNum">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
-
+import { listInformation } from "@/api/bid/information";
+import { parseTime } from "@/utils/neu";
 export default {
   name: "list",
-  data() {
+  data () {
     return {
-      
+      isShowWindows: true,
+      query: {
+        pageNum: 1,
+        pageSize: 20,
+        total: null
+      },
+      tableData: [{
+        publishDatetime: '2016-05-02',
+        title: '王小虎',
+      }, {
+        publishDatetime: '2016-05-04',
+        title: '王小虎',
+      }, {
+        publishDatetime: '2016-05-01',
+        title: '王小虎',
+      }, {
+        publishDatetime: '2016-05-03',
+        title: '王小虎',
+      }]
     }
   },
-  mounted() {
-   
+  created () {
+    this.getlist();
+  },
+  mounted () {
+    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;
+        this.query.total = res.total;
+      });
+    },
+    handleCurrentChange (value) {
+      this.query.pageNum = value;
+      this.getlist();
+    },
+    handleSizeChange (value) {
+      this.query.pageSize = value;
+      this.getlist();
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>