|
/* ================================================================================ 默认项 */
|
/*输入组件*/
|
select{ padding: 0.04rem; border: 1px solid #CCC; border-radius: 6px; outline: none; background-color: transparent; }
|
textarea{ min-width: 2rem; max-width: 4rem; height: 0.5rem; font-family: "微软雅黑"; padding: 10px; border: 1px solid #CCC; border-radius: 6px; resize: none; outline: none; background-color: transparent; }
|
|
|
|
/* ================================================================================ 字体颜色 */
|
/*文字颜色*/
|
.font-Pt{ color: #9900CC; } /*铂金文字*/
|
.font-Au{ color: #F6CB11; } /*金色文字*/
|
.font-Ag{ color: #8A8E97; } /*银色文字*/
|
.font-Cu{ color: #B4917D; } /*铜色文字*/
|
.bg-Pt{ background-color: #9900CC; } /*铂金背景*/
|
.bg-Au{ background-color: #F6CB11; } /*金色背景*/
|
.bg-Ag{ background-color: #8A8E97; } /*银色背景*/
|
.bg-Cu{ background-color: #B4917D; } /*铜色背景*/
|
|
|
|
/* ================================================================================ 组件 */
|
/*组件距离*/
|
.admin-margin{ margin: 10px; }
|
.admin-marginLeft{ margin-left: 10px; }
|
.admin-marginRight{ margin-right: 10px; }
|
.admin-marginTop{ margin-top: 10px; }
|
.admin-marginBottom{ margin-bottom: 10px; }
|
.admin-padding{ padding: 10px; }
|
.admin-paddingLeft{ padding-left: 10px; }
|
.admin-paddingRight{ padding-right: 10px; }
|
.admin-paddingTop{ padding-top: 10px; }
|
.admin-paddingBottom{ padding-bottom: 10px; }
|
|
/*图片*/
|
.admin-imgS{ width: 0.3rem; height: 0.3rem; display: block; }
|
.admin-imgM{ width: 0.5rem; height: 0.5rem; display: block; }
|
.admin-imgL{ width: 0.7rem; height: 0.7rem; display: block; }
|
|
/*按钮*/
|
.admin-btn-arcS{ width: 0.12rem; height: 0.12rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; color: white; cursor: pointer; overflow: hidden; }
|
.admin-btn-arcM{ width: 0.16rem; height: 0.16rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; color: white; cursor: pointer; overflow: hidden; }
|
.admin-btn-arcL{ width: 0.2rem; height: 0.2rem; display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 50%; color: white; cursor: pointer; overflow: hidden; }
|
.admin-btn-roundS{ min-width: 0.2rem; height: 0.12rem; padding: 0 0.06rem; display: flex; flex-direction: row; justify-content: center; align-items: center; color: white; border-radius: 6px; cursor: pointer; }
|
.admin-btn-roundM{ min-width: 0.25rem; height: 0.16rem; padding: 0 0.06rem; display: flex; flex-direction: row; justify-content: center; align-items: center; color: white; border-radius: 6px; cursor: pointer; }
|
.admin-btn-roundL{ min-width: 0.3rem; height: 0.2rem; padding: 0 0.06rem; display: flex; flex-direction: row; justify-content: center; align-items: center; color: white; border-radius: 6px; cursor: pointer; }
|
|
/*下拉列表选项*/
|
.admin-list{ min-width: 0.5rem; max-width: 1.5rem; width: auto; height: auto; box-shadow: 0 0 15px gray; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background-color: white; }
|
.admin-list>div{ padding: 0.06rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background-color: white; transition-property: background-color; transition-duration: 0.2s; }
|
.admin-list>div:hover{ background-color: rgba(0,0,0,0.2); }
|
|
/*横向多选择*/
|
.admin-checks{ width: auto; height: auto; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-radius: 6px; overflow: hidden; }
|
.admin-checks>div{ padding: 0.04rem 0.06rem; display: flex; flex-direction: row; justify-content: center; align-items: center; transition-property: background-color; transition-duration: 0.2s; color: white; cursor: pointer; }
|
.admin-checks>div:hover{ background-color: #1F90FF; }
|
.admin-checks-ok{ background-color: #4DA7FF; }
|
.admin-checks-no{ background-color: #CBE5FF; }
|
|
|
/*页面顶部悬浮栏*/
|
.admin-header{ width: 7.5rem; height: 0.3rem; padding: 10px; position: fixed; left: 0; top: 0; z-index: 50; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom: 1px solid #CCC; background-color: rgba(255,255,255,0.9); }
|
/*更多筛选展开后的 选项列表栏*/
|
.admin-header-input{ width: 1.5rem; height: auto; padding-top: 0.04rem; padding-bottom: 0.04rem; margin: 5px; border: 1px solid #CCC; border-radius: 5px; }
|
.admin-header-screen{ width: 7.3rem; height: auto; padding: 10px; position: absolute; left: 0.1rem; top: 0.34rem; z-index: 60; background-color: white; box-shadow: 0 0 15px gray; }
|
/*设置项 一行*/
|
.admin-opt-row{ width: 100%; margin-top: 10px; }
|
.admin-opt-row:nth-of-type(1){ margin-top: 0; }
|
/*设置项 标题*/
|
.admin-opt-title{ font-size: 15px; height: 0.15rem; line-height: 0.15rem; margin: 5px; }
|
/*设置项 选项*/
|
.admin-opt-xuan{ font-size: 14px; height: 0.15rem; line-height: 0.15rem; padding: 0 0.03rem; margin: 5px; border-radius: 0.02rem; text-align: center; cursor: pointer; }
|
.admin-opt-xuan:hover{ color: deepskyblue; }
|
.admin-opt-xuan-check{ background-color: coral; color: white; }
|
.admin-opt-xuan-check:hover{ color: white; }
|
/*设置项 输入组件*/
|
.admin-opt-input{ min-width: 0.55rem; max-width: 0.8rem; height: 0.15rem; margin: 5px; border: 1px solid #CCC; border-radius: 5px; }
|
|
|
/* 内容外壳 */
|
.admin-main{ width: 7.5rem; min-height: 100%; height: 100%; background-color: white; }
|
.admin-main-overHeader{ width: 7.5rem; min-height: 100%; height: 100%; padding-top: 0.3rem; background-color: white; }
|
|
|
/*表格*/
|
/*标签外层，肯定有一个宽高固定的div（hight可以自设）*/
|
.admin-table-shell{ width: calc(100% - 0.1rem); height: calc(100% - 0.35rem); margin-left: 0.05rem; margin-top: 0.05rem; overflow-y: auto; overflow-x: auto; }
|
.admin-table-shell::-webkit-scrollbar{ width: 10px; height: 10px; background-color: transparent; }
|
.admin-table-shell::-webkit-scrollbar-track{ background-color: transparent; }
|
.admin-table-shell::-webkit-scrollbar-thumb{ border-radius: 5px; background-color: rgba(0,0,0,0.2); }
|
.admin-table-shell::-webkit-scrollbar-thumb:hover{ background-color: rgba(0,0,0,0.3); }
|
.admin-table-shell::-webkit-scrollbar-corner{ background-color: transparent; }
|
|
/*table主体*/
|
.admin-table{ min-width: 100%; display: table; border-collapse: collapse; }
|
/*表格thead*/
|
.admin-table-thead{ min-width: 100%; height: 0.23rem; display: table; table-layout: fixed; position: sticky; top: 0; border-collapse: collapse; background-color: #555555; }
|
.admin-table-th{ min-width: 1rem; padding: 5px; display: table-cell; border: 1px solid #4B4B4B; color: white; text-align: center; }
|
/*表格tbody*/
|
.admin-table-tbody{ min-width: 100%; height: auto; display: table; border-collapse: collapse; }
|
/*表格tr/td*/
|
.admin-table-tr{ min-width: 100%; min-height: 0.3rem; display: table; table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid #CCC; }
|
.admin-table-tr:nth-child(even){ background-color: white; } .admin-table-tr:nth-child(odd){ background-color: #F2F2F2; }
|
.admin-table-td{ min-width: 1rem; padding: 5px; display: table-cell; border-left: 1px solid #CCC; border-right: 1px solid #CCC; line-height: 1.5; text-align: center; transition-property: background-color; transition-duration: 0.3s; }
|
.admin-table-tr-check .admin-table-td{ background-color: #CBE5CB; }
|
/*表格底部工具栏*/
|
.admin-table-tool{ width: calc(100% - 0.1rem - 10px); height: 0.25rem; padding: 0 10px; margin-left: 0.05rem; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border: 1px solid #CCC; }
|
|
|
/*隐藏弹出框*/
|
.admin-tan-box{ min-width: 2rem; max-width: 6rem; height: 80%; padding: 10px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background-color: white; border-radius: 6px; box-shadow: 0 0 15px gray; }
|
.admin-tan-close{ position: absolute; right: 10px; top: 10px; overflow: hidden; background-color: #D53A50; }
|
