新增动态时间，修改全屏滚动条bug，翻页列表为行滚动（有bug）

src/assets/scss/index.scss

@@ -2,7 +2,7 @@
   color: #d3d6dd;
   background-color: #000000;
   width: 100%;
-  height: 100vh;
+  height: 100%;
 
   .bg {
     padding: 0.2rem 0.2rem 0 0.2rem;

src/utils/index.js

@@ -32,3 +32,31 @@ export function debounce(func, wait, immediate) {
     return result;
   };
 }
+
+/**
+ * @param {date} time 需要转换的时间
+ * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+export function formatTime(time, fmt) {
+  if (!time) return ''
+  else {
+    const date = new Date(time)
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      'S': date.getMilliseconds()
+    }
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((
+          '00' + o[k]).substr(('' + o[k]).length)))
+      }
+    }
+    return fmt
+  }
+}

src/views/center.vue

@@ -37,7 +37,7 @@
 import centerChart from "@/components/echart/center/centerChartRate";
 
 export default {
-  data() {
+  data () {
     return {
       titleItem: [
         {
@@ -112,20 +112,27 @@ export default {
             value: 80
           },
           {
-            name: "新乡",
+            name: "新乡2",
             value: 80
           },
           {
-            name: "新乡",
+            name: "新乡3",
             value: 80
           },
           {
-            name: "新乡",
+            name: "新乡4",
             value: 80
-          }
+          },
+          {
+            name: "新乡5",
+            value: 80
+          },
+          {
+            name: "新乡6",
+            value: 80
+          },
         ],
-        waitTime: 4000,
-        carousel: "page",
+        carousel: "single",
         unit: "份"
       },
       water: {

src/views/index.vue

@@ -48,7 +48,7 @@
               style="width: 6.25rem; background-color: #0f1325; text-align: right;"
             >
               <span class="react-after"></span>
-              <span class="text">2020年03月16日 周一 12:00</span>
+              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
             </div>
           </div>
         </div>
@@ -97,6 +97,7 @@
 </template>
 
 <script>
+import { formatTime } from '../utils/index.js'
 import centerLeft1 from "./centerLeft1";
 import centerLeft2 from "./centerLeft2";
 import centerRight1 from "./centerRight1";
@@ -105,9 +106,13 @@ import center from "./center";
 import bottomLeft from "./bottomLeft";
 import bottomRight from "./bottomRight";
 export default {
-  data() {
+  data () {
     return {
-      loading: true
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
     };
   },
   components: {
@@ -119,11 +124,19 @@ export default {
     bottomLeft,
     bottomRight
   },
-  mounted() {
+  mounted () {
+    this.timeFn();
     this.cancelLoading();
   },
   methods: {
-    cancelLoading() {
+    timeFn () {
+      setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
+        this.dateWeek = this.weekday[new Date().getDay()];
+      }, 1000)
+    },
+    cancelLoading () {
       setTimeout(() => {
         this.loading = false;
       }, 500);
@@ -133,5 +146,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../assets/scss/index.scss";
+@import '../assets/scss/index.scss';
 </style>