|
/* ================================================================================ 页面布局 */
|
/*文字颜色*/
|
.font-Au{ color: #F6CB11; } /*金色文字*/
|
.font-Ag{ color: #8A8E97; } /*银色文字*/
|
.font-Cu{ color: #B4917D; } /*铜色文字*/
|
.bg-Au{ background-color: #F6CB11; } /*金色背景*/
|
.bg-Ag{ background-color: #8A8E97; } /*银色背景*/
|
.bg-Cu{ background-color: #B4917D; } /*铜色背景*/
|
|
/*页面行外框*/
|
.pageRow{ width: 7.5rem; padding: 0.06rem; border-top: 0.04rem solid #F3F3F3; background-color: white; }
|
|
/*组件距离*/
|
.nodeMarginLeft{ margin-left: 0.05rem; }
|
.nodeMarginRight{ margin-right: 0.05rem; }
|
.nodeMarginTop{ margin-top: 0.07rem; }
|
.nodeMarginBottom{ margin-bottom: 0.07rem; }
|
|
/*页面顶部悬浮栏*/
|
.headerThis{ width: 7.5rem; height: 0.3rem; border-bottom: 1px solid #CCC; position: fixed; left: 0; top: 0; background-color: white; z-index: 60; }
|
/*搜索框、确定按钮、更多筛选 这一种的功能栏*/
|
.tool-search{ width: 100%; height: 100%; position: relative; padding: 0.06rem; }
|
/*更多筛选展开后的 选项列表栏*/
|
.tool-screen{ width: 7.3rem; height: auto; padding: 0.06rem; position: absolute; left: 0.1rem; top: 0.34rem; border: 1px solid #CCC; background-color: white; box-shadow: 0 0 15px gray; z-index: 60; }
|
|
/*设置项 一行*/
|
.opt_row{ width: 100%; margin-top: 0.08rem; }
|
.opt_row:nth-of-type(1){ margin-top: 0; }
|
/*设置项 标题*/
|
.opt_title{ font-size: 0.07rem; line-height: 0.15rem; margin-right: 0.1rem; }
|
/*设置项 选项*/
|
.opt_xuan{ font-size: 0.06rem; height: 0.15rem; line-height: 0.15rem; padding: 0 0.03rem; margin-right: 0.08rem; margin-bottom: 0.02rem; border-radius: 0.02rem; text-align: center; cursor: pointer; }
|
.opt_xuan:hover{ color: deepskyblue; }
|
.opt_xuanOK{ background-color: coral; color: white; }
|
.opt_xuanOK:hover{ color: white; }
|
/*设置项 输入组件*/
|
.opt_input{ width: 0.55rem; padding: 0.04rem 0.04rem; }
|
|
|
/*页面底部悬浮栏*/
|
.footThis{ width: 7.5rem; height: 0.3rem; border-top: 1px solid #CCC; position: fixed; left: 0; bottom: 0; background-color: white; z-index: 60; }
|
/*批量 这一种功能栏*/
|
.tool-pi{ width: 100%; height: 100%; position: relative; padding: 0.06rem; }
|
/*批量处理 隐藏弹框*/
|
.pi-listBox{ min-width: 100%; position: absolute; left: 0; bottom: calc(100% + 0.06rem); }
|
|
|
/*隐藏弹出框*/
|
.tan{ width: 7.5rem; height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.3); z-index: 80; }
|
.tan-box{ padding: 0.06rem; position: relative; background-color: white; border-radius: 6px; }
|
.tan-close{ font-size: 0.08rem; width: 0.12rem; height: 0.12rem; line-height: 0.12rem; text-align: center; border-radius: 50%; color: white; background-color: #D53A50; overflow: hidden; position: absolute; right: 0.06rem; top: 0.06rem; cursor: pointer; }
|
|
|
|
/* ================================================================================ 页面组件 */
|
/*输入组件*/
|
input{ width: 1rem; font-size: 0.05rem; padding: 0.04rem; border: 1px solid #CCC; border-radius: 6px; outline: none; background-color: transparent; }
|
input::-webkit-input-placeholder{ font-size: 0.05rem; color: darkgrey; }
|
select{ font-size: 0.05rem; padding: 0.04rem; border: 1px solid #CCC; border-radius: 6px; outline: none; background-color: transparent; }
|
textarea{ width: 1rem; font-family: "微软雅黑"; font-size: 0.07rem; padding: 0.04rem; border: 1px solid #CCC; border-radius: 6px; resize: none; outline: none; background-color: transparent; }
|
|
|
/*表格*/
|
/*标签外层(就是这个box了)肯定有一个宽高固定的div（hight可以自设）*/
|
.tableBox{ width: 100%; height: 3rem; overflow-y: hidden; overflow-x: auto; }
|
.tableBox::-webkit-scrollbar{ width: 6px; height: 6px; background-color: transparent; }
|
.tableBox::-webkit-scrollbar-track{ background-color: transparent; }
|
.tableBox::-webkit-scrollbar-thumb{ border-radius: 3px; background-color: rgba(0,0,0,0.2); }
|
.tableBox::-webkit-scrollbar-thumb:hover{ background-color: rgba(0,0,0,0.3); }
|
.tableBox::-webkit-scrollbar-corner{ background-color: transparent; }
|
/*table主体（width可以自设，甚至大于100%，默认100%）*/
|
.table{ width: 100%; height: 100%; display: table; border-collapse: collapse; }
|
/*表格头排thead*/
|
.table-thead{ width: -webkit-calc(100% - 6px); width: calc(100% - 6px); height: 0.23rem; display: table; background-color: #555555; table-layout: fixed; border-collapse: collapse; }
|
.table-th{ font-size: 0.07rem; display: table-cell; padding-left: 0.05rem; padding-right: 0.05rem; border: 1px solid #4B4B4B; color: white; text-align: center; }
|
/*表格底部tfoot*/
|
.table-tfoot{ width: -webkit-calc(100% - 6px); width: calc(100% - 6px); max-width: 7.5rem; height: 0.25rem; border: 1px solid #CCC; position: -webkit-sticky; position: sticky; left: 0; z-index: 30; }
|
/*表格内容*/
|
.table-tbody{ width: 100%; height: -webkit-calc(100% - 0.48rem); height: calc(100% - 0.48rem); display: block; overflow-x: hidden; overflow-y: scroll; }
|
.table-tbody::-webkit-scrollbar{ width: 6px; height: 6px; background-color: transparent; }
|
.table-tbody::-webkit-scrollbar-track{ background-color: transparent; }
|
.table-tbody::-webkit-scrollbar-thumb{ border-radius: 3px; background-color: rgba(0,0,0,0.2); }
|
.table-tbody::-webkit-scrollbar-thumb:hover{ background-color: rgba(0,0,0,0.3); }
|
.table-tbody::-webkit-scrollbar-corner{ background-color: transparent; }
|
/*表格tr、td*/
|
.table-tr{ width: 100%; min-height: 0.35rem; display: table; table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid #CCC; }
|
.table-tr:nth-child(even){ background-color: white; }
|
.table-tr:nth-child(odd){ background-color: #F2F2F2; }
|
.table-td{ display: table-cell; min-height: 0.35rem; padding: 0.05rem; text-align: center; border-left: 1px solid #CCC; border-right: 1px solid #CCC; transition-property: background-color; transition-duration: 0.3s; }
|
|
/*表格行排序组件*/
|
.paiXu{ margin-left: 0.05rem; }
|
.paiXu i{ font-size: 0.08rem; line-height: 0.5; cursor: pointer; }
|
.paiXu i:nth-of-type(1){ margin-bottom: 0.015rem; }
|
.paiXu i:nth-of-type(2){ margin-top: 0.015rem; }
|
|
/*被选中后的行颜色*/
|
.trxuan .table-td{ background-color: #CBE5CB; }
|
/*表格中输入组件为白底色*/
|
.table-td input,select,textarea{ background-color: white; }
|
/*选择列宽度*/
|
.xuanWidth{ width: 0.3rem; }
|
/*序号列宽度*/
|
.xuWidth{ width: 0.4rem; }
|
|
|
/*横向多选择*/
|
.checks{ border-radius: 6px; overflow: hidden; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
|
.checks>div{ font-size: 0.07rem; padding: 0.04rem 0.06rem; transition: background-color 0.3s; color: white; cursor: pointer; }
|
.checks>div:hover{ background-color: #1F90FF; }
|
.checks_ok{ background-color: #4DA7FF; }
|
.checks_no{ background-color: #CBE5FF; }
|
|
|
/*图片大小*/
|
.imgSize1{ width: 0.25rem; height: 0.25rem; display: block; }
|
.imgSize2{ width: 0.33rem; height: 0.33rem; display: block; }
|
.imgSize3{ width: 0.45rem; height: 0.45rem; display: block; }
|
.imgSize4{ width: 0.53rem; height: 0.53rem; display: block; }
|
|
|
/*按钮*/
|
.btn-arcS{ width: 0.12rem; height: 0.12rem; line-height: 0.12rem; text-align: center; border-radius: 50%; color: white; cursor: pointer; overflow: hidden; }
|
.btn-arcM{ width: 0.16rem; height: 0.16rem; line-height: 0.16rem; text-align: center; border-radius: 50%; color: white; cursor: pointer; overflow: hidden; }
|
.btn-arcL{ width: 0.2rem; height: 0.2rem; line-height: 0.2rem; text-align: center; border-radius: 50%; color: white; cursor: pointer; overflow: hidden; }
|
.btn-roundS{ min-width: 0.2rem; height: 0.12rem; padding: 0 0.06rem; line-height: 0.12rem; color: white; text-align: center; border-radius: 6px; cursor: pointer; }
|
.btn-roundM{ min-width: 0.25rem; height: 0.16rem; padding: 0 0.06rem; line-height: 0.16rem; color: white; text-align: center; border-radius: 6px; cursor: pointer; }
|
.btn-roundL{ min-width: 0.3rem; height: 0.2rem; padding: 0 0.06rem; line-height: 0.2rem; color: white; text-align: center; border-radius: 6px; cursor: pointer; }
|
|
|
/*下拉列表选项弹框*/
|
.list{ min-width: 100%; box-shadow: 0 0 15px gray; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background-color: white; }
|
.list-row{ padding: 0.06rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background-color: white; }
|
.list-row:hover{ background-color: rgba(0,0,0,0.2); }
|
.list-row>div:nth-of-type(1){ width: 0.17rem; }
|
