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.
166 lines
3.5 KiB
166 lines
3.5 KiB
//.body-background{ |
|
// background-color:#f5f5f6; |
|
//} |
|
.wallpaper-container{ |
|
padding:16rpx 26rpx 150rpx 26rpx; |
|
width:100%; |
|
.top-image{ |
|
margin-bottom:40rpx; |
|
} |
|
.time-container{ |
|
padding:4rpx; |
|
background-color:#fff; |
|
.time-main{ |
|
//border-radius: 20rpx; |
|
//background: linear-gradient(180deg, rgba(23, 138, 242, .1) 0%, rgba(23,138,242,0) 100%); |
|
} |
|
.item-img-right{ |
|
padding:4rpx; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
} |
|
.item{ |
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1); |
|
position: relative; |
|
overflow:hidden; |
|
border-radius:20rpx; |
|
.green{ |
|
background: linear-gradient(180deg, rgba(14, 175, 78, .1) 0%, rgba(23,138,242,0) 100%); |
|
} |
|
.blue{ |
|
background: linear-gradient(180deg, rgba(23, 138, 242, .1) 0%, rgba(23,138,242,0) 100%); |
|
} |
|
.orange{ |
|
background: linear-gradient(180deg, rgba(255, 149, 69, .1) 0%, rgba(23,138,242,0) 100%); |
|
} |
|
.red{ |
|
background: linear-gradient(180deg, rgba(255, 100, 82, .1) 0%, rgba(23,138,242,0) 100%); |
|
} |
|
.title-item{ |
|
&.green{ |
|
background: rgba(14, 175, 78, 1); |
|
} |
|
&.blue{ |
|
background:rgba(23, 138, 242, 1); |
|
} |
|
&.orange{ |
|
background: rgba(255, 149, 69, 1); |
|
} |
|
&.red{ |
|
background: rgba(255, 100, 82, 1); |
|
} |
|
|
|
padding:4rpx 20rpx; |
|
transform: skewX(-15deg); |
|
border-radius: 8rpx; |
|
.title-content{ |
|
transform: skewX(15deg); |
|
} |
|
} |
|
.content-body{ |
|
align-items:center; |
|
.title-time-item{ |
|
margin-right:16rpx; |
|
&.back{ |
|
border-radius: 8rpx; |
|
padding:10rpx; |
|
background:#FF9545; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.info-container{ |
|
.info-title{ |
|
margin-top:92rpx; |
|
margin-bottom:66rpx; |
|
} |
|
.info-item{ |
|
margin-bottom:50rpx; |
|
.label{ |
|
width:160rpx; |
|
} |
|
} |
|
} |
|
.remark-container{ |
|
.remark-title{ |
|
margin-top:92rpx; |
|
margin-bottom:66rpx; |
|
} |
|
} |
|
.line-container{ |
|
.line-title{ |
|
margin-top:92rpx; |
|
margin-bottom:66rpx; |
|
} |
|
.line-body{ |
|
.line-item{ |
|
width:100%; |
|
.line{ |
|
flex:0 0 32rpx; |
|
height:auto; |
|
background-color: rgba(255, 149, 69, 0.2); |
|
.line-icon{ |
|
padding-top:10rpx; |
|
} |
|
} |
|
.body{ |
|
padding-left:12rpx; |
|
//flex:0 0 666rpx; |
|
.content{ |
|
//max-width:666rpx; |
|
width:100%; |
|
padding-bottom:50rpx; |
|
} |
|
} |
|
&:first-of-type{ |
|
//background-color:red; |
|
.line{ |
|
border-top-left-radius: 16rpx; |
|
border-top-right-radius: 16rpx; |
|
} |
|
} |
|
&:last-of-type{ |
|
.line{ |
|
border-bottom-left-radius: 16rpx; |
|
border-bottom-right-radius: 16rpx; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.foot-button{ |
|
border-top:2rpx solid #EEEEEE; |
|
padding:10rpx 26rpx 40rpx 26rpx; |
|
position: fixed; |
|
bottom:0; |
|
left:0; |
|
z-index: 9999; |
|
width: 100%; |
|
background: { |
|
color:#FFFFFF; |
|
}; |
|
justify-content: space-between; |
|
.button-group{ |
|
display:flex; |
|
.button{ |
|
width:500rpx; |
|
padding:22rpx 40rpx; |
|
border-radius: 40rpx; |
|
&.phone{ |
|
background-color:#80C5B6; |
|
display: flex; |
|
margin-right:16rpx; |
|
} |
|
&.exchange{ |
|
background-color:#FF9545; |
|
} |
|
&.gray{ |
|
background-color:#f1f1f1; |
|
} |
|
|
|
} |
|
} |
|
} |