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.
137 lines
2.4 KiB
137 lines
2.4 KiB
|
|
.sub-tit {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.sub-tit image {
|
|
margin-right: 12rpx;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.portrait {
|
|
position: relative;
|
|
width: 633rpx;
|
|
height: 542rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #3A80E7;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.portrait .tag {
|
|
position: absolute;
|
|
background: #f4f8fe;
|
|
padding: 30rpx;
|
|
width: 129rpx;
|
|
height: 129rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.portrait .tag:after {
|
|
content: "";
|
|
display: block;
|
|
width: calc(100% - 28rpx);
|
|
height: calc(100% - 28rpx);
|
|
position: absolute;
|
|
left: 14rpx;
|
|
top: 14rpx;
|
|
background: #d3e3fa;
|
|
border-radius: 50%;
|
|
}
|
|
.portrait .tag .text {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.portrait .tag:nth-of-type(1) {
|
|
padding: 38rpx;
|
|
width: 163rpx;
|
|
height: 163rpx;
|
|
left: 277rpx;
|
|
top: 0;
|
|
}
|
|
.portrait .tag:nth-of-type(2) {
|
|
padding: 24rpx;
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
right: 58rpx;
|
|
top: 101rpx;
|
|
}
|
|
.portrait .tag:nth-of-type(3) {
|
|
width: 145rpx;
|
|
height: 145rpx;
|
|
right: 0rpx;
|
|
top: 249rpx;
|
|
}
|
|
.portrait .tag:nth-of-type(4) {
|
|
width: 163rpx;
|
|
height: 163rpx;
|
|
right: 100rpx;
|
|
bottom: 0;
|
|
}
|
|
.portrait .tag:nth-of-type(5) {
|
|
left: 99rpx;
|
|
bottom: 10rpx;
|
|
}
|
|
.portrait .tag:nth-of-type(6) {
|
|
left: 0rpx;
|
|
top: 251rpx;
|
|
}
|
|
.portrait .tag:nth-of-type(7) {
|
|
left: 53rpx;
|
|
top: 101rpx;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 42rpx;
|
|
background: #F1F6FF;
|
|
border: 1px solid #3A80E7;
|
|
border-radius: 20rpx;
|
|
padding: 25rpx 30rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
.btn image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.bg {
|
|
width: 384rpx;
|
|
height: 348rpx;
|
|
position: absolute;
|
|
left: calc(50% - 192rpx);
|
|
top: calc(50% - 174rpx);
|
|
}
|
|
.bg image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.picker {
|
|
width: 180rpx;
|
|
background: #3A80E7;
|
|
border-radius: 1000rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
padding: 15rpx 21rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.picker image {
|
|
margin-left: 5px;
|
|
}
|