examTeamApp/scss/common.scss

1376 lines
22 KiB
SCSS

*{
font-family: "Microsoft YaHei";
}
page{
font-size: 30rpx;
}
.text_l{
text-align: left;
}
.text_r{
text-align: right !important;
}
.text_c{
text-align: center;
}
.f-r{
float: right !important;
}
.bgfff{
background: #fff !important;
}
.red{
color:#f5222d
}
.c666{
color: #666 !important;
}
.c999{
color: #999 !important;
}
.cyello{
color: #FEC407 !important;
}
.cblue{
color: #477EFF !important;
}
.size12 {
font-size:28rpx !important
}
.size14 {
font-size: 32rpx !important
}
.size16 {
font-size: 36rpx !important
}
.size18 {
font-size: 40rpx !important
}
.size20 {
font-size: 44rpx !important
}
.size26{
font-size: 52rpx !important
}
.mt-5 {
margin-top: 5px !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mt-15 {
margin-top: 15px !important;
}
.mb-5 {
margin-bottom: 5px !important;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mr-5 {
margin-right: 5px !important;
}
.mr-10 {
margin-right: 10px !important;
}
.ml-5 {
margin-left: 5px !important;
}
.ml-10 {
margin-left: 10px !important;
}
.ml-15 {
margin-left: 15px !important;
}
.orangeBtn {
color: #fa8c16;
background: #fff7e6;
border: 1px solid #ffd591;
padding: 5px 8px;
border-radius: 5px;
}
.blueBtn {
color: #1890ff;
background: #dbebf9;
border: 1px solid #8cc8ff;
padding: 5px 8px;
border-radius: 5px;
}
.redBtn {
color: #f5222d;
background: #fff1f0;
border: 1px solid #ffa39e;
}
.bold {
font-weight: bold;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box_shadow {
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
}
.border-bottom {
border-bottom: 1px solid #f7f7f7;
}
.borderR {
border-right: 1px solid #f7f7f7;
}
.nolist {
padding:50px 15px;
width: calc(100% - 30px);
text-align: center;
image {
width: 150px;
height: 150px;
}
text {
display: block;
width: 100%;
margin-top: 15px;
text-align: center;
color: #999;
}
}
.btn {
text-align: center;
color: #fff;
height: 35px;
line-height: 35px;
border-radius: 10px;
}
.endtext {
text-align: center;
font-size: 32rpx;
color: #999;
padding: 15px 0;
}
//
.groupBtn {
display: flex;
.del {
color: $btncolor !important;
background-color: #ffe4b8 !important;
}
.btn {
background-color: $btncolor;
width: 45%;
margin: 10px auto 15px;
text-align: center;
height: 36px;
line-height: 36px;
border-radius: 10px;
color: #fff;
}
}
//
.wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999;
.bg {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 99;
}
// 左侧
.wrapper_box {
width: 220px;
background-color: #fff;
z-index: 1000;
position: absolute;
height: 100vh;
.top {
width: 100%;
height: 200rpx;
color: #fff;
text-align: center;
background: $maincolor;
.image1 {
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
margin-bottom: 16rpx;
}
view {
width: 100%;
display: block;
text-align: center;
margin: auto;
}
}
.drawerList {
position: relative;
top: 0;
left: 0;
flex-direction: column;
flex: 1;
justify-content: flex-end;
margin-bottom: 20rpx;
width: 220px;
height: calc(100vh - 100px);
overflow-y: scroll;
.drawerList_item {
background: #f7f7f7;
margin: 10px;
padding: 8px 8px 0;
border-radius: 10px;
display: flex;
justify-content: space-between;
.image1 {
width: 45px;
height: 45px;
border-radius: 50%;
margin-right: 10px;
}
.overflow {
font-size: 32rpx;
color: #333;
}
.right {
width: 70%;
.dangqian {
font-size:28rpx;
color: #fff;
padding: 1px 5px;
background-color: $textcolor;
text-align: center;
width: auto;
margin-left: 10px;
width: auto;
display: inline-block;
float: right;
height: 15px;
line-height: 15px;
border-radius: 3px;
}
.toggle {
background-color: #999;
}
}
.info {
height: 30px;
line-height: 30px;
view {
float: left;
margin-right: 10px;
font-size:28rpx;
color: #999;
}
}
.name {
width: 100%;
display: flex;
justify-content: space-between;
.overflow {
width: 60%;
}
}
}
.add {
margin: 15px;
background: $btncolor;
color: #fff;
height: 30px;
text-align: center;
font-size: 56rpx;
line-height: 30px;
border-radius: 20px;
}
}
}
// 弹框
.edit {
width: 15rem;
height: auto;
background: #eee;
border-radius: 10px;
padding: 15px;
position: relative;
top: 15%;
margin: auto;
z-index: 99999;
overflow: hidden;
.title {
text-align: center;
width: 100%;
color: #333;
font-size: 36rpx;
font-weight: bold;
}
.editem {
position: relative;
display: flex;
font-size: 32rpx;
border-radius: 10px;
margin-top: 15px;
height: 40px;
justify-content: space-between;
background: #fff;
padding: 0px 10px;
align-items: center;
.radioimg {
font-size: 44rpx;
color: $btncolor;
}
.radio {
width: 50%;
text-align: right;
display: flex;
justify-content: center;
align-items: center;
}
.name {
width: 4rem;
color: #333;
}
.right {
width: 60%;
height: 40px;
line-height: 40px;
display: flex;
justify-content: flex-end;
input {
margin-right: 10px;
height: 40px;
line-height: 40px;
text-align: right;
}
picker {
width: 100%;
font-size: 36rpx;
justify-content: center;
align-items: center;
view{
text-align: right;
}
}
.uni-input {
position: absolute;
right: 30px;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
text-align: right;
z-index: 9999;
}
}
.value {
position: relative;
z-index: 999;
width: 3rem;
text-align: center;
float: left;
margin-right: 10px;
}
.iconfont {
margin-left: 10px;
float: right;
display: flex;
}
}
.tips {
font-size:28rpx;
color: #999;
text-align: center;
margin-top: 15px;
margin-bottom: 20px;
display: flex;
}
}
}
.visible {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: rgba(0, 0, 0, 0.6);
.groupBtn {
height: 50px;
line-height: 50px;
background-color: #fff;
display: flex;
justify-content: space-between;
padding: 0 15px;
border-bottom: 1px solid #dfdfdf;
position: absolute;
left: 0;
right: 0;
bottom: 45%;
z-index: 999;
view {
height: 30px;
line-height: 30px;
padding: 0 10px;
background-color: #dfdfdf;
border-radius: 5px;
margin-top: 10px;
}
.sure {
background-color: $textcolor;
color: #fff !important;
}
}
.picker-view {
width: 100%;
height: 45%;
bottom: 0;
position: absolute;
background-color: #fff;
}
}
.header {
width: 100%;
height: 240rpx;
background: $maincolor;
image {
width: 55px;
height: 55px;
border-radius: 50%;
}
.top {
margin: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 10px;
padding:10px 15px;
height: 160rpx;
.headimg {
width: 55px;
height: 55px;
}
.toggle {
width: 20px;
height: 20px;
}
}
.add {
border: 1px #dfdfdf dashed;
font-size:56rpx;
font-weight: 500;
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 10px;
text-align: center;
}
}
// 趋势
.TrendPage {
padding: 10px 0;
margin-bottom: 15px;
border-radius: 10px;
background-color: #f7f7f7;
.listC {
width: calc(100% - 50px);
padding: 15px;
margin: 0 10px;
display: flex;
border-radius: 10px;
align-items: center;
justify-content: space-around;
background-color: #fff;
view {
position: relative;
}
.active:after {
content: "";
height: 3px;
width: 100%;
position: absolute;
bottom: -5px;
left: 0;
border-radius: 5px;
background: $maincolor;
}
}
.box {
width: calc(100% - 20px);
background-color: #fff;
margin: 10px;
border-radius: 15px;
}
.boxTime {
width: calc(100% - 20px);
border-radius: 10px;
padding: 10px;
text-align: center;
.style {
background: $maincolor;
color: #fff;
}
.iconfont {
font-size: 32rpx;
color: #666;
}
}
.boxLine {
display: flex;
flex-wrap: wrap;
border-radius: 10px;
justify-content: space-between;
.line {
clear: both;
width: 100%;
height: auto;
background-color: #fff;
padding-top: 10px;
border-bottom: 10px solid #f7f7f7;
}
}
}
//
.gridList {
padding: 0;
display: flex;
flex-wrap: wrap;
margin: 15px;
width: calc(100%- 30px);
justify-content: space-between;
.info {
width: 100%;
display: flex;
margin-top: 15px;
justify-content: space-between;
.item {
color: #fff;
width: 47.5%;
height: 50px;
background: $maincolor;
text-align: center;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
text {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
display: inline-block;
background-color: #fff;
}
}
}
.data {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
color: #666;
margin-top: 15px;
width: 100%;
.item {
width: 47.5%;
text-align: center;
font-size: 32rpx;
line-height: 30px;
background: #fff;
padding: 10px 0;
border-radius: 15px;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.val {
display: flex;
align-items: center;
font-size: 40rpx;
font-weight: 700;
justify-content: center;
color: #666;
text {
font-size: 32rpx;
font-weight: 500;
display: block;
margin-top: 3px;
margin-left: 3px;
}
}
.image{
width: 40px;
height: 40px;
border-radius: 50%;
image {
width: 70%;
height: 70%;
margin: 15%;
}
}
.name {
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
}
}
//
.skiptop {
background: $maincolor;
border-radius: 10px;
margin: 0 15px 10px;
font-size: 32rpx;
padding: 20px 10px 5px;
color: #fff;
.status {
float: right;
margin-bottom: 25px;
width: auto;
color: #333;
background-color: #fff;
border-radius: 10px;
padding:8px 10px;
display: flex;
align-items: center;
// text {
// width: auto;
// color: #333;
// background-color: #fff;
// border-radius: 10px;
// padding: 8px 10px;
// }
}
.item {
width: 100%;
display: flex;
justify-content: space-between;
text {
display: block;
width: 100%;
font-size: 36rpx;
text-align: center;
margin-top: 10px;
}
}
}
// 首页卡片
.indexCarList {
.box {
margin: 15px 10px 0;
padding: 15px 10px 10px;
background-color: #fff;
width: calc(100% - 40px);
display: flex;
border-radius: 10px;
}
.card {
flex-wrap: wrap;
.title {
width: 100%;
color: #666;
display: flex;
padding-bottom: 5px;
align-items: center;
justify-content: space-between;
.time{
display: flex;
font-size: 28rpx;
align-items: center;
}
.name2 {
font-size: 36rpx;
font-weight: bold;
margin-right: 10px;
color: #333;
}
}
.item {
padding: 7px 0;
display: flex;
flex-wrap: wrap;
text-align: center;
.weight {
width: 100%;
text {
font-size: 40rpx !important;
font-weight: bold;
display: inline-block;
}
}
.standardBtn {
width: 40px;
padding: 3px 8px;
border-radius: 8px;
text-align: center;
color: #fff;
font-size: 32rpx;
margin: auto;
background-color: $btncolor;
}
}
.target {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
font-size: 32rpx;
color: $textcolor;
// border-top: 1px solid #f7f7f7;
.targetBtn {
width: auto;
height: 30px;
line-height: 30px;
color: #fff;
border-radius: 10px;
padding: 0 10px;
background: $maincolor;
}
}
.item2 {
width: 50%;
display: flex;
flex-wrap: wrap;
margin: 15px 0;
.name {
display: inline-block;
width: 100%;
}
}
}
.small {
width: calc(50% - 40px);
float: left;
margin-bottom: 15px;
.title {
.name {
display: flex;
flex-wrap: wrap;
text {
width: 80%;
margin-bottom: 5px;
display: inline-block;
}
}
}
.item {
justify-content: center;
}
}
.setcard {
width: calc(100% - 20px);
text-align: center;
height: 40px;
line-height: 40px;
margin: 10px;
border-radius: 10px;
color: $textcolor;
background-color: #fff;
}
}
// 报告页
//选择对比
.calendar{
background: #f7f7f7;
min-height: 100vh;
.box {
margin-bottom: 305px;
padding-bottom: 210px;
}
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 15px;
align-items: center;
.item {
width: 100%;
height: auto;
background: #fff;
display: flex;
height: 40px;
justify-content: space-between;
padding: 10px 15px;
border-radius: 10px;
align-items: center;
text-align: center;
font-size: 36rpx;
font-weight: 700;
view {
width: 32%;
}
image {
width: 25px;
height: 25px;
}
text {
width: 100%;
font-size:28rpx;
display: block;
color: #666;
text-align: center;
font-weight: 400;
}
.check {
width: 35px !important;
.icon-kongradio {
font-size: 44rpx;
color: #999;
}
.icon-radio {
font-size: 44rpx;
color: #FCA82D;
}
}
}
}
.time {
width: 100%;
font-size: 32rpx;
color: #666;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text {
font-size: 32rpx;
margin-top: 3px;
}
}
.bottom {
margin: 0;
width: auto;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 9;
padding: 0 10px 10px;
background: #fff;
border-radius: 0;
border-top: 1px solid #dfdfdf;
.btn {
width: auto;
margin: 10px 0 0;
background: $maincolor;
}
.list {
margin: 10px 0;
height: 120rpx;
position: relative;
.item {
background: #F7F7F7;
}
.time {
float: left;
text-align: center;
justify-content: center;
color: #fea82d;
font-weight: 700;
width: 35%;
}
.check {
position: absolute;
right: -5px;
top: -5px;
width: 25px;
.icon-quxiao {
font-size: 40rpx;
color: #999;
}
}
}
}
.pkclass {
position: absolute;
width: 30px;
height: 30px;
background: #fea82d;
border-radius: 50%;
line-height: 27px;
text-align: center;
color: #fff;
font-size: 40rpx;
left: 30px;
top: 120rpx;
}
.btn.active {
border: none;
color: #333 !important;
background: #dfdfdf !important;
display: block;
border-radius: 10px;
}
}
// 对比详情
.pkconp {
background: #f7f7f7;
padding: 15px 0;
min-height: 100vh;
.headerTop {
text-align: center;
background: #fff;
padding: 15px 15px 10px;
margin:0 15px;
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
position: relative;
.name {
text-align: left;
}
image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
margin-right: 15px;
}
.right{
width: calc(100% - 140rpx);
}
.top {
width: 100%;
display: flex;
height: 30px;
line-height: 30px;
color: #999;
margin-top: 15px;
font-size: 30rpx;
}
}
.box {
background: #ffff;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding-top: 15px;
margin: 15px;
font-size:15px;
border-radius: 0 0 10px 10px;
.item {
text-align: center;
color: #999;
width: 33.3%;
line-height: 26px;
border-right: 1px solid #f7f7f7;
box-sizing: border-box;
view {
font-size: 40rpx;
font-weight: 700;
color: #666;
}
}
}
.control {
background: #fff;
margin: 15px;
display: flex;
border: 1px solid #F0F0F0;
border-radius: 10px;
flex-wrap: wrap;
justify-content: space-between;
.title {
width: 100%;
margin: 10px;
display: flex;
justify-content: space-between;
view {
width: 25%;
text-align: center;
}
// .name {
// width: 30%;
// }
}
.li {
display: flex;
margin: 0 10px;
justify-content: space-between;
height: 54px;
border-top: 1px solid #eee;
align-items: center;
width: 100%;
.name {
width: 25%;
display: flex;
font-size: 32rpx;
align-items: center;
image {
width: 20px;
height: 20px;
margin-right: 5px;
}
}
.num {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
image {
width: 40rpx;
height: 40rpx;
}
}
.f,
.f0 {
width: 25%;
text-align: center;
text {
display: block;
width: 100%;
color: #999999;
font-size:28rpx;
}
}
.f0 {
text {
font-size:28rpx;
}
}
}
}
.time {
border-top: 1px solid #f0f0f0;
width: 100%;
height: 40px;
line-height: 40px;
padding:0 10px;
display: flex;
align-items: center;
justify-content: space-between;
view {
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
}
}
.boxTime{
background: #fff;
margin: 15px;
display: flex;
border-radius: 10px;
flex-wrap: wrap;
align-items: center;
padding:0 10px;
height: 50px;
line-height: 50px;
justify-content: space-between;
view {
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
}
}
}
// 测量也
.weightPages {
.text {
width: 100%;
text-align: center;
font-size: 36rpx;
margin-top: 20px;
color: $textcolor;
}
.title {
width: 100%;
text-align: center;
height: 45px;
line-height: 45px;
font-size: 36rpx;
font-weight: bold;
}
.image {
text-align: center;
image {
width: 200px;
height: 200px;
margin: auto;
margin-top: 20px;
}
}
.tips {
width: auto;
margin-top: 25px;
padding-left: 20px;
line-height: 30px;
font-size:28rpx;
color: #999;
text {
display: block;
}
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
.Blue {
width: 75%;
padding: 15px;
background: #fff;
z-index: 999;
border-radius: 5px;
text-align: center;
line-height: 30px;
.h4 {
font-size: 36rpx;
font-weight: 700;
margin-bottom: 10px;
}
.Blue-box {
display: flex;
align-items: center;
text-align: left;
height: 40px;
line-height: 40px;
margin-bottom: 15px;
text {
font-size: 36rpx;
font-weight: 700;
margin: 0 5px;
color: $textcolor;
}
}
input {
width: 85px;
background: #f7f7f7;
padding: 7px 5px;
margin-right: 10px;
border-radius: 5px;
}
}
.Blue-btn {
width: 45%;
background: $textcolor;
border-radius: 5px;
font-size: 32rpx;
margin-top: 10px;
margin-bottom: 5px;
height: 35px;
line-height: 35px;
float: right;
color: #fff;
}
.Blue-close {
background: #dfdfdf !important;
float: left !important;
color: #333;
}
}
.btnGroup {
width: 100%;
display: flex;
.btnClose,
.baocun {
width: 150px;
background-color: $textcolor;
border: 1px solid #f7f7f7;
color: #fff;
text-align: center;
padding: 7px;
border-radius: 10px;
margin: 15px auto;
}
.btnClose {
background-color: #dfdfdf;
color: #fff;
}
}
}