lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改侧边栏、顶部、系统监控、系统控制页面的高端屏幕适配样式

dev
selia-zx 2 weeks ago
parent
ce1a157b9e
commit
191893c2b8
21 changed files with 861 additions and 1862 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/logo-2.png
  2. BIN
      src/assets/images/logo-3.png
  3. BIN
      src/assets/images/top.png
  4. 53
      src/assets/styles/bigScreen.scss
  5. 1
      src/assets/styles/index.scss
  6. 6
      src/assets/styles/ruoyi.scss
  7. 55
      src/assets/styles/sidebar.scss
  8. 94
      src/components/Breadcrumb/index.vue
  9. 7
      src/components/Hamburger/index.vue
  10. 9
      src/components/SvgIcon/index.vue
  11. 107
      src/components/TopNav/index.vue
  12. 20
      src/layout/components/AppMain.vue
  13. 154
      src/layout/components/Navbar.vue
  14. 87
      src/layout/components/Sidebar/Logo.vue
  15. 90
      src/layout/components/TagsView/ScrollPane.vue
  16. 57
      src/layout/components/TagsView/index.vue
  17. 32
      src/views/centerairC/sysControl/index.vue
  18. 36
      src/views/centerairC/sysControl/listHeader.vue
  19. 36
      src/views/centerairC/sysControl/vavleheader.vue
  20. 365
      src/views/centerairC/sysMonitor/index.vue
  21. 1504
      src/views/centerairC/sysMonitor/index1.vue

BIN
src/assets/images/logo-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 151 KiB

BIN
src/assets/images/logo-3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/assets/images/top.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

53
src/assets/styles/bigScreen.scss
Unescape View File

@ -0,0 +1,53 @@
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.el-tabs--top .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
padding-left: 0.2rem !important;
}
.el-tabs__item.is-active {
height: 0.48rem !important;
border-radius: 0.06rem 0.06rem 0px 0px !important;
font-size: 0.18rem !important;
line-height: 0.48rem !important;
}
.el-tabs__item {
margin-right: 0.06rem !important;
padding: 0 0.2rem !important;
height: 0.48rem !important;
border-radius: 0.06rem 0.06rem 0px 0px !important;
font-size: 0.18rem !important;
line-height: 0.48rem !important;
}
.el-switch {
font-size: 0.14rem !important;
line-height: 0.2rem !important;
height: 0.2rem !important;
}
.el-switch__label {
height: 0.2rem !important;
font-size: 0.14rem !important;
}
.el-switch__core {
width: 0.4rem !important;
height: 0.2rem !important;
border-radius: 0.1rem !important;
}
.el-switch__core:after {
top: 0.01rem !important;
width: 0.16rem !important;
height: 0.16rem !important;
}
.el-switch__label * {
font-size: 0.14rem !important;
}
.el-input--mini{
font-size: 0.12rem !important;
}
.el-input--mini .el-input__inner {
height: 0.28rem !important;
line-height: 0.28rem !important;
}
}

1
src/assets/styles/index.scss
Unescape View File

@ -2,6 +2,7 @@
@import "./mixin.scss"; @import "./mixin.scss";
@import "./transition.scss"; @import "./transition.scss";
@import "./element-ui.scss"; @import "./element-ui.scss";
@import "./bigScreen.scss";
@import "./sidebar.scss"; @import "./sidebar.scss";
@import "./btn.scss"; @import "./btn.scss";

6
src/assets/styles/ruoyi.scss
Unescape View File

@ -308,3 +308,9 @@ h6 {
.splitpanes.default-theme .splitpanes__pane { .splitpanes.default-theme .splitpanes__pane {
background-color: transparent !important; background-color: transparent !important;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.el-icon-arrow-down {
font-size: 0.12rem !important;
}
}

55
src/assets/styles/sidebar.scss
Unescape View File

@ -282,6 +282,59 @@
// 媒体查询，适配大于2000px分辨率的大屏样式 // 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) { @media (min-width: 2000px) {
:root { :root {
--base-sidebar-width: 232px; --base-sidebar-width: 2.32rem;
}
#app {
.sidebar-container {
&.has-logo {
.el-scrollbar {
height: calc(100% -0.5rem) !important;
}
}
.svg-icon {
margin-right: 0.16rem !important;
}
}
.hideSidebar {
.sidebar-container {
width: 0.54rem !important;
}
.main-container {
margin-left: 0.54rem !important;
}
.submenu-title-noDropdown {
.el-tooltip {
.svg-icon {
margin-left: 0.2rem !important;
}
}
}
.el-submenu {
& > .el-submenu__title {
font-size: 0.14rem !important;
.svg-icon {
margin-left: 0.2rem !important;
}
}
}
}
}
.hideSidebar .fixed-header{
width: calc(100% - 0.54rem) !important;
}
.el-submenu__title {
font-size: 0.14rem !important;
height: 0.56rem !important;
line-height: 0.56rem !important;
font-size:0.14rem !important;
padding: 0 0.2rem !important;
}
#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
#app .sidebar-container .el-submenu .el-menu-item {
padding: 0 0.35rem !important;
} }
} }

94
src/components/Breadcrumb/index.vue
Unescape View File

