desktop_task_schedule/code/web/task_schedule/src/App.vue

<!--
 * @Author: Kane
 * @Date: 2023-02-15 09:25:52
 * @LastEditors: Kane
 * @LastEditTime: 2023-02-17 11:26:21
 * @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();
    }, 5000);

    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: 500px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: 20px;
  border-radius: 5px;
  background-color: rgb(250 250 250 / 75%);

}

.counter_wrapper:hover {
  box-shadow: 0px 0px 20px 10px rgb(14 18 22 / 10%);
}

.counter_wrapper span {
  display: block;
  font-size: 150px;
  text-align: right;
}
</style>