hz-zhhq-app/common/css/common.css

925 lines
15 KiB
CSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@charset "UTF-8";
/*
常用色
#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: 20.72upx;
}
.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: 94upx;
min-height: 94upx;
line-height: 94upx;
background: #348cf2;
display: flex;
align-items: center;
flex-direction: row;
background: none;
background-image: linear-gradient(to right, #eafdf9, #daf1fc);
justify-content: space-between;
background-image: none;
background-color: #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: 31.598upx;
color: #fff;
/* height: 100%; */
/* color: #0e1a24; */
color: #0e1a24;
position: absolute;
right: 50%;
transform: translateX(50%);
}
.header .nav-btn {
height: 100%;
width: 94upx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
color: #0e1a24;
font-size: 28.0016upx;
flex-grow: 1;
text-align: center;
/* font-size: 0.36*37*2upx; */
font-size: 31.598upx;
color: #fff;
/* color: #0e1a24; */
color: #0e1a24;
height: 52%;
width: 32%;
display: flex;
justify-content: center;
align-items: start;
position: relative;
}
.header .nav-btn {
height: 100%;
width: 91.908upx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
color: #0e1a24;
font-size: 28.0016upx;
}
.header .btnH {
color: #0e1a24;
}
.header .nav-btn .left_btn {
width: 38upx;
height: 36upx;
position: absolute;
left: 15px;
}
.navRight img {
width: 44.4upx;
height: 44.4upx;
margin-left: 23.9982upx;
width: 17.76upx;
margin: 0;
}
.navRight img {
width: 44.4upx;
height: 44.4upx;
margin-left: 23.9982upx;
}
.header .btn-headerBai {
color: #0e1a24;
}
.header .icons {
padding-right: 44.4upx;
}
.bodyA .header .rightBtn {
position: absolute;
right: 15px;
height: 88upx;
}
.bodyA .header .rightBtn img {
width: 44.4upx;
height: 44.4upx;
/* margin-left: 14.8upx;
padding-right: 44.4upx; */
}
.bodyA .header .rightBtn img {
width: 44.4upx;
height: 44.4upx;
/* margin-left: 14.8upx; */
}
.hzIndex {
position: relative;
width: 100%;
/* overflow: hidden; */
min-height: 100vh;
/* overflow-y: hidden; */
border: 1px solid #def1f5;
background-color: #F6F9FF;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('@/static/pageBack.png') !important;
padding-top: 88upx;
}
.foodIndex {
position: relative;
width: 100%;
/* overflow: hidden; */
min-height: 100vh;
border: 1px solid #def1f5;
background-color: #def1f5;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('@/static/img/foodBack.png') !important;
padding-top: 88upx;
}
.hzContent {
/* flex-grow: 1;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 88upx); */
}
.hzContent .footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer {
background: #fff;
padding: 22.2upx 32.56upx 22.2upx 32.56upx;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9;
}
.indexFooter {
display: flex;
text-align: center;
color: #97a5b1;
border-radius: 37upx 37upx 0 0;
background: #fff;
padding: 22.2upx 32.56upx 22.2upx 32.56upx;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 9;
}
.indexFooter {
display: flex;
text-align: center;
color: #97a5b1;
border-radius: 37upx 37upx 0 0;
}
.indexFooter .footerTab {
flex: 1;
}
.indexFooter .footerAct {
color: #409ffd;
}
.footerTab .icon {
font-size: 44.4upx;
}
.footerTab .tabName {
/* font-size: .32*37*2upx; */
font-size: 28.12upx;
}
.footerTab .tabName {
/* font-size: .32*37*2upx; */
font-size: 28.12upx;
}
/* 老布局优化 */
.updateContent {
/* 老页面主体容器 标题dom记得加类 header */
/* margin-top: 88.8upx !important; */
position: fixed;
width: 100%;
height: 100%;
}
.noData {
text-align: center;
color: #ccc;
font-size: 25.16upx;
}
.conts {
width: 100%;
height: 100%;
position: fixed;
top: 96.2upx;
z-index: 9999;
/* 老页面主体容器 标题dom记得加类 header */
margin-top: 88.8upx !important;
position: fixed;
width: 100%;
height: 100%;
}
.noData {
text-align: center;
color: #ccc;
font-size: 25.16upx;
}
.conts {
width: 100%;
height: 100%;
position: fixed;
top: 96.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; */
}
uni-page-wrapper {
background-color: #f2f6fa;
}
.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: 88.0008upx !important;
line-height: 88.0008upx !important;
font-size: 31.9976upx !important;
text-align: center !important;
color: #fff !important;
border-radius: 14.8upx !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: 25.9upx;
font-size: 31.9976upx;
font-weight: bold;
margin-bottom: 25.16upx;
color: #0e1a24;
}
.modeTitle::after {
content: "";
box-sizing: content-box;
width: 11.1upx;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(#83e3b7, #8fb8ec);
border-radius: 22.2upx;
}
.modeTitle .tips {
font-size: 28.0016upx;
color: #97A5B1;
font-weight: normal;
margin-left: 12.0028upx;
}
.mIcon {
padding-left: 44.0004upx;
}
.mIcon::after {
width: 36.001upx;
height: 36.001upx;
background-image: url("@/static/fei.png");
background-repeat: no-repeat;
background-size: 100% 100%;
top: 1.998upx;
position: relative;
padding-left: 25.9upx;
font-size: 31.9976upx;
font-weight: bold;
margin-bottom: 25.16upx;
color: #0e1a24;
}
.modeTitle::after {
content: "";
box-sizing: content-box;
width: 11.1upx;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: linear-gradient(#83e3b7, #8fb8ec);
border-radius: 22.2upx;
}
.modeTitle .tips {
font-size: 28.0016upx;
color: #97A5B1;
font-weight: normal;
margin-left: 12.0028upx;
}
.mIcon {
padding-left: 44.0004upx;
}
.mIcon::after {
width: 36.001upx;
height: 36.001upx;
background-image: url("@/static/fei.png");
background-repeat: no-repeat;
background-size: 100% 100%;
top: 1.998upx;
}
/* 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: 20.72upx 0;
}
.vanDialog .dialogContent {
padding: 32.56upx 22.2upx;
text-align: center;
background-image: linear-gradient(to right, #56cc9d, #04aea5);
color: #fff;
padding: 20.72upx 0;
}
.vanDialog .dialogContent {
padding: 32.56upx 22.2upx;
}
.vanDialog .van-cell {
padding: 0;
}
.vanDialog .van-field__body input {
border-radius: 14.8upx;
padding: 0 14.8upx;
}
/* 加载动画 */
.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: 88.8upx;
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: 29.6upx;
}
.maskTm img {
margin-top: 40%;
width: 19%;
}
.maskTm span {
font-size: 29.6upx;
}
/**************** 重置样式 ****************/
/* van-popup 样式重置 */
.popMode {
height: 799.2upx;
}
.popMode .title {
padding: 44.4upx 29.6upx;
font-size: 35.52upx;
font-weight: bold;
display: flex;
align-items: center;
}
.popMode .title .icona {
margin-left: auto;
font-size: 44.4upx;
margin-top: 7.4upx;
}
.popMode .popSure {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to right, #56cc9d, #04aea5);
z-index: 99;
margin: 0 44.4upx;
padding: 22.2upx 0;
text-align: center;
color: #fff;
border-radius: 15.9988upx;
margin-bottom: 37upx;
font-size: 28.0016upx;
height: 799.2upx;
}
.popMode .title {
padding: 44.4upx 29.6upx;
font-size: 35.52upx;
font-weight: bold;
display: flex;
align-items: center;
}
.popMode .title .icona {
margin-left: auto;
font-size: 44.4upx;
margin-top: 7.4upx;
}
.popMode .popSure {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to right, #56cc9d, #04aea5);
z-index: 99;
margin: 0 44.4upx;
padding: 22.2upx 0;
text-align: center;
color: #fff;
border-radius: 15.9988upx;
margin-bottom: 37upx;
font-size: 28.0016upx;
}
/* vantUpdateImg 组件 */
.van-uploader__upload {
border-radius: 20.0022upx;
overflow: hidden;
background: #f2f6fa;
}
/* vant-field 样式 */
.van-cell .van-field__label {
margin-right: 7.4upx;
color: #4b5b68;
font-size: 28.0016upx;
}
.van-field__control {
color: #0e1a24;
}
input::-webkit-input-placeholder {
color: #bdc4d2 !important;
}
/* vant textarea 边框 */
.borderA .van-field__value {
box-sizing: border-box;
border-radius: 14.8upx;
padding: 14.8upx;
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: 14.0008upx 31.9976upx;
}
/* 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: 31.82upx;
}
/* vant 搜索组件重置 */
.searchMode .van-search {
padding: 23.68upx 47.9964upx;
}
.van-search .van-cell {
align-items: center;
}
.van-search__content {
border-radius: 222upx !important;
background-color: #f2f5fa !important;
height: 67.34upx !important;
}
.van-search input[type=search] {
background-color: #f2f5fa;
text-align: left;
font-size: 28.12upx;
margin-right: 75.998upx;
border-radius: 222upx;
background-color: #f2f5fa;
height: 67.34upx;
}
.van-search input[type=search] {
background-color: #f2f5fa;
text-align: left;
font-size: 28.12upx;
margin-right: 75.998upx;
}
.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;
}
/* 提交按钮样式 */
.sub_btn0 {
height: 90upx;
line-height: 90upx;
text-align: center;
background: #7ae5bc;
font-size: 36upx;
/* position: fixed;
bottom: 0; */
width: 100%;
}
.sub_btn0 text {
color: #ffffff;
opacity: 0.7;
}
.sub_btn1 {
height: 90upx;
line-height: 90upx;
text-align: center;
background: #00c277;
font-size: 36upx;
position: absolute;
bottom: 0;
width: 100%;
}
.sub_btns1 {
height: 90upx;
line-height: 90upx;
text-align: center;
background: #00c277;
font-size: 36upx;
/* position: absolute;
bottom: 0; */
width: 100%;
color: #fff;
}
.sub_btn1 text {
color: #fff;
}
/* 提交按钮样式 */
.sub_btn2 {
height: 90upx;
line-height: 90upx;
text-align: center;
background: #7ae5bc;
font-size: 36upx;
position: absolute;
bottom: 0;
width: 100%;
}
.sub_btn2 text {
color: #ffffff;
opacity: 0.7;
}
.imgItem {
width: 160upx;
height: 160upx;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f8fa;
border-radius: 20upx;
}
.uploader__preview {
position: relative;
margin: 0 8px;
}
.card-box {
padding: 24upx;
background-color: #fff;
border-radius: 20upx;
}
.required {
color: #FB8107;
font-size: 40upx;
}