@ -2,7 +2,11 @@
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span> <span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect"
>{{ item.meta.title }}</span
>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
@ -13,80 +17,86 @@
export default { export default {
data() { data() {
return { return {
levelList: null levelList: null,
} };
}, },
watch: { watch: {
$route(route) { $route(route) {
// if you go to the redirect page, do not update the breadcrumbs // if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) { if (route.path.startsWith("/redirect/")) {
return return;
}
this.getBreadcrumb()
} }
this.getBreadcrumb();
},
}, },
created() { created() {
this.getBreadcrumb() this.getBreadcrumb();
}, },
methods: { methods: {
getBreadcrumb() { getBreadcrumb() {
// only show routes with meta.title // only show routes with meta.title
let matched = [] let matched = [];
const router = this.$route const router = this.$route;
const pathNum = this.findPathNum(router.path) const pathNum = this.findPathNum(router.path);
// multi-level menu // multi-level menu
if (pathNum > 2) { if (pathNum > 2) {
const reg = /\/\w+/gi const reg = /\/\w+/gi;
const pathList = router.path.match(reg).map((item, index) => { const pathList = router.path.match(reg).map((item, index) => {
if (index !== 0) item = item.slice(1) if (index !== 0) item = item.slice(1);
return item return item;
}) });
this.getMatched(pathList, this.$store.getters.defaultRoutes, matched) this.getMatched(pathList, this.$store.getters.defaultRoutes, matched);
} else { } else {
matched = router.matched.filter(item => item.meta && item.meta.title) matched = router.matched.filter((item) => item.meta && item.meta.title);
} }
// 判断是否为首页 // 判断是否为首页
if (!this.isDashboard(matched[0])) { if (!this.isDashboard(matched[0])) {
matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched) matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched);
} }
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) this.levelList = matched.filter(
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
);
}, },
findPathNum(str, char = "/") { findPathNum(str, char = "/") {
let index = str.indexOf(char) let index = str.indexOf(char);
let num = 0 let num = 0;
while (index !== -1) { while (index !== -1) {
num++ num++;
index = str.indexOf(char, index + 1) index = str.indexOf(char, index + 1);
} }
return num return num;
}, },
getMatched(pathList, routeList, matched) { getMatched(pathList, routeList, matched) {
let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0]) let data = routeList.find(
(item) =>
item.path == pathList[0] ||
(item.name += "").toLowerCase() == pathList[0]
);
if (data) { if (data) {
matched.push(data) matched.push(data);
if (data.children && pathList.length) { if (data.children && pathList.length) {
pathList.shift() pathList.shift();
this.getMatched(pathList, data.children, matched) this.getMatched(pathList, data.children, matched);
} }
} }
}, },
isDashboard(route) { isDashboard(route) {
const name = route && route.name const name = route && route.name;
if (!name) { if (!name) {
return false return false;
} }
return name.trim() === 'Index' return name.trim() === "Index";
}, },
handleLink(item) { handleLink(item) {
const { redirect, path } = item const { redirect, path } = item;
if (redirect) { if (redirect) {
this.$router.push(redirect) this.$router.push(redirect);
return return;
}
this.$router.push(path)
}
} }
} this.$router.push(path);
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -99,4 +109,12 @@ export default {
cursor: text; cursor: text;
} }
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.app-breadcrumb.el-breadcrumb {
font-size: 0.14rem !important;
line-height: 0.5rem !important;
margin-left: 0.08rem !important;
}
}
</style> </style>

7
src/components/Hamburger/index.vue
Unescape View File

@ -45,4 +45,11 @@ export default {
.svg-path { .svg-path {
fill: white; fill: white;
} }
/* 媒体查询，适配大于2000px分辨率的大屏样式 */
@media (min-width: 2000px) {
.hamburger {
width: 0.2rem !important;
height: 0.2rem !important;
}
}
</style> </style>

9
src/components/SvgIcon/index.vue
Unescape View File

@ -57,5 +57,14 @@ export default {
background-color: currentColor; background-color: currentColor;
mask-size: cover!important; mask-size: cover!important;
display: inline-block; display: inline-block;
}
/* 媒体查询，适配大于2000px分辨率的大屏样式 */
@media (min-width: 2000px) {
.svg-icon {
width: 0.14rem !important;
height: 0.14rem !important;
vertical-align: -0.15em;
}
} }
</style> </style>

107
src/components/TopNav/index.vue
Unescape View File

