页面更新

src/views/Home.vue

 <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%'}">
+      <div :style="{ padding: '15x',height:'100%'}">
         <a-row style="height:100%">
           <a-col :span="6"
                  style="height:100%">
-            <a-row style="height:50%;padding:15px;">
+            <a-row style="height:50%;padding:10px;">
               <div class="demo">
                 <video-player class="video-player vjs-custom-skin"
                               ref="videoPlayer"
@@ -13,17 +13,17 @@
                               :options="playerOptions"></video-player>
               </div>
             </a-row>
-            <a-row style="height:50%;">
+            <a-row style="height:50%;padding:10px;background-color:rgba(100,100,100,0.1)">
               <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%;maxHeight:200px;"
+                        style="height:100%;width:80%;margin-left:20px;margin-right:20px;">
+                  <img style="height:100%;maxHeight:245px;"
                        alt="example"
                        :src="currentInfo.url"
                        slot="cover" />
                 </a-card>
               </a-col>
-              <a-col :span="10">
+              <a-col :span="8">
                 <span >{{currentInfo.timestamp}}</span>
               </a-col>
             </a-row>
@@ -63,11 +63,11 @@
                           v-for="(item,index) in data1PhotoArray"
                           :key="index">
               <div @click="scrollTo(index)"
-                   style="display:inline-block;padding: 10px;text-align:center;">
+                   style="display:inline-block;padding:10px;text-align:center;">
                 <a-card hoverable
                         style="height:100%;width:80%;">
                   <img alt="example"
-                       style="max-height:200px;"
+                       style="max-height:225px;"
                        :src="item.url"
                        slot="cover" />
                   <a-card-meta>
@@ -123,7 +123,10 @@ export default {
       // 1
       demoData1Array: [],
       data1PhotoArray: [],
-      currentInfo: {},
+      currentInfo: {
+        url: '',
+        timestamp: ''
+      },
       flvResource: {
         type: 'video/x-flv',
         src: 'http://202.112.23.252:9017/public_pic_dir/sample.flv'
@@ -173,7 +176,7 @@ export default {
     },
     swiperOption: function () {
       return {
-        slidesPerView: 10,
+        slidesPerView: 12,
         spaceBetween: 0,
         freeMode: true,
         pagination: {
@@ -251,4 +254,28 @@ export default {
   width: 100%;
   background-color: rgba(0, 0, 0, 0);
 }
+.swiper-container-horizontal {
+    height: 8px;
+}
+
+#components-layout-demo-responsive  .ant-card{
+  line-height: 1;
+  font-size: 12px;
+}
+
+#components-layout-demo-responsive  .ant-card-body {
+    padding: 15px;
+    zoom: 1;
+}
+
+#components-layout-demo-responsive  .swiper-container-horizontal > .swiper-scrollbar {
+    height: 8px;
+}
+#components-layout-demo-responsive .ant-col-8 {
+    width: 40%;
+}
+
+#components-layout-demo-responsive .ant-card-meta-description {
+    color: rgba(0, 0, 0, 0.85);
+}
 </style>

vue.config.js

@@ -12,20 +12,20 @@
 // vue.config.js
 module.exports = {
 
-  devServer: {
-    host: '192.168.100.101',
-    disableHostCheck: true,
-    // development server port 8000
-    port: 8080
-    // proxy: {
-    //   '/api': {
-    //     // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
-    //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
-    //     ws: false,
-    //     changeOrigin: true
-    //   }
-    // }
-  },
+  // devServer: {
+  //   host: '192.168.100.101',
+  //   disableHostCheck: true,
+  //   // development server port 8000
+  //   port: 8080
+  //   // proxy: {
+  //   //   '/api': {
+  //   //     // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+  //   //     target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+  //   //     ws: false,
+  //   //     changeOrigin: true
+  //   //   }
+  //   // }
+  // },
 
   // disable source map in production
   productionSourceMap: false,