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

src/assets/styles/bigScreen.scss

@@ -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;
+}
+}

src/assets/styles/index.scss

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

src/assets/styles/ruoyi.scss

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

src/assets/styles/sidebar.scss

@@ -282,6 +282,59 @@
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {
   :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;
   }
 }

src/components/Breadcrumb/index.vue

@@ -2,7 +2,11 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <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>
       </el-breadcrumb-item>
     </transition-group>
@@ -13,80 +17,86 @@
 export default {
   data() {
     return {
-      levelList: null
-    }
+      levelList: null,
+    };
   },
   watch: {
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
+      if (route.path.startsWith("/redirect/")) {
+        return;
       }
-      this.getBreadcrumb()
-    }
+      this.getBreadcrumb();
+    },
   },
   created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = []
-      const router = this.$route
-      const pathNum = this.findPathNum(router.path)
+      let matched = [];
+      const router = this.$route;
+      const pathNum = this.findPathNum(router.path);
       // multi-level menu
       if (pathNum > 2) {
-        const reg = /\/\w+/gi
+        const reg = /\/\w+/gi;
         const pathList = router.path.match(reg).map((item, index) => {
-          if (index !== 0) item = item.slice(1)
-          return item
-        })
-        this.getMatched(pathList, this.$store.getters.defaultRoutes, matched)
+          if (index !== 0) item = item.slice(1);
+          return item;
+        });
+        this.getMatched(pathList, this.$store.getters.defaultRoutes, matched);
       } 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])) {
-        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 = "/") {
-      let index = str.indexOf(char)
-      let num = 0
+      let index = str.indexOf(char);
+      let num = 0;
       while (index !== -1) {
-        num++
-        index = str.indexOf(char, index + 1)
+        num++;
+        index = str.indexOf(char, index + 1);
       }
-      return num
+      return num;
     },
     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) {
-        matched.push(data)
+        matched.push(data);
         if (data.children && pathList.length) {
-          pathList.shift()
-          this.getMatched(pathList, data.children, matched)
+          pathList.shift();
+          this.getMatched(pathList, data.children, matched);
         }
       }
     },
     isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name;
       if (!name) {
-        return false
+        return false;
       }
-      return name.trim() === 'Index'
+      return name.trim() === "Index";
     },
     handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item;
       if (redirect) {
-        this.$router.push(redirect)
-        return
+        this.$router.push(redirect);
+        return;
       }
-      this.$router.push(path)
-    }
-  }
-}
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -99,4 +109,12 @@ export default {
     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>

src/components/Hamburger/index.vue

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

src/components/SvgIcon/index.vue

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

src/components/TopNav/index.vue

@@ -5,25 +5,38 @@
     @select="handleSelect"
   >
     <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
-        v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
-        :icon-class="item.meta.icon"/>
+          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+          :icon-class="item.meta.icon"
+        />
         {{ item.meta.title }}
       </el-menu-item>
     </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 v-for="(item, index) in topMenus">
         <el-menu-item
           :index="item.path"
           :key="index"
-          v-if="index >= visibleNumber">
+          v-if="index >= visibleNumber"
+        >
           <svg-icon
             v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
-            :icon-class="item.meta.icon"/>
+            :icon-class="item.meta.icon"
+          />
           {{ item.meta.title }}
         </el-menu-item>
       </template>
@@ -36,7 +49,7 @@ import { constantRoutes } from "@/router";
 import { isHttp } from "@/utils/validate";
 
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ["/index", "/user/profile"];
 
 export default {
   data() {
@@ -44,7 +57,7 @@ export default {
       // 顶部栏初始数
       visibleNumber: 5,
       // 当前激活菜单的 index
-      currentIndex: undefined
+      currentIndex: undefined,
     };
   },
   computed: {
@@ -76,11 +89,12 @@ export default {
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
+            if (router.path === "/") {
               router.children[item].path = "/" + router.children[item].path;
             } else {
-              if(!isHttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+              if (!isHttp(router.children[item].path)) {
+                router.children[item].path =
+                  router.path + "/" + router.children[item].path;
               }
             }
             router.children[item].parentPath = router.path;
@@ -94,25 +108,29 @@ export default {
     activeMenu() {
       const path = this.$route.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);
         if (!this.$route.meta.link) {
           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;
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       }
       this.activeRoutes(activePath);
       return activePath;
     },
   },
   beforeMount() {
-    window.addEventListener('resize', this.setVisibleNumber)
+    window.addEventListener("resize", this.setVisibleNumber);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setVisibleNumber)
+    window.removeEventListener("resize", this.setVisibleNumber);
   },
   mounted() {
     this.setVisibleNumber();
@@ -126,24 +144,24 @@ export default {
     // 菜单选择事件
     handleSelect(key, keyPath) {
       this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
+      const route = this.routers.find((item) => item.path === key);
       if (isHttp(key)) {
         // http(s):// 路径新窗口打开
         window.open(key, "_blank");
       } 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) {
           let query = JSON.parse(routeMenu.query);
           this.$router.push({ path: key, query: query });
         } else {
           this.$router.push({ path: key });
         }
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       } else {
         // 显示左侧联动菜单
         this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        this.$store.dispatch("app/toggleSideBarHide", false);
       }
     },
     // 当前激活的路由
@@ -156,12 +174,12 @@ export default {
           }
         });
       }