@ -5,25 +5,38 @@
@select="handleSelect" @select="handleSelect"
> >
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"> <el-menu-item
:style="{ '--theme': theme }"
:index="item.path"
:key="index"
v-if="index < visibleNumber"
>
<svg-icon <svg-icon
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
:icon-class="item.meta.icon"/> :icon-class="item.meta.icon"
/>
{{ item.meta.title }} {{ item.meta.title }}
</el-menu-item> </el-menu-item>
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
<el-submenu :style="{'--theme': theme}" index="more" :key="visibleNumber" v-if="topMenus.length > visibleNumber"> <el-submenu
:style="{ '--theme': theme }"
index="more"
:key="visibleNumber"
v-if="topMenus.length > visibleNumber"
>
<template slot="title">更多菜单</template> <template slot="title">更多菜单</template>
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item <el-menu-item
:index="item.path" :index="item.path"
:key="index" :key="index"
v-if="index >= visibleNumber"> v-if="index >= visibleNumber"
>
<svg-icon <svg-icon
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
:icon-class="item.meta.icon"/> :icon-class="item.meta.icon"
/>
{{ item.meta.title }} {{ item.meta.title }}
</el-menu-item> </el-menu-item>
</template> </template>
@ -36,7 +49,7 @@ import { constantRoutes } from "@/router";
import { isHttp } from "@/utils/validate"; import { isHttp } from "@/utils/validate";
// 隐藏侧边栏路由 // 隐藏侧边栏路由
const hideList = ['/index', '/user/profile']; const hideList = ["/index", "/user/profile"];
export default { export default {
data() { data() {
@ -44,7 +57,7 @@ export default {
// 顶部栏初始数 // 顶部栏初始数
visibleNumber: 5, visibleNumber: 5,
// 当前激活菜单的 index // 当前激活菜单的 index
currentIndex: undefined currentIndex: undefined,
}; };
}, },
computed: { computed: {
@ -76,11 +89,12 @@ export default {
this.routers.map((router) => { this.routers.map((router) => {
for (var item in router.children) { for (var item in router.children) {
if (router.children[item].parentPath === undefined) { if (router.children[item].parentPath === undefined) {
if(router.path === "/") { if (router.path === "/") {
router.children[item].path = "/" + router.children[item].path; router.children[item].path = "/" + router.children[item].path;
} else { } else {
if(!isHttp(router.children[item].path)) { if (!isHttp(router.children[item].path)) {
router.children[item].path = router.path + "/" + router.children[item].path; router.children[item].path =
router.path + "/" + router.children[item].path;
} }
} }
router.children[item].parentPath = router.path; router.children[item].parentPath = router.path;
@ -94,25 +108,29 @@ export default {
activeMenu() { activeMenu() {
const path = this.$route.path; const path = this.$route.path;
let activePath = path; let activePath = path;
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) { if (
path !== undefined &&
path.lastIndexOf("/") > 0 &&
hideList.indexOf(path) === -1
) {
const tmpPath = path.substring(1, path.length); const tmpPath = path.substring(1, path.length);
if (!this.$route.meta.link) { if (!this.$route.meta.link) {
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
this.$store.dispatch('app/toggleSideBarHide', false); this.$store.dispatch("app/toggleSideBarHide", false);
} }
} else if(!this.$route.children) { } else if (!this.$route.children) {
activePath = path; activePath = path;
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch("app/toggleSideBarHide", true);
} }
this.activeRoutes(activePath); this.activeRoutes(activePath);
return activePath; return activePath;
}, },
}, },
beforeMount() { beforeMount() {
window.addEventListener('resize', this.setVisibleNumber) window.addEventListener("resize", this.setVisibleNumber);
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('resize', this.setVisibleNumber) window.removeEventListener("resize", this.setVisibleNumber);
}, },
mounted() { mounted() {
this.setVisibleNumber(); this.setVisibleNumber();
@ -126,24 +144,24 @@ export default {
// 菜单选择事件 // 菜单选择事件
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
this.currentIndex = key; this.currentIndex = key;
const route = this.routers.find(item => item.path === key); const route = this.routers.find((item) => item.path === key);
if (isHttp(key)) { if (isHttp(key)) {
// http(s):// 路径新窗口打开 // http(s):// 路径新窗口打开
window.open(key, "_blank"); window.open(key, "_blank");
} else if (!route || !route.children) { } else if (!route || !route.children) {
// 没有子路由路径内部打开 // 没有子路由路径内部打开
const routeMenu = this.childrenMenus.find(item => item.path === key); const routeMenu = this.childrenMenus.find((item) => item.path === key);
if (routeMenu && routeMenu.query) { if (routeMenu && routeMenu.query) {
let query = JSON.parse(routeMenu.query); let query = JSON.parse(routeMenu.query);
this.$router.push({ path: key, query: query }); this.$router.push({ path: key, query: query });
} else { } else {
this.$router.push({ path: key }); this.$router.push({ path: key });
} }
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch("app/toggleSideBarHide", true);
} else { } else {
// 显示左侧联动菜单 // 显示左侧联动菜单
this.activeRoutes(key); this.activeRoutes(key);
this.$store.dispatch('app/toggleSideBarHide', false); this.$store.dispatch("app/toggleSideBarHide", false);
} }
}, },
// 当前激活的路由 // 当前激活的路由
@ -156,38 +174,61 @@ export default {
} }
}); });
} }
if(routes.length > 0) { if (routes.length > 0) {
this.$store.commit("SET_SIDEBAR_ROUTERS", routes); this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
} else { } else {
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch("app/toggleSideBarHide", true);
}
} }
}, },
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.topmenu-container.el-menu--horizontal > .el-menu-item { .topmenu-container.el-menu--horizontal > .el-menu-item {
float: left; float: left;
height: 50px !important; height: 50px;
line-height: 50px !important; line-height: 50px;
color: #999093 !important; color: #999093 !important;
padding: 0 5px !important; padding: 0 5px;
margin: 0 10px !important; margin: 0 10px;
} }
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title { .topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
border-bottom: 2px solid #{'var(--theme)'} !important; .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 2px solid #{"var(--theme)"} !important;
color: #303133; color: #303133;
} }
/* submenu item */ /* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title { .topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
float: left; float: left;
height: 50px !important; height: 50px;
line-height: 50px !important; line-height: 50px;
color: #999093 !important; color: #999093 !important;
padding: 0 5px !important; padding: 0 5px;
margin: 0 10px !important; margin: 0 10px;
}
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.topmenu-container.el-menu--horizontal > .el-menu-item {
height: 0.5rem !important;
line-height: 0.5rem !important;
padding: 0 0.05rem !important;
margin: 0 0.1rem !important;
}
/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
height: 0.5rem !important;
line-height: 0.5rem !important;
padding: 0 0.05rem !important;
margin: 0 0.1rem !important;
}
.el-menu-item {
height: 0.56rem !important;
line-height: 0.56rem !important;
font-size: 0.14rem !important;
padding: 0 0.2rem !important;
}
} }
</style> </style>

20
src/layout/components/AppMain.vue
Unescape View File

@ -97,4 +97,24 @@ export default {
background-color: #c0c0c0; background-color: #c0c0c0;
border-radius: 3px; border-radius: 3px;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 0.84rem) !important;
padding: 0 0.25rem 0.2rem 0.25rem !important;
top: 0.84rem !important;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 0.84rem) !important;
}
.fixed-header + .app-main {
padding-top: 0.15rem !important;
}
}
}
</style> </style>

154
src/layout/components/Navbar.vue
Unescape View File

@ -1,19 +1,31 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger
id="hamburger-container"
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> :is-active="sidebar.opened"
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
v-if="!topNav"
/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</template> </template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
@ -33,12 +45,12 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from "@/components/Breadcrumb";
import TopNav from '@/components/TopNav' import TopNav from "@/components/TopNav";
import Hamburger from '@/components/Hamburger' import Hamburger from "@/components/Hamburger";
import Screenfull from '@/components/Screenfull' import Screenfull from "@/components/Screenfull";
import Search from '@/components/HeaderSearch' import Search from "@/components/HeaderSearch";
export default { export default {
components: { components: {
@ -49,45 +61,43 @@ export default {
Search, Search,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(["sidebar", "avatar", "device"]),
'sidebar',
'avatar',
'device'
]),
setting: { setting: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings;
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch("settings/changeSetting", {
key: 'showSettings', key: "showSettings",
value: val value: val,
}) });
} },
}, },
topNav: { topNav: {
get() { get() {
return this.$store.state.settings.topNav return this.$store.state.settings.topNav;
} },
} },
}, },
methods: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch("app/toggleSideBar");
}, },
async logout() { async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
}) })
}).catch(() => {}); .then(() => {
} this.$store.dispatch("LogOut").then(() => {
} location.href = "/index";
} });
})
.catch(() => {});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -95,31 +105,25 @@ export default {
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-image: linear-gradient(0deg, background-image: linear-gradient(0deg, #002c5e 0%, #0069b2 100%),
#002c5e 0%, linear-gradient(#002c5e, #002c5e);
#0069b2 100%), background-blend-mode: normal, normal;
linear-gradient( box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
#002c5e,
#002c5e);
background-blend-mode: normal,
normal;
box-shadow: inset 0px -1px 0px 0px
rgba(255, 255, 255, 0.1);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;
float: left; float: left;
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color: transparent;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
@ -160,10 +164,10 @@ export default {
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
} }
@ -193,4 +197,46 @@ export default {
} }
} }
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.navbar {
height: 0.5rem;
}
.hamburger-container {
line-height: 0.46rem !important;
}
.topmenu-container {
left: 0.5rem !important;
}
.right-menu {
line-height: 0.5rem !important;
.right-menu-item {
padding: 0 0.08rem !important;
font-size: 0.18rem !important;
}
.avatar-container {
margin-right: 0.3rem !important;
.avatar-wrapper {
margin-top: 0.05rem !important;
.user-avatar {
width:0.4rem !important;
height: 0.4rem !important;
border-radius: 0.1rem !important;
}
.el-icon-caret-bottom {
right: -0.3rem !important;
top: 0.25rem !important;
font-size: 0.12rem !important;
}
}
}
}
}
</style> </style>

87
src/layout/components/Sidebar/Logo.vue
Unescape View File

@ -1,7 +1,21 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div
class="sidebar-logo-container"
:class="{ collapse: collapse }"
:style="{
backgroundColor:
sideTheme === 'theme-dark'
? variables.menuBackground
: variables.menuLightBackground,
}"
>
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to=""> <router-link
v-if="collapse"
key="collapse"
class="sidebar-logo-link"
to=""
>
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<img v-else :src="logoRight" class="sidebar-logo-right" /> <img v-else :src="logoRight" class="sidebar-logo-right" />
<!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> --> <!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> -->
@ -16,34 +30,34 @@
</template> </template>
<script> <script>
import logoImg from '@/assets/logo/logo.png' import logoImg from "@/assets/logo/logo.png";
import logoRightImg from '@/assets/logo/logoRight.png' import logoRightImg from "@/assets/logo/logoRight.png";
import variables from '@/assets/styles/variables.scss' import variables from "@/assets/styles/variables.scss";
export default { export default {
name: 'SidebarLogo', name: "SidebarLogo",
props: { props: {
collapse: { collapse: {
type: Boolean, type: Boolean,
required: true required: true,
} },
}, },
computed: { computed: {
variables() { variables() {
return variables; return variables;
}, },
sideTheme() { sideTheme() {
return this.$store.state.settings.sideTheme return this.$store.state.settings.sideTheme;
} },
}, },
data() { data() {
return { return {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
logo: logoImg, logo: logoImg,
logoRight:logoRightImg, logoRight: logoRightImg,
} };
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -65,16 +79,10 @@ export default {
width: 100%; width: 100%;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
background-image: linear-gradient(0deg, background-image: linear-gradient(0deg, #002c5e 0%, #0069b2 100%),
#002c5e 0%, linear-gradient(#002c5e, #002c5e);
#0069b2 100%), background-blend-mode: normal, normal;
linear-gradient( box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
#002c5e,
#002c5e);
background-blend-mode: normal,
normal;
box-shadow: inset 0px -1px 0px 0px
rgba(255, 255, 255, 0.1);
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
& .sidebar-logo-link { & .sidebar-logo-link {
@ -93,7 +101,7 @@ export default {
vertical-align: middle; vertical-align: middle;
margin-right: 12px; margin-right: 12px;
} }
& .sidebar-logo-right{ & .sidebar-logo-right {
width: 100px; width: 100px;
height: 35px; height: 35px;
} }
@ -116,4 +124,33 @@ export default {
} }
} }
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.sidebar-logo-container {
height: 0.5rem !important;
line-height: 0.5rem !important;
& .sidebar-logo-link {
& .sidebar-logo {
width: 0.32rem !important;
height: 0.32rem !important;
margin-right: 0.12rem !important;
}
& .sidebar-logo-right {
width: 1rem !important;
height: 0.25rem !important;
}
& .sidebar-title {
line-height: 0.5rem !important;
font-size: 0.14rem !important;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0rem !important;
}
}
}
}
</style> </style>

90
src/layout/components/TagsView/ScrollPane.vue
Unescape View File

@ -1,79 +1,90 @@
<template> <template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> <el-scrollbar
ref="scrollContainer"
:vertical="false"
class="scroll-container"
@wheel.native.prevent="handleScroll"
>
<slot /> <slot />
</el-scrollbar> </el-scrollbar>
</template> </template>
<script> <script>
const tagAndTagSpacing = 4 // tagAndTagSpacing const tagAndTagSpacing = 4; // tagAndTagSpacing
export default { export default {
name: 'ScrollPane', name: "ScrollPane",
data() { data() {
return { return {
left: 0 left: 0,
} };
}, },
computed: { computed: {
scrollWrapper() { scrollWrapper() {
return this.$refs.scrollContainer.$refs.wrap return this.$refs.scrollContainer.$refs.wrap;
} },
}, },
mounted() { mounted() {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) this.scrollWrapper.addEventListener("scroll", this.emitScroll, true);
}, },
beforeDestroy() { beforeDestroy() {
this.scrollWrapper.removeEventListener('scroll', this.emitScroll) this.scrollWrapper.removeEventListener("scroll", this.emitScroll);
}, },
methods: { methods: {
handleScroll(e) { handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40 const eventDelta = e.wheelDelta || -e.deltaY * 40;
const $scrollWrapper = this.scrollWrapper const $scrollWrapper = this.scrollWrapper;
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
}, },
emitScroll() { emitScroll() {
this.$emit('scroll') this.$emit("scroll");
}, },
moveToTarget(currentTag) { moveToTarget(currentTag) {
const $container = this.$refs.scrollContainer.$el const $container = this.$refs.scrollContainer.$el;
const $containerWidth = $container.offsetWidth const $containerWidth = $container.offsetWidth;
const $scrollWrapper = this.scrollWrapper const $scrollWrapper = this.scrollWrapper;
const tagList = this.$parent.$refs.tag const tagList = this.$parent.$refs.tag;
let firstTag = null let firstTag = null;
let lastTag = null let lastTag = null;
// find first tag and last tag // find first tag and last tag
if (tagList.length > 0) { if (tagList.length > 0) {
firstTag = tagList[0] firstTag = tagList[0];
lastTag = tagList[tagList.length - 1] lastTag = tagList[tagList.length - 1];
} }
if (firstTag === currentTag) { if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0 $scrollWrapper.scrollLeft = 0;
} else if (lastTag === currentTag) { } else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth $scrollWrapper.scrollLeft =
$scrollWrapper.scrollWidth - $containerWidth;
} else { } else {
// find preTag and nextTag // find preTag and nextTag
const currentIndex = tagList.findIndex(item => item === currentTag) const currentIndex = tagList.findIndex((item) => item === currentTag);
const prevTag = tagList[currentIndex - 1] const prevTag = tagList[currentIndex - 1];
const nextTag = tagList[currentIndex + 1] const nextTag = tagList[currentIndex + 1];
// the tag's offsetLeft after of nextTag // the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing const afterNextTagOffsetLeft =
nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing;
// the tag's offsetLeft before of prevTag // the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing const beforePrevTagOffsetLeft =
prevTag.$el.offsetLeft - tagAndTagSpacing;
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) { if (
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth afterNextTagOffsetLeft >
$scrollWrapper.scrollLeft + $containerWidth
) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) { } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
}
} }
} }
} },
} },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -82,6 +93,7 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%;
::v-deep { ::v-deep {
.el-scrollbar__bar { .el-scrollbar__bar {
bottom: 0px; bottom: 0px;
@ -91,4 +103,14 @@ export default {
} }
} }
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.scroll-container {
::v-deep {
.el-scrollbar__wrap {
height: 0.49rem !important;
}
}
}
}
</style> </style>

57
src/layout/components/TagsView/index.vue
Unescape View File

@ -251,11 +251,10 @@ export default {
background-color: #173350; background-color: #173350;
border-radius: 2px; border-radius: 2px;
border: solid 1px #234f70; border: solid 1px #234f70;
font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
color: #c6c6c6; color: #c6c6c6;
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 14px;
margin-left: 5px; margin-left: 5px;
margin-top: 4px; margin-top: 4px;
&:first-of-type { &:first-of-type {
@ -307,10 +306,6 @@ export default {
} }
} }
} }
</style>
<style lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
.el-icon-close { .el-icon-close {
@ -333,4 +328,54 @@ export default {
} }
} }
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.tags-view-container {
height: 0.34rem !important;
box-shadow: 0 0.01rem 0.03rem 0 rgba(0, 0, 0, .12), 0 0 0.03rem 0 rgba(0, 0, 0, .04) !important;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 0.26rem !important;
line-height: 0.26rem !important;
border-radius:0.02rem !important;
border: solid 0.01rem #234f70;
font-size: 0.12rem !important;
letter-spacing: 0.01rem !important;
padding: 0 0.08rem !important;
font-size: 0.14rem !important;
margin-left: 0.05rem !important;
margin-top: 0.04rem !important;
&:first-of-type {
margin-left:0.15rem !important;
}
&:last-of-type {
margin-right: 0.15rem !important;
}
&.active {
&::before {
width: 0.08rem !important;
height: 0.08rem !important;
margin-right: 0.02rem !important;
}
}
}
.tags-view-item.active{
border: solid 0.01rem #0169b5 !important;
}
}
.contextmenu {
padding: 0.05rem 0 !important;
border-radius: 0.04rem !important;
font-size: 0.12rem !important;
box-shadow: 0.02rem 0.02rem 0.03rem 0 rgba(0, 0, 0, .3) !important;
li {
padding: 0.07rem 0.16rem !important;
}
}
}
}
</style> </style>

32
src/views/centerairC/sysControl/index.vue
Unescape View File

@ -62,7 +62,6 @@
@upList="getOperationList" @upList="getOperationList"
></list-header> ></list-header>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="冷冻泵" name="freezingPump"> <el-tab-pane label="冷冻泵" name="freezingPump">
<div class="device-container"> <div class="device-container">
@ -417,6 +416,7 @@ export default {
.status-label { .status-label {
color: #9ca3af; color: #9ca3af;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 14px;
} }
.status-value-running { .status-value-running {
@ -442,4 +442,34 @@ export default {
font-weight: bold; font-weight: bold;
color: #f59e0b; color: #f59e0b;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
/* 设备控制列表样式 */
.device-container {
padding: 0.1rem 0.1rem 0.3rem 0.1rem !important;
border-radius: 0.1rem !important;
margin-bottom: 0.2rem !important;
}
/* 状态统计样式 */
.status-statistics {
margin-bottom: 0.25rem !important;
}
.status-card {
border-radius: 0.1rem !important;
padding: 0.1rem !important;
}
.status-label {
margin-bottom: 0.2rem !important;
font-size: 0.14rem !important;
}
.status-value-running,
.status-value-auto,
.status-value-error,
.status-value-maintenance {
font-size: 0.24rem !important;
}
}
</style> </style>

