浏览代码

feat: 优化 table 样式,menu 样式,包含深色模式下

yanglzh 1 年之前
父节点
当前提交
a36a69a1bb

+ 5 - 0
src/layout/component/aside.vue

@@ -155,3 +155,8 @@ export default defineComponent({
 	},
 });
 </script>
+<style scoped lang="scss">
+.el-aside {
+	background-color: var(--next-menu-level2-bg) !important;
+}
+</style>

+ 23 - 12
src/layout/component/columnsAside.vue

@@ -237,12 +237,14 @@ export default defineComponent({
 
 			.columns-vertical {
 				margin: auto;
-
 				.columns-vertical-title {
 					padding-top: 1px;
 				}
 			}
 
+			&:has(.columns-vertical){
+				height: 68px;
+			}
 			.columns-horizontal {
 				display: flex;
 				height: 50px;
@@ -269,9 +271,18 @@ export default defineComponent({
 			}
 		}
 
+		.columns-vertical {
+			.el-icon {
+				font-size: 22px !important;
+			}
+		}
+
 		.layout-columns-active {
 			color: var(--el-color-white);
 			transition: 0.3s ease-in-out;
+			background: var(--next-menu-level1-bg);
+			color: #2D6CE8 !important;
+			font-weight: 500;
 		}
 
 		.layout-columns-hover:not(.layout-columns-active) {
@@ -283,17 +294,17 @@ export default defineComponent({
 		}
 
 		.columns-round {
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			position: absolute;
-			left: 50%;
-			top: 2px;
-			height: 44px;
-			width: 65px;
-			transform: translateX(-50%);
-			z-index: 0;
-			transition: 0.3s ease-in-out;
-			border-radius: 5px;
+			// background: var(--el-color-primary);
+			// color: var(--el-color-white);
+			// position: absolute;
+			// left: 50%;
+			// top: 2px;
+			// height: 44px;
+			// width: 65px;
+			// transform: translateX(-50%);
+			// z-index: 0;
+			// transition: 0.3s ease-in-out;
+			// border-radius: 5px;
 		}
 
 		.columns-card {

+ 1 - 1
src/layout/logo/index.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 	justify-content: center;
 	// box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
 	color: var(--next-bg-menuBar-black);
-	background: var(--next-bg-menuBar-light);
+	// background: var(--next-bg-menuBar-light);
 	font-size: 20px;
 	cursor: pointer;
 	animation: logoAnimation 0.3s ease-in-out;

+ 15 - 2
src/layout/navMenu/subItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<template v-for="val in chils">
+	<div :class="{ newStyle }" v-for="val in chils">
 		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
 			<template #title>
 				<SvgIcon :name="val.meta?.icon" />
@@ -21,7 +21,7 @@
 				</template>
 			</el-menu-item>
 		</template>
-	</template>
+	</div>
 </template>
 
 <script lang="ts">
@@ -33,6 +33,10 @@ export default defineComponent({
 			type: Array,
 			default: () => [],
 		},
+		newStyle: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		// 获取父级菜单数据
@@ -45,3 +49,12 @@ export default defineComponent({
 	},
 });
 </script>
+<style scoped lang="scss">
+.newStyle .el-menu-item {
+	&.is-active {
+		background: var(--next-menu-level2-bg) !important;
+		font-weight: 500;
+		border-right: 2px solid #2D6CE8;
+	}
+}
+</style>

+ 13 - 11
src/layout/navMenu/vertical.vue

@@ -1,25 +1,18 @@
 <template>
-	<el-menu
-		router
-		:default-active="defaultActive"
-		background-color="transparent"
-		:collapse="isCollapse"
-		:unique-opened="getThemeConfig.isUniqueOpened"
-		:collapse-transition="false"
-	>
+	<el-menu router :default-active="defaultActive" background-color="transparent" :collapse="isCollapse" :unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
 		<template v-for="val in menuLists">
 			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
 					<SvgIcon :name="val.meta?.icon" />
-					<span>{{ val.meta?.title.indexOf('.')>0?$t(val.meta?.title):val.meta?.title }}</span>
+					<span>{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}</span>
 				</template>
-				<SubItem :chil="val.children" />
+				<SubItem newStyle :chil="val.children" />
 			</el-sub-menu>
 			<template v-else>
 				<el-menu-item :index="val.path" :key="val.path">
 					<SvgIcon :name="val.meta?.icon" />
 					<template #title v-if="!val.meta?.isLink || (val.meta?.isLink && val.meta.isIframe)">
-						<span>{{ val.meta?.title.indexOf('.')>0?$t(val.meta?.title):val.meta?.title }}</span>
+						<span>{{ val.meta?.title.indexOf('.') > 0 ? $t(val.meta?.title) : val.meta?.title }}</span>
 					</template>
 					<template #title v-else>
 						<a :href="val.meta?.isLink" target="_blank" rel="opener" class="w100">{{ val.meta?.title.indexOf('.')>0?$t(val.meta?.title):val.meta?.title }}</a>
@@ -96,3 +89,12 @@ export default defineComponent({
 	},
 });
 </script>
+<style scoped lang="scss">
+.el-menu-item {
+	&.is-active {
+		background: var(--next-menu-level2-bg) !important;
+		font-weight: 500;
+		border-right: 2px solid #2D6CE8;
+	}
+}
+</style>

+ 2 - 2
src/store/modules/themeConfig.ts

@@ -38,9 +38,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			// 是否开启菜单背景颜色渐变
 			isMenuBarColorGradual: false,
 			// 默认分栏菜单背景颜色
-			columnsMenuBar: '#545c64',
+			columnsMenuBar: '#ffffff',
 			// 默认分栏菜单字体颜色
-			columnsMenuBarColor: '#e6e6e6',
+			columnsMenuBarColor: '#000000',
 			// 是否开启分栏菜单背景颜色渐变
 			isColumnsMenuBarColorGradual: false,
 

+ 17 - 5
src/theme/app.scss

@@ -14,15 +14,26 @@
 	--next-color-primary-lighter: #ecf5ff;
 	--next-color-dark-hover: #0000001a;
 	--next-color-menu-hover: rgba(0, 0, 0, 0.1);
-	--next-color-menu-hover-blue: #e8f0fd;
-	--next-color-menu-text-blue: #1967D2;
+	--next-color-menu-hover-blue: none;
+	--next-color-menu-text-blue: #1967d2;
 	--next-color-user-hover: rgba(0, 0, 0, 0.04);
 	--next-color-seting-main: #e9eef3;
 	--next-color-seting-aside: #d3dce6;
 	--next-color-seting-header: #b3c0d1;
 	--next-bg-menuBar-light: #ffffff;
 	--next-bg-menuBar-black: #333333;
-	
+	--next-menu-level1-bg: linear-gradient(90deg, rgba(89, 165, 245, 0.3) 0%, #fff 100%);
+	--next-menu-level2-bg: #fafbfd;
+}
+
+.el-table {
+	--el-table-header-bg-color: #f3f5f9;
+	--el-table-text-color: #333;
+	font-weight: 500 !important;
+	thead th {
+		border-bottom: none !important;
+		padding: 12px 0 !important;
+	}
 }
 
 html,
@@ -50,7 +61,7 @@ body,
 	.layout-aside {
 		// background: var(--next-bg-menuBar);
 		background: var(--next-bg-menuBar-light);
-		
+
 		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
 		height: inherit;
 		position: relative;
@@ -283,7 +294,8 @@ body,
 	}
 }
 
-.link-type, .link-type:focus {
+.link-type,
+.link-type:focus {
 	color: #337ab7;
 	cursor: pointer;
 	text-decoration: none;

+ 94 - 111
src/theme/dark.scss

@@ -2,62 +2,63 @@
 ------------------------------- */
 [data-theme='dark'] {
 	// 变量(自定义时,只需修改这里的值)
-	--next-bg-main               : #1f1f1f;
-	--next-color-white           : #ffffff;
-	--next-color-disabled        : #191919;
-	--next-color-bar             : #dadada;
-	--next-color-primary         : #303030;
-	--next-border-color          : #424242;
-	--next-border-black          : #333333;
-	--next-border-columns        : #2a2a2a;
-	--next-color-seting          : #110d0d;
-	--next-text-color-regular    : #9b9da1;
+	--next-bg-main: #1f1f1f;
+	--next-color-white: #ffffff;
+	--next-color-disabled: #191919;
+	--next-color-bar: #dadada;
+	--next-color-primary: #303030;
+	--next-border-color: #424242;
+	--next-border-black: #333333;
+	--next-border-columns: #2a2a2a;
+	--next-color-seting: #110d0d;
+	--next-text-color-regular: #9b9da1;
 	--next-text-color-placeholder: #7a7a7a;
-	--next-color-hover           : #3c3c3c;
-	--next-color-hover-rgba      : #3C3C3C;
-
+	--next-color-hover: #3c3c3c;
+	--next-color-hover-rgba: #3c3c3c;
+	--next-menu-level1-bg: none;
+	--next-menu-level2-bg: #1f1e1e;
 
 	// root
-	--next-bg-main-color         : var(--next-bg-main) !important;
-	--next-bg-topBar             : var(--next-color-disabled) !important;
-	--next-bg-topBarColor        : var(--next-color-bar) !important;
-	--next-bg-menuBar            : var(--next-color-disabled) !important;
-	--next-bg-menuBarColor       : var(--next-color-bar) !important;
-	--next-bg-columnsMenuBar     : var(--next-color-disabled) !important;
+	--next-bg-main-color: var(--next-bg-main) !important;
+	--next-bg-topBar: var(--next-color-disabled) !important;
+	--next-bg-topBarColor: var(--next-color-bar) !important;
+	--next-bg-menuBar: var(--next-color-disabled) !important;
+	--next-bg-menuBarColor: var(--next-color-bar) !important;
+	--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
 	--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
-	--next-border-color-light    : var(--next-border-black) !important;
-	--next-color-primary-lighter : var(--next-color-primary) !important;
-	--next-bg-color              : var(--next-color-primary) !important;
-	--next-color-dark-hover      : var(--next-color-hover) !important;
-	--next-color-menu-hover      : var(--next-color-hover-rgba) !important;
-	--next-color-menu-hover-blue : var(--next-color-hover-rgba) !important;
-	--next-color-menu-text-blue: #1967D2;
+	--next-border-color-light: var(--next-border-black) !important;
+	--next-color-primary-lighter: var(--next-color-primary) !important;
+	--next-bg-color: var(--next-color-primary) !important;
+	--next-color-dark-hover: var(--next-color-hover) !important;
+	--next-color-menu-hover: var(--next-color-hover-rgba) !important;
+	--next-color-menu-hover-blue: none !important;
+	--next-color-menu-text-blue: #1967d2;
 	// --next-color-menu-text-blue  : var(--next-color-hover-rgba) !important;
-	--next-color-user-hover      : var(--next-color-hover-rgba) !important;
-	--next-color-seting-main     : var(--next-color-seting) !important;
-	--next-color-seting-aside    : var(--next-color-hover) !important;
-	--next-color-seting-header   : var(--next-color-primary) !important;
-	--next-bg-menuBar-black      : var(--next-color-white) !important;
-	--next-bg-menuBar-light      : var(--next-bg-main) !important;
+	--next-color-user-hover: var(--next-color-hover-rgba) !important;
+	--next-color-seting-main: var(--next-color-seting) !important;
+	--next-color-seting-aside: var(--next-color-hover) !important;
+	--next-color-seting-header: var(--next-color-primary) !important;
+	--next-bg-menuBar-black: var(--next-color-white) !important;
+	--next-bg-menuBar-light: var(--next-bg-main) !important;
 
 	// element plus
-	--el-color-white             : var(--next-color-disabled) !important;
-	--el-text-color-primary      : var(--next-color-bar) !important;
-	--el-border-color-base       : var(--next-border-black) !important;
-	--el-border-color-light      : var(--next-border-black) !important;
-	--el-text-color-regular      : var(--next-text-color-regular) !important;
-	--el-bg-color                : var(--next-color-hover-rgba) !important;
-	--el-color-success-lighter   : var(--next-color-primary) !important;
-	--el-color-warning-lighter   : var(--next-color-primary) !important;
-	--el-color-danger-lighter    : var(--next-color-primary) !important;
-	--el-color-primary-lighter   : var(--next-color-primary) !important;
-	--el-color-primary-light-9   : var(--next-color-hover) !important;
+	--el-color-white: var(--next-color-disabled) !important;
+	--el-text-color-primary: var(--next-color-bar) !important;
+	--el-border-color-base: var(--next-border-black) !important;
+	--el-border-color-light: var(--next-border-black) !important;
+	--el-text-color-regular: var(--next-text-color-regular) !important;
+	--el-bg-color: var(--next-color-hover-rgba) !important;
+	--el-color-success-lighter: var(--next-color-primary) !important;
+	--el-color-warning-lighter: var(--next-color-primary) !important;
+	--el-color-danger-lighter: var(--next-color-primary) !important;
+	--el-color-primary-lighter: var(--next-color-primary) !important;
+	--el-color-primary-light-9: var(--next-color-hover) !important;
 	--el-text-color-disabled-base: var(--el-color-primary) !important;
-	--el-text-color-disabled     : var(--next-text-color-placeholder) !important;
-	--el-border-color-lighter    : var(--next-border-black) !important;
-	--el-text-color-placeholder  : var(--next-text-color-placeholder) !important;
-	--el-disabled-bg-color       : var(--next-color-disabled) !important;
-	--el-fill-base               : var(--next-color-white) !important;
+	--el-text-color-disabled: var(--next-text-color-placeholder) !important;
+	--el-border-color-lighter: var(--next-border-black) !important;
+	--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
+	--el-disabled-bg-color: var(--next-color-disabled) !important;
+	--el-fill-base: var(--next-color-white) !important;
 
 	// button
 	.el-button {
@@ -75,8 +76,8 @@
 	.el-button--danger,
 	.el-button--success,
 	.el-button--warning {
-		--el-button-text-color         : var(--next-color-white) !important;
-		--el-button-hover-text-color   : var(--next-color-white) !important;
+		--el-button-text-color: var(--next-color-white) !important;
+		--el-button-hover-text-color: var(--next-color-white) !important;
 		--el-button-disabled-text-color: var(--next-color-white) !important;
 
 		&:hover {
@@ -106,11 +107,11 @@
 	// tabs
 	.el-tabs--border-card {
 		background-color: var(--el-color-white) !important;
-		border-color    : var(--next-border-color-light) !important;
+		border-color: var(--next-border-color-light) !important;
 	}
 
-	.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
-		background  : var(--next-color-primary-lighter);
+	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+		background: var(--next-color-primary-lighter);
 		border-color: var(--next-border-color-light) !important;
 	}
 
@@ -127,12 +128,12 @@
 		background: var(--next-color-primary-lighter) !important;
 	}
 
-	// 
+	//
 	.el-drawer.rtl.open {
 		background: var(--el-color-white) !important;
 	}
 
-	// 
+	//
 	.box-content {
 		border-color: var(--next-border-color-light) !important;
 	}
@@ -146,7 +147,7 @@
 	}
 
 	// 组态管理-组态设计
-	.page-wrapper>iframe {
+	.page-wrapper > iframe {
 		background: var(--next-color-primary-lighter) !important;
 	}
 
@@ -155,18 +156,18 @@
 		border: 1px solid var(--next-border-color-light) !important;
 	}
 	.flow-line-wrap {
-		background-color: transparent!important;
+		background-color: transparent !important;
 		border: 1px solid var(--next-border-color-light) !important;
-		
+
 		.text {
-		 color: var(--next-bg-menuBar-black) !important;
+			color: var(--next-bg-menuBar-black) !important;
 		}
 	}
 
 	.el-card {
 		background-color: var(--el-color-white) !important;
-		color           : var(--el-text-color-primary) !important;
-		border          : 1px solid var(--next-border-color-light) !important;
+		color: var(--el-text-color-primary) !important;
+		border: 1px solid var(--next-border-color-light) !important;
 	}
 
 	.el-button.is-text:not(.is-disabled):focus,
@@ -219,7 +220,7 @@
 
 	.el-button--large {
 		background-color: var(--el-color-white) !important;
-		border          : 1px solid var(--next-border-color-light) !important;
+		border: 1px solid var(--next-border-color-light) !important;
 	}
 
 	.el-input-number__decrease,
@@ -233,17 +234,16 @@
 
 	.el-input__wrapper {
 		background-color: var(--el-color-white) !important;
-		color           : var(--el-text-color-primary) !important;
+		color: var(--el-text-color-primary) !important;
 	}
 
 	.el-input {
 		--el-input-border-color: var(--next-border-color-light) !important;
 		--el-input-hover-border: var(--el-text-color-disabled) !important;
-
 	}
 
 	.el-date-editor {
-		--el-input-border-color      : var(--next-border-color-light) !important;
+		--el-input-border-color: var(--next-border-color-light) !important;
 		--el-input-hover-border-color: var(--el-text-color-disabled) !important;
 	}
 
@@ -256,9 +256,8 @@
 	}
 
 	.el-tree {
-		background-color             : var(--el-color-white) !important;
+		background-color: var(--el-color-white) !important;
 		--el-tree-node-hover-bg-color: var(--el-color-white) !important;
-
 	}
 
 	.el-tree-node__content .el-select-dropdown__item.hover {
@@ -269,34 +268,11 @@
 		background-color: var(--el-color-white) !important;
 	}
 
-	.el-table th.el-table__cell,
-	.el-table tr {
-		background-color: var(--el-color-white) !important;
-		color           : var(--el-text-color-primary) !important;
-
-		.cell {
-			color: var(--el-text-color-primary) !important;
-		}
-	}
-
-	.el-scrollbar__view .el-table__body tr:hover>td.el-table__cell,
-	.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
-		background-color: var(--el-bg-color) !important;
-	}
 
 	.el-table__body-wrapper tr td.el-table-fixed-column--left,
-	.el-table__body-wrapper tr td.el-table-fixed-column--right,
-	.el-table__body-wrapper tr th.el-table-fixed-column--left,
-	.el-table__body-wrapper tr th.el-table-fixed-column--right,
-	.el-table__footer-wrapper tr td.el-table-fixed-column--left,
-	.el-table__footer-wrapper tr td.el-table-fixed-column--right,
-	.el-table__footer-wrapper tr th.el-table-fixed-column--left,
-	.el-table__footer-wrapper tr th.el-table-fixed-column--right,
-	.el-table__header-wrapper tr td.el-table-fixed-column--left,
-	.el-table__header-wrapper tr td.el-table-fixed-column--right,
-	.el-table__header-wrapper tr th.el-table-fixed-column--left,
-	.el-table__header-wrapper tr th.el-table-fixed-column--right {
-		background-color: var(--el-color-white) !important;
+	.el-table__body-wrapper tr td.el-table-fixed-column--right{
+		background-color: none !important;
+		background: none !important;
 	}
 
 	.add-flag-container {
@@ -307,6 +283,16 @@
 		background-color: var(--el-color-white) !important;
 	}
 
+	.el-table {
+		--el-table-header-bg-color: rgba(243, 245, 249, 0.13) !important;
+		--el-table-text-color: #fff !important;
+		font-weight: 500 !important;
+		thead th {
+			border-bottom: none !important;
+			padding: 12px 0 !important;
+		}
+	}
+
 	.help-wrap .help-item .help-item-label {
 		background-color: var(--next-border-color-light) !important;
 	}
@@ -317,16 +303,15 @@
 
 	.el-alert,
 	.notice-bar {
-		border          : 1px solid var(--next-border-color) !important;
+		border: 1px solid var(--next-border-color) !important;
 		background-color: var(--next-color-disabled) !important;
 	}
 
 	.system-dic-container {
-
 		.content,
 		.content-box {
 			background-color: var(--next-color-disabled) !important;
-			color           : var(--el-text-color-primary) !important;
+			color: var(--el-text-color-primary) !important;
 		}
 
 		.ant-descriptions-row {
@@ -340,8 +325,8 @@
 		.ant-descriptions-item-label,
 		.ant-descriptions-item-content {
 			background-color: var(--next-color-disabled) !important;
-			color           : var(--el-text-color-primary) !important;
-			border-color    : var(--next-border-color-light) !important;
+			color: var(--el-text-color-primary) !important;
+			border-color: var(--next-border-color-light) !important;
 		}
 	}
 
@@ -350,13 +335,12 @@
 		background-color: var(--el-bg-color) !important;
 	}
 
-	.el-tabs--border-card>.el-tabs__header {
+	.el-tabs--border-card > .el-tabs__header {
 		background-color: var(--next-color-disabled) !important;
 	}
 
 	.el-upload--picture-card {
 		background-color: var(--next-color-disabled) !important;
-
 	}
 
 	.wu-box {
@@ -384,11 +368,11 @@
 	// popper / dropdown
 	.el-popper {
 		border: 1px solid var(--next-border-color) !important;
-		color : var(--el-text-color-primary) !important;
+		color: var(--el-text-color-primary) !important;
 
 		.el-popper__arrow:before {
 			background: var(--el-color-white) !important;
-			border    : 1px solid var(--next-border-color);
+			border: 1px solid var(--next-border-color);
 		}
 
 		a {
@@ -412,10 +396,10 @@
 	// input
 	.el-input-group__append,
 	.el-input-group__prepend {
-		border      : var(--el-input-border) !important;
+		border: var(--el-input-border) !important;
 		border-right: none !important;
-		background  : var(--next-color-disabled) !important;
-		border-left : 0 !important;
+		background: var(--next-color-disabled) !important;
+		border-left: 0 !important;
 	}
 
 	.el-input-number__decrease,
@@ -441,7 +425,7 @@
 
 	// radio
 	.el-radio-button:not(.is-active) .el-radio-button__inner {
-		border     : 1px solid var(--next-border-color-light) !important;
+		border: 1px solid var(--next-border-color-light) !important;
 		border-left: 0 !important;
 	}
 
@@ -458,7 +442,7 @@
 	.editor-container {
 		.w-e-toolbar {
 			background: var(--el-color-white) !important;
-			border    : 1px solid var(--next-border-color-light) !important;
+			border: 1px solid var(--next-border-color-light) !important;
 
 			.w-e-menu:hover {
 				background: var(--next-color-user-hover) !important;
@@ -470,7 +454,7 @@
 		}
 
 		.w-e-text-container {
-			border    : 1px solid var(--next-border-color-light) !important;
+			border: 1px solid var(--next-border-color-light) !important;
 			border-top: none !important;
 
 			.w-e-text {
@@ -512,7 +496,6 @@
 
 	.monitor-weather .left .city-weather-data-overview-wrap section {
 		color: #fff !important;
-
 	}
 
 	.monitor-weather .left .city-weather-data-overview-wrap,
@@ -520,7 +503,7 @@
 		border-color: var(--next-border-color-light) !important;
 	}
 
-	.monitor-weather .left .city-weather-data-overview-wrap section:nth-child(2n+1) {
+	.monitor-weather .left .city-weather-data-overview-wrap section:nth-child(2n + 1) {
 		background-color: var(--el-color-white) !important;
 	}
 
@@ -531,4 +514,4 @@
 	.monitor-weather .left .city-weather-data-overview-wrap section.active {
 		background-color: #1d3f4b !important;
 	}
-}
+}

+ 7 - 0
src/views/login/component/account.vue

@@ -46,6 +46,7 @@
 		</el-form-item>
 		<!-- <el-form-item class="login-animation4">
 			<img src="/@/assets/gitee.svg" alt="" class="gitee" @click="authLogin('gitee')">
+			<img src="/@/assets/gitee.svg" alt="" class="gitee" @click="authLogin('qq')">
 		</el-form-item> -->
 		<changePwd ref="changePwdRef"></changePwd>
 	</el-form>
@@ -122,6 +123,12 @@ export default defineComponent({
 				window.open(`https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code`)
 				return
 			}
+			if (type === 'qq') {
+				const client_id = 'a0585ded445f240f2adc7957989bdd644fa2cdf0db7d98b0a940ec92df6a0934'
+				const redirect_uri = 'http://localhost:8888/#/sso/gitee'
+				window.open(`https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}&response_type=code`)
+				return
+			}
 		}
 
 		// 登录