cyber/src/pages/Home.vue

<script setup>
import {ref, onMounted} from 'vue'
import {TransitionPresets, useTransition} from '@vueuse/core';
import api from "../utils/axios.js";

const source = ref(0);
const viewCountDisplay = ref(true);
const outputValue = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
})


onMounted(async () => {
  const response = await api.get('/view');
  if (response.code === 0) {
    source.value = response.views;
  } else {
    viewCountDisplay.value = false;
  }

})

</script>

<template>
  <div class="container">
    <el-container>
      <div style="font-size: 50px; font-weight: inherit; padding: 20px">欢迎来到 MVA-CYBER !</div>
<!--      <el-main>-->

<!--      </el-main>-->
<!--      <el-footer>-->
<!--        <div class="text-bg"></div>-->
        <el-col v-if="viewCountDisplay">
          <el-statistic title="网站累计访问次数" :value="outputValue"/>
        </el-col>

<!--      </el-footer>-->
    </el-container>
  </div>

</template>

<style scoped>
img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.el-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

}
.el-main {
  overflow: hidden;
  padding: 0;
  width: 100%;
}
.el-footer {
  position: relative;
}
.el-col {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-statistic {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
</style>