ai.touchui-vue 1.30.2 → 1.30.4

package/packages/theme/src/less/component/table.less

@@ -1,425 +1,425 @@
-// 表格
-.to-table {
-	position:relative; overflow:hidden; background:@bg; z-index:0; box-sizing:border-box;
-	> .config { position:absolute; top:0.5*@gap; right:0.5*@gap; z-index:2;}
-	.body {
-		table { width:100%;}
-	}
-	table {
-		border-collapse:collapse; .x_bs;
-		tr td,
-		tr th { height:1+2*@gap; line-height:1+0.5*@gap; border-left:1px solid @fg-light-8-5; border-right:1px solid @fg-light-8-5; padding:0.6*@gap @gap; color:@fg-light-1; font-weight:normal; white-space:nowrap; text-align:left; .x_bs; position:relative; transition:width 0.1s ease-out,height 0.1s ease-out;}
-		tr th:after,
-		tr td:after { content:""; position:absolute; height:1px; background:@fg-light-8-5; width:100%; left:0; bottom:0;}
-		tr td {
-			.folder { margin-top:-0.4em; top:0.2em; margin-left:-0.5em; position:relative;}
-			.to-tag { margin-top:-0.4em; top:0.2em;}
-		}
-		th:first-child,
-		td:first-child { border-left:0 none;}
-		th:last-child,
-		td:last-child { border-right:0 none;}
-		tr th { background:@bg-dark-0-4;}
-		tr td .to-ellipsis,
-		tr th .to-ellipsis { vertical-align:top;}
-		tr th.sort {
-			cursor:default; position:relative;
-			> [class*="to-icon"] {
-				float:right; transform:scale(0.8); color:@fg-light-5;
-			}
-		}
-		tr th.configTh { width:0; padding:0 0.5*@gap; text-align:center;}
-		tr td.action {
-			width:0; padding:0 0.5*@gap;
-			> div > [class*="to-icon"],
-			> [class*="to-icon"] { margin-top:-0.5*@gap; top:0.25*@gap; position:relative;}
-		}
-		tr:nth-last-of-type(1) td:after {
-			display:none;
-		}
-		tbody tr { height:1+2*@gap;}
-		td.fn,
-		th.fn { width:1+2*@gap; text-align:center; padding:0;}
-		td.edit {
-			padding:0;
-			.to-rate { padding:0 @gap;}
-			.to-switch { margin:0 @gap;}
-		}
-		td.fn { cursor:pointer; color:@primary;}
-		tr {
-			th.checkbox,
-			td.checkbox { width:0; padding:0; text-align:center;}
-			th.index,
-			td.index { width:0; text-align:center;}
-		}
-	}
-}
-
-
-.to-table {
-	table {
-		tr td,
-		tr th { position:static; border-bottom:1px solid @fg-light-8-5;}
-		tr th:after,
-		tr td:after { display:none;}
-		tr:nth-last-of-type(1) td {
-			border-bottom:0 none;
-		}
-		tr td .to-checkbox { margin-top:-1px; top:1px;}
-	}
-}
-
-
-// line-position
-.to-table-line-position-h {
-	table {
-		tr td,
-		tr th { border-left:0 none; border-right:0 none;}
-	}
-}
-.to-table-line-position-v {
-	table {
-		tr td,
-		tr th { border-bottom:0 none;}
-	}
-}
-.to-table-line-position-none {
-	table {
-		tr td,
-		tr th { border:0 none;}
-	}
-}
-
-
-
-// notfull
-.to-table-notfull {
-	table {
-		position:relative;
-		&:after {
-			content:''; position:absolute; bottom:0; left:0; right:0; width:100%; height:1px; background:@fg-light-8-5;
-		}
-	}
-}
-
-
-
-
-// 树插件
-.to-table {
-	td.level {
-		white-space:nowrap; padding:0 @gap 0 0.5*@gap+0.75em;
-		&:before { content:""; width:1px; height:1+2*@gap; background:@bg-dark-2; display:inline-block; vertical-align:middle; margin-right:-0.25em;}
-		.ico { display:inline-block; margin-right:0.25em;}
-		.ico:before { content:""; display:inline-block; height:1px; width:1em; background:@bg-dark-2; vertical-align:middle; margin-right:-1.65em;}
-		.ico:after { cursor:default; vertical-align:middle; width:1em; height:1em; line-height:1em; padding:0.25em; display:inline-block; color:@primary; border:1px solid @primary; font-family:"icon"; content:"\e003"; text-align:center; z-index:12; position:relative; border-radius:0.25em; background:@bg; font-size:75%;}
-		.ico-unfold:after { font-family:"icon"; content:"\e069";}
-		.checkbox { display:inline-block; vertical-align:top; padding-top:@gap; overflow:hidden;}
-		.checkbox input { vertical-align:top;}
-		.text { display:inline-block; vertical-align:middle;}
-	}
-	td.level-2 {
-		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5;
-		// padding-left:@gap+1.85;
-	}
-	td.level-3 {
-		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5+(1.5*0.75)+0.5;
-	}
-	td.level-4 {
-		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5+(1.5*0.75)+0.5+(1.5*0.75)+0.5;
-	}
-	td.level-leaf {
-		.ico { content:"\e60d";}
-	}
-}
-
-
-
-// 排序/过滤
-.to-table {
-	thead tr th.asc,
-	thead tr th.desc { cursor:default; user-select:none;}
-	thead tr th.filter:after,
-	thead tr th.desc:after,
-	thead tr th.asc:after { font-size:85.71%; display:inline-block; color:@fg; margin-left:0.5*@gap; font-family:"icon"; color:@fg-light-7;}
-	thead tr th.asc:after { content:"\e007";}
-	thead tr th.desc:after { content:"\e024";}
-	thead tr th.filter:after { content:"\e081";}
-}
-
-
-
-// 自动换行
-.to-table {
-	tr td.wrap,
-	tr th.wrap { white-space:normal; word-wrap:break-word; line-height:1+0.57*@gap;}
-	tr th.wrap { line-height:auto;}
-}
-.to-table-wrap {
-	table {
-		tr td,
-		tr th { white-space:normal; word-wrap:break-word; line-height:1+0.57*@gap;}
-		tr th { line-height:auto;}
-	}
-}
-
-
-
-// 行色彩
-.to-table-even {
-	table tbody tr:nth-child(2n):not(.on) { background:@bg-dark-0-2;}
-}
-.to-table {
-	tbody tr.deleted { opacity:0.5; background:@bg-dark-2;}
-	tbody tr.deleted-noselect { background:@bg-dark-2 !important;}
-	tbody tr.strong { background:@warning-op-3;}
-	tbody tr.new td { color:@primary;}
-	tbody tr.on { background:@primary-op-1;}
-}
-
-
-
-// 参数插件
-.to-table {
-	.to-param-v {
-		margin-left:0; background:none; width:100%;
-		.label { text-align:center;}
-		.value { text-align:center; font-size:100%;}
-		ul { display:table; width:100%;
-			li {
-				float:none; display:table-cell;
-			}
-		}
-	}
-}
-
-
-
-// 固定部分插件
-.to-table {
-	.body {
-		position:relative; overflow:auto; height:100%; z-index:0;
-	}
-	.top {
-		position:absolute; top:0; left:0; width:10000em; z-index:1; overflow:hidden;
-		table { width:auto; position:relative;}
-	}
-	.leftTop,
-	.left {
-		position:absolute; top:0; left:0; overflow:hidden;
-		td.fn { width:auto;}
-		tr { background:@bg;}
-		&-checkbox table tbody tr td:first-child,
-		&-checkbox table thead tr th:first-child { width:auto;}
-	}
-	.left { box-shadow:0.1em 0 0.1em rgba(0,0,0,0.1);}
-	.rightTop,
-	.right {
-		position:absolute; top:0; right:0; overflow:hidden;
-		// table { table-layout:fixed;}
-		td.fn { width:auto;}
-		tr { background:@bg;}
-		&-checkbox table tbody tr td:first-child,
-		&-checkbox table thead tr th:first-child { width:auto;}
-	}
-	.left,
-	.right {
-		height:100%;
-		table { position:relative;}
-	}
-	.right table { table-layout:fixed;}
-	.right { box-shadow:-0.14em 0 0.14em rgba(0,0,0,0.1);}
-	.leftTop,
-	.rightTop { z-index:2;}
-	.left,
-	.right { z-index:1;}
-	.leftTop,
-	.left,
-	.rightTop,
-	.right {
-		td,
-		th { .x_bs;}
-	}
-}
-
-
-
-// 提示
-.to-table-nodata {
-	height:(1+2*@gap)*6;
-}
-.to-table {
-	> .to-msg {
-		top:1+2*@gap+0.1; pointer-events:none; display:none; visibility:inherit;
-		.wrapper { padding:0;}
-	}
-	> .to-msg-show {
-		display: block;
-	}
-}
-.to-table-head-2 {
-	height:(1+2*@gap)*7;
-	> .to-msg { top:(1+2*@gap)*2;}
-}
-.to-table-head-3 {
-	height:(1+2*@gap)*8;
-	> .to-msg { top:(1+2*@gap)*3;}
-}
-
-.to-table-head-4 {
-	height:(1+2*@gap)*9;
-	> .to-msg { top:(1+2*@gap)*4;}
-}
-
-.to-table-head-5 {
-	height:(1+2*@gap)*10;
-	> .to-msg { top:(1+2*@gap)*5;}
-}
-.to-table-head-6 {
-	height:(1+2*@gap)*11;
-	> .to-msg { top:(1+2*@gap)*6;}
-}
-
-
-
-// 无背景
-.to-table-nobg {
-	background-color:transparent;
-	table {
-		thead tr th {  background-color:transparent;}
-	}
-}
-
-
-
-// 表头文字批量居中
-.to-table-th-center {
-	table {
-		tr th { text-align:center;}
-	}
-}
-
-
-
-// 边框
-.to-table-border {
-	border:1px solid @fg-light-8-5;
-}
-
-
-
-// 高度
-.to-table-height-1r { height:(1+2*@gap) * 2;}
-.to-table-height-2r { height:(1+2*@gap) * 3;}
-.to-table-height-3r { height:(1+2*@gap) * 4;}
-.to-table-height-4r { height:(1+2*@gap) * 5;}
-.to-table-height-5r { height:(1+2*@gap) * 6;}
-.to-table-height-6r { height:(1+2*@gap) * 7;}
-.to-table-height-7r { height:(1+2*@gap) * 8;}
-.to-table-height-8r { height:(1+2*@gap) * 9;}
-.to-table-height-9r { height:(1+2*@gap) * 10;}
-.to-table-height-10r { height:(1+2*@gap) * 11;}
-.to-table-height-11r { height:(1+2*@gap) * 12;}
-.to-table-height-12r { height:(1+2*@gap) * 13;}
-.to-table-height-13r { height:(1+2*@gap) * 14;}
-.to-table-height-14r { height:(1+2*@gap) * 15;}
-.to-table-height-15r { height:(1+2*@gap) * 16;}
-.to-table-height-16r { height:(1+2*@gap) * 17;}
-.to-table-height-17r { height:(1+2*@gap) * 18;}
-.to-table-height-18r { height:(1+2*@gap) * 19;}
-.to-table-height-19r { height:(1+2*@gap) * 20;}
-.to-table-height-20r { height:(1+2*@gap) * 21;}
-.to-table-height-full { height:100%; .x_bs;}
-
-//msg top值
-.to-table-msg-top-0r > .to-msg{ top:(1+2*@gap) * 0;}
-.to-table-msg-top-1r > .to-msg{ top:(1+2*@gap) * 1;}
-.to-table-msg-top-2r > .to-msg{ top:(1+2*@gap) * 2;}
-.to-table-msg-top-3r > .to-msg{ top:(1+2*@gap) * 3;}
-.to-table-msg-top-4r > .to-msg{ top:(1+2*@gap) * 4;}
-.to-table-msg-top-5r > .to-msg{ top:(1+2*@gap) * 5;}
-
-
-// 固定宽度// 固定宽度
-.to-table-fixed {
-	table { table-layout:fixed;}
-	td { .x_to;}
-}
-
-
-
-// 交互效果
-.s_pc {
-	.to-table {
-		table {
-			tr th.sort:hover { background:@bg-dark-1;}
-		}
-	}
-	.to-table-row-selectable table tbody tr.hover { background:@bg-dark-0-5; color:@fg-light-1;}
-	.to-table-row-selectable table tbody tr.on.hover { background:@primary-light-8; color:@bg;}
-}
-.s_pc, .s_pad, .s_phone {
-	.to-table {
-		table {
-			tr th.sort:active { background:@bg-dark-2;}
-		}
-	}
-	.to-table-row-selectable table tbody tr.active { background:@bg-dark-2;}
-	.to-table-row-selectable table tbody tr.on.active { background:@primary-light-5;}
-}
-
-
-
-// 自动适应手机
-.to-table-type-v {
-	padding:0 0.5*@gap; .x_bs; overflow:auto; background:none;
-	&:after { height:0.5*@gap; content:""; display:block;}
-	.top { display:none;}
-	.body {
-		margin:0 -0.5*@gap -0.5*@gap -0.5*@gap; .x_bs; display:block;
-		> .wrapper {
-			overflow:hidden;
-			> table {
-				margin:0 0.5*@gap 0.5*@gap 0.5*@gap;
-			}
-		}
-	}
-	table {
-		display:block; width:auto;
-		thead { display:none;}
-		tbody { display:block;}
-		tbody tr { height:auto; background:@bg; display:block; position:relative; padding:@gap 1.5*@gap;}
-		tbody tr:first-child { margin-top:0 !important;}
-		tr td { display:block; height:auto; border:none; white-space:normal; word-break:break-all; word-wrap:break-word; width:auto !important; padding-top:0.25*@gap; padding-bottom:0.25*@gap; padding-left:0; padding-right:0;}
-		tr td:empty { display:none;}
-		tr td:after { display:none;}
-	}
-	tr.on {
-		background:none;
-		//&:before { content:""; position:absolute; top:(1+2*@gap)*1.1667; pointer-events:none; left:0; bottom:0; right:0; border:1px solid @danger;}
-		.to-box-mode-plain.to-box-color-default{ background: transparent; }
-	}
-	tr td.action {
-		margin-top:0.5*@gap;
-	}
-	tr td.checkbox,
-	tr td.radio { position:absolute; right:0; top:0; font-size:116.67%;}
-	tr td.title {
-		.to-card .icon { font-size:200%;}
-	}
-	.to-table-action {
-		margin-top:@gap;
-		.to-button-mode-text:first-child { margin-left:-0.5*@gap;}
-	}
-}
-.to-table-detail-icon { font-size:200%;}
-.to-table-actionLayer {
-	.to-table-actionLayerWrapper { padding:0.5em;}
-	button { width:100%; height:1+2*@gap; line-height:1+2*@gap;}
-}
-.to-table-item-fillet-normal {
-	tr { border-radius:0.5*@gap;}
-}
-.to-table-item-fillet-pill {
-	tr { border-radius:1.5*@gap;}
-}
+// 表格
+.to-table {
+	position:relative; overflow:hidden; background:@bg; z-index:0; box-sizing:border-box;
+	> .config { position:absolute; top:0.5*@gap; right:0.5*@gap; z-index:2;}
+	.body {
+		table { width:100%;}
+	}
+	table {
+		border-collapse:collapse; .x_bs;
+		tr td,
+		tr th { height:1+2*@gap; line-height:1+0.5*@gap; border-left:1px solid @fg-light-8-5; border-right:1px solid @fg-light-8-5; padding:0.6*@gap @gap; color:@fg-light-1; font-weight:normal; white-space:nowrap; text-align:left; .x_bs; position:relative; transition:width 0.1s ease-out,height 0.1s ease-out;}
+		tr th:after,
+		tr td:after { content:""; position:absolute; height:1px; background:@fg-light-8-5; width:100%; left:0; bottom:0;}
+		tr td {
+			.folder { margin-top:-0.4em; top:0.2em; margin-left:-0.5em; position:relative;}
+			.to-tag { margin-top:-0.4em; top:0.2em;}
+		}
+		th:first-child,
+		td:first-child { border-left:0 none;}
+		th:last-child,
+		td:last-child { border-right:0 none;}
+		tr th { background:@bg-dark-0-4;}
+		tr td .to-ellipsis,
+		tr th .to-ellipsis { vertical-align:top;}
+		tr th.sort {
+			cursor:default; position:relative;
+			> [class*="to-icon"] {
+				float:right; transform:scale(0.8); color:@fg-light-5;
+			}
+		}
+		tr th.configTh { width:0; padding:0 0.5*@gap; text-align:center;}
+		tr td.action {
+			width:0; padding:0 0.5*@gap;
+			> div > [class*="to-icon"],
+			> [class*="to-icon"] { margin-top:-0.5*@gap; top:0.25*@gap; position:relative;}
+		}
+		tr:nth-last-of-type(1) td:after {
+			display:none;
+		}
+		tbody tr { height:1+2*@gap;}
+		td.fn,
+		th.fn { width:1+2*@gap; text-align:center; padding:0;}
+		td.edit {
+			padding:0;
+			.to-rate { padding:0 @gap;}
+			.to-switch { margin:0 @gap;}
+		}
+		td.fn { cursor:pointer; color:@primary;}
+		tr {
+			th.checkbox,
+			td.checkbox { width:0; padding:0; text-align:center;}
+			th.index,
+			td.index { width:0; text-align:center;}
+		}
+	}
+}
+
+
+.to-table {
+	table {
+		tr td,
+		tr th { position:static; border-bottom:1px solid @fg-light-8-5;}
+		tr th:after,
+		tr td:after { display:none;}
+		tr:nth-last-of-type(1) td {
+			border-bottom:0 none;
+		}
+		tr td .to-checkbox { margin-top:-1px; top:1px;}
+	}
+}
+
+
+// line-position
+.to-table-line-position-h {
+	table {
+		tr td,
+		tr th { border-left:0 none; border-right:0 none;}
+	}
+}
+.to-table-line-position-v {
+	table {
+		tr td,
+		tr th { border-bottom:0 none;}
+	}
+}
+.to-table-line-position-none {
+	table {
+		tr td,
+		tr th { border:0 none;}
+	}
+}
+
+
+
+// notfull
+.to-table-notfull {
+	table {
+		position:relative;
+		&:after {
+			content:''; position:absolute; bottom:0; left:0; right:0; width:100%; height:1px; background:@fg-light-8-5;
+		}
+	}
+}
+
+
+
+
+// 树插件
+.to-table {
+	td.level {
+		white-space:nowrap; padding:0 @gap 0 0.5*@gap+0.75em;
+		&:before { content:""; width:1px; height:1+2*@gap; background:@bg-dark-2; display:inline-block; vertical-align:middle; margin-right:-0.25em;}
+		.ico { display:inline-block; margin-right:0.25em;}
+		.ico:before { content:""; display:inline-block; height:1px; width:1em; background:@bg-dark-2; vertical-align:middle; margin-right:-1.65em;}
+		.ico:after { cursor:default; vertical-align:middle; width:1em; height:1em; line-height:1em; padding:0.25em; display:inline-block; color:@primary; border:1px solid @primary; font-family:"icon"; content:"\e003"; text-align:center; z-index:12; position:relative; border-radius:0.25em; background:@bg; font-size:75%;}
+		.ico-unfold:after { font-family:"icon"; content:"\e069";}
+		.checkbox { display:inline-block; vertical-align:top; padding-top:@gap; overflow:hidden;}
+		.checkbox input { vertical-align:top;}
+		.text { display:inline-block; vertical-align:middle;}
+	}
+	td.level-2 {
+		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5;
+		// padding-left:@gap+1.85;
+	}
+	td.level-3 {
+		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5+(1.5*0.75)+0.5;
+	}
+	td.level-4 {
+		padding-left:0.5*@gap+0.75+(1.5*0.75)+0.5+(1.5*0.75)+0.5+(1.5*0.75)+0.5;
+	}
+	td.level-leaf {
+		.ico { content:"\e60d";}
+	}
+}
+
+
+
+// 排序/过滤
+.to-table {
+	thead tr th.asc,
+	thead tr th.desc { cursor:default; user-select:none;}
+	thead tr th.filter:after,
+	thead tr th.desc:after,
+	thead tr th.asc:after { font-size:85.71%; display:inline-block; color:@fg; margin-left:0.5*@gap; font-family:"icon"; color:@fg-light-7;}
+	thead tr th.asc:after { content:"\e007";}
+	thead tr th.desc:after { content:"\e024";}
+	thead tr th.filter:after { content:"\e081";}
+}
+
+
+
+// 自动换行
+.to-table {
+	tr td.wrap,
+	tr th.wrap { white-space:normal; word-wrap:break-word; line-height:1+0.57*@gap;}
+	tr th.wrap { line-height:auto;}
+}
+.to-table-wrap {
+	table {
+		tr td,
+		tr th { white-space:normal; word-wrap:break-word; line-height:1+0.57*@gap;}
+		tr th { line-height:auto;}
+	}
+}
+
+
+
+// 行色彩
+.to-table-even {
+	table tbody tr:nth-child(2n):not(.on) { background:@bg-dark-0-2;}
+}
+.to-table {
+	tbody tr.deleted { opacity:0.5; background:@bg-dark-2;}
+	tbody tr.deleted-noselect { background:@bg-dark-2 !important;}
+	tbody tr.strong { background:@warning-op-3;}
+	tbody tr.new td { color:@primary;}
+	tbody tr.on { background:@primary-op-1;}
+}
+
+
+
+// 参数插件
+.to-table {
+	.to-param-v {
+		margin-left:0; background:none; width:100%;
+		.label { text-align:center;}
+		.value { text-align:center; font-size:100%;}
+		ul { display:table; width:100%;
+			li {
+				float:none; display:table-cell;
+			}
+		}
+	}
+}
+
+
+
+// 固定部分插件
+.to-table {
+	.body {
+		position:relative; overflow:auto; height:100%; z-index:0;
+	}
+	.top {
+		position:absolute; top:0; left:0; width:10000em; z-index:1; overflow:hidden;
+		table { width:auto; position:relative;}
+	}
+	.leftTop,
+	.left {
+		position:absolute; top:0; left:0; overflow:hidden;
+		td.fn { width:auto;}
+		tr { background:@bg;}
+		&-checkbox table tbody tr td:first-child,
+		&-checkbox table thead tr th:first-child { width:auto;}
+	}
+	.left { box-shadow:0.1em 0 0.1em rgba(0,0,0,0.1);}
+	.rightTop,
+	.right {
+		position:absolute; top:0; right:0; overflow:hidden;
+		// table { table-layout:fixed;}
+		td.fn { width:auto;}
+		tr { background:@bg;}
+		&-checkbox table tbody tr td:first-child,
+		&-checkbox table thead tr th:first-child { width:auto;}
+	}
+	.left,
+	.right {
+		height:100%;
+		table { position:relative;}
+	}
+	.right table { table-layout:fixed;}
+	.right { box-shadow:-0.14em 0 0.14em rgba(0,0,0,0.1);}
+	.leftTop,
+	.rightTop { z-index:2;}
+	.left,
+	.right { z-index:1;}
+	.leftTop,
+	.left,
+	.rightTop,
+	.right {
+		td,
+		th { .x_bs;}
+	}
+}
+
+
+
+// 提示
+.to-table-nodata {
+	height:(1+2*@gap)*6;
+}
+.to-table {
+	> .to-msg {
+		top:1+2*@gap+0.1; pointer-events:none; display:none; visibility:inherit;
+		.wrapper { padding:0;}
+	}
+	> .to-msg-show {
+		display: block;
+	}
+}
+.to-table-head-2 {
+	height:(1+2*@gap)*7;
+	> .to-msg { top:(1+2*@gap)*2;}
+}
+.to-table-head-3 {
+	height:(1+2*@gap)*8;
+	> .to-msg { top:(1+2*@gap)*3;}
+}
+
+.to-table-head-4 {
+	height:(1+2*@gap)*9;
+	> .to-msg { top:(1+2*@gap)*4;}
+}
+
+.to-table-head-5 {
+	height:(1+2*@gap)*10;
+	> .to-msg { top:(1+2*@gap)*5;}
+}
+.to-table-head-6 {
+	height:(1+2*@gap)*11;
+	> .to-msg { top:(1+2*@gap)*6;}
+}
+
+
+
+// 无背景
+.to-table-nobg {
+	background-color:transparent;
+	table {
+		thead tr th {  background-color:transparent;}
+	}
+}
+
+
+
+// 表头文字批量居中
+.to-table-th-center {
+	table {
+		tr th { text-align:center;}
+	}
+}
+
+
+
+// 边框
+.to-table-border {
+	border:1px solid @fg-light-8-5;
+}
+
+
+
+// 高度
+.to-table-height-1r { height:(1+2*@gap) * 2;}
+.to-table-height-2r { height:(1+2*@gap) * 3;}
+.to-table-height-3r { height:(1+2*@gap) * 4;}
+.to-table-height-4r { height:(1+2*@gap) * 5;}
+.to-table-height-5r { height:(1+2*@gap) * 6;}
+.to-table-height-6r { height:(1+2*@gap) * 7;}
+.to-table-height-7r { height:(1+2*@gap) * 8;}
+.to-table-height-8r { height:(1+2*@gap) * 9;}
+.to-table-height-9r { height:(1+2*@gap) * 10;}
+.to-table-height-10r { height:(1+2*@gap) * 11;}
+.to-table-height-11r { height:(1+2*@gap) * 12;}
+.to-table-height-12r { height:(1+2*@gap) * 13;}
+.to-table-height-13r { height:(1+2*@gap) * 14;}
+.to-table-height-14r { height:(1+2*@gap) * 15;}
+.to-table-height-15r { height:(1+2*@gap) * 16;}
+.to-table-height-16r { height:(1+2*@gap) * 17;}
+.to-table-height-17r { height:(1+2*@gap) * 18;}
+.to-table-height-18r { height:(1+2*@gap) * 19;}
+.to-table-height-19r { height:(1+2*@gap) * 20;}
+.to-table-height-20r { height:(1+2*@gap) * 21;}
+.to-table-height-full { height:100%; .x_bs;}
+
+//msg top值
+.to-table-msg-top-0r > .to-msg{ top:(1+2*@gap) * 0;}
+.to-table-msg-top-1r > .to-msg{ top:(1+2*@gap) * 1;}
+.to-table-msg-top-2r > .to-msg{ top:(1+2*@gap) * 2;}
+.to-table-msg-top-3r > .to-msg{ top:(1+2*@gap) * 3;}
+.to-table-msg-top-4r > .to-msg{ top:(1+2*@gap) * 4;}
+.to-table-msg-top-5r > .to-msg{ top:(1+2*@gap) * 5;}
+
+
+// 固定宽度// 固定宽度
+.to-table-fixed {
+	table { table-layout:fixed;}
+	td { .x_to;}
+}
+
+
+
+// 交互效果
+.s_pc {
+	.to-table {
+		table {
+			tr th.sort:hover { background:@bg-dark-1;}
+		}
+	}
+	.to-table-row-selectable table tbody tr.hover { background:@bg-dark-0-5; color:@fg-light-1;}
+	.to-table-row-selectable table tbody tr.on.hover { background:@primary-light-8; color:@bg;}
+}
+.s_pc, .s_pad, .s_phone {
+	.to-table {
+		table {
+			tr th.sort:active { background:@bg-dark-2;}
+		}
+	}
+	.to-table-row-selectable table tbody tr.active { background:@bg-dark-2;}
+	.to-table-row-selectable table tbody tr.on.active { background:@primary-light-5;}
+}
+
+
+
+// 自动适应手机
+.to-table-type-v {
+	padding:0 0.5*@gap; .x_bs; overflow:auto; background:none;
+	&:after { height:0.5*@gap; content:""; display:block;}
+	.top { display:none;}
+	.body {
+		margin:0 -0.5*@gap -0.5*@gap -0.5*@gap; .x_bs; display:block;
+		> .wrapper {
+			overflow:hidden;
+			> table {
+				margin:0 0.5*@gap 0.5*@gap 0.5*@gap;
+			}
+		}
+	}
+	table {
+		display:block; width:auto;
+		thead { display:none;}
+		tbody { display:block;}
+		tbody tr { height:auto; background:@bg; display:block; position:relative; padding:@gap 1.5*@gap;}
+		tbody tr:first-child { margin-top:0 !important;}
+		tr td { display:block; height:auto; border:none; white-space:normal; word-break:break-all; word-wrap:break-word; width:auto !important; padding-top:0.25*@gap; padding-bottom:0.25*@gap; padding-left:0; padding-right:0;}
+		tr td:empty { display:none;}
+		tr td:after { display:none;}
+	}
+	tr.on {
+		background:none;
+		//&:before { content:""; position:absolute; top:(1+2*@gap)*1.1667; pointer-events:none; left:0; bottom:0; right:0; border:1px solid @danger;}
+		.to-box-mode-plain.to-box-color-default{ background: transparent; }
+	}
+	tr td.action {
+		margin-top:0.5*@gap;
+	}
+	tr td.checkbox,
+	tr td.radio { position:absolute; right:0; top:0; font-size:116.67%;}
+	tr td.title {
+		.to-card .icon { font-size:200%;}
+	}
+	.to-table-action {
+		margin-top:@gap;
+		.to-button-mode-text:first-child { margin-left:-0.5*@gap;}
+	}
+}
+.to-table-detail-icon { font-size:200%;}
+.to-table-actionLayer {
+	.to-table-actionLayerWrapper { padding:0.5em;}
+	button { width:100%; height:1+2*@gap; line-height:1+2*@gap;}
+}
+.to-table-item-fillet-normal {
+	tr { border-radius:0.5*@gap;}
+}
+.to-table-item-fillet-pill {
+	tr { border-radius:1.5*@gap;}
+}