大屏项目初始化
This commit is contained in:
@@ -1,356 +1,17 @@
|
||||
<template>
|
||||
<div class="big-screen-container">
|
||||
<header class="screen-header">
|
||||
<div class="title-center">
|
||||
<h1 class="main-title">{{ screenTitle }}</h1>
|
||||
</div>
|
||||
<div class="tabs-container">
|
||||
<div class="tabs-left">
|
||||
<div
|
||||
class="tab-item"
|
||||
v-for="tab in allTabs"
|
||||
:key="tab.moduleCode"
|
||||
:class="{ active: activeTab === tab.moduleCode }"
|
||||
@click="switchTab(tab.moduleCode)"
|
||||
>
|
||||
<span>{{ tab.moduleName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="query-group">
|
||||
<el-date-picker
|
||||
type="year"
|
||||
v-model="queryDate"
|
||||
popper-class="dark-date-popper"
|
||||
value-format="YYYY"
|
||||
></el-date-picker>
|
||||
<button class="query-btn" @click="handleQuery">查询</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="screen-content">
|
||||
<div v-if="activeTab === 'home'" class="screen-page">
|
||||
<HomeIndex :formParams="FormValues" />
|
||||
</div>
|
||||
<div v-else-if="activeTab === 'work'" class="screen-page">
|
||||
<WorkIndex :formParams="FormValues" />
|
||||
</div>
|
||||
<div v-else-if="activeTab === 'werp'" class="screen-page">
|
||||
<ErpIndex :formParams="FormValues" />
|
||||
</div>
|
||||
</main>
|
||||
<!-- Dashboard自身的内容（后台首页） -->
|
||||
<div class="dashboard-container">
|
||||
<h1>后台首页</h1>
|
||||
<div class="stats">数据概览、快捷入口等</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import HomeIndex from './screen/Home/index.vue';
|
||||
import ErpIndex from './screen/Erp/index.vue';
|
||||
import WorkIndex from './screen/Work/index.vue';
|
||||
|
||||
import { getHomeModuleList } from '@/api/bizApi'
|
||||
|
||||
const screenTitle = ref('个人数字化可视化看板');
|
||||
const currentYear = new Date().getFullYear().toString();
|
||||
|
||||
const FormValues = ref({
|
||||
reqParam: currentYear
|
||||
});
|
||||
|
||||
const allTabs = ref([])
|
||||
|
||||
const activeTab = ref('home')
|
||||
const queryDate = ref();
|
||||
|
||||
const switchTab = (key) => {
|
||||
activeTab.value = key
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
FormValues.value.reqParam = queryDate.value;
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
const res = await getHomeModuleList()
|
||||
allTabs.value = res || []
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
vList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const initApp = () =>{
|
||||
queryDate.value = currentYear;
|
||||
getList();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initApp();
|
||||
});
|
||||
// 无需引入Layout，Layout已作为路由层的父组件
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dark-date-popper {
|
||||
z-index: 9999 !important;
|
||||
background-color: #0f3460 !important;
|
||||
border: 1px solid #1a508b !important;
|
||||
}
|
||||
.dark-date-popper .el-picker-panel,
|
||||
.dark-date-popper .el-date-range-picker,
|
||||
.dark-date-popper .el-date-range-picker__header,
|
||||
.dark-date-popper .el-date-table,
|
||||
.dark-date-popper .el-date-table th,
|
||||
.dark-date-popper .el-date-table td {
|
||||
background-color: #0f3460 !important;
|
||||
color: #e0e6ff !important;
|
||||
border-color: #1a508b !important;
|
||||
}
|
||||
.dark-date-popper .el-date-range-picker__content .el-date-range-picker__header {
|
||||
background-color: #154580 !important;
|
||||
}
|
||||
.dark-date-popper .el-date-range-picker__content {
|
||||
background-color: #0f3460 !important;
|
||||
}
|
||||
.dark-date-popper .el-date-table td.current,
|
||||
.dark-date-popper .el-date-table td.start-date,
|
||||
.dark-date-popper .el-date-table td.end-date {
|
||||
background-color: #3c9cff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.dark-date-popper .el-date-table td.in-range {
|
||||
background-color: rgba(60, 156, 255, 0.25) !important;
|
||||
color: #e0e6ff !important;
|
||||
}
|
||||
.dark-date-popper .el-date-table-cell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.dark-date-popper .el-date-table-cell::before,
|
||||
.dark-date-popper .el-date-table-cell::after {
|
||||
background-color: transparent !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.dark-date-popper .el-date-table td.in-range .el-date-table-cell::before {
|
||||
background-color: rgba(60, 156, 255, 0.25) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.big-screen-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: #0a1929;
|
||||
background-image: inherit;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.big-screen-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(15, 52, 96, 0.85);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.screen-header {
|
||||
height: 75px;
|
||||
padding: 0 2vw;
|
||||
border-bottom: 1px solid #1a508b;
|
||||
background: url('@/assets/images/biaoti.png') no-repeat center center,
|
||||
linear-gradient(90deg, rgba(15, 52, 96, 0.8), rgba(21, 69, 128, 0.8));
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.title-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999 !important;
|
||||
padding: 4px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
font-weight: 720;
|
||||
background: linear-gradient(90deg, #3c9cff, #82b9ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
white-space: nowrap;
|
||||
z-index: 9999 !important;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 8px rgba(60, 156, 255, 0.8);
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 2vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tabs-left {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: url('@/assets/images/button1.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #e0e6ff;
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
background: url('@/assets/images/button1.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background: url('@/assets/images/button2.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.4);
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.query-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-input__inner) {
|
||||
background-color: #0f3460 !important;
|
||||
color: #e0e6ff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-input.is-focus .el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px #3c9cff inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: #e0e6ff !important;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor .el-range-separator) {
|
||||
color: #e0e6ff !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.query-btn {
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #1a508b, #3c9cff);
|
||||
border: 1px solid #1a508b;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.query-btn:hover {
|
||||
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.6);
|
||||
background: linear-gradient(90deg, #154580, #2b8ed8);
|
||||
}
|
||||
|
||||
.screen-content {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 75px);
|
||||
}
|
||||
|
||||
.screen-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: rgba(15, 52, 96, 0.8);
|
||||
border: 1px solid #1a508b;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.main-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.tab-item {
|
||||
padding: 0 18px;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.query-btn {
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 900px) {
|
||||
.screen-header {
|
||||
height: 65px;
|
||||
}
|
||||
.tabs-container {
|
||||
height: 36px;
|
||||
}
|
||||
.tab-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.query-btn {
|
||||
height: 32px;
|
||||
}
|
||||
.screen-content {
|
||||
padding: 10px;
|
||||
height: calc(100vh - 65px);
|
||||
}
|
||||
.dashboard-container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user