Browse Source

修改样式

yangg 1 month ago
parent
commit
b900820322

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

@@ -48,7 +48,7 @@ const siteLogo = computed(() => {
 <style scoped lang="scss">
 .layout-logo {
 	width: 220px;
-	height: 50px;
+	height: 84px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -70,7 +70,7 @@ const siteLogo = computed(() => {
 	}
 
 	&-medium-img {
-		width: 70px;
+		width: 110px;
 		margin-right: 5px;
 	}
 }

+ 3 - 0
src/theme/element.scss

@@ -16,6 +16,9 @@
 	font-size: 12px !important;
 	margin-right: 5px;
 }
+.el-tag{
+	font-size: 10px !important;
+}
 
 /* Input 输入框、InputNumber 计数器
 ------------------------------- */

+ 18 - 3
src/views/position/list/crud.tsx

@@ -299,18 +299,33 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 							render: ({ row }: { row: any }) => {
 								if (!row.competency_tags || row.competency_tags.length === 0) return <span>-</span>;
 								
+								const displayTags = row.competency_tags.slice(0, 2); // 只取前两个标签
+								const remainingCount = row.competency_tags.length - 2; // 计算剩余标签数量
+								
 								return (
-									<div style="display: flex; flex-wrap: wrap; gap: 4px;">
-										{row.competency_tags.map((tag: any) => (
+									<div style="display: flex; gap: 4px; align-items: center;">
+										{displayTags.map((tag: any) => (
 											<el-tag
 												key={tag.id}
 												type="warning"
 												effect="plain"
 												size="mini"
+												style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+												title={tag.name}
 											>
-												{tag.name}
+												{tag.name.length > 4 ? tag.name.slice(0, 4) + '...' : tag.name}
 											</el-tag>
 										))}
+										{remainingCount > 0 && (
+											<el-tag
+												type="info"
+												effect="plain"
+												size="mini"
+												title={`还有${remainingCount}个标签`}
+											>
+												+{remainingCount}
+											</el-tag>
+										)}
 									</div>
 								);
 							}

+ 43 - 11
src/views/questionBank/list/crud.tsx

@@ -426,24 +426,39 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					},
 					type: 'dict-select',
 					column: {
-						minWidth: 150,
+						minWidth: 230,
 						component: {
 							name: 'fs-component',
 							render: ({ row }: { row: any }) => {
 								if (!row.competency_tags || row.competency_tags.length === 0) return <span>-</span>;
 								
+								const displayTags = row.competency_tags.slice(0, 2); // 只取前两个标签
+								const remainingCount = row.competency_tags.length - 2; // 计算剩余标签数量
+								
 								return (
-									<div style="display: flex; flex-wrap: wrap; gap: 4px;">
-										{row.competency_tags.map((tag: any) => (
+									<div style="display: flex; gap: 4px; align-items: center;">
+										{displayTags.map((tag: any) => (
 											<el-tag
 												key={tag.id}
 												type="warning"
 												effect="plain"
 												size="mini"
+												style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+												title={tag.name}
 											>
-												{tag.name}
+												{tag.name.length > 4 ? tag.name.slice(0, 4) + '...' : tag.name}
 											</el-tag>
 										))}
+										{remainingCount > 0 && (
+											<el-tag
+												type="info"
+												effect="plain"
+												size="mini"
+												title={`还有${remainingCount}个标签`}
+											>
+												+{remainingCount}
+											</el-tag>
+										)}
 									</div>
 								);
 							}
@@ -707,7 +722,8 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					},
 					type: 'dict-select',
 					column: {
-						minWidth: 100,
+						
+						minWidth: 120,
 					},
 					dict: dict({
 						// 使用API方式获取数据
@@ -761,6 +777,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					type: 'dict-select',
 					column: {
 						minWidth: 120,
+						 maxTagCount: 1
 					},
 					dict: dict({
 						getData: async () => {
@@ -807,8 +824,9 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 												type="warning"
 												effect="plain"
 												size="mini"
+												style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
 											>
-												{row.category.name}
+												{row.category.name.length > 4 ? row.category.name.slice(0, 4) + '...' : row.category.name}
 											</el-tag>
 								);
 							}
@@ -851,25 +869,39 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					},
 					type: 'dict-select',
 					column: {
-						minWidth: 150,
+						minWidth: 220,
 						component: {
-							// 自定义渲染组件,显示彩色标签
 							name: 'fs-component',
 							render: ({ row }: { row: any }) => {
 								if (!row.tags || row.tags.length === 0) return <span>-</span>;
 								
+								const displayTags = row.tags.slice(0, 2); // 只取前两个标签
+								const remainingCount = row.tags.length - 2; // 计算剩余标签数量
+								
 								return (
-									<div style="display: flex; flex-wrap: wrap; gap: 4px;">
-										{row.tags.map((tag: any) => (
+									<div style="display: flex; gap: 4px; align-items: center;">
+										{displayTags.map((tag: any) => (
 											<el-tag
 												key={tag.id}
 												type="warning"
 												effect="plain"
 												size="mini"
+												style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+												title={tag.name}
 											>
-												{tag.name}
+												{tag.name.length > 4 ? tag.name.slice(0, 4) + '...' : tag.name}
 											</el-tag>
 										))}
+										{remainingCount > 0 && (
+											<el-tag
+												type="info"
+												effect="plain"
+												size="mini"
+												title={`还有${remainingCount}个标签`}
+											>
+												+{remainingCount}
+											</el-tag>
+										)}
 									</div>
 								);
 							}