tijiao

src/assets/css/main.css

@@ -1,3 +1,9 @@
+:root {
+	--primary-comment-deep: #00BFFF;    /* 深天蓝：用于边框、标题、重要按钮 */
+	--primary-comment-main: #87CEEB;    /* 天蓝色：主色调，用于普通高亮 */
+	--primary-comment-light: #B0E2FF;   /* 浅天蓝：用于鼠标悬停 (hover) 效果 */
+	--primary-comment-bg: #F0F8FF;      /* 爱丽丝蓝：最浅底色，用于批注框背景 */
+  }
 * {
 	margin: 0;
 	padding: 0;
@@ -24,9 +30,179 @@ a {
 	text-decoration: none
 }
 
+.w-auto {
+	width: auto !important;
+}
+
+.w-full {
+	width: 100% !important;
+}
+
+
+
+/* 动态宽度类 */
+.dynamic-width {
+
+	width: calc(100% - var(--minus-w, 300px)) !important;
+}
+
+
+.base-flex {
+    display: flex !important;
+    
+    /* 垂直对齐：如果不传 --ai，则不设置（或保持默认） */
+    align-items: var(--fl-ai, initial) !important;
+    
+    /* 水平对齐：如果不传 --jc，则不设置 */
+    justify-content: var(--fl-jc, initial) !important;
+    
+    /* 换行：如果不传 --wrap，则不设置 */
+    flex-wrap: var(--fl-wrap, initial) !important;
+    
+    /* 方向：如果不传 --direction，则不设置 */
+    flex-direction: var(--fl-direction, initial) !important;
+    
+    /* 间隙：这是 Flex 布局中非常好用的属性，建议加上 */
+    gap: var(--gap, initial) !important;
+}
+
+/* 2. 快捷全居中类（最常用，默认就是全居中） */
+.base-flex-center {
+    display: flex ;
+    align-items: var(--fl-ai, center);
+    justify-content: var(--fl-jc, center);
+}
+
+
+
+
+.base-pos {
+    /* 定位类型：默认 absolute，可选 relative, fixed, sticky */
+    position: var(--pos, absolute);
+
+    /* 默认 initial：只有在 style 里传了参，对应的方位才会生效 */
+    top:    var(--p-t, initial);
+    right:  var(--p-r, initial);
+    bottom: var(--p-b, initial);
+    left:   var(--p-l, initial);
+
+    
+}
+.abs-left {
+
+	left: var(--left-dist, 10px);
+}
+
+.base-font-size {
+	font-size: var(--f-s, 14px) !important;
+	color: var(--f-c, #333) !important;
+}
+
+/* common.css */
+.b-box {
+	box-sizing: border-box !important;
+}
+
+.base-border {
+
+	--b-w: 1px;
+	--b-s: solid;
+	--b-c: #d8d8d8;
+
+
+	border-top: var(--bt, 0) var(--b-s) var(--b-c);
+	border-right: var(--br, 0) var(--b-s) var(--b-c);
+	border-bottom: var(--bb, 0) var(--b-s) var(--b-c);
+	border-left: var(--bl, 0) var(--b-s) var(--b-c);
+}
+
+
+.base-border-all {
+	--b-w: 1px;
+	/* 宽度 */
+	--b-s: solid;
+	/* 样式 */
+	--b-c: #d8d8d8;
+	/* 颜色 */
+
+
+	border: var(--b-w) var(--b-s) var(--b-c);
+}
+
+/* common.css */
+.base-padding {
+	/* 定义默认值（如果没传参，默认是 0） */
+	--p-t: 0px;
+	--p-r: 0px;
+	--p-b: 0px;
+	--p-l: 0px;
+
+	padding-top: var(--p-t);
+	padding-right: var(--p-r);
+	padding-bottom: var(--p-b);
+	padding-left: var(--p-l);
+}
+
+
+.base-padding-all {
+	padding: var(--p);
+	/* 默认四周 10px，也可以通过 --p 传参 */
+}
+
+.base-bg {
+	background-color: var(--bg, #fff);
+}
+
+/* 专门用于“必须生效”场景的类 */
+.base-bg-imp {
+	background-color: var(--bg, #fff) !important;
+}
+
+.base-margin {
+
+	--m-t: 0px;
+	--m-r: 0px;
+	--m-b: 0px;
+	--m-l: 0px;
+
+	margin-top: var(--m-t);
+	margin-right: var(--m-r);
+	margin-bottom: var(--m-b);
+	margin-left: var(--m-l);
+}
+
+
+.base-margin-all {
+	margin: var(--m);
+}
+
+.float-var {
+	float: var(--f, none) var(--f-imp, );
+}
+
+
+
+.clearfix::after {
+	content: "";
+	display: block;
+	clear: both;
+}
+
+
+
+
+
+
+
+
+
+
+
+
 .page-container {
 	min-width: 1200px;
 }
+
 .content-box {
 	position: absolute;
 	left: 260px;
@@ -1330,12 +1506,7 @@ a {
 	mos-line-height: 20px !important;
 }
 
-.word-container table tr:first-child td {
-	/* border-top: 1pt solid #000 !important;
-	mso-border-top-alt: 0.5pt solid #000 !important;
-	border-bottom: 1pt solid #000 !important;
-	mso-border-bottom-alt: 0.5pt solid #000 !important; */
-}
+.word-container table tr:first-child td {}
 
 .word-container table tr:last-of-type {
 	border-bottom: 1pt solid #000 !important;
@@ -1408,18 +1579,13 @@ a {
 	color: #fff !important;
 	/* 设置字体颜色 */
 	fill: #fff !important;
-	/* font-size:16px!important; */
-	/* 设置字体颜色 */
+
 }
 
 .tinymce-custom-button-addrow {
 	font-weight: bold !important;
 	background-color: #cbccd1 !important;
-	/* color: #fff !important; */
-	/* 设置字体颜色 */
-	/* fill: #fff !important; */
-	/* font-size:16px!important; */
-	/* 设置字体颜色 */
+
 }
 
 .tinymce-custom-button-save svg {
@@ -1452,11 +1618,13 @@ wmath {
 	z-index: 99999 !important;
 	position: fixed !important;
 }
+
 .sticky-header {
 	position: sticky;
 	top: 0;
-	z-index: 1000; /* 保证在上层 */
-	background-color: transparent; 
+	z-index: 1000;
+	/* 保证在上层 */
+	background-color: transparent;
 	/* padding: 10px; */
 	box-shadow: 0 2px 2px rgba(221, 221, 221, 0.2);
-  }
+}