武田小程序
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.

210 lines
4.5 KiB

6 months ago
page {
background-color: rgba(246, 246, 246, 1);
}
.page {
padding: 24rpx 32rpx 240rpx;
.card {
margin-bottom: 24rpx;
padding: 0 32rpx;
border-radius: 16rpx;
background-color: #fff;
.row {
padding: 32rpx 0;
display: flex;
border-bottom: 1px solid rgba(224, 224, 224, 0.5);
.label {
flex-shrink: 0;
width: 5em;
font-size: 32rpx;
color: rgba(133, 133, 133, 1);
}
.content {
flex: 1;
font-size: 32rpx;
color: rgba(20, 21, 21, 1);
}
.photo-wrap {
flex: 1;
display: grid;
gap: 24rpx;
grid-template-columns: repeat(2, 1fr);
.photo {
position: relative;
display: block;
width: 100%;
height: 152rpx;
border-radius: 16rpx;
.preview {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4rpx 0;
font-size: 24rpx;
line-height: 32rpx;
text-align: center;
color: rgba(255, 255, 255, 1);
background: rgba(0, 0, 0, 0.57);
}
}
}
&:last-of-type {
border-bottom: none;
}
}
.user {
padding: 30rpx 0;
.avatar {
margin: 0 auto;
display: block;
width: 160rpx;
height: 160rpx;
border-radius: 50%;
}
}
}
.footer {
position: fixed;
bottom: 0;
left: 0;
padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 32rpx);
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.1);
.cancel {
width: 332rpx;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
color: rgba(1, 180, 197, 1);
border-radius: 96rpx 96rpx 96rpx 96rpx;
6 months ago
border: 1px solid #01b4c5;
6 months ago
}
.submit {
width: 330rpx;
height: 88rpx;
text-align: center;
line-height: 88rpx;
font-size: 32rpx;
color: #fff;
background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%);
border-radius: 96rpx;
}
}
}
.dialog {
padding: 56rpx 32rpx;
.d-title {
font-size: 32rpx;
color: rgba(20, 21, 21, 1);
font-weight: bold;
}
.btn1 {
margin-top: 32rpx;
padding: 14rpx;
text-align: center;
background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%);
border-radius: 60rpx 60rpx 60rpx 60rpx;
.title {
font-size: 32rpx;
color: rgba(255, 255, 255, 1);
}
.explanation {
font-size: 22rpx;
color: rgba(255, 255, 255, 1);
}
}
.btn2 {
margin-top: 32rpx;
padding: 12rpx;
text-align: center;
border-radius: 60rpx 60rpx 60rpx 60rpx;
box-sizing: border-box;
border: 1px solid #00b4c5;
.title {
font-size: 32rpx;
color: rgba(0, 180, 197, 1);
}
.explanation {
font-size: 22rpx;
color: rgba(0, 180, 197, 1);
}
}
.cancel {
margin: 32rpx 0 0;
font-size: 32rpx;
line-height: 44rpx;
color: rgba(0, 180, 197, 1);
text-align: center;
}
}
.reject {
background-color: transparent;
.r-badge {
position: relative;
z-index: 1;
display: block;
margin: 0 auto;
width: 152rpx;
height: 152rpx;
}
.r-container {
margin-top: -76rpx;
padding: 78rpx 32rpx 40rpx;
background-color: #fff;
border-radius: 32rpx 32rpx 0 0;
.title {
font-size: 32rpx;
color: rgba(20, 21, 21, 1);
font-weight: bold;
text-align: center;
}
.tip {
margin-top: 32rpx;
font-size: 30rpx;
color: rgba(153, 153, 153, 1);
line-height: 44rpx;
}
.select-wrap {
margin-top: 22rpx;
display: flex;
gap: 24rpx;
flex-wrap: wrap;
.btn {
flex: 1;
padding: 10rpx;
border-radius: 84rpx;
font-size: 32rpx;
color: rgba(133, 133, 133, 1);
line-height: 44rpx;
text-align: center;
box-sizing: border-box;
background-color: rgba(246, 246, 246, 1);
&.active {
color: #fff;
background-color: rgba(0, 180, 197, 1);
}
}
}
.content {
6 months ago
margin-top: 24rpx;
padding: 32rpx;
width: 100%;
min-height: 200rpx;
max-height: 400rpx;
box-sizing: border-box;
border-radius: 16rpx;
background-color: rgba(246, 246, 246, 1);
}
6 months ago
}
}