Commit 98a23682 authored by 骆瑛's avatar 骆瑛

修改表格样式等

parent db5c34ca
//定义变量 //定义变量
@import './themes/deepBlank.less'; // @import './themes/deepBlank.less';
// @import './themes/green.less'; // @import './themes/green.less';
// @import './themes/default.less'; @import './themes/default.less';
...@@ -557,22 +557,26 @@ ...@@ -557,22 +557,26 @@
} }
//表格 //表格
.ivu-table-header{ .ivu-table-header {
border: 1px solid @table-header-border !important; border: 1px solid @table-header-border !important;
} }
.ivu-table-header thead tr th { .ivu-table-header thead tr th ,.table-tools table thead tr th{
background: @table-header-bg !important; background: @table-header-bg !important;
border: 1px solid @table-header-border !important; border: 1px solid @table-header-border !important;
color: @table-header-color !important; color: @table-header-color !important;
} }
// .ivu-table-tip{ .ivu-table-tip{
// border: 1px solid @table-bg-color !important; background:@table-body-bg !important;
// box-sizing: border-box; }
// } /*底色斑马纹*/
/*底色*/
.ivu-table td{ .ivu-table td{
background-color:@table-body-bg !important;
background-color:@table-body-bg ;
} }
.ivu-table tr:nth-child(even) td{
background-color:@table-body-bg_even !important;
}
.ivu-table-wrapper {//表格最外层的border .ivu-table-wrapper {//表格最外层的border
border: none !important; border: none !important;
} }
...@@ -582,12 +586,15 @@ ...@@ -582,12 +586,15 @@
} }
.tableCommon tr td { .ivu-table-wrapper tr td {
background-color: @tableCommon-bg; background-color:@table-body-bg ;
// border: 1px solid @tableCommon-boder !important;
}
//表格内部线条
.ivu-table-border td{
border: 1px solid @tableCommon-boder !important; border: 1px solid @tableCommon-boder !important;
} }
.ivu-table:before { .ivu-table:before {
//表格下边框线 //表格下边框线
background-color: @table-boder !important; background-color: @table-boder !important;
...@@ -599,18 +606,34 @@ ...@@ -599,18 +606,34 @@
background-color: @table-boder !important; background-color: @table-boder !important;
} }
.ivu-table td {
border-bottom:1px solid @table_line !important;
}
/*选中某一行高亮*/ /*选中某一行高亮*/
.ivu-table-row-highlight td { .ivu-table-row:hover{
background: rgba(34, 35, 65, 0.41)!important; background: @table-row-hover !important;
border: 2px solid #106FFE !important; border: 2px solid @table_line !important;
}
.ivu-table-row-highlight tr{
background: @table-row-hover !important;
border: 2px solid @table_line !important;
border-right: 2px solid transparent !important;
} }
/*浮在某行*/ /*浮在某行*/
.ivu-table-row-hover td { .ivu-table-row-hover td ,.ivu-table tr:nth-child(even):hover{
background: rgba(34, 35, 65, 0.41) !important; background: @table-row-hover !important;
border: 2px solid @table_line !important;
border-right: 2px solid transparent !important;
border-left: 2px solid transparent !important;
}
.ivu-table-row-hover td:first-child {
border-left: 2px solid @table_line !important;
}
.ivu-table-row-hover td:last-child {
border-right: 2px solid @table_line !important;
} }
// .ivu-table-row-hover tr{
// border: 2px solid #106FFE !important;
// }
.ivu-dropdown-rel:hover { .ivu-dropdown-rel:hover {
.ivu-btn-text { .ivu-btn-text {
background-color: @primary-color; background-color: @primary-color;
...@@ -627,9 +650,32 @@ ...@@ -627,9 +650,32 @@
background-color: @product_content_backcolor; background-color: @product_content_backcolor;
} }
} }
//斑马纹 //表格内checkbox
.ivu-table-stripe td{ .ivu-checkbox-inner{
background: rgba(34, 35, 65, 0.41) !important; background: transparent !important;
}
//表格树的下拉样式
.treeTbale table tbody .treetr{
background-color:@table-body-bg ;
box-sizing: border-box;
}
.treeTbale table tbody .treetr:nth-child(even){
background-color:@table-body-bg_even !important;
}
.treeTbale table tbody .treetr:hover td{
background: @table-row-hover !important;
border: 2px solid @table_line !important;
border-right: 2px solid transparent !important;
border-left: 2px solid transparent !important;
}
.treeTbale table tbody .treetr:hover td:first-child {
border-left: 2px solid @table_line !important;
}
.treeTbale table tbody .treetr:hover td:last-child {
border-right: 2px solid @table_line !important;
}
.treetr .ivu-icon{
color: @treetr_icon;
} }
//修改的搜索框样式 //修改的搜索框样式
...@@ -645,7 +691,7 @@ ...@@ -645,7 +691,7 @@
} }
.search_text span{ .search_text span{
color: #ffffff !important; color: @search_text_span !important;
border: 1px solid transparent !important; border: 1px solid transparent !important;
} }
......
...@@ -53,8 +53,8 @@ ...@@ -53,8 +53,8 @@
//表格 以及其他字体颜色 //表格 以及其他字体颜色
@table-color: #fff; @table-color: #fff;
//表格查看详情
@see_btn:transparent;
//表单的颜色 //表单的颜色
@form-color: #fff; @form-color: #fff;
...@@ -108,6 +108,7 @@ ...@@ -108,6 +108,7 @@
@table-header-border:#106FFE; @table-header-border:#106FFE;
@table-header-color:#ffffff; @table-header-color:#ffffff;
@table-body-bg:#2F2F57; @table-body-bg:#2F2F57;
@table-body-bg_even:rgba(34, 35, 65, 0.41);
@tableCommon-bg:transparent; @tableCommon-bg:transparent;
@tableCommon-boder:transparent; @tableCommon-boder:transparent;
@table-boder:transparent; @table-boder:transparent;
...@@ -117,10 +118,16 @@ ...@@ -117,10 +118,16 @@
@part_top_title:#ffffff; @part_top_title:#ffffff;
@part_top_border:1px solid #2F2F57; @part_top_border:1px solid #2F2F57;
@table_border-bg:transparent; @table_border-bg:transparent;
@table_line:#106FFE;
// @border-right_line:transparent;
//工单列表等背景色 //工单列表等背景色
@part_body_backcolor:#2F2F57; @part_body_backcolor:#2F2F57;
//表格页面背景色处理 //表格页面背景色处理
@product_content_backcolor: #222341; @product_content_backcolor: #222341;
//树 //树
@tree_select:rgba(16, 111, 254, 0.4); @tree_select:rgba(16, 111, 254, 0.4);
@select_title:#ffffff; @select_title:#ffffff;
\ No newline at end of file //表格树的下拉
@treetr_icon:#ffffff;
//高级搜索文字
@search_text_span:#ffffff;
\ No newline at end of file
...@@ -53,7 +53,8 @@ ...@@ -53,7 +53,8 @@
//表格、 以及其他字体颜色 //表格、 以及其他字体颜色
@table-color: #515A6E; @table-color: #515A6E;
//表格查看详情
@see_btn:#ffffff;
//表单的颜色 //表单的颜色
...@@ -107,8 +108,9 @@ ...@@ -107,8 +108,9 @@
@table-header-border: #F8F8F9; @table-header-border: #F8F8F9;
@table-header-color:#515a6e; @table-header-color:#515a6e;
@table-body-bg: #fff; @table-body-bg: #fff;
@table-body-bg_even:#f7f7f7;
@tableCommon-bg: #fff; @tableCommon-bg: #fff;
@tableCommon-boder: transparent; @tableCommon-boder:transparent;// #dcdee2
@table-boder: transparent; @table-boder: transparent;
@table-row-hover: #EFF8F7; @table-row-hover: #EFF8F7;
@dispatch_part_border:1px solid #ccc; @dispatch_part_border:1px solid #ccc;
...@@ -116,10 +118,16 @@ ...@@ -116,10 +118,16 @@
@part_top_title:#515a6e; @part_top_title:#515a6e;
@part_top_border:1px solid #f5f6fa; @part_top_border:1px solid #f5f6fa;
@table_border-bg:#dcdee2; @table_border-bg:#dcdee2;
@table_line:#e8eaec;
// @border-right_line:#dcdee2;
//工单列表等背景色 //工单列表等背景色
@part_body_backcolor:#ffffff; @part_body_backcolor:#ffffff;
//表格页面背景色处理 //表格页面背景色处理
@product_content_backcolor: #F5F6FA; @product_content_backcolor: #F5F6FA;
//树 //树
@tree_select:#d5e8fc; @tree_select:#d5e8fc;
@select_title:#515a6e; @select_title:#515a6e;
\ No newline at end of file //表格树的下拉
@treetr_icon: #2d8cf0;
//高级搜索文字
@search_text_span:#515a6e;
\ No newline at end of file
...@@ -51,7 +51,8 @@ ...@@ -51,7 +51,8 @@
//表格、以及其他字体颜色 //表格、以及其他字体颜色
@table-color: #515A6E; @table-color: #515A6E;
//表格查看详情
@see_btn:transparent;
//表单的颜色 //表单的颜色
...@@ -106,15 +107,18 @@ ...@@ -106,15 +107,18 @@
@table-header-border: #253D6D; @table-header-border: #253D6D;
@table-header-color:#ffffff; @table-header-color:#ffffff;
@table-body-bg: #fff; @table-body-bg: #fff;
@table-body-bg_even:rgba(4, 187, 140, 0.06);
@tableCommon-bg: transparent; @tableCommon-bg: transparent;
@tableCommon-boder: transparent; @tableCommon-boder: transparent;
@table-boder: transparent; @table-boder: transparent;
@table-row-hover: #EFF8F7; @table-row-hover: #FFFFFF;
@dispatch_part_border:1px solid transparent; @dispatch_part_border:1px solid transparent;
@back_part_top:#253D6D; @back_part_top:#253D6D;
@part_top_title:#ffffff; @part_top_title:#ffffff;
@part_top_border:1px solid #ffffff; @part_top_border:1px solid #ffffff;
@table_border-bg:transparent; @table_border-bg:transparent;
@table_line: #CACBD0;;
// @border-right_line:transparent;
//工单列表等背景色 //工单列表等背景色
@part_body_backcolor:#ffffff; @part_body_backcolor:#ffffff;
//表格页面背景色处理 //表格页面背景色处理
...@@ -122,3 +126,7 @@ ...@@ -122,3 +126,7 @@
//树 //树
@tree_select:rgba(4, 187, 140, 0.21); @tree_select:rgba(4, 187, 140, 0.21);
@select_title:#04BB8C; @select_title:#04BB8C;
//表格树的下拉
@treetr_icon: #515A6E;
//高级搜索文字
@search_text_span:#ffffff;
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
</Col> </Col>
</template> </template>
<script> <script>
export default { export default {
name: "filed", name: "filed",
props: { props: {
...@@ -22,12 +23,14 @@ export default { ...@@ -22,12 +23,14 @@ export default {
} }
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import "../../assets/css/custom.less";
.detail { .detail {
display: table; display: table;
height: 100%; height: 100%;
border-collapse: collapse; border-collapse: collapse;
background: white; background: @see_btn;
.ivu-row { .ivu-row {
border: 1px solid #ddd; border: 1px solid #ddd;
border-top: none; border-top: none;
......
...@@ -635,11 +635,13 @@ export default { ...@@ -635,11 +635,13 @@ export default {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
th { th {
background: #f8f8f9; //#f8f8f9
background: @table-header-bg;
} }
td, td,
th { th {
border: #dcdee2 solid 1px; // border: #dcdee2 solid 1px;
border: 1px solid @tableCommon-boder !important;
line-height: 40px; line-height: 40px;
padding: 0 5px; padding: 0 5px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment