You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
811 lines
12 KiB
811 lines
12 KiB
/*页面*/ |
|
|
|
html, |
|
body { |
|
font-family: PingFangSC-Regular, sans-serif; |
|
} |
|
|
|
|
|
/*页面头部导航*/ |
|
/*.mui-bar-nav { |
|
-webkit-box-shadow: none; |
|
box-shadow: none; |
|
} |
|
.mui-bar-nav { |
|
height: 1.1rem; |
|
background: #f5b426; } |
|
.mui-bar-nav .mui-title { |
|
font-size: .29rem; |
|
font-family: PingFangSC-Regular; |
|
font-weight: 400; |
|
line-height: 1.4rem; |
|
color: #FFD031; } |
|
.mui-bar-nav .mui-icon-left-nav { |
|
line-height: 1.1rem; |
|
color: #FFFFFF; } |
|
.mui-bar-nav .btn-group { |
|
width: 100%; |
|
height: 1.1rem; |
|
display: flex; |
|
justify-content: center; |
|
align-items: flex-end; } |
|
.mui-bar-nav .btn-group .btn1, .mui-bar-nav .btn-group .btn2 { |
|
width: 1.72rem; |
|
height: .51rem; |
|
text-align: center; |
|
line-height: .51rem; |
|
background: #fff; |
|
font-size: .29rem; |
|
font-weight: 400; |
|
margin-bottom: .1rem; } |
|
.mui-bar-nav .btn-group .btn1 { |
|
border-radius: 4px 0px 0px 4px; |
|
color: #F5B426; } |
|
.mui-bar-nav .btn-group .btn2 { |
|
background: #F5B426; |
|
border: 1px solid #fff; |
|
border-radius: 0px 4px 4px 0px; |
|
color: #fff; }*/ |
|
.mui-bar-nav~.mui-content { |
|
padding-top: 1.29rem ; |
|
margin: 0 0.25rem; |
|
} |
|
|
|
|
|
|
|
/*列表*/ |
|
|
|
.app-table-view { |
|
margin-top: 0 !important; |
|
margin-bottom: 0.25rem; |
|
padding-left: 0.2rem; |
|
padding-right: 0.2rem; |
|
} |
|
|
|
.app-table-view:before, |
|
.app-table-view:after, |
|
.app-table-view .mui-table-view-cell:after, |
|
.app-table-view .mui-table-view-cell:before { |
|
height: 0; |
|
} |
|
|
|
.app-table-view .mui-table-view-cell { |
|
padding: 0.3rem 0.2rem; |
|
margin: 0; |
|
font-size: 0.25rem; |
|
/*letter-spacing:0.03rem;*/ |
|
} |
|
|
|
.app-table-view .mui-table-view-cell+.mui-table-view-cell { |
|
border-top: 1px solid #EEEEEE; |
|
} |
|
|
|
.app-table-view .mui-table-view-cell .app-table-cell-lable-right { |
|
position: absolute; |
|
right: 0.5rem; |
|
font-size: inherit; |
|
color: #8F8F94; |
|
} |
|
|
|
.app-table-view .mui-table-view-cell .app-table-cell-lable-number { |
|
position: absolute; |
|
right: 0.25rem; |
|
font-size: inherit; |
|
color: #8F8F94; |
|
} |
|
|
|
.app-table-view .app-table-cell-img { |
|
height: 1.5rem; |
|
line-height: 0.7rem; |
|
} |
|
|
|
.app-table-view .app-cell-img { |
|
width: 1rem; |
|
height: 1rem; |
|
border-radius: 100%; |
|
overflow: hidden; |
|
position: absolute; |
|
top: 0.25rem; |
|
right: 0.5rem; |
|
} |
|
|
|
.app-table-view .app-cell-img img { |
|
width: 100%; |
|
} |
|
|
|
.mui-navigate-right:after, |
|
.mui-push-right:after { |
|
right: 0.2rem; |
|
} |
|
|
|
|
|
/*表单*/ |
|
|
|
input::-webkit-input-placeholder { |
|
font-size: 0.25rem !important; |
|
} |
|
|
|
.app-input { |
|
padding: 0.5rem 0.2rem !important; |
|
margin-bottom: 0.2rem; |
|
font-size: 0.25rem; |
|
border: 1px solid #DDDDDD !important; |
|
width: 100%; |
|
} |
|
|
|
.app-input-row { |
|
display: flex; |
|
flex-direction: row; |
|
margin: 0; |
|
padding: 0; |
|
margin-bottom: 0.1rem; |
|
} |
|
|
|
.app-input-row .app-input { |
|
width: auto; |
|
flex-grow: 7; |
|
margin: 0; |
|
} |
|
|
|
.app-input-group { |
|
border-left: 1px solid #DDDDDD; |
|
border-right: 1px solid #DDDDDD; |
|
} |
|
|
|
.app-input-group .app-input-row-list+.app-input-row-list { |
|
margin-top: -1px; |
|
} |
|
|
|
.app-input-row-list { |
|
display: flex; |
|
flex-direction: row; |
|
background: white; |
|
margin: 0; |
|
padding: 0; |
|
padding-left: 0.2rem; |
|
border-bottom: 1px solid #DDDDDD; |
|
border-top: 1px solid #DDDDDD; |
|
flex-basis: 0; |
|
flex-shrink: 0; |
|
color: #BBBBBB; |
|
} |
|
|
|
.app-input-row-list label, |
|
.app-input-row label { |
|
line-height: 1rem; |
|
font-size: 0.25rem; |
|
flex-grow: 3; |
|
color: inherit !important; |
|
} |
|
|
|
.app-input-row-list label { |
|
width: 0.7rem; |
|
padding-left: 0.125rem; |
|
} |
|
|
|
.app-input-row-list .app-input { |
|
width: 75%; |
|
border: 0 !important; |
|
margin: 0; |
|
} |
|
|
|
.app-input-group-text { |
|
border: 1px solid #DDDDDD; |
|
background-color: white; |
|
overflow: hidden; |
|
height: 1rem; |
|
} |
|
|
|
.app-text { |
|
font-size: 0.3rem; |
|
line-height: 1.5em; |
|
} |
|
|
|
.app-group-left-text, |
|
.app-group-left-btn { |
|
display: block; |
|
float: left; |
|
width: 30%; |
|
height: auto; |
|
line-height: 1rem; |
|
font-size: 0.25rem; |
|
border: 0; |
|
border-radius: 0; |
|
border-right: 1px solid #DDDDDD; |
|
padding: 0 0.2rem; |
|
text-align: center; |
|
} |
|
|
|
.app-group-right-text, |
|
.app-group-right-btn, |
|
.app-group-icon { |
|
display: block; |
|
float: right; |
|
width: 30%; |
|
line-height: 1rem; |
|
font-size: 0.25rem; |
|
border: 0; |
|
border-radius: 0; |
|
border-left: 1px solid #DDDDDD; |
|
padding: 0 0.2rem; |
|
text-align: center; |
|
} |
|
|
|
.app-group-right-btn, |
|
.app-group-left-btn, |
|
.app-group-icon { |
|
position: relative; |
|
} |
|
|
|
.app-group-right-btn:active, |
|
.app-group-left-btn:active { |
|
background: white !important; |
|
color: #DDDDDD !important; |
|
} |
|
|
|
.app-group-right-btn .mui-icon, |
|
.app-group-left-btn .mui-icon, |
|
.app-group-icon .mui-icon { |
|
position: absolute; |
|
right: 5%; |
|
top: 0.28rem; |
|
color: #DDDDDD; |
|
} |
|
|
|
.app-group-icon .mui-icon { |
|
right: 25%; |
|
color: #666666; |
|
} |
|
|
|
.app-input-group-text .app-input { |
|
float: left; |
|
width: 70%; |
|
border: 0 !important; |
|
} |
|
|
|
.app-input-row .app-input-group-text { |
|
flex-grow: 7; |
|
display: block; |
|
} |
|
|
|
.app-input-row-list .app-input-group-text { |
|
display: block; |
|
border: none; |
|
width: 75%; |
|
} |
|
|
|
.app-textarea { |
|
border-radius: 0.2rem; |
|
line-height: 1.2em; |
|
font-size: 16px; |
|
padding: 0.25rem; |
|
} |
|
|
|
.app-btn { |
|
width: 2rem; |
|
height: 0.7rem; |
|
background-color: #2F80F6; |
|
font-size: 0.25rem; |
|
color: white; |
|
/*border: 1px solid #2F80F6;*/ |
|
border-radius: 0.06rem; |
|
} |
|
|
|
.app-btn-side { |
|
width: 2rem; |
|
height: 0.7rem; |
|
background-color: #2F80F6; |
|
font-size: 0.25rem; |
|
color: white; |
|
border: 1px solid #2F80F6; |
|
border-radius: 0; |
|
} |
|
|
|
.app-btn-max { |
|
width: 100%; |
|
height: 0.8rem; |
|
background-color: #2F80F6; |
|
font-size: 0.27rem; |
|
color: white; |
|
border: 1px solid #2F80F6; |
|
border-radius: 0.06rem; |
|
} |
|
|
|
.app-btn-max-side { |
|
width: 100%; |
|
height: 0.8rem; |
|
background-color: #2F80F6; |
|
font-size: 0.27rem; |
|
color: white; |
|
border: 1px solid #2F80F6; |
|
border-radius: 0; |
|
} |
|
|
|
.app-btn:active, |
|
.app-btn-max:active, |
|
.app-btn-side:active, |
|
.app-btn-max-side:active { |
|
background-color: #2F80F6 !important; |
|
border: 1px solid #2F80F6 !important; |
|
opacity: 0.8; |
|
} |
|
|
|
.app-radio { |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
} |
|
|
|
.app-radio input[type="radio"], |
|
.app-radio input[type="checkbox"] { |
|
width: inherit; |
|
height: inherit; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
.app-radio input[type=radio]:before, |
|
.app-radio input[type="checkbox"]:before { |
|
font-size: 0.5rem; |
|
} |
|
|
|
|
|
/*开关样式*/ |
|
|
|
.app-switch { |
|
border: none; |
|
width: 1rem; |
|
height: 0.46rem; |
|
overflow: hidden; |
|
border-radius: 0.25rem; |
|
} |
|
|
|
.app-switch .mui-switch-handle { |
|
width: 0.46rem !important; |
|
height: 0.46rem !important; |
|
border-radius: 100%; |
|
top: 0 !important; |
|
left: 0 !important; |
|
} |
|
|
|
.app-switch:before { |
|
font-size: 0.25rem; |
|
line-height: 0.4rem; |
|
} |
|
|
|
.app-switch.mui-active .mui-switch-handle { |
|
top: 0; |
|
left: 0.04rem !important; |
|
transform: translate(0.5rem, 0) !important; |
|
} |
|
|
|
|
|
/*记录样板样式*/ |
|
|
|
.app-record-contorol { |
|
display: flex; |
|
width: 100%; |
|
height: 100%; |
|
flex-basis: 0; |
|
flex-shrink: 0; |
|
min-height: 1rem; |
|
} |
|
|
|
.app-record-contorol>*+* { |
|
margin-left: 0.25rem; |
|
} |
|
|
|
.app-record-contorol .app-record-left, |
|
.app-record-contorol .app-record-right { |
|
flex-grow: 1; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
} |
|
|
|
.app-record-contorol .app-record-right { |
|
align-items: flex-end; |
|
} |
|
|
|
.app-record-img { |
|
width: 1rem; |
|
height: 1rem; |
|
border-radius: 100%; |
|
overflow: hidden; |
|
text-align: center; |
|
line-height: 1rem; |
|
font-size: 0.5rem; |
|
} |
|
|
|
|
|
/*助记词样式*/ |
|
|
|
.app-text-block-content { |
|
width: 100%; |
|
border-radius: 0.1rem; |
|
padding: 0.3rem; |
|
display: flex; |
|
flex-wrap: wrap; |
|
color: #666666; |
|
font-size: 0.35rem; |
|
background: white; |
|
border: 1px solid #FFFFFF; |
|
} |
|
|
|
.app-text-block-content .app-text-block { |
|
font-size: inherit; |
|
padding: 0.1rem; |
|
} |
|
|
|
|
|
/* */ |
|
|
|
body, |
|
div, |
|
span, |
|
label, |
|
p { |
|
font-size: 0.25rem; |
|
line-height: 0.25rem; |
|
} |
|
|
|
p { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.app-background-color { |
|
background-color: #0177F0; |
|
} |
|
|
|
.app-text-color { |
|
color: #666666; |
|
} |
|
|
|
@font-face { |
|
font-family: iconfont; |
|
font-weight: normal; |
|
font-style: normal; |
|
src: url('../fonts/app.ttf') format('truetype'); |
|
} |
|
|
|
|
|
/*图标字体*/ |
|
|
|
.app-header .mui-icon { |
|
/*font-size: 0.35rem;*/ |
|
/*line-height: 0.8rem; |
|
padding: 0;*/ |
|
color:#FFD031; |
|
} |
|
|
|
|
|
/*时间插件样式*/ |
|
|
|
.mui-dtpicker, |
|
.mui-dtpicker>*>* { |
|
background: #1E2039 !important; |
|
border-color: #525ECA !important; |
|
} |
|
|
|
.mui-dtpicker-title h5 { |
|
color: #525ECA; |
|
} |
|
|
|
.mui-dtpicker-header { |
|
background: #525ECA; |
|
} |
|
|
|
.mui-dtpicker .mui-btn { |
|
border: 0px; |
|
font-size: 0.25rem; |
|
background: #525ECA !important; |
|
color: white; |
|
} |
|
|
|
.mui-pciker-rule-ft { |
|
border-color: #525ECA !important; |
|
} |
|
|
|
.highlight { |
|
color: #525ECA !important; |
|
} |
|
|
|
|
|
/*下拉刷新样式*/ |
|
|
|
.mui-pull-top-tips { |
|
position: absolute; |
|
top: -20px; |
|
left: 50%; |
|
margin-left: -25px; |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 100%; |
|
z-index: 9999; |
|
} |
|
|
|
.mui-pull-top-tips.mui-transitioning { |
|
-webkit-transition-duration: 200ms; |
|
transition-duration: 200ms; |
|
} |
|
|
|
.mui-pull-top-wrapper .mui-icon.mui-reverse { |
|
/*-webkit-transform: rotate(180deg) translateZ(0);*/ |
|
} |
|
|
|
.mui-pull-top-canvas { |
|
overflow: hidden; |
|
background-color: #efeff4; |
|
border-radius: 40px; |
|
width: 40px; |
|
height: 40px; |
|
margin: 0 auto; |
|
} |
|
|
|
.mui-pull-top-canvas canvas { |
|
width: 40px; |
|
} |
|
|
|
|
|
|
|
/************** 颜色*********************/ |
|
|
|
|
|
/* |
|
* 表头全局的颜色 |
|
*/ |
|
|
|
html, |
|
body, |
|
.mui-content { |
|
background:#F1F1F1; |
|
} |
|
|
|
.app-header-darkly { |
|
background-color: #F5B426; |
|
} |
|
.mui-bar-nav { |
|
height: 1.1rem; |
|
background: #FFFFFF; |
|
} |
|
|
|
.app-header-darkly *, |
|
.app-header-darkly { |
|
color: #333333; |
|
} |
|
|
|
.app-header-darkly .mui-title { |
|
color:#333333; |
|
} |
|
|
|
.app-header-darkly .mui-icon:before { |
|
color:#333333 !important; |
|
} |
|
|
|
.app-header-darkly .mui-icon {} |
|
|
|
|
|
/** |
|
* 底部面包屑的颜色 |
|
*/ |
|
|
|
.mui-bar-tab-darkly { |
|
box-shadow: none; |
|
background: #191C2F; |
|
color: #343E5F; |
|
height: 60px; |
|
} |
|
|
|
.mui-bar-tab-darkly * { |
|
color: inherit !important; |
|
} |
|
|
|
.mui-bar-tab-darkly .mui-active { |
|
color: #525ECA !important; |
|
} |
|
|
|
|
|
/** |
|
* 背景的颜色 |
|
*/ |
|
|
|
.app-background-color { |
|
background: #FFFFFF !important; |
|
} |
|
|
|
|
|
/** |
|
* 字体的颜色 |
|
*/ |
|
|
|
.app-text-color { |
|
color: #FFFFFF !important; |
|
} |
|
|
|
.app-text-warning-color { |
|
/*警告*/ |
|
color: #999999 !important; |
|
} |
|
|
|
|
|
/** |
|
* 列表的颜色 |
|
*/ |
|
|
|
.app-table-view-darkly { |
|
background: #FFFFFF; |
|
} |
|
|
|
.app-table-view-darkly * { |
|
color: #333333; |
|
} |
|
|
|
.app-table-view-darkly .mui-active { |
|
background-color: #EEEEEE !important; |
|
overflow: hidden; |
|
} |
|
|
|
.app-table-view-darkly .mui-table-view-cell { |
|
background:#FFFFFF; |
|
} |
|
|
|
/*.app-table-view-darkly .mui-table-view-cell:active { |
|
opacity: 0.8; |
|
}*/ |
|
|
|
.app-cell-invalid { |
|
opacity: 1 !important; |
|
} |
|
|
|
|
|
/** |
|
* input 的颜色 |
|
*/ |
|
|
|
.app-input-darkly { |
|
background: #FFFFFF !important; |
|
border: 1px solid #FFFFFF !important; |
|
border-radius: 0.2rem !important; |
|
color: #333333 !important; |
|
} |
|
|
|
.app-input-darkly::-webkit-input-placeholder { |
|
color: #666666; |
|
} |
|
|
|
|
|
/** |
|
* input 组的颜色 |
|
*/ |
|
|
|
.app-input-group-darkly { |
|
border: 0px; |
|
} |
|
|
|
.app-input-group-darkly .app-input-group-text .app-group-right-text { |
|
border: none; |
|
color: #BBBBBB; |
|
} |
|
|
|
.app-input-group-darkly .app-input-group-text .app-group-right-text .mui-icon { |
|
color: #666666; |
|
line-height: 1rem; |
|
} |
|
|
|
.app-input-group-darkly .app-input-row-list { |
|
/*border: 1px solid #DDDDDD !important;*/ |
|
border-top: 1px solid #EEEEEE !important; |
|
border-bottom: 1px solid #EEEEEE !important; |
|
} |
|
.app-input-group-darkly .app-input-row-list:nth-child(1){ |
|
|
|
border-top: none !important; |
|
} |
|
|
|
.app-input-group-darkly .app-input-row-list, |
|
.app-input-group-darkly .app-input-row-list .app-input-group-text { |
|
background: #FFFFFF; |
|
border: 0; |
|
} |
|
|
|
.app-input-group-darkly .app-input-row-list * { |
|
color: #333333 !important; |
|
} |
|
|
|
|
|
.app-input-group-darkly .app-input { |
|
background: none; |
|
} |
|
|
|
.app-input-group-darkly .app-input::-webkit-input-placeholder { |
|
font-size:12px; |
|
color:rgba(102,102,102,0.3); |
|
|
|
|
|
} |
|
|
|
.app-textarea-darkly { |
|
color: #000000; |
|
background: #EFEFF6; |
|
} |
|
|
|
|
|
|
|
/** |
|
* 按钮的颜色风格 |
|
*/ |
|
|
|
.app-btn-darkly { |
|
color: white; |
|
width: 100%; |
|
border-radius: 2.4rem; |
|
font-size: 0.3rem; |
|
height: 0.8rem; |
|
margin-top: 1rem; |
|
background:#D43436; |
|
border-radius:.06rem; |
|
border: 1px solid #D43436; |
|
|
|
} |
|
|
|
.app-btn-darkly:active { |
|
opacity: 0.8; |
|
border: 1px solid #FF927D !important; |
|
background: #FF927D !important; |
|
} |
|
|
|
|
|
/** |
|
* tab 选项卡头部颜色 |
|
*/ |
|
|
|
.app-scroll-darkly .mui-control-item { |
|
color: #DDDDDD !important; |
|
} |
|
|
|
.app-scroll-darkly .mui-active { |
|
background: #525ECA !important; |
|
border-radius: 0.1rem; |
|
} |
|
|
|
|
|
/** |
|
* 助记词颜色 |
|
*/ |
|
|
|
.app-text-block-content-darkly { |
|
background: #262949; |
|
border: #191C2F; |
|
} |
|
|
|
.app-text-block-content-darkly-group { |
|
background: none; |
|
border: none; |
|
padding: 0; |
|
margin-left: -0.1rem; |
|
} |
|
|
|
.app-text-block-content-darkly-group .app-text-block { |
|
border: 1px solid #191C2F; |
|
background: #262949; |
|
border-radius: 0.2rem; |
|
padding: 0.2rem 0.15rem; |
|
margin-bottom: 0.1rem; |
|
margin-left: 0.1rem; |
|
} |
|
|
|
.app-text-block-content-darkly-group .app-active { |
|
background: #525ECA !important; |
|
color: white !important; |
|
} |
|
|
|
|
|
/*开关颜色*/ |
|
|
|
.app-switch.mui-active { |
|
background: #525ECA !important; |
|
} |
|
|
|
.app-switch { |
|
background: #262949; |
|
} |