FileManage/web/src/views/dashboard/index.vue

<script lang="ts">
// 组件引用
export default {
  name: 'Dashboard' // 现状分析
}
</script>
<script setup lang="ts">
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const title = userStore.title;
</script>
<template>
  <div class="dashboard-container" 
  style="display: flex;align-items: center;justify-content: center;flex-wrap: wrap;align-content:center;">
   <div style="width: 100%; text-align: center;
    font-size: 70px;
    margin-top: 200px;
    color: #fff;">欢迎使用{{ title }}</div>
 </div>
</template>

<style lang="scss" scoped>
.dashboard-container{
  width: 100%;
  // height: 100%;
  height: calc(100vh - 145px);
  background: url('@/assets/login/index.jpg') ;
  background-position: center center;
  background-repeat: no-repeat;
  .dashboard-container-title{
    width: 100%;
    display: flex;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #1B1B1B;
    align-items: center;
    margin-bottom: 15px;
    img{
      width: 16px;
      height: 16px;
      margin-left:15px;
    }
  }
  .dashboard-container-top{
    height: 130px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .top-box{
      width: 16%;
      height:130px;
      padding: 0 20px;
      background-color: rgba(255, 255, 255, 1);
      border: none;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-box-title{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #787878;
      }
      .top-box-num{
        font-family: '微软雅黑 Bold', '微软雅黑';
        font-weight: 700;
        font-style: normal;
        font-size: 28px;
        color: #363636;
        margin-top: 5px;
      }
      .top-box-right{
        width: 60px;
        height: 60px;
        background-color: #F7B900;
        border-radius: 60px;
        position: relative;
        img{
          position: absolute; 
          top: 9px;
          left: 12px;
        }
      }
    }
  }
  .dashboard-container-bottom{
    height: calc(100vh - 335px);
    width: 100%;
    margin-top: 15px;
    .container-bottom-top{
      height: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .bottom-top-box{
        width: 33%;
        height: 100%;
        // padding: 0 20px;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 5px;
        margin-right: 15px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      }
      .bottom-top-box:nth-child(3){
        margin-right: 0px;
      }
      .box-content-title{
        height: 50px;
        width: 100%;
        padding: 0px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom:1px solid #F6F6F6;
        .titleicon{
          width: 6px;
          height: 14px;
          background-color: #409EFF;
          margin-right: 9px;
        }
        .titletext{
          font-weight: 700;
          font-style: normal;
          font-size: 14px;
          color: #000000;
        }
      }
    }
    .container-bottom-top:nth-child(2){
      margin-bottom: 0px;
    }
    .box-content-charts{
      padding: 10px 20px;
      width: 100%;
      height:calc(100% - 50px);
    }
  }
}
.tschartstext{
  font-weight: 400;
  color: #787878;
  font-size: 16px;
}
.boytext{
  color: #409EFF;
  font-size: 20px;
  font-weight: 700;
}
.girltext{
  color: #FF9900;
  font-size: 20px;
  font-weight: 700;
}
</style>