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(false);
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;
    viewCountDisplay.value = true;
  }

})

</script>

<template>
  <div class="container">
    <el-container>

      <el-main>
        <div class="left">
          <div class="sun">
            <div class="earth">
              <div class="moon"></div>
            </div>
          </div>
<!--          <div class="ball"/>-->
        </div>
        <div class="right">
          <div class="logo">CYBER</div>
          <div class="text">CODING YOUTH BOT AND ENGINEERING REVOLUTION</div>
          <div class="link">
            <a>ABOUT US</a>
            <a>ABOUT THIS WEBSITE</a>
            <a>CONTACT US</a>
          </div>
        </div>

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

      </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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.left {
  height: 100%;
  width: 100%;
  flex: 1;
  position: relative;
  //overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ball {
  background: #00a8a8;
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
  animation: pulse 5s ease infinite;
}
.theme-light .ball {
  background: #ffff3c;
}
@keyframes pulse {
  0% {
    opacity: 0.7;
    filter: blur(50px);
  }
  50% {
    opacity: 0.4;
    filter: blur(70px);
  }
  100% {
    opacity: 0.7;
    filter: blur(50px);
  }
}

.right {
  margin-right: 5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 18vh;
}
.logo {
  font-family: 'Netron', sans-serif;
  font-size: 10vw;
}
.right .text {
  font-family: 'Netron', sans-serif;
  font-size: 1.27vw;
}
.right .link {
  display: flex;
  gap: 1.5vw;
  font-family: sans-serif;
  padding-top: 5.5vh;
  font-size: 0.9vw;
}
.link a {
  color: white;
  cursor: pointer;
}
.theme-light a {
  color: #000;
}

.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;
}

@media (max-width: 900px) {
  .el-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  .left {
    position: absolute;
    top: 50%;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    z-index: -1;
  }
  .ball {
    width: 10rem;
    height: 10rem;
  }
  .right {
    margin: 0;
    padding-bottom: 0;
  }
  .logo {
    font-size: 5rem;
  }
  .right .text {
    font-size: 0.65rem;
  }
  .right .link {
    display: flex;
    gap: 0.5rem;
    padding-top: 1.7rem;
    font-size: 0.5rem;
  }
}

*{
  /* 初始化 */
  margin: 0;
  padding: 0;
}
.left{
  /* 自定义属性，--s为太阳的颜色，--e为地球的颜色，--m为月球的颜色，可通过var函数对其调用 */
  --s: #f39c12;
  --e: #3498db;
  --m: #1abc9c;
}
/* 太阳 */
.sun{
  /* 绝对定位 */
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* 通过var函数调用自定义属性--s，设置太阳的颜色 */
  background-color: var(--s);
  /* 通过设置阴影，实现发光的效果 */
  box-shadow: 0 0 10px var(--s),
  0 0 20px var(--s),
  0 0 30px var(--s),
  0 0 40px var(--s);
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: rotate 36.5s linear infinite;
}
/* 太阳外圈（地球轨道） */
.sun::after{
  content: "";
  width: 330px;
  height: 330px;
  /* 绝对定位 居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid gray;
  border-radius: 50%;
  z-index: -1;
}
/* 地球 */
.earth{
  position: absolute;
  left: 200px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--e);
  box-shadow: 0 0 10px var(--e),
  0 0 20px var(--e),
  0 0 30px var(--e),
  0 0 40px var(--e);
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: rotate 3s linear infinite;
}
/* 地球外圈（月球轨道） */
.earth::after{
  content: "";
  width: 84px;
  height: 84px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid gray;
  border-radius: 50%;
}
/* 月球 */
.moon{
  position: absolute;
  left: 50px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--m);
  box-shadow: 0 0 5px var(--m),
  0 0 10px var(--m),
  0 0 20px var(--m);
}

/* 定义动画 */
@keyframes rotate {
  to{
    transform: rotateZ(360deg);
  }
}
</style>