tk-page-Fan/src/views/nav.vue

<template>
  <div class="app-container">
    <!-- <Sidebar class="noneText" @activeIndex="activeIndexFn" /> -->
    <div class="content ">
      <!-- <div v-show="activeIndexA == 1">
        <workbenches />
      </div> -->
      <div>
        <hostsList />
      </div>
      <!-- <div style="position: absolute; bottom: 0; right: 0;">{{ version }}</div> -->
    </div>
    <div class="footer">
        到期时间：{{ time }}
      </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
// import Sidebar from '../components/Sidebar.vue';
import { RouterLink, RouterView } from 'vue-router'
import hostsList from '@/views/hosts/hostsList.vue'
import { ElMessage } from 'element-plus';
import { getUser } from "@/utils/storage";
// import workbenches from '@/views/hosts/workbenches.vue'
import { tokenStore,UserStore } from '@/stores/notice'
const userCache = UserStore()
const time = ref(formatTimestamp(userCache.user.brotherExpireTime))
// 时间格式化方法 - 将12位时间戳转为YYYY-MM-DD HH:mm:ss格式
function formatTimestamp(timestamp) {
  try {
    // 转换为数字
    const ts = Number(timestamp);
    if (isNaN(ts)) {
      return '--';
    }
    // 处理13位时间戳（毫秒级）
    const date = new Date(ts > 999999999999 ? ts : ts * 1000);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  } catch (e) {
    console.error('时间格式化错误:', e);
    return '--';
  }
}


</script>

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
    /* 页面无法选中 */
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.app-container {
  display: flex;
  width: 1600px;
  height: 900px;
  background-color: @bg-color;
  position: relative;


}

.noneText {
  /* 页面无法选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sidebar {
  width: 200px;
  background-color: @bg-color;
  padding: 20px;
  /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
}

.content {
  // margin-left: 280px;
  margin-left: 25px;
  margin-right: 25px;
  width: 1540px;
  height: 848px;
  background: #FFFFFF;
  border-radius: 36px;
  margin-top: 16px;
}

.center-justify {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.footer{
  position: absolute;
  bottom: 10px;
  left: calc(50% - 150px);  
  color: aqua;
  font-size: 16px;
}
</style>