修改

index.html

@@ -12,16 +12,6 @@
   </body>
 </html>
 <style>
-  html,
-  body,
-  #app {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
 </style>
 </body>
 </html>

src/router/index.js

@@ -22,6 +22,12 @@ export const constantRoutes = [
     meta: { title: '系统登录' },
     component: () => import('@/views/login/index.vue')
   },
+  {
+    path: '/hatch',
+    name: 'Hatch',
+    meta: { title: '孵化大脑' },
+    component: () => import('@/views/hatch/index.vue')
+  },
   {
     path: '/',
     name: 'Layout',

src/views/hatch/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <div class="head">
+          <h1 class="head_1">大数据可视化系统数据分析通用模版</h1>
+          <div class="head_2" id="showTime">{{ formattedTime }}</div>
+        </div>
+        <div class="center">
+          <ul class="clearfix">
+            <li>
+              <div class="boxall" style="height: calc(40% - 0.15rem)">
+                <div class="titleall">模块标题</div>
+                <div class="list">
+                  <div class="list_1" v-for="i in listOne" :key="i.value">
+                    <h2>{{ i.value }}</h2>
+                    <span>{{ i.label }}</span>
+                  </div>
+                </div>
+                <div class="boxfoot"></div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="bottom">下</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 加载中
+const loading = ref(false)
+// 时间
+const formattedTime = ref('')
+const listOne = ref([
+  { value: '1824', label: '华东地区' },
+  { value: '1920', label: '华南地区' },
+  { value: '19%', label: '华西地区' },
+  { value: '1824', label: '华北地区' }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await updateTime()
+  loading.value = false
+})
+// 创建一个函数来格式化时间并更新状态
+const updateTime = () => {
+  const now = new Date()
+  const options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }
+  formattedTime.value = now.toLocaleString('zh-CN', options)
+}
+
+const timer = setInterval(updateTime, 1000)
+
+onMounted(() => {
+  timer // 开始计时器
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timer) // 组件卸载前清除计时器
+})
+</script>
+<style scoped lang="scss">
+.main {
+  height: 100vh;
+  background: url('./images/bg.jpg') no-repeat center center;
+  background-size: 100% 100%;
+  padding: 0px;
+  margin: 0px;
+  color: #222;
+  font-family: '微软雅黑';
+  @font-face {
+    font-family: electronicFont;
+    src: url(./font/DS-DIGIT.TTF);
+  }
+  a:hover {
+    color: #06c;
+    text-decoration: none !important;
+  }
+  .head {
+    position: relative;
+    height: 4.5rem;
+    background: url('./images/head_bg.png') no-repeat center center;
+    background-size: 100% 100%;
+    .head_1 {
+      color: #fff;
+      text-align: center;
+      font-size: 2.5rem;
+      line-height: 2.5rem;
+    }
+    .head_2 {
+      position: absolute;
+      right: 1rem;
+      top: 0;
+      line-height: 1.5rem;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 1.5rem;
+      padding-right: 0.5rem;
+      font-family: electronicFont;
+    }
+  }
+  .center {
+    .titleall {
+      font-size: 1.2rem;
+      color: #fff;
+      line-height: 1.2rem;
+      padding: 0 0 1rem 0;
+      border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
+    }
+    .boxall {
+      border: 1px solid rgba(25, 186, 139, 0.17);
+      padding: 1rem;
+      background: rgba(255, 255, 255, 0.04) url('./images/line.png');
+      background-size: 100% auto;
+      position: relative;
+      margin-bottom: 0.15rem;
+      z-index: 10;
+      .list {
+        display: flex;
+        align-items: center;
+        .list_1 {
+          position: relative;
+          width: 20rem;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin: 0 0 0.5rem 0;
+          h2 {
+            margin: 1rem 0;
+            font-size: 1.9rem;
+            color: #46b8ff;
+            padding-bottom: 0.2rem;
+          }
+          span {
+            font-size: 1.2rem;
+            color: #fff;
+            opacity: 0.5;
+          }
+        }
+        .list_1:before {
+          position: absolute;
+          content: '';
+          height: 25%;
+          width: 0.1rem;
+          background: rgba(255, 255, 255, 0.1);
+          right: 0;
+          top: 25%;
+        }
+        .list_1:last-child:before {
+          width: 0;
+        }
+      }
+      .boxfoot {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        left: 0;
+      }
+    }
+    .boxall:before,
+    .boxfoot:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+    .boxall:before {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .boxall:after,
+    .boxfoot:after {
+      border-right: 2px solid #02a6b5;
+      right: 0;
+    }
+    .boxall:before,
+    .boxall:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-top: 2px solid #02a6b5;
+      top: 0;
+    }
+    .boxfoot:before,
+    .boxfoot:after {
+      position: absolute;
+      width: 0.7rem;
+      height: 0.7rem;
+      content: '';
+      border-bottom: 2px solid #02a6b5;
+      bottom: 0;
+    }
+    .boxall:before,
+    .boxfoot:before {
+      border-left: 2px solid #02a6b5;
+      left: 0;
+    }
+  }
+  .center > ul > li {
+    float: left;
+    padding: 0 0.1rem;
+    height: 100%;
+    width: 30%;
+  }
+}
+</style>