-      if(routes.length > 0) {
+      if (routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       } else {
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       }
-    }
+    },
   },
 };
 </script>
@@ -169,25 +187,48 @@ export default {
 <style lang="scss">
 .topmenu-container.el-menu--horizontal > .el-menu-item {
   float: left;
-  height: 50px !important;
-  line-height: 50px !important;
+  height: 50px;
+  line-height: 50px;
   color: #999093 !important;
-  padding: 0 5px !important;
-  margin: 0 10px !important;
+  padding: 0 5px;
+  margin: 0 10px;
 }
 
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  border-bottom: 2px solid #{'var(--theme)'} !important;
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: 2px solid #{"var(--theme)"} !important;
   color: #303133;
 }
 
 /* submenu item */
 .topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
   float: left;
-  height: 50px !important;
-  line-height: 50px !important;
+  height: 50px;
+  line-height: 50px;
   color: #999093 !important;
-  padding: 0 5px !important;
-  margin: 0 10px !important;
+  padding: 0 5px;
+  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>

src/layout/components/AppMain.vue

@@ -97,4 +97,24 @@ export default {
   background-color: #c0c0c0;
   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>

src/layout/components/Navbar.vue

@@ -1,19 +1,31 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" 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"/>
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      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">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <search id="header-search" class="right-menu-item" />
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
       </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">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -33,12 +45,12 @@
 </template>
 
 <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 Search from '@/components/HeaderSearch'
+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 Search from "@/components/HeaderSearch";
 
 export default {
   components: {
@@ -49,45 +61,43 @@ export default {
     Search,
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
+    ...mapGetters(["sidebar", "avatar", "device"]),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "showSettings",
+          value: val,
+        });
+      },
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav
-      }
-    }
+        return this.$store.state.settings.topNav;
+      },
+    },
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
+          });
         })
-      }).catch(() => {});
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -95,31 +105,25 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background-image: linear-gradient(0deg, 
-		#002c5e 0%, 
-		#0069b2 100%), 
-	linear-gradient(
-		#002c5e, 
-		#002c5e);
-	background-blend-mode: normal, 
-		normal;
-	box-shadow: inset 0px -1px 0px 0px 
-		rgba(255, 255, 255, 0.1);
+  background-image: linear-gradient(0deg, #002c5e 0%, #0069b2 100%),
+    linear-gradient(#002c5e, #002c5e);
+  background-blend-mode: normal, normal;
+  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -160,10 +164,10 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &: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>

src/layout/components/Sidebar/Logo.vue

@@ -1,7 +1,21 @@
 <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">
-      <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-else :src="logoRight" class="sidebar-logo-right" />
         <!-- <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> -->
@@ -16,34 +30,34 @@
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
-import logoRightImg from '@/assets/logo/logoRight.png'
-import variables from '@/assets/styles/variables.scss'
+import logoImg from "@/assets/logo/logo.png";
+import logoRightImg from "@/assets/logo/logoRight.png";
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
   props: {
     collapse: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     variables() {
       return variables;
     },
     sideTheme() {
-      return this.$store.state.settings.sideTheme
-    }
+      return this.$store.state.settings.sideTheme;
+    },
   },
   data() {
     return {
       title: process.env.VUE_APP_TITLE,
       logo: logoImg,
-      logoRight:logoRightImg,
-    }
-  }
-}
+      logoRight: logoRightImg,
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -65,16 +79,10 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background-image: linear-gradient(0deg, 
-    #002c5e 0%, 
-    #0069b2 100%), 
-  linear-gradient(
-    #002c5e, 
-    #002c5e);
-  background-blend-mode: normal, 
-    normal;
-  box-shadow: inset 0px -1px 0px 0px 
-    rgba(255, 255, 255, 0.1);
+  background-image: linear-gradient(0deg, #002c5e 0%, #0069b2 100%),
+    linear-gradient(#002c5e, #002c5e);
+  background-blend-mode: normal, normal;
+  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
   text-align: center;
   overflow: hidden;
   & .sidebar-logo-link {
@@ -93,7 +101,7 @@ export default {
       vertical-align: middle;
       margin-right: 12px;
     }
-    & .sidebar-logo-right{
+    & .sidebar-logo-right {
       width: 100px;
       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>

src/layout/components/TagsView/ScrollPane.vue

@@ -1,79 +1,90 @@
 <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 />
   </el-scrollbar>
 </template>
 
 <script>
-const tagAndTagSpacing = 4 // tagAndTagSpacing
+const tagAndTagSpacing = 4; // tagAndTagSpacing
 
 export default {
-  name: 'ScrollPane',
+  name: "ScrollPane",
   data() {
     return {
-      left: 0
-    }
+      left: 0,
+    };
   },
   computed: {
     scrollWrapper() {
-      return this.$refs.scrollContainer.$refs.wrap
-    }
+      return this.$refs.scrollContainer.$refs.wrap;
+    },
   },
   mounted() {
-    this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
+    this.scrollWrapper.addEventListener("scroll", this.emitScroll, true);
   },
   beforeDestroy() {
-    this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
+    this.scrollWrapper.removeEventListener("scroll", this.emitScroll);
   },
   methods: {
     handleScroll(e) {
-      const eventDelta = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+      const eventDelta = e.wheelDelta || -e.deltaY * 40;
+      const $scrollWrapper = this.scrollWrapper;
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
     },
     emitScroll() {
-      this.$emit('scroll')
+      this.$emit("scroll");
     },
     moveToTarget(currentTag) {
-      const $container = this.$refs.scrollContainer.$el
-      const $containerWidth = $container.offsetWidth
-      const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
+      const $container = this.$refs.scrollContainer.$el;
+      const $containerWidth = $container.offsetWidth;
+      const $scrollWrapper = this.scrollWrapper;
+      const tagList = this.$parent.$refs.tag;
 
-      let firstTag = null
-      let lastTag = null
+      let firstTag = null;
+      let lastTag = null;
 
       // find first tag and last tag
       if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
+        firstTag = tagList[0];
+        lastTag = tagList[tagList.length - 1];
       }
 
       if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
+        $scrollWrapper.scrollLeft = 0;
       } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+        $scrollWrapper.scrollLeft =
+          $scrollWrapper.scrollWidth - $containerWidth;
       } else {
         // find preTag and nextTag
-        const currentIndex = tagList.findIndex(item => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
+        const currentIndex = tagList.findIndex((item) => item === currentTag);
+        const prevTag = tagList[currentIndex - 1];
+        const nextTag = tagList[currentIndex + 1];
 
         // 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
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+        const beforePrevTagOffsetLeft =
+          prevTag.$el.offsetLeft - tagAndTagSpacing;
 
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        if (
+          afterNextTagOffsetLeft >
+          $scrollWrapper.scrollLeft + $containerWidth
+        ) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
         } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -82,6 +93,7 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
+  height: 100%;
   ::v-deep {
     .el-scrollbar__bar {
       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>

src/layout/components/TagsView/index.vue

@@ -251,11 +251,10 @@ export default {
       background-color: #173350;
       border-radius: 2px;
 	    border: solid 1px #234f70;
-      font-size: 12px;
 	    letter-spacing: 1px;
 	    color: #c6c6c6;
       padding: 0 8px;
-      font-size: 12px;
+      font-size: 14px;
       margin-left: 5px;
       margin-top: 4px;
       &: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-item {
     .el-icon-close {
@@ -333,4 +328,54 @@ export default {
     }
   }
 }
-</style>
+// 媒体查询，适配大于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>

src/views/centerairC/sysControl/index.vue

@@ -49,7 +49,7 @@
           <list-header
             :deviceList="coolingPump"
             @operationControl="hadleOperationConrol"
-             @upList="getOperationList"
+            @upList="getOperationList"
           ></list-header>
         </div>
       </el-tab-pane>
@@ -59,17 +59,16 @@
             :deviceList="coolingTowerFanList"
             :isNoShowlocalRemote="true"
             @operationControl="hadleOperationConrol"
-             @upList="getOperationList"
+            @upList="getOperationList"
           ></list-header>
         </div>
-        
       </el-tab-pane>
       <el-tab-pane label="冷冻泵" name="freezingPump">
         <div class="device-container">
           <list-header
             :deviceList="freezingPump"
             @operationControl="hadleOperationConrol"
-             @upList="getOperationList"
+            @upList="getOperationList"
           ></list-header>
         </div>
       </el-tab-pane>
@@ -417,6 +416,7 @@ export default {
 .status-label {
   color: #9ca3af;
   margin-bottom: 20px;
+  font-size: 14px;
 }
 
 .status-value-running {
@@ -442,4 +442,34 @@ export default {
   font-weight: bold;
   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>

src/views/centerairC/sysControl/listHeader.vue

@@ -206,6 +206,7 @@ export default {
   .device-name {
     flex: 1;
     white-space: nowrap;
+    font-size: 14px;
     .el-switch {
       width: 120px !important;
     }
@@ -265,4 +266,39 @@ export default {
 .device-li:nth-child(1) {
   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>

src/views/centerairC/sysControl/vavleheader.vue

@@ -137,6 +137,7 @@ export default {
   .device-name {
     flex: 1;
     white-space: nowrap;
+    font-size: 14px;
     .el-switch {
       width: 120px !important;
     }
@@ -196,4 +197,39 @@ export default {
 .device-li:nth-child(1) {
   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>

src/views/centerairC/sysMonitor/index.vue

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