完成基本架构

code/web/task_schedule/src/App.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-02-15 09:25:52
+ * @LastEditors: Kane
+ * @LastEditTime: 2023-02-15 11:30:04
+ * @FilePath: /task_schedule/src/App.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <el-config-provider :locale="this.locale">
+    <div class="app_wrapper">
+      <div class="counter_wrapper">
+        <span>s{{ ui.counter }}</span>
+        <!-- <el-button type="danger" @click="onCount">点击</el-button> -->
+      </div>
+    </div>
+  </el-config-provider>
+</template>
+
+<script>
+import HelloWorld from "./components/HelloWorld.vue";
+import zhCn from "element-plus/lib/locale/lang/zh-cn"; //element-plus语言组件
+import { reactive } from "vue";
+
+export default {
+  name: "App",
+  components: { HelloWorld },
+  setup(props)
+  {
+    const locale = zhCn;
+    const ui = reactive({
+      counter: 0,
+    });
+
+    const onCount = () =>
+    {
+      ui.counter++;
+      console.log(ui.counter);
+    };
+
+    setInterval(() =>
+    {
+      ui.counter += 1;
+      // console.log(counter);
+    }, 1000);
+
+    setInterval(() =>
+    {
+      location.reload();
+    }, 60000);
+
+    return { locale, ui, onCount };
+  },
+};
+</script>
+
+<style scoped>
+.app_wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100vh - 60px);
+  /* border: 1px solid brown; */
+
+  /* 布局 */
+  display: flex;
+}
+
+.counter_wrapper {
+  width: 300px;
+  margin-left: auto;
+  margin-right: 20px;
+}
+
+.counter_wrapper:hover {
+  box-shadow: 0px 0px 20px 10px rgb(14 18 22 / 10%);
+}
+
+.counter_wrapper span {
+  font-size: 150px;
+}
+</style>
+