technique_admin/src/views/hatch/index.vue

<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>