634 lines
10 KiB
SCSS
634 lines
10 KiB
SCSS
/*
|
||
常用色
|
||
#fc7900 橙
|
||
#348cf2 蓝
|
||
#00a79f 绿
|
||
#0e1a24 文字黑
|
||
#97A5B1 文字提示 浅灰 置灰色
|
||
linear-gradient(to right, #56cc9d, #04aea5) 渐变绿
|
||
linear-gradient(to right, #eafdf9, #daf1fc) 渐变灰白蓝
|
||
*/
|
||
|
||
/* ps： 默认布局 请使用template模板 大部分常量类已定义 这里不再说明 */
|
||
/*
|
||
自创类
|
||
- 模块标题 .modeTitle 自定义前icon添加.mIcon 自定义+类 举个栗子=>medicalAssistant_stat
|
||
- 必填项小星星 .required
|
||
- 搜索框 .searchMode > van-search 举个栗子=>indexTab_message
|
||
|
||
组件类
|
||
- van-dialog 添加类 .vanDialog
|
||
- van-field 添加类 .borderA
|
||
*/
|
||
|
||
/* reset */
|
||
ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
input:focus,
|
||
textarea:focus {
|
||
outline: none;
|
||
}
|
||
|
||
/* 布局 */
|
||
body {
|
||
margin: 0;
|
||
font-size: 0.28*37*2upx;
|
||
}
|
||
|
||
.bodyA {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f2f6fa;
|
||
/* background-image: linear-gradient(to right, #eafdf9, #daf1fc); */
|
||
}
|
||
|
||
.header {
|
||
height: 1.242*37*2upx;
|
||
min-height: 1.242*37*2upx;
|
||
line-height: 1.242*37*2upx;
|
||
background: #348cf2;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
|
||
background: none;
|
||
background-image: linear-gradient(to right, #eafdf9, #daf1fc);
|
||
}
|
||
|
||
.headerBai {
|
||
background: none;
|
||
background-image: linear-gradient(to right, #eafdf9, #daf1fc);
|
||
}
|
||
|
||
.header .btn-header {
|
||
flex-grow: 1;
|
||
text-align: center;
|
||
/* font-size: 0.36*37*2upx; */
|
||
font-size: 0.427*37*2upx;
|
||
color: #fff;
|
||
height: 100%;
|
||
/* color: #0e1a24; */
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.header .nav-btn {
|
||
height: 100%;
|
||
width: 1.242*37*2upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
color: #0e1a24;
|
||
margin-right: .2162*37*2upx;
|
||
font-size: .3784*37*2upx;
|
||
}
|
||
|
||
.header .btnH {
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.header .nav-btn .left_btn {
|
||
width: 0.24*37*2upx;
|
||
margin: 0;
|
||
}
|
||
|
||
.navRight img {
|
||
width: 0.6*37*2upx;
|
||
height: 0.6*37*2upx;
|
||
margin-left: .3243*37*2upx;
|
||
}
|
||
|
||
.header .btn-headerBai {
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.header .icons {
|
||
padding-right: 0.6*37*2upx;
|
||
}
|
||
|
||
.bodyA .header .rightBtn img {
|
||
width: 0.6*37*2upx;
|
||
height: 0.6*37*2upx;
|
||
margin-left: .2*37*2upx;
|
||
}
|
||
|
||
.bodyA .header .rightBtn img:last-child {
|
||
/* margin-right: 1.7*37*2upx; */
|
||
}
|
||
|
||
.content {
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
overflow-y: scroll;
|
||
-webkit-overflow-scrolling: touch;
|
||
/* height: 100%; */
|
||
}
|
||
|
||
.content .footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.footer {
|
||
background: #fff;
|
||
padding: .3*37*2upx .44*37*2upx .3*37*2upx .44*37*2upx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 9;
|
||
}
|
||
|
||
.indexFooter {
|
||
display: flex;
|
||
text-align: center;
|
||
color: #97a5b1;
|
||
border-radius: .5*37*2upx .5*37*2upx 0 0;
|
||
}
|
||
|
||
.indexFooter .footerTab {
|
||
flex: 1;
|
||
}
|
||
|
||
.indexFooter .footerAct {
|
||
color: #409ffd;
|
||
}
|
||
|
||
.footerTab .icon {
|
||
font-size: .6*37*2upx;
|
||
}
|
||
|
||
.footerTab .tabName {
|
||
/* font-size: .32*37*2upx; */
|
||
font-size: 0.38*37*2upx;
|
||
}
|
||
|
||
/* 老布局优化 */
|
||
.updateContent {
|
||
/* 老页面主体容器 标题dom记得加类 header */
|
||
margin-top: 1.2*37*2upx !important;
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.noData {
|
||
text-align: center;
|
||
color: #ccc;
|
||
font-size: .34*37*2upx;
|
||
}
|
||
|
||
.conts {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 1.3*37*2upx;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.updateFotter {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
}
|
||
|
||
/* 分割线 */
|
||
.splitLine {
|
||
background-color: #ccc;
|
||
}
|
||
|
||
.splitLineBorderBot {
|
||
border-bottom: 1px solid #ccc;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.splitLineBorder {
|
||
border: 1px solid #ccc;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 按钮
|
||
* btn 基础样式
|
||
* btnDetail 详情 绿
|
||
* btnDel 删除 红
|
||
* btnOp 操作 蓝
|
||
*/
|
||
.btn {
|
||
/* padding: 5px 0;
|
||
color: #000;
|
||
border: 1px solid #000; */
|
||
}
|
||
|
||
.btnDetail {
|
||
background-color: #04be02;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
.btnDel {
|
||
background-color: #ff5151;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
.btnOp {
|
||
background-color: #3d9ff4;
|
||
color: #fff;
|
||
border: none;
|
||
}
|
||
|
||
.footerBtn {
|
||
background-image: linear-gradient(to right, #56cc9d, #04aea5);
|
||
/* margin: .3*37*2upx .44*37*2upx .3*37*2upx .44*37*2upx; */
|
||
height: 1.1892*37*2upx !important;
|
||
line-height: 1.1892*37*2upx !important;
|
||
font-size: .4324*37*2upx !important;
|
||
text-align: center !important;
|
||
color: #fff !important;
|
||
border-radius: .2*37*2upx !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.footerBtnRed {
|
||
background-image: linear-gradient(to right, #ff6000, #ff0000);
|
||
}
|
||
|
||
.footerBtnAct {
|
||
/* 提交按钮置灰 */
|
||
background-image: linear-gradient(to right, #ababab, #ababab);
|
||
}
|
||
|
||
/* 按钮 不通过/取消 */
|
||
.btnCancelA {
|
||
/* 侯总确认取消颜色 */
|
||
background-image: unset !important;
|
||
background-color: #97A5B0 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* 数据状态 */
|
||
.listState1 {
|
||
/* 待审核 */
|
||
color: #2297FD !important;
|
||
background-color: #E9F2FF !important;
|
||
}
|
||
|
||
.listState2 {
|
||
/* 已取消 */
|
||
color: #00ADA6 !important;
|
||
background-color: #e0f6f5 !important;
|
||
}
|
||
|
||
.listState3 {
|
||
/* 已通过 */
|
||
color: #FB8107 !important;
|
||
background-color: #FFF3E7 !important;
|
||
}
|
||
|
||
/* 模块标题 */
|
||
.modeTitle {
|
||
position: relative;
|
||
padding-left: .35*37*2upx;
|
||
font-size: .4324*37*2upx;
|
||
font-weight: bold;
|
||
margin-bottom: .34*37*2upx;
|
||
color: #0e1a24;
|
||
}
|
||
|
||
.modeTitle::after {
|
||
content: "";
|
||
box-sizing: content-box;
|
||
width: .15*37*2upx;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background-image: linear-gradient(#83e3b7, #8fb8ec);
|
||
border-radius: .3*37*2upx;
|
||
}
|
||
|
||
.modeTitle .tips {
|
||
font-size: .3784*37*2upx;
|
||
color: #97A5B1;
|
||
font-weight: normal;
|
||
margin-left: .1622*37*2upx;
|
||
}
|
||
|
||
.mIcon {
|
||
padding-left: .5946*37*2upx;
|
||
}
|
||
|
||
.mIcon::after {
|
||
width: .4865*37*2upx;
|
||
height: .4865*37*2upx;
|
||
background-image: url('@/static/fei.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
top: .027*37*2upx;
|
||
}
|
||
|
||
/* vant-field 必填小星星 添加类名 required */
|
||
.van-cell-group .required .van-cell__title span,
|
||
.cellGroup .required .van-cell__title span {
|
||
position: relative;
|
||
}
|
||
|
||
.van-cell-group .required .van-cell__title span::after,
|
||
.cellGroup .required .van-cell__title span::after {
|
||
position: absolute;
|
||
right: -8px;
|
||
color: #fc7900;
|
||
font-size: 14px;
|
||
content: "*";
|
||
}
|
||
|
||
.van-field__body input {
|
||
border: none;
|
||
}
|
||
|
||
/* vant dialog 弹出框 */
|
||
.vanDialog .titleMode {
|
||
text-align: center;
|
||
background-image: linear-gradient(to right, #56cc9d, #04aea5);
|
||
color: #fff;
|
||
padding: .28*37*2upx 0;
|
||
}
|
||
|
||
.vanDialog .dialogContent {
|
||
padding: .44*37*2upx .3*37*2upx;
|
||
}
|
||
|
||
.vanDialog .van-cell {
|
||
padding: 0;
|
||
}
|
||
|
||
.vanDialog .van-field__body input {
|
||
border-radius: .2*37*2upx;
|
||
padding: 0 .2*37*2upx;
|
||
}
|
||
|
||
/* 加载动画 */
|
||
.loadingBox {
|
||
position: relative;
|
||
display: none;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed !important;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
width: 100%;
|
||
height: calc(100% - 1.2*37*2upx);
|
||
/* color: #fff; */
|
||
/* background-color: rgba(0,0,0,0.5); */
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
margin-top: 1.2*37*2upx;
|
||
|
||
transform: translateZ(1px);
|
||
}
|
||
|
||
.maskTm {
|
||
position: fixed !important;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
width: 100%;
|
||
height: calc(100% - 1.2*37*2upx);
|
||
height: 100%;
|
||
color: #fff;
|
||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||
/* background-color: #fff; */
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
/* margin-top: 1.2*37*2upx; */
|
||
transform: translateZ(1px);
|
||
}
|
||
|
||
.mask img {
|
||
margin-top: 40%;
|
||
width: 19%;
|
||
}
|
||
|
||
.mask span {
|
||
font-size: 0.4*37*2upx;
|
||
}
|
||
|
||
.maskTm img {
|
||
margin-top: 40%;
|
||
width: 19%;
|
||
}
|
||
|
||
.maskTm span {
|
||
font-size: 0.4*37*2upx;
|
||
}
|
||
|
||
/**************** 重置样式 ****************/
|
||
/* van-popup 样式重置 */
|
||
.popMode {
|
||
height: 10.8*37*2upx;
|
||
}
|
||
|
||
.popMode .title {
|
||
padding: .6*37*2upx .4*37*2upx;
|
||
font-size: .48*37*2upx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.popMode .title .icona {
|
||
margin-left: auto;
|
||
font-size: .6*37*2upx;
|
||
margin-top: .1*37*2upx;
|
||
}
|
||
|
||
.popMode .popSure {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-image: linear-gradient(to right, #56cc9d, #04aea5);
|
||
z-index: 99;
|
||
margin: 0 0.6*37*2upx;
|
||
padding: 0.3*37*2upx 0;
|
||
text-align: center;
|
||
color: #fff;
|
||
border-radius: .2162*37*2upx;
|
||
margin-bottom: 0.5*37*2upx;
|
||
font-size: .3784*37*2upx;
|
||
}
|
||
|
||
/* vantUpdateImg 组件 */
|
||
.van-uploader__upload {
|
||
border-radius: .2703*37*2upx;
|
||
overflow: hidden;
|
||
background: #f2f6fa;
|
||
}
|
||
|
||
/* vant-field 样式 */
|
||
.van-cell .van-field__label {
|
||
margin-right: .1*37*2upx;
|
||
color: #4b5b68;
|
||
font-size: .3784*37*2upx;
|
||
}
|
||
|
||
.van-field__control {
|
||
color: #0e1a24;
|
||
}
|
||
|
||
input::-webkit-input-placeholder {
|
||
color: #bdc4d2 !important;
|
||
}
|
||
|
||
|
||
/* vant textarea 边框 */
|
||
.borderA .van-field__value {
|
||
/* border: 1px solid #ccc; */
|
||
box-sizing: border-box;
|
||
border-radius: .2*37*2upx;
|
||
padding: .2*37*2upx;
|
||
background-color: #f2f6fa;
|
||
}
|
||
|
||
/* checkbox 勾选样式 */
|
||
.van-checkbox__icon--checked .van-icon,
|
||
.van-radio__icon--checked .van-icon {
|
||
background-color: #04aea5;
|
||
border-color: #04aea5;
|
||
}
|
||
|
||
/* .van-radio__label {
|
||
color: #0e1a24;
|
||
} */
|
||
|
||
/* .vant-field 默认pla样式 */
|
||
.van-field--error .van-field__control,
|
||
.van-field--error .van-field__control::placeholder {
|
||
/* color: #ccc; */
|
||
}
|
||
|
||
/* 旋转 vant-field is-link 箭头 */
|
||
.van-cell__right-icon {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.van-cell {
|
||
padding: .1892*37*2upx .4324*37*2upx;
|
||
}
|
||
|
||
/* vantTab样式 */
|
||
.van-tabs__line {
|
||
/* background-color: aqua; */
|
||
background-image: linear-gradient(to right, #56cc9d, #04aea5);
|
||
}
|
||
|
||
.van-tab--active {
|
||
color: #04aea5;
|
||
}
|
||
|
||
/* fieldLabel 文字换行 */
|
||
.w40 .van-cell__title {
|
||
width: 40%;
|
||
width: 100%;
|
||
}
|
||
|
||
/* vantToast 轻提示 */
|
||
.van-toast--text .van-toast__text {
|
||
font-size: .43*37*2upx;
|
||
}
|
||
|
||
/* vant 搜索组件重置 */
|
||
.searchMode .van-search {
|
||
padding: 0.32*37*2upx 0.6486*37*2upx;
|
||
}
|
||
|
||
.van-search .van-cell {
|
||
align-items: center;
|
||
}
|
||
|
||
.van-search__content {
|
||
border-radius: 3*37*2upx;
|
||
background-color: #f2f5fa;
|
||
height: .91*37*2upx;
|
||
}
|
||
|
||
.van-search input[type=search] {
|
||
background-color: #f2f5fa;
|
||
text-align: left;
|
||
font-size: .38*37*2upx;
|
||
margin-right: 1.027*37*2upx;
|
||
}
|
||
|
||
.van-field__left-icon .van-icon {
|
||
color: #bdc4d2;
|
||
}
|
||
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed !important;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
width: 100%;
|
||
height: calc(100% - 88upx);
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin-top: 88upx;
|
||
transform: translateZ(1px);
|
||
}
|
||
|
||
.maskTm {
|
||
position: fixed !important;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999;
|
||
width: 100%;
|
||
height: calc(100% - 88upx);
|
||
height: 100%;
|
||
color: #fff;
|
||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
transform: translateZ(1px);
|
||
}
|
||
|
||
.mask image {
|
||
margin-top: 40%;
|
||
width: 140upx;
|
||
height: 140upx;
|
||
}
|
||
|
||
.mask text {
|
||
font-size: 36upx;
|
||
}
|
||
|
||
.maskTm image {
|
||
margin-top: 40%;
|
||
width: 140upx;
|
||
height: 140upx;
|
||
}
|
||
|
||
.maskTm text {
|
||
font-size: 36upx;
|
||
} |