36
src/views/centerairC/sysControl/listHeader.vue
Unescape View File

@ -206,6 +206,7 @@ export default {
.device-name { .device-name {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
font-size: 14px;
.el-switch { .el-switch {
width: 120px !important; width: 120px !important;
} }
@ -265,4 +266,39 @@ export default {
.device-li:nth-child(1) { .device-li:nth-child(1) {
color: #9ca3af; color: #9ca3af;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.device-li {
padding: 0.12rem 0 !important;
border-bottom: 0.01rem dashed #0349ac !important;
.device-name {
font-size: 0.14rem !important;
.el-switch {
width: 1.2rem !important;
}
.run::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
.no-run::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
.el-input {
width: 1rem !important;
}
.strong-electric {
padding: 0.05rem 0.2rem;
border-radius: 0.1rem !important;
}
.auto-electric {
padding: 0.05rem 0.2rem;
border-radius: 0.1rem !important;
}
}
}
}
</style> </style>

36
src/views/centerairC/sysControl/vavleheader.vue
Unescape View File

@ -137,6 +137,7 @@ export default {
.device-name { .device-name {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
font-size: 14px;
.el-switch { .el-switch {
width: 120px !important; width: 120px !important;
} }
@ -196,4 +197,39 @@ export default {
.device-li:nth-child(1) { .device-li:nth-child(1) {
color: #9ca3af; color: #9ca3af;
} }
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.device-li {
padding: 0.12rem 0 !important;
border-bottom: 0.01rem dashed #0349ac !important;
.device-name {
font-size: 0.14rem !important;
.el-switch {
width: 1.2rem !important;
}
.run::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
.no-run::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
.el-input {
width: 1rem !important;
}
.strong-electric {
padding: 0.05rem 0.2rem;
border-radius: 0.1rem !important;
}
.auto-electric {
padding: 0.05rem 0.2rem;
border-radius: 0.1rem !important;
}
}
}
}
</style> </style>

365
src/views/centerairC/sysMonitor/index.vue
Unescape View File

@ -1,6 +1,10 @@
<template> <template>
<div class="monitor" v-loading="loading"> <div class="monitor" v-loading="loading">
<div class="monitor-content"> <div class="monitor-content">
<!-- logo -->
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
<!-- 标题 -->
<div class="sys-title">铭汉高效冷源站管理系统</div>
<!-- 天气数据 --> <!-- 天气数据 -->
<div class="weather"> <div class="weather">
<div class="weather-li"> <div class="weather-li">
@ -126,9 +130,9 @@
</div> </div>
<line-children <line-children
:angle1="-0" :angle1="-0"
:angle2="-30" :angle2="-20"
:lineWidth1="200" :lineWidth1="200"
:lineWidth2="100" :lineWidth2="130"
class="host-line1" class="host-line1"
></line-children> ></line-children>
<!-- 主机2数据定位 --> <!-- 主机2数据定位 -->
@ -171,9 +175,9 @@
</div> </div>
<line-children <line-children
:angle1="-0" :angle1="-0"
:angle2="-45" :angle2="-30"
:lineWidth1="250" :lineWidth1="250"
:lineWidth2="300" :lineWidth2="350"
class="host-line2" class="host-line2"
></line-children> ></line-children>
<!-- 主机3数据定位 --> <!-- 主机3数据定位 -->
@ -221,9 +225,9 @@
<!-- 线+主机冷却水流状态 --> <!-- 线+主机冷却水流状态 -->
<line-children <line-children
:angle1="-0" :angle1="-0"
:angle2="-48" :angle2="-40"
:lineWidth1="350" :lineWidth1="350"
:lineWidth2="490" :lineWidth2="520"
class="host-line3" class="host-line3"
></line-children> ></line-children>
@ -1268,19 +1272,44 @@ export default {
// height: 9.65rem; // height: 9.65rem;
position: relative; position: relative;
margin-left: calc((100% - 16rem) / 2); margin-left: calc((100% - 16rem) / 2);
.sys-logo {
width: 1.9rem;
height: 0.56rem;
position: absolute;
top: 0.4rem;
left: 0;
z-index: 10;
}
.sys-title {
background-image: url(../../../assets/images/top.png);
background-size: 100% 100%;
width: 16rem;
height: 0.5rem;
position: absolute;
top: 0;
left: 0;
font-size: 0.22rem;
color: #ffffff;
font-weight: bold;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.monitor-img { .monitor-img {
position: absolute; position: absolute;
top: -0.2rem; top: 0.6rem;
left: calc((100% - 16rem) / 2); left: calc((100% - 15rem) / 2);
width: 15.5rem; width: 15rem;
height: 9.65rem; height: 9.15rem;
z-index: 1; z-index: 1;
} }
.fan-img1 { .fan-img1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.7rem; top: 1.45rem;
left: 4.96rem; left: 5.27rem;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1289,8 +1318,8 @@ export default {
.fan-img2 { .fan-img2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.39rem; top: 1.16rem;
left: 5.92rem; left: 6.23rem;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1299,8 +1328,8 @@ export default {
.fan-img3 { .fan-img3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.27rem; top: 1.06rem;
left: 6.41rem; left: 6.72rem;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1309,8 +1338,8 @@ export default {
.fan-img4 { .fan-img4 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.06rem; top: 0.85rem;
left: 7.25rem; left: 7.54rem;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1319,8 +1348,8 @@ export default {
.fan-img5 { .fan-img5 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: -0.04rem; top: 0.74rem;
left: 7.7rem; left: 7.95rem;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1340,8 +1369,8 @@ export default {
.towerValve1 { .towerValve1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 1.17rem; top: 1.88rem;
left: 5.66rem; left: 5.98rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1350,8 +1379,8 @@ export default {
.towerValve2 { .towerValve2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.9rem; top: 1.64rem;
left: 6.75rem; left: 7.04rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1360,8 +1389,8 @@ export default {
.towerValve3 { .towerValve3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.56rem; top: 1.3rem;
left: 8.05rem; left: 8.29rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1369,8 +1398,8 @@ export default {
} }
.in-arrow { .in-arrow {
position: absolute; position: absolute;
top: 2.5rem; top: 3.2rem;
right: 3.7rem; right: 3.6rem;
transform: rotate(180deg); transform: rotate(180deg);
width: 0.4rem; width: 0.4rem;
height: 0.6rem; height: 0.6rem;
@ -1378,7 +1407,7 @@ export default {
} }
.out-arrow { .out-arrow {
position: absolute; position: absolute;
top: 3.4rem; top: 4rem;
right: 1.3rem; right: 1.3rem;
width: 0.4rem; width: 0.4rem;
height: 0.6rem; height: 0.6rem;
@ -1387,7 +1416,7 @@ export default {
.coolingInTem { .coolingInTem {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 2.1rem; top: 2.9rem;
left: 8.35rem; left: 8.35rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
@ -1395,7 +1424,7 @@ export default {
.coolingOutTem { .coolingOutTem {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 3rem; top: 3.6rem;
left: 4.77rem; left: 4.77rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
@ -1403,24 +1432,24 @@ export default {
.freezingInTem { .freezingInTem {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 4.54rem; top: 4.85rem;
right: 5.3rem; right: 4.5rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.freezingOutTem { .freezingOutTem {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.2rem; top: 5.44rem;
right: 3.8rem; right: 3.04rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.freezingOutWater { .freezingOutWater {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.2rem; top: 6.7rem;
right: 4.9rem; right: 4.4rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
@ -1428,7 +1457,7 @@ export default {
.freezingInPre { .freezingInPre {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5rem; top: 5.3rem;
right: 5.3rem; right: 5.3rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
@ -1436,27 +1465,27 @@ export default {
.freezingOutPre { .freezingOutPre {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.7rem; top: 5.9rem;
right: 3.7rem; right: 3.7rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.host-line1 { .host-line1 {
position: absolute; position: absolute;
left: -0.96rem; left: -0.95rem;
top: 6.57rem; top: 6.97rem;
z-index: 10; z-index: 10;
} }
.host-line2 { .host-line2 {
position: absolute; position: absolute;
left: -0.48rem; left: -0.74rem;
top: 7.48rem; top: 7.72rem;
z-index: 10; z-index: 10;
} }
.host-line3 { .host-line3 {
position: absolute; position: absolute;
left: -0.3rem; left: -0.6rem;
top: 8.24rem; top: 8.55rem;
z-index: 10; z-index: 10;
} }
.hostName1 { .hostName1 {
@ -1466,8 +1495,8 @@ export default {
font-weight: bold; font-weight: bold;
color: aqua; color: aqua;
position: absolute; position: absolute;
top: 6.8rem; top: 7.26rem;
left: 2.5rem; left: 2.9rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); /* 分别在 X、Y、Z 轴上旋转 */ transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg); /* 分别在 X、Y、Z 轴上旋转 */
transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ transform-origin: bottom center; /* 设置旋转的基点为底部中心 */
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */
@ -1479,8 +1508,8 @@ export default {
font-weight: bold; font-weight: bold;
color: aqua; color: aqua;
position: absolute; position: absolute;
top: 6rem; top: 6.5rem;
left: 4.6rem; left: 5rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg); transform: rotateX(50deg) rotateY(0deg) rotateZ(42deg);
transform-origin: bottom center; transform-origin: bottom center;
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
@ -1492,8 +1521,8 @@ export default {
font-weight: bold; font-weight: bold;
color: aqua; color: aqua;
position: absolute; position: absolute;
top: 5.12rem; top: 5.6rem;
left: 6.5rem; left: 6.67rem;
transform: rotateX(50deg) rotateY(0deg) rotateZ(39deg); transform: rotateX(50deg) rotateY(0deg) rotateZ(39deg);
transform-origin: bottom center; transform-origin: bottom center;
text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9);
@ -1512,8 +1541,8 @@ export default {
.host-img1 { .host-img1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.72rem; top: 7.14rem;
left: 4.02rem; left: 4.4rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1522,8 +1551,8 @@ export default {
.host-img2 { .host-img2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.85rem; top: 6.32rem;
left: 6.04rem; left: 6.34rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1532,8 +1561,8 @@ export default {
.host-img3 { .host-img3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.02rem; top: 5.55rem;
left: 8.2rem; left: 8.42rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1542,46 +1571,46 @@ export default {
.hostLoad1 { .hostLoad1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.9rem; top: 6.5rem;
left: 3.7rem; left: 4rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.hostLoad2 { .hostLoad2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.12rem; top: 5.8rem;
left: 5.7rem; left: 6rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.hostLoad3 { .hostLoad3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 4.4rem; top: 5rem;
left: 7.65rem; left: 7.9rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.water-flow1 { .water-flow1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 7.03rem; top: 7.4rem;
left: 0.1rem; left: 0.1rem;
font-size: 0.16rem; font-size: 0.16rem;
} }
.water-flow2 { .water-flow2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 7.93rem; top: 8.18rem;
left: 0.58rem; left: 0.4rem;
font-size: 0.16rem; font-size: 0.16rem;
} }
.water-flow3 { .water-flow3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 8.71rem; top: 9rem;
left: 0.78rem; left: 0.52rem;
font-size: 0.16rem; font-size: 0.16rem;
} }
.water-flow-li { .water-flow-li {
@ -1623,8 +1652,8 @@ export default {
.hostStatus1 { .hostStatus1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.5rem; top: 6.7rem;
left: 3.3rem; left: 4.05rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
border-radius: 50%; border-radius: 50%;
@ -1632,8 +1661,8 @@ export default {
.hostStatus2 { .hostStatus2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.7rem; top: 6rem;
left: 5.4rem; left: 6.05rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
border-radius: 50%; border-radius: 50%;
@ -1641,8 +1670,8 @@ export default {
.hostStatus3 { .hostStatus3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 4.8rem; top: 5.2rem;
left: 7.5rem; left: 7.8rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
border-radius: 50%; border-radius: 50%;
@ -1653,8 +1682,8 @@ export default {
font-weight: bold; font-weight: bold;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 3.8rem; top: 4.4rem;
left: 7.3rem; left: 7.55rem;
} }
.coolingPump2 { .coolingPump2 {
z-index: 10; z-index: 10;
@ -1662,8 +1691,8 @@ export default {
font-weight: bold; font-weight: bold;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 3.45rem; top: 4.1rem;
left: 8.28rem; left: 8.48rem;
} }
.coolingPump3 { .coolingPump3 {
z-index: 10; z-index: 10;
@ -1671,14 +1700,14 @@ export default {
font-weight: bold; font-weight: bold;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 3.11rem; top: 3.74rem;
left: 9.12rem; left: 9.34rem;
} }
.cooling-img1 { .cooling-img1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 3.31rem; top: 3.94rem;
left: 7.4rem; left: 7.65rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1687,8 +1716,8 @@ export default {
.cooling-img2 { .cooling-img2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 2.98rem; top: 3.6rem;
left: 8.34rem; left: 8.57rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1697,8 +1726,8 @@ export default {
.cooling-img3 { .cooling-img3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 2.66rem; top: 3.3rem;
left: 9.25rem; left: 9.45rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1707,24 +1736,24 @@ export default {
.cooling-hz1 { .cooling-hz1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 3.25rem; top: 3.88rem;
left: 7.16rem; left: 7.43rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.cooling-hz2 { .cooling-hz2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 2.94rem; top: 3.55rem;
left: 8.15rem; left: 8.35rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.cooling-hz3 { .cooling-hz3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 2.6rem; top: 3.25rem;
left: 9.1rem; left: 9.25rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
@ -1734,8 +1763,8 @@ export default {
font-weight: bold; font-weight: bold;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 7.5rem; top: 7.88rem;
left: 6.8rem; left: 7.13rem;
} }
.freezingPump2 { .freezingPump2 {
z-index: 10; z-index: 10;
@ -1743,8 +1772,8 @@ export default {
font-weight: bold; font-weight: bold;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 6.82rem; top: 7.28rem;
left: 8.15rem; left: 8.4rem;
} }
.freezingPump3 { .freezingPump3 {
z-index: 10; z-index: 10;
@ -1752,14 +1781,14 @@ export default {
font-weight: bold; font-weight: bold;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 6.28rem; top: 6.75rem;
left: 9.3rem; left: 9.47rem;
} }
.freezing-img1 { .freezing-img1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.91rem; top: 7.35rem;
left: 6.93rem; left: 7.2rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1768,8 +1797,8 @@ export default {
.freezing-img2 { .freezing-img2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.28rem; top: 6.73rem;
left: 8.26rem; left: 8.5rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1778,8 +1807,8 @@ export default {
.freezing-img3 { .freezing-img3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.72rem; top: 6.21rem;
left: 9.38rem; left: 9.56rem;
width: 0.4rem; width: 0.4rem;
height: 0.4rem; height: 0.4rem;
transform-style: preserve-3d; transform-style: preserve-3d;
@ -1788,24 +1817,24 @@ export default {
.freezing-hz1 { .freezing-hz1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.83rem; top: 7.3rem;
left: 6.7rem; left: 6.93rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.freezing-hz2 { .freezing-hz2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.24rem; top: 6.66rem;
left: 8.05rem; left: 8.25rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
.freezing-hz3 { .freezing-hz3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.66rem; top: 6.15rem;
left: 9.16rem; left: 9.36rem;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: bold; font-weight: bold;
} }
@ -1814,8 +1843,8 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 1.8rem; top: 2.44rem;
left: 5.05rem; left: 5.4rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1824,8 +1853,8 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 1.5rem; top: 2.2rem;
left: 5.98rem; left: 6.3rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1834,8 +1863,8 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 1.38rem; top: 2.07rem;
left: 6.42rem; left: 6.76rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1844,8 +1873,8 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 1.1rem; top: 1.83rem;
left: 7.3rem; left: 7.57rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1854,8 +1883,8 @@ export default {
font-size: 0.18rem; font-size: 0.18rem;
color: #46f1e3; color: #46f1e3;
position: absolute; position: absolute;
top: 1rem; top: 1.72rem;
left: 7.7rem; left: 8rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1864,8 +1893,8 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
top: -0.08rem; top: 0.7rem;
left: 7.36rem; left: 7.56rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1874,8 +1903,8 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
top: 0.04rem; top: 0.85rem;
left: 6.76rem; left: 6.95rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1884,8 +1913,8 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
top: 0.22rem; top: 1.02rem;
left: 6.06rem; left: 6.2rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1894,8 +1923,8 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
top: 0.37rem; top: 1.17rem;
left: 5.49rem; left: 5.57rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1904,8 +1933,8 @@ export default {
font-size: 0.16rem; font-size: 0.16rem;
color: #ffffff; color: #ffffff;
position: absolute; position: absolute;
top: 0.64rem; top: 1.38rem;
left: 4.4rem; left: 4.7rem;
font-weight: bold; font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
} }
@ -1924,8 +1953,8 @@ export default {
.frozenValve1 { .frozenValve1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 6.67rem; top: 7.1rem;
left: 4.62rem; left: 4.96rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1934,8 +1963,8 @@ export default {
.frozenValve2 { .frozenValve2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.8rem; top: 6.26rem;
left: 6.62rem; left: 6.91rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1944,8 +1973,8 @@ export default {
.frozenValve3 { .frozenValve3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 4.8rem; top: 5.34rem;
left: 8.46rem; left: 8.68rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1954,8 +1983,8 @@ export default {
.coolingValue1 { .coolingValue1 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5.8rem; top: 6.26rem;
left: 2.7rem; left: 3.11rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1964,8 +1993,8 @@ export default {
.coolingValue2 { .coolingValue2 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 5rem; top: 5.52rem;
left: 4.73rem; left: 5.07rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1974,8 +2003,8 @@ export default {
.coolingValue3 { .coolingValue3 {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 4.24rem; top: 4.8rem;
left: 6.86rem; left: 7.15rem;
width: 0.18rem; width: 0.18rem;
height: 0.18rem; height: 0.18rem;
background-color: #ebebeb; background-color: #ebebeb;
@ -1984,7 +2013,7 @@ export default {
.statusAndModel { .statusAndModel {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 8.4rem; top: 8.7rem;
right: 3rem; right: 3rem;
width: 3rem; width: 3rem;
.warnStatus { .warnStatus {
@ -2022,7 +2051,7 @@ export default {
right: 0.7rem; right: 0.7rem;
font-size: 0.14rem; font-size: 0.14rem;
font-weight: bold; font-weight: bold;
color: #3bb3f8; color: #89e8f5;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
.sysWarning { .sysWarning {
@ -2042,23 +2071,25 @@ export default {
left: 0.8rem; left: 0.8rem;
font-size: 0.18rem; font-size: 0.18rem;
font-weight: bold; font-weight: bold;
color: #1fb7f3; color: #ffffff;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
} }
} }
.weather { .weather {
min-width: 2.5rem; min-width: 2.85rem;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0.4rem; top: 1rem;
left: -0rem; left: 1.1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
font-size: 0.2rem; font-size: 0.2rem;
color: rgb(18, 155, 209); // color: rgb(18, 155, 209);
// color: rgb(147, 204, 236);
color: rgb(144, 167, 197);
background-image: url(../../../assets/images/border1.png); background-image: url(../../../assets/images/border1.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -2074,33 +2105,35 @@ export default {
.deepColor { .deepColor {
display: inline-block; display: inline-block;
margin: 0 0.1rem 0 0.05rem; margin: 0 0.1rem 0 0.05rem;
color: #20ebfa; // color: #20ebfa;
// color: #18f13c;
// color: #6cf02f;
color: #6cf02f;
font-weight: bold; font-weight: bold;
font-family: DIN; font-family: DIN;
font-size: 0.24rem; font-size: 0.25rem;
} }
} }
.performance { .performance {
position: absolute; position: absolute;
top: 6.1rem !important; top: 6.3rem !important;
right: 0.1rem !important; right: 0rem !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
font-size: 0.16rem; font-size: 0.16rem;
color: rgb(18, 155, 209);
} }
.perdformance-bg { .perdformance-bg {
min-width: 2.5rem; width: 2.85rem;
z-index: 10; z-index: 10;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
font-size: 0.2rem; font-size: 0.2rem;
color: rgb(18, 155, 209); color: rgb(144, 167, 197);
background-image: url(../../../assets/images/border4.png); background-image: url(../../../assets/images/border4.png);
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -2131,8 +2164,8 @@ export default {
background-image: url(../../../assets/images/border2.png); background-image: url(../../../assets/images/border2.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
top: 0; top: 0.6rem;
right: 1.7rem; right: 0.8rem;
z-index: 10; z-index: 10;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -2152,7 +2185,7 @@ export default {
line-height: 1rem; line-height: 1rem;
font-family: DIN; font-family: DIN;
font-size: 0.3rem; font-size: 0.3rem;
color: #20ebfa; color: #6cf02f;
font-weight: bold; font-weight: bold;
} }
.on-animation { .on-animation {
@ -2179,8 +2212,8 @@ export default {
} }
.sysTips { .sysTips {
position: absolute; position: absolute;
top: 1.7rem; top: 2.5rem;
left: 13rem; left: 13.6rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -2188,6 +2221,16 @@ export default {
.step { .step {
width: 0.2rem; width: 0.2rem;
height: 0.3rem; height: 0.3rem;
margin-right: 0.04rem;
animation: moveRight 1s ease-in-out infinite alternate;
}
@keyframes moveRight {
0% {
transform: translateX(0); /* 初始位置，不移动 */
}
100% {
transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
}
} }
.tips-text { .tips-text {
border: 0.01rem solid transparent; border: 0.01rem solid transparent;

1504
src/views/centerairC/sysMonitor/index1.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save