bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

导航+首页

This commit is contained in:
bb_pan 2026-01-25 15:31:18 +08:00
parent 56991cbf86
commit 3ba7b31681
6 changed files with 420 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/index.scss
View File

@ -121,7 +121,7 @@ aside {
//main-container全局样式
.app-container {
height: calc(100vh - 84px);
height: calc(100vh - 90px);
padding: 20px;
box-sizing: border-box;
// display: flex;

290
src/layout/components/Navbar.vue
View File

@ -54,81 +54,82 @@
</el-dropdown>
</div>
</div>
<div style="height: 50px"></div>
<div class="menu-box" v-show="showMenuBox" @mouseenter="handleBoxEnter" @mouseleave="handleBoxLeave">
<div class="menu-list">
<div class="list-box">
<!-- 顶部标题 -->
<div class="menu-title-top" v-if="currentMenu && currentMenu.meta">
<div class="title-tip"></div>
<span style="font-weight: bold; font-size: 16px">{{ currentMenu.meta.title }}</span>
</div>
<div class="menu-box" v-show="showMenuBox" @mouseenter="handleBoxEnter">
<div class="menu-warp" @mouseleave="handleBoxLeave">
<div class="menu-list">
<div class="list-box">
<div class="menu-title-top" v-if="currentMenu && currentMenu.meta">
<div class="title-tip"></div>
<span class="title-text">{{ currentMenu.meta.title }}</span>
</div>
<!-- 一级 -->
<div v-for="(child, i) in currentMenu.children || []" :key="i" class="sub-menu-item" v-if="!child.hidden">
<!-- 一级有子级 -->
<div v-if="child.children && child.children.length">
<!-- 一级父节点（点击展开） -->
<div class="menu-title" @click="toggleLevel1(child)">
<div class="children-title-tip"></div>
<span>
<span style="margin-right: 5px">{{ child.meta.title }}</span>
<img
v-if="openLevel1 == child.path"
src="@/assets/images/up.png"
style="width: 14px; height: 14px"
alt=""
/>
<img v-else src="@/assets/images/down.png" style="width: 14px; height: 14px" alt="" />
</span>
<span class="menu-star">
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" alt="" />
</span>
</div>
<div v-for="(child, i) in currentMenu.children || []" :key="i" class="sub-menu-item" v-if="!child.hidden">
<div v-if="child.children && child.children.length">
<div class="menu-title" @click="toggleLevel1(child)">
<div class="children-title-tip"></div>
<span>
<span style="margin-right: 5px">{{ child.meta.title }}</span>
<img
v-if="openLevel1.includes(child.path)"
src="@/assets/images/up.png"
style="width: 14px; height: 14px"
/>
<img v-else src="@/assets/images/down.png" style="width: 14px; height: 14px" />
</span>
<span class="menu-star">
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
</span>
</div>
<!-- 二级区域（只在当前一级展开时显示） -->
<div v-show="openLevel1 === child.path">
<!-- 二级 -->
<div v-for="(c2, j) in child.children" :key="j" class="sub-menu-item" v-if="!c2.hidden">
<!-- 二级还有子级 -->
<div v-if="c2.children && c2.children.length">
<!-- 二级父节点 -->
<div class="menu-title" @click="toggleLevel2(c2)">
{{ c2.meta.title }}
</div>
<div v-show="openLevel1.includes(child.path)">
<div v-for="(c2, j) in child.children" :key="j" class="sub-menu-item" v-if="!c2.hidden">
<div v-if="c2.children && c2.children.length">
<div class="menu-title" @click="toggleLevel2(c2)">
{{ c2.meta.title }}
<img
v-if="openLevel2.includes(c2.path)"
src="@/assets/images/up.png"
style="width: 12px; height: 12px; margin-left: 6px"
/>
<img
v-else
src="@/assets/images/down.png"
style="width: 12px; height: 12px; margin-left: 6px"
/>
</div>
<!-- 三级（只展开当前二级） -->
<div v-show="openLevel2 === c2.path">
<div
v-for="(c3, k) in c2.children"
:key="k"
class="sub-menu-item"
v-if="!c3.hidden"
@click="goRoute(c3)"
>
{{ c3.meta.title }}
<div v-show="openLevel2.includes(c2.path)">
<div
v-for="(c3, k) in c2.children"
:key="k"
class="sub-menu-item"
v-if="!c3.hidden"
@click="goRoute(c3)"
>
{{ c3.meta.title }}
</div>
</div>
</div>
</div>
<!-- 二级叶子节点 -->
<div v-else class="menu-title" @click="goRoute(c2)">
<span class="child-left">- {{ c2.meta.title }}</span>
<span class="menu-star">
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" alt="" />
</span>
<div v-else class="menu-title" @click="goRoute(c2)">
<span class="child-left">- {{ c2.meta.title }}</span>
<span class="menu-star">
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 一级就是叶子节点 -->
<div v-else class="menu-title" @click="goRoute(child)">
<div class="children-title-tip"></div>
<span>{{ child.meta.title }}</span>
<span class="menu-star">
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" alt="" />
</span>
<div v-else class="menu-title" @click="goRoute(child)">
<div class="children-title-tip"></div>
<span>{{ child.meta.title }}</span>
<span class="menu-star">
<img src="@/assets/images/star.png" style="width: 10px; height: 9px" />
</span>
</div>
</div>
</div>
</div>
@ -139,43 +140,24 @@
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import bonusGit from '@/components/bonus/Git'
import bonusDoc from '@/components/bonus/Doc'
import { getUserProfile } from '@/api/system/user'
export default {
components: {
Breadcrumb,
TopNav,
Hamburger,
Screenfull,
SizeSelect,
Search,
bonusGit,
bonusDoc,
},
components: { Search },
data() {
return {
title: process.env.VUE_APP_TITLE,
user: {},
onlyOneChild: null,
basePath: null,
basePath2: null,
menuList: [],
showMenuBox: false,
currentMenu: {}, // 当前 hover 的一级菜单
openLevel1: '', // 当前展开的一级菜单 path
openLevel2: '', // 当前展开的二级菜单 path
currentMenu: {},
openLevel1: [],
openLevel2: [],
}
},
computed: {
...mapGetters(['sidebarRouters', 'sidebar', 'avatar', 'device']),
...mapGetters(['sidebarRouters', 'avatar', 'device']),
setting: {
get() {
return this.$store.state.settings.showSettings
@ -187,27 +169,17 @@ export default {
})
},
},
topNav: {
get() {
return this.$store.state.settings.topNav
},
},
},
created() {
this.getUser()
// 过滤掉 sidebarRouters 中隐藏的路由
this.menuList = this.sidebarRouters.filter((route) => !route.hidden)
},
mounted() {},
methods: {
getUser() {
getUserProfile().then((response) => {
this.user = response.data
})
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
@ -216,8 +188,6 @@ export default {
})
.then(() => {
this.$store.dispatch('LogOut').then((res) => {
console.log('🚀 ~ res-退出登录:', res)
console.log('logout', process.env.VUE_APP_BASE_API)
this.$store.dispatch('tagsView/delAllViews')
if (process.env.VUE_APP_BASE_API == '/iws/jxhzb-api') {
window.location.href = 'http://sgwpdm.ah.sgcc.com.cn/iws'
@ -231,11 +201,8 @@ export default {
})
},
handleMenuClick(item) {
console.log('🚀 ~ item.redirect:', item.redirect)
if (item.redirect == 'index' || item.redirect == 'index1') {
this.$router.push({
path: '/' + item.redirect,
})
this.$router.push({ path: '/' + item.redirect })
}
},
handleMenuEnter(item) {
@ -243,22 +210,17 @@ export default {
this.showMenuBox = false
return
}
this.showMenuBox = true
// 构建带 fullPath 的菜单树
const buildPath = (nodes, parentPath = '') => {
return nodes.map((n) => {
let currentPath = n.path || ''
// 子路由不带 /，拼父路径
if (!currentPath.startsWith('/')) {
currentPath = parentPath.replace(/\/$/, '') + '/' + currentPath
}
const newNode = {
...n,
fullPath: currentPath,
}
const newNode = { ...n, fullPath: currentPath }
if (n.children && n.children.length) {
newNode.children = buildPath(n.children, currentPath)
@ -268,57 +230,55 @@ export default {
})
}
const children = buildPath(item.children || [], item.path)
this.currentMenu = {
...item,
fullPath: item.path,
children: buildPath(item.children || [], item.path),
children,
}
},
const level1 = []
const level2 = []
children.forEach((l1) => {
if (l1.children && l1.children.length) {
level1.push(l1.path)
l1.children.forEach((l2) => {
if (l2.children && l2.children.length) {
level2.push(l2.path)
}
})
}
})
this.openLevel1 = level1
this.openLevel2 = level2
},
handleMenuLeave() {
this.showMenuBox = false
},
handleBoxEnter() {
this.showMenuBox = true
},
handleBoxLeave() {
this.showMenuBox = false
},
goRoute(route) {
console.log('🚀 ~ route:', route)
if (route.fullPath) {
this.$router.push({
path: route.fullPath,
query: route.query,
})
this.$router.push({ path: route.fullPath, query: route.query })
this.showMenuBox = false
}
},
// 点击一级父节点
toggleLevel1(item) {
console.log('🚀 ~ item:', item)
if (this.openLevel1 === item.path) {
// 已展开 → 收起
this.openLevel1 = ''
this.openLevel2 = ''
} else {
// 展开当前，关闭其它
this.openLevel1 = item.path
this.openLevel2 = ''
}
const idx = this.openLevel1.indexOf(item.path)
if (idx > -1) this.openLevel1.splice(idx, 1)
else this.openLevel1.push(item.path)
},
// 点击二级父节点
toggleLevel2(item) {
console.log('🚀 ~ item:', item)
if (this.openLevel2 === item.path) {
this.openLevel2 = ''
} else {
this.openLevel2 = item.path
}
const idx = this.openLevel2.indexOf(item.path)
if (idx > -1) this.openLevel2.splice(idx, 1)
else this.openLevel2.push(item.path)
},
},
}
@ -326,9 +286,10 @@ export default {
<style lang="scss" scoped>
.navbar {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
@ -339,6 +300,7 @@ export default {
// background-position: center;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
z-index: 10;
.app-title {
width: 314px;
height: 50px;
@ -473,7 +435,15 @@ export default {
position: absolute;
z-index: 99999999;
width: 100%;
background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
height: calc(100% - 50px);
// background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
// 蒙层
background: rgba(0, 0, 0, 0.5);
.menu-warp {
width: 100%;
background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
border-radius: 0 0 16px 16px;
}
.menu-list {
padding: 16px 20px;
width: 100%;
@ -483,15 +453,16 @@ export default {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #095A4D;
color: #095a4d;
line-height: 30px;
.list-box {
padding: 16px;
width: 290px;
height: 100%;
background: linear-gradient(0deg, rgba(44, 186, 178, 0.1) 0%, rgba(44, 186, 178, 0) 100%);
border-radius: 8px;
// background: linear-gradient(0deg, rgba(44, 186, 178, 0) 0%, rgba(44, 186, 178, 0.1) 100%);
background: linear-gradient(180deg, #e6ffff, rgba(233, 255, 255, 0) 90px);
border-radius: 12px;
}
}
.menu-title-top {
@ -499,7 +470,7 @@ export default {
display: flex;
align-items: center;
span {
color: #095A4D;
color: #095a4d;
font-weight: 800;
}
}
@ -511,7 +482,7 @@ export default {
// 移入效果
&:hover {
color: #2CBAB2;
color: #2cbab2;
background: rgba(44, 186, 178, 0.1);
border-radius: 4px;
}
@ -533,9 +504,18 @@ export default {
margin-right: 4px;
width: 8px;
height: 16px;
line-height: 24px;
background: #2cbab2;
margin-bottom: 20px;
border-radius: 4px 4px 4px 4px;
}
.title-text {
font-size: 18px;
// color: #0f7969;
line-height: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.children-title-tip {
margin-right: 4px;
width: 8px;
@ -548,4 +528,20 @@ export default {
margin-left: 1rem;
}
}
/* 只改“下一级里的”二级、三级颜色 */
.menu-box {
/* 二级：child.children 里面的 menu-title */
.sub-menu-item {
.sub-menu-item {
> .menu-title {
color: #333;
}
/* 三级：最里面的 sub-menu-item */
.sub-menu-item {
color: #333;
}
}
}
}
</style>

109
src/layout/components/TagsView/index.vue
View File

@ -1,54 +1,57 @@
<template>
<div class="box-card">
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
:class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
:style="activeStyle(tag)"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)"
>
<!-- {{ tag.title }} -->
<span>
<i v-if="showBackHome(tag)" class="el-icon-arrow-left back-icon" />
{{ renderTitle(tag) }}
</span>
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
</scroll-pane>
<div class="right-tag-fixed">
<div class="line" />
<i class="el-icon-arrow-down right-icon" @click.stop="toggleDropDown" />
<div class="line" />
<i class="el-icon-close right-icon" @click="handleClose" />
</div>
<transition name="ant-popover-br">
<div v-if="showDropDown" class="drop-down" ref="dropDown">
<div class="drop-item" v-for="(item, index) in dropDownViews" :key="index">
<div style="cursor: pointer" :class="{ 'active-title': isActive(item) }" @click="handleDownJump(item)">
{{ item.title }}
</div>
<i class="el-icon-close" style="cursor: pointer" @click="closeSelectedTag(item)" />
</div>
<div class="warp">
<div class="box-card">
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
:class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
:style="activeStyle(tag)"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)"
>
<!-- {{ tag.title }} -->
<span>
<i v-if="showBackHome(tag)" class="el-icon-arrow-left back-icon" />
{{ renderTitle(tag) }}
</span>
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
</scroll-pane>
<div class="right-tag-fixed">
<div class="line" />
<i class="el-icon-arrow-down right-icon" @click.stop="toggleDropDown" />
<div class="line" />
<i class="el-icon-close right-icon" @click="handleClose" />
</div>
</transition>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)"> <i class="el-icon-refresh-right"></i> 刷新页面 </li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<i class="el-icon-close"></i> 关闭当前
</li>
<li @click="closeOthersTags"> <i class="el-icon-circle-close"></i> 关闭其他 </li>
<li v-if="!isFirstView()" @click="closeLeftTags"> <i class="el-icon-back"></i> 关闭左侧 </li>
<li v-if="!isLastView()" @click="closeRightTags"> <i class="el-icon-right"></i> 关闭右侧 </li>
<li @click="closeAllTags(selectedTag)"> <i class="el-icon-circle-close"></i> 全部关闭 </li>
</ul>
<transition name="ant-popover-br">
<div v-if="showDropDown" class="drop-down" ref="dropDown">
<div class="drop-item" v-for="(item, index) in dropDownViews" :key="index">
<div style="cursor: pointer" :class="{ 'active-title': isActive(item) }" @click="handleDownJump(item)">
{{ item.title }}
</div>
<i class="el-icon-close" style="cursor: pointer" @click="closeSelectedTag(item)" />
</div>
</div>
</transition>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)"> <i class="el-icon-refresh-right"></i> 刷新页面 </li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
<i class="el-icon-close"></i> 关闭当前
</li>
<li @click="closeOthersTags"> <i class="el-icon-circle-close"></i> 关闭其他 </li>
<li v-if="!isFirstView()" @click="closeLeftTags"> <i class="el-icon-back"></i> 关闭左侧 </li>
<li v-if="!isLastView()" @click="closeRightTags"> <i class="el-icon-right"></i> 关闭右侧 </li>
<li @click="closeAllTags(selectedTag)"> <i class="el-icon-circle-close"></i> 全部关闭 </li>
</ul>
</div>
</div>
<div style="height: 40px"></div>
</div>
</template>
@ -330,17 +333,25 @@ export default {
</script>
<style lang="scss" scoped>
.warp {
width: 100%;
}
.box-card {
width: 100%;
height: 40px;
z-index: 11;
position: fixed;
background: linear-gradient(90deg, #00d2be 0%, #4eacff 100%);
box-sizing: border-box;
}
.tags-view-container {
position: relative;
position: fixed;
height: 40px;
width: 100%;
background: #fff;
border-radius: 16px 16px 0px 0px;
box-sizing: border-box;
z-index: 10;
.tags-view-wrapper {
padding-right: 100px;

1
src/views/EquipmentLedger/index.vue
View File

@ -1830,7 +1830,6 @@ export default {
.app-container {
padding: 12px;
background-color: #f5f7fa;
height: calc(100vh - 84px);
}
/* 搜索区域收起/展开按钮 */

159
src/views/home/components/MunicipalChart.vue
View File

@ -1,50 +1,55 @@
<template>
<div class="app-container">
<div class="top">
<div class="top-1">
<Top1 @openDialog="openSystemEquip"/>
</div>
<div class="top-2" style="padding: 0;">
<Top2 />
</div>
<div class="top-3">
<Top3 @openDialog="openEquipItemMore"/>
</div>
</div>
<div class="center">
<div class="center-1">
<Center1 @openDialog="openRetirementWarning"/>
</div>
<div class="center-2">
<Center2 @openDialog="openProEquip"/>
</div>
</div>
<div class="bottom">
<div class="bottom-1">
<Bottom1 @openDialog="openWarning"/>
<!-- <div class="bottom-1-1">
<Bottom1 />
<div class="viewport">
<div class="screen" :style="screenStyle">
<div class="app-container">
<div style="height: 90px"></div>
<div class="top">
<div class="top-1">
<Top1 @openDialog="openSystemEquip" />
</div>
<div class="top-2" style="padding: 0">
<Top2 />
</div>
<div class="top-3">
<Top3 @openDialog="openEquipItemMore" />
</div>
</div>
<div class="bottom-1-2">
<Bottom2 />
</div> -->
</div>
<div class="bottom-2">
<Bottom2 @openDialog="openEquipStatusMore"/>
</div>
<div class="bottom-3">
<Bottom3 @openDialog="openEquipTurnroundRate"/>
<div class="center">
<div class="center-1">
<Center1 @openDialog="openRetirementWarning" />
</div>
<div class="center-2">
<Center2 @openDialog="openProEquip" />
</div>
</div>
<div class="bottom">
<div class="bottom-1">
<Bottom1 @openDialog="openWarning" />
<!-- <div class="bottom-1-1">
<Bottom1 />
</div>
<div class="bottom-1-2">
<Bottom2 />
</div> -->
</div>
<div class="bottom-2">
<Bottom2 @openDialog="openEquipStatusMore" />
</div>
<div class="bottom-3">
<Bottom3 @openDialog="openEquipTurnroundRate" />
</div>
</div>
<EquipTurnroundRate ref="equipTurnroundRate" />
<EquipWarning ref="equipWarning" />
<ProEquip ref="proEquip" />
<RetirementWarning ref="retirementWarning" />
<EquipItemMore ref="equipItemMore" />
<EquipStatusMore ref="equipStatusMore" />
<SystemEquip ref="systemEquip" />
</div>
</div>
<EquipTurnroundRate ref="equipTurnroundRate" />
<EquipWarning ref="equipWarning" />
<ProEquip ref="proEquip" />
<RetirementWarning ref="retirementWarning" />
<EquipItemMore ref="equipItemMore" />
<EquipStatusMore ref="equipStatusMore" />
<SystemEquip ref="systemEquip" />
</div>
</template>
@ -75,12 +80,59 @@ export default {
Bottom1,
Bottom2,
Bottom3,
EquipTurnroundRate,EquipWarning,ProEquip,RetirementWarning,EquipItemMore,EquipStatusMore,SystemEquip
EquipTurnroundRate,
EquipWarning,
ProEquip,
RetirementWarning,
EquipItemMore,
EquipStatusMore,
SystemEquip,
},
data() {
return {}
return {
scale: 1,
offsetX: 0,
offsetY: 0,
}
},
computed: {
screenStyle() {
return {
width: '1920px',
height: '1080px',
transform: `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`,
transformOrigin: '0 0',
}
},
},
mounted() {
this.calcScale()
window.addEventListener('resize', this.calcScale)
},
beforeDestroy() {
window.removeEventListener('resize', this.calcScale)
},
methods: {
calcScale() {
const baseW = 1920
const baseH = 1080
const vw = document.documentElement.clientWidth
const vh = document.documentElement.clientHeight
const scale = Math.min(vw / baseW, vh / baseH)
const realW = baseW * scale
const realH = baseH * scale
// ✅ 横向：仍然居中
this.offsetX = (vw - realW) / 2 / scale
// ✅ 纵向：贴顶（不再居中）
this.offsetY = 0
this.scale = scale
},
openEquipTurnroundRate() {
this.$refs.equipTurnroundRate.openDialog()
},
@ -107,7 +159,24 @@ export default {
</script>
<style lang="scss" scoped>
/* 外层视口：锁满屏 */
.viewport {
position: fixed;
inset: 0;
overflow: hidden;
background: #e1ebf7; /* 大屏底色 */
}
/* 被缩放的 1920×1080 画布 */
.screen {
position: absolute;
top: 0;
left: 0;
}
.app-container {
width: 1920px;
height: 1080px;
background: #e1ebf7;
}
.top {

136
src/views/home/components/ProvincialChart.vue
View File

@ -1,37 +1,42 @@
<template>
<div class="app-container">
<div class="top">
<div class="top-1">
<Top1 />
</div>
<div class="top-2">
<Top2 />
</div>
<div class="top-3">
<Top3 />
</div>
</div>
<div class="center">
<div class="center-1">
<Center1 />
</div>
<div class="center-2">
<Center2 />
</div>
</div>
<div class="bottom">
<div class="bottom-1">
<div class="bottom-1-1">
<Bottom11 />
<div class="viewport">
<div class="screen" :style="screenStyle">
<div class="app-container">
<div style="height: 90px"></div>
<div class="top">
<div class="top-1">
<Top1 />
</div>
<div class="top-2">
<Top2 />
</div>
<div class="top-3">
<Top3 />
</div>
</div>
<div class="bottom-1-2">
<Bottom12 />
<div class="center">
<div class="center-1">
<Center1 />
</div>
<div class="center-2">
<Center2 />
</div>
</div>
<div class="bottom">
<div class="bottom-1">
<div class="bottom-1-1">
<Bottom11 />
</div>
<div class="bottom-1-2">
<Bottom12 />
</div>
</div>
<div class="bottom-2">
<Bottom2 />
</div>
</div>
</div>
<div class="bottom-2">
<Bottom2 />
</div>
</div>
</div>
@ -60,15 +65,76 @@ export default {
Bottom2,
},
data() {
return {}
return {
scale: 1,
offsetX: 0,
offsetY: 0,
}
},
computed: {
screenStyle() {
return {
width: '1920px',
height: '1080px',
transform: `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`,
transformOrigin: '0 0',
}
},
},
mounted() {
this.calcScale()
window.addEventListener('resize', this.calcScale)
},
beforeDestroy() {
window.removeEventListener('resize', this.calcScale)
},
methods: {
calcScale() {
const baseW = 1920
const baseH = 1080
const vw = document.documentElement.clientWidth
const vh = document.documentElement.clientHeight
const scale = Math.min(vw / baseW, vh / baseH)
const realW = baseW * scale
const realH = baseH * scale
// ✅ 横向：仍然居中
this.offsetX = (vw - realW) / 2 / scale
// ✅ 纵向：贴顶（不再居中）
this.offsetY = 0
this.scale = scale
},
},
}
</script>
<style lang="scss" scoped>
/* 外层视口：锁满屏 */
.viewport {
position: fixed;
inset: 0;
overflow: hidden;
background: #e1ebf7; /* 大屏底色 */
}
/* 被缩放的 1920×1080 画布 */
.screen {
position: absolute;
top: 0;
left: 0;
}
.app-container {
width: 1920px;
height: 1080px;
background: #e1ebf7;
}
.top {
margin-bottom: 16px;
display: flex;
@ -104,7 +170,7 @@ export default {
.center-1,
.center-2 {
width: 50%;
width: 928px;
height: 390px;
padding: 24px;
background: rgba(255, 255, 255, 0.91);
@ -125,7 +191,7 @@ export default {
justify-content: space-between;
.bottom-1 {
width: 50%;
width: 928px;
height: 350px;
display: flex;
align-items: center;
@ -148,7 +214,7 @@ export default {
}
}
.bottom-2 {
width: 50%;
width: 928px;
height: 350px;
padding: 24px;
background: rgba(255, 255, 255, 0.91);