页面更新

src/views/Home.vue

-<template>
+<template>
   <a-layout id="components-layout-demo-responsive">
     <a-layout-content :style="{ margin: '10px 16px 16px 16px',height:'67%',backgroundColor:'rgba(0,0,0,0.1)'}">
       <div :style="{ padding: '24px',height:'100%'}">
@@ -17,7 +17,7 @@
               <a-col :span="10">
                 <a-card :bordered="false"
                         style="height:100%;width:47%;background-color:rgba(100,100,100,0.1);margin-left:20px;">
-                  <img style="height:100%;"
+                  <img style="height:100%;maxHeight:200px;"
                        alt="example"
                        :src="currentInfo.url"
                        slot="cover" />
@@ -50,7 +50,7 @@
                  style="margin-bottom:10px;background-color:rgba(0,0,0,0);"
                  v-for="(item,i) in data1PhotoArray"
                  :key="i">
-            <img style="maxHeight:240px"
+            <img style="maxHeight:200px"
                  :src="item"
                  alt="">
           </a-col> -->
@@ -65,13 +65,13 @@
               <div @click="scrollTo(index)"
                    style="display:inline-block;padding: 10px;text-align:center;">
                 <a-card hoverable
-                        style="height:100%;">
+                        style="height:100%;width:80%;">
                   <img alt="example"
                        style="max-height:200px;"
                        :src="item.url"
                        slot="cover" />
-                  <a-card-meta title="时间戳">
-                    <template slot="description">{{item.timestamp}}</template>
+                  <a-card-meta>
+                    <template  slot="description">{{item.timestamp}}</template>
                   </a-card-meta>
                 </a-card>
               </div>
@@ -90,6 +90,7 @@
 // @ is an alias to /src
 import { getDemonstrationInfo } from '@/api/demonstrate'
 import 'videojs-flash'
+import moment from 'moment'
 
 const formatData = function (data, data1PhotoArray, _this, timestamp) {
   if (data.mixed !== null) {
@@ -99,13 +100,13 @@ const formatData = function (data, data1PhotoArray, _this, timestamp) {
         formatData(item.mixed, data1PhotoArray, _this, timestamp)
         // debugger
       } else {
-        data1PhotoArray.push({
+        data1PhotoArray.unshift({
           url: item.url,
-          timestamp
+          timestamp: moment.utc(timestamp).local().format('YYYY-MM-DD HH:mm:ss')
         })
         _this.currentInfo = {
           url: item.url,
-          timestamp
+          timestamp: moment.utc(timestamp).local().format('YYYY-MM-DD HH:mm:ss')
         }
         // debugger
       }
@@ -172,7 +173,7 @@ export default {
     },
     swiperOption: function () {
       return {
-        slidesPerView: 6,
+        slidesPerView: 10,
         spaceBetween: 0,
         freeMode: true,
         pagination: {
@@ -195,16 +196,17 @@ export default {
         formatData(el.data, this.data1PhotoArray, this, el.timestamp)
       }
       console.log(this.data1PhotoArray)
-    },
-    data1PhotoArray (newValue, oldValue) {
-      if (newValue.length > 12) {
-        newValue.shift()
-        this.data1PhotoArray = newValue
-      }
     }
+    // data1PhotoArray (newValue, oldValue) {
+    //   if (newValue.length > 12) {
+    //     newValue.pop()
+    //     this.data1PhotoArray = newValue
+    //   }
+    // }
 
   },
   methods: {
+    moment,
     start () {
       const _this = this
       const clock = setInterval(function () {