Ver Fonte

reactor:配置统一;移除多余的文件;

zhangchong há 7 meses atrás
pai
commit
7ca026965a
3 ficheiros alterados com 51 adições e 153 exclusões
  1. 28 24
      src/App.vue
  2. 2 112
      src/assets/css/element.scss
  3. 21 17
      src/views/home/container.vue

+ 28 - 24
src/App.vue

@@ -40,28 +40,34 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 // 设置初始化,防止刷新时恢复默认
 onBeforeMount(async () => {
-  // 获取登录页的背景图和系统名称等
-  const { result } = await loginPageInfo();
-  const appScope = result.appScope ?? "YiBin"; // 应用范围
-  const callCenterType = result.callCenterType ?? "TianRun"; // 呼叫中心类型
-  const cityName = result.cityName ?? ""; // 城市名称
-  const cityCode = result.cityCode ?? ""; // 城市编码
-  const cityAbbr = result.cityAbbr ?? ""; // 城市简称
-  const locationCenter = result.locationCenter ?? []; // 城市中心点
-  const faviconImage = result.faviconImage ?? ``; // favicon 浏览器标签图标
-  const callCenterSocketUrl = result.callCenterSocketUrl ?? ""; // 呼叫中心socket地址
-  storesThemeConfig.setThemeConfig(
-    Object.assign(themeConfig.value, {
-      appScope,
-      callCenterType,
-      cityName,
-      cityCode,
-      cityAbbr,
-      locationCenter,
-      faviconImage,
-      callCenterSocketUrl,
-    })
-  );
+  const isDark = useDark();
+  isDark.value = themeConfig.value.isIsDark;
+  try {
+    // 获取登录页的背景图和系统名称等
+    const { result } = await loginPageInfo();
+    const appScope = result.appScope ?? "YiBin"; // 应用范围
+    const callCenterType = result.callCenterType ?? "TianRun"; // 呼叫中心类型
+    const cityName = result.cityName ?? ""; // 城市名称
+    const cityCode = result.cityCode ?? ""; // 城市编码
+    const cityAbbr = result.cityAbbr ?? ""; // 城市简称
+    const locationCenter = result.locationCenter ?? []; // 城市中心点
+    const faviconImage = result.faviconImage ?? ``; // favicon 浏览器标签图标
+    const callCenterSocketUrl = result.callCenterSocketUrl ?? ""; // 呼叫中心socket地址
+    storesThemeConfig.setThemeConfig(
+      Object.assign(themeConfig.value, {
+        appScope,
+        callCenterType,
+        cityName,
+        cityCode,
+        cityAbbr,
+        locationCenter,
+        faviconImage,
+        callCenterSocketUrl,
+      })
+    );
+  } catch (e) {
+    console.log(e);
+  }
 });
 // 页面加载时
 onMounted(async () => {
@@ -75,8 +81,6 @@ onMounted(async () => {
   // 动态修改icon
   const icon = useFavicon();
   icon.value = themeConfig.value.faviconImage; // 更改当前左上角角标
-  const isDark = useDark();
-  isDark.value = themeConfig.value.isIsDark; // 更改暗黑模式
 });
 // 页面销毁时,关闭监听布局配置/i18n监听
 onBeforeUnmount(() => {

+ 2 - 112
src/assets/css/element.scss

@@ -18,10 +18,6 @@
 
 /* NavMenu 导航菜单
 ------------------------------- */
-// 鼠标 hover 时颜色
-.el-menu-hover-bg-color {
-	//background-color: var(--hotline-color-menu-hover) !important;
-}
 // 默认样式修改
 .el-menu {
 	border-right: none !important;
@@ -31,10 +27,6 @@
 	height: 56px !important;
 	line-height: 56px !important;
 }
-.el-menu-item,
-.el-sub-menu__title {
-	color: var(--hotline-bg-menuBarColor);
-}
 // 修复点击左侧菜单折叠再展开时,宽度不跟随问题
 .el-menu--collapse {
 	width: 64px !important;
@@ -56,94 +48,13 @@
 	flex-shrink: 0;
 }
 // 水平菜单、横向菜单高亮 背景色,鼠标 hover 时,有子级菜单的背景色
-.el-menu-item.is-active,
-.el-sub-menu.is-active .el-sub-menu__title,
-.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
-	@extend .el-menu-hover-bg-color;
-}
-.el-menu-item.is-active{
-	//color: var(--hotline-color-white);
-	color: var(--el-menu-active-color);
-}
-.el-sub-menu.is-active.is-opened .el-sub-menu__title {
-	background-color: unset !important;
-}
+
 // 子级菜单背景颜色
-// .el-menu--inline {
-// 	background: var(--hotline-bg-menuBar-light-1);
-// }
 // 水平菜单、横向菜单折叠 a 标签
 .el-popper.is-dark a {
 	color: var(--el-color-white) !important;
 	text-decoration: none;
 }
-// 水平菜单、横向菜单折叠背景色
-.el-popper.is-pure.is-light {
-	// 水平菜单
-	.el-menu--vertical {
-		background: var(--hotline-bg-menuBar);
-		.el-sub-menu.is-active .el-sub-menu__title {
-			color: var(--el-menu-active-color);
-		}
-		.el-popper.is-pure.is-light {
-			.el-menu--vertical {
-				.el-sub-menu .el-sub-menu__title {
-					background-color: unset !important;
-					color: var(--hotline-bg-menuBarColor);
-				}
-				.el-sub-menu.is-active .el-sub-menu__title {
-					color: var(--el-menu-active-color);
-				}
-			}
-		}
-	}
-	// 横向菜单
-	.el-menu--horizontal {
-		background: var(--hotline-bg-topBar);
-		.el-menu-item,
-		.el-sub-menu {
-			height: 50px !important;
-			line-height: 50px !important;
-			color: var(--hotline-bg-topBarColor);
-			.el-sub-menu__title {
-				height: 50px !important;
-				line-height: 50px !important;
-				color: var(--hotline-bg-topBarColor);
-			}
-			.el-popper.is-pure.is-light {
-				.el-menu--horizontal {
-					.el-sub-menu .el-sub-menu__title {
-						background-color: unset !important;
-						color: var(--hotline-bg-topBarColor);
-					}
-					.el-sub-menu.is-active .el-sub-menu__title {
-						color: var(--hotline-color-white);
-					}
-				}
-			}
-		}
-		.el-menu-item.is-active,
-		.el-sub-menu.is-active .el-sub-menu__title {
-			//color: var(--hotline-color-white);
-			color: var(--el-menu-active-color);
-		}
-	}
-}
-// 横向菜单(经典、横向)布局
-.el-menu.el-menu--horizontal {
-	border-bottom: none !important;
-	width: 100% !important;
-	.el-menu-item,
-	.el-sub-menu__title {
-		height: 50px !important;
-		color: var(--hotline-bg-topBarColor);
-	}
-	.el-menu-item:not(.is-active):hover,
-	.el-sub-menu:not(.is-active):hover .el-sub-menu__title {
-		color: var(--hotline-bg-topBarColor);
-	}
-}
-
 /* Tabs 标签页
 ------------------------------- */
 .el-tabs__nav-wrap::after {
@@ -173,7 +84,7 @@
 ------------------------------- */
 .el-overlay {
 	overflow: hidden;
-	background-color: var(--hotline-overlay-color-lighter-4);
+	background-color: var(--el-mask-color-extra-light);
 	.el-overlay-dialog {
 		display: flex;
 		align-items: center;
@@ -230,27 +141,6 @@
 	padding: 15px 20px;
 }
 
-/* Table 表格 element plus 2.2.0 版本
-------------------------------- */
-.el-table {
-	.el-button.is-text {
-		padding: 0;
-	}
-	thead{
-		height: 50px !important;
-		color: var(--hotline-color-text-main);
-	}
-	th.el-table__cell{
-		background-color: var(--hotline-bg-main-color) !important;
-	}
-}
-.el-table-v2__header-row{
-	background-color: var(--hotline-bg-main-color) !important;
-}
-.el-table-v2__header-cell{
-	background-color: var(--hotline-bg-main-color) !important;
-	color: var(--hotline-color-text-main);
-}
 /* scrollbar
 ------------------------------- */
 /*防止页面切换时,滚动条高度不变的问题(滚动条高度非滚动条滚动高度)*/

+ 21 - 17
src/views/home/container.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="container-box">
     <div class="container-left">
-      <LeftTop class="container-left-top" :dateArray="dateArray"/>
-      <LeftCenter class="container-left-center" :dateArray="dateArray"/>
-      <LeftBottom class="container-left-bottom" :dateArray="dateArray"/>
+      <LeftTop class="container-left-top" :dateArray="dateArray" />
+      <LeftCenter class="container-left-center" :dateArray="dateArray" />
+      <LeftBottom class="container-left-bottom" :dateArray="dateArray" />
     </div>
     <div class="container-center">
-      <CenterTop class="container-center-top" :dateArray="dateArray"/>
-      <CenterMap class="container-center-map" :dateArray="dateArray"/>
-      <CenterFloat class="container-center-float" :dateArray="dateArray"/>
-      <CenterBottom class="container-center-bottom" :dateArray="dateArray"/>
+      <CenterTop class="container-center-top" :dateArray="dateArray" />
+      <CenterMap class="container-center-map" :dateArray="dateArray" />
+      <CenterFloat class="container-center-float" :dateArray="dateArray" />
+      <CenterBottom class="container-center-bottom" :dateArray="dateArray" />
     </div>
     <div class="container-right">
-      <RightTop class="container-right-top" :dateArray="dateArray"/>
-      <RightCenter class="container-right-center" :dateArray="dateArray"/>
-      <RightBottom class="container-right-bottom" :dateArray="dateArray"/>
+      <RightTop class="container-right-top" :dateArray="dateArray" />
+      <RightCenter class="container-right-center" :dateArray="dateArray" />
+      <RightBottom class="container-right-bottom" :dateArray="dateArray" />
     </div>
   </div>
 </template>
@@ -33,9 +33,9 @@ import RightBottom from "@/views/home/right-bottom.vue";
 const props = defineProps({
   dateArray: {
     type: Array,
-    default: () => []
-  }
-})
+    default: () => [],
+  },
+});
 </script>
 <style scoped lang="scss">
 .container-box {
@@ -45,7 +45,8 @@ const props = defineProps({
   justify-content: space-between;
   margin-top: 10px;
 
-  .container-left, .container-right {
+  .container-left,
+  .container-right {
     display: flex;
     flex-direction: column;
     position: relative;
@@ -78,13 +79,14 @@ const props = defineProps({
     margin: 0 24px;
     display: flex;
     flex-direction: column;
-
+    overflow: hidden;
     .center_center-bottom {
       height: 315px;
     }
   }
 
-  .container-right, .container-left {
+  .container-right,
+  .container-left {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -93,7 +95,9 @@ const props = defineProps({
     box-sizing: border-box;
     flex-shrink: 0;
 
-    .container-right-top, .container-right-center, .container-right-bottom {
+    .container-right-top,
+    .container-right-center,
+    .container-right-bottom {
       height: 300px;
       overflow: hidden;
     }