.page { background-color: rgba(255, 255, 255, 1); position: relative; width: 750rpx; height: 100vh; overflow: hidden; .box_1 { width: 750rpx; height: 528rpx; background: url(/static/lanhu_gerenzhongxin/FigmaDDSSlicePNG23ad4eb2f3a9f5f25fa2e6e20762f501.png) 100% no-repeat; background-size: 100% 100%; .box_2 { width: 682rpx; height: 42rpx; margin: 28rpx 0 0 42rpx; .text_1 { width: 108rpx; height: 42rpx; overflow-wrap: break-word; color: rgba(0, 0, 0, 1); font-size: 30rpx; letter-spacing: -0.30000001192092896px; font-family: PingFang SC-Semibold; font-weight: 600; text-align: center; white-space: nowrap; line-height: 30rpx; } .section_1 { background-color: rgba(0, 0, 0, 1); width: 34rpx; height: 22rpx; margin: 8rpx 0 0 438rpx; } .section_2 { background-color: rgba(0, 0, 0, 1); width: 32rpx; height: 22rpx; margin: 8rpx 0 0 10rpx; } .image_1 { width: 50rpx; height: 24rpx; margin: 8rpx 0 0 10rpx; } } .box_3 { background-color: rgba(255, 255, 255, 0.7); border-radius: 16px; height: 64rpx; border: 0.5px solid rgba(231, 231, 231, 1); width: 174rpx; margin: 30rpx 0 0 552rpx; .image-wrapper_1 { width: 40rpx; height: 2rpx; margin: 12rpx 0 0 90rpx; .thumbnail_1 { width: 40rpx; height: 2rpx; } } .box_4 { width: 122rpx; height: 32rpx; margin: 2rpx 0 16rpx 26rpx; .box_5 { background-color: rgba(0, 0, 0, 0.9); width: 36rpx; height: 12rpx; margin-top: 10rpx; } .box_6 { background-color: rgba(0, 0, 0, 0.9); width: 32rpx; height: 32rpx; } } } .box_7 { width: 670rpx; height: 116rpx; margin: 52rpx 0 0 40rpx; .image-text_1 { width: 356rpx; height: 116rpx; .group_1 { background-color: rgba(255, 255, 255, 1); height: 116rpx; width: 116rpx; border-radius: 10rpx; .image-wrapper_2 { background-color: rgba(177, 205, 255, 1); height: 108rpx; width: 108rpx; margin: 4rpx 0 0 4rpx; border-radius: 10rpx; .image_2 { width: 108rpx; height: 108rpx; border-radius: 10rpx; } } } .text-group_1 { width: 216rpx; height: 88rpx; margin-top: 14rpx; .text_2 { width: 162rpx; height: 50rpx; overflow-wrap: break-word; color: rgba(51, 51, 51, 1); font-size: 36rpx; font-family: PingFang SC-Bold; font-weight: 700; text-align: center; white-space: nowrap; line-height: 36rpx; } .text_3 { width: 216rpx; height: 34rpx; overflow-wrap: break-word; color: rgba(198, 198, 198, 1); font-size: 24rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: left; white-space: nowrap; line-height: 34rpx; margin-top: 4rpx; } } } .image-text_2 { width: 72rpx; height: 84rpx; margin-top: 16rpx; .label_1 { width: 52rpx; height: 52rpx; margin-left: 10rpx; } .text-group_2 { width: 72rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(44, 120, 245, 1); font-size: 24rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; margin-top: 8rpx; } } } .box_8 { width: 750rpx; height: 160rpx; background: url(/static/lanhu_gerenzhongxin/FigmaDDSSlicePNGbeeecc6e19c94ee47b8f22fab00fe5eb.png) 100% no-repeat; background-size: 100% 100%; margin-top: 36rpx; .image-wrapper_3 { background-color: rgba(255, 255, 255, 1); border-radius: 50%; height: 80rpx; width: 80rpx; margin: 34rpx 0 0 70rpx; .label_2 { width: 80rpx; height: 80rpx; border-radius:10rpx; } } .text-group_3 { width: 112rpx; height: 72rpx; margin: 34rpx 0 0 30rpx; .text_4 { width: 84rpx; height: 28rpx; overflow-wrap: break-word; color: rgba(21, 52, 102, 1); font-size: 28rpx; font-family: PingFang SC-Semibold; font-weight: 600; text-align: center; white-space: nowrap; line-height: 28rpx; } .text-wrapper_1 { width: 112rpx; height: 24rpx; overflow-wrap: break-word; font-size: 0; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; margin-top: 20rpx; .text_5 { width: 112rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(115, 124, 144, 1); font-size: 24rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; } .text_6 { width: 112rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(253, 123, 82, 1); font-size: 24rpx; font-family: PingFang SC-Semibold; font-weight: 600; text-align: center; white-space: nowrap; line-height: 24rpx; } .text_7 { width: 112rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(115, 124, 144, 1); font-size: 24rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; } } } .text-wrapper_2 { width: 126rpx; height: 24rpx; overflow-wrap: break-word; font-size: 0; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; margin: 82rpx 322rpx 0 30rpx; .text_8 { width: 126rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(115, 124, 144, 1); font-size: 24rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; } .text_9 { width: 126rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(253, 123, 82, 1); font-size: 24rpx; font-family: PingFang SC-Semibold; font-weight: 600; text-align: center; white-space: nowrap; line-height: 24rpx; } } } } .box_9 { width: 750rpx; height: 998rpx; .block_1 { background-color: rgba(241, 244, 255, 1); border-radius: 8px; width: 686rpx; height: 234rpx; justify-content: flex-center; margin: 10rpx 0 0 32rpx; .text_10 { width: 112rpx; height: 28rpx; overflow-wrap: break-word; color: rgba(21, 52, 102, 1); font-size: 28rpx; font-family: PingFang SC-Semibold; font-weight: 600; text-align: center; white-space: nowrap; line-height: 28rpx; margin: 30rpx 0 0 28rpx; } .list_1 { width: 572rpx; height: 116rpx; margin: 30rpx 0 30rpx 64rpx; .image-text_3 { width: 72rpx; height: 116rpx; margin-right: 90rpx; display: flex; /* 使用 flex 布局 */ flex-direction: column; /* 垂直排列子元素 */ align-items: center; /* 水平居中 */ justify-content: center; /* 垂直居中 */ .label_3 { width: 72rpx; height: 72rpx; } .text-group_4 { width: 96rpx; height: 24rpx; overflow-wrap: break-word; color: rgba(51, 51, 51, 1); font-size: 24rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 24rpx; margin-top: 20rpx; } } } } .block_2 { width: 646rpx; height: 56rpx; margin: 50rpx 0 0 52rpx; background-color: #000; .image-wrapper_4 { // background-color: rgba(223, 235, 255, 1); background-color: #aa0000; border-radius: 50%; height: 56rpx; width: 56rpx; .thumbnail_2 { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 12rpx; } } .text_11 { width: 128rpx; height: 32rpx; overflow-wrap: break-word; color: rgba(51, 51, 51, 1); font-size: 32rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: left; white-space: nowrap; line-height: 32rpx; margin: 12rpx 0 0 30rpx; } .thumbnail_3 { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 400rpx; } } .block_3 { width: 646rpx; height: 56rpx; margin: 50rpx 0 0 52rpx; .image-wrapper_5 { background-color: rgba(223, 235, 255, 1); border-radius: 50%; height: 56rpx; width: 56rpx; .thumbnail_4 { width: 36rpx; height: 36rpx; margin: 10rpx 0 0 10rpx; } } .text_12 { width: 128rpx; height: 32rpx; overflow-wrap: break-word; color: rgba(51, 51, 51, 1); font-size: 32rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: left; white-space: nowrap; line-height: 32rpx; margin: 10rpx 0 0 30rpx; } .thumbnail_5 { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 400rpx; } } .block_4 { width: 646rpx; height: 56rpx; margin: 50rpx 0 436rpx 52rpx; display: flex; justify-content: space-between; .image-wrapper_6 { background-color: rgba(223, 235, 255, 1); border-radius: 50%; height: 56rpx; width: 56rpx; .thumbnail_6 { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 12rpx; } } .text_13 { width: 500rpx; height: 32rpx; overflow-wrap: break-word; color: rgba(51, 51, 51, 1); font-size: 32rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: left; white-space: nowrap; line-height: 32rpx; margin: 12rpx 0 0 30rpx; } .thumbnail_7 { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 400rpx; } } } .box_10 { width: 750rpx; height: 100rpx; background: url(/static/lanhu_gerenzhongxin/FigmaDDSSlicePNGba2550a2df50d207f077cf4add11b384.png) 100% no-repeat; background-size: 100% 100%; margin-top: -2rpx; .image-text_4 { width: 96rpx; height: 76rpx; margin-top: 12rpx; .label_4 { width: 48rpx; height: 48rpx; margin-left: 24rpx; } .text-group_5 { width: 96rpx; height: 20rpx; overflow-wrap: break-word; color: rgba(51, 51, 51, 1); font-size: 20rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 20rpx; margin-top: 8rpx; } } .image-text_5 { width: 96rpx; height: 76rpx; margin-top: 12rpx; .label_5 { width: 48rpx; height: 48rpx; margin-left: 24rpx; } .text-group_6 { width: 96rpx; height: 20rpx; overflow-wrap: break-word; color: rgba(44, 120, 245, 1); font-size: 20rpx; font-family: PingFang SC-Regular; font-weight: NaN; text-align: center; white-space: nowrap; line-height: 20rpx; margin-top: 8rpx; } } } .text_111 { width: 84rpx; height: 28rpx; overflow-wrap: break-word; color: rgba(21, 52, 102, 1); font-size: 28rpx; font-family: PingFang SC-Semibold; font-weight: 600; text-align: center; white-space: nowrap; line-height: 28rpx; margin: 10rpx 0 40rpx 30rpx; } /* .menu-list { margin-top: 20rpx; background-color: #fff; border-radius: 20rpx; overflow: hidden; padding: 0 20rpx; } .menu-item { display: flex; align-items: center; justify-content: center; padding: 30rpx 10rpx; border-bottom: 1rpx solid #f0f0f0; &:last-child { border-bottom: none; } } .menu-icon { width: 32rpx; height: 32rpx; margin: 12rpx 20rpx 0 12rpx; } .menu-text { flex: 1; font-size: 30rpx; color: #333; } .menu-arrow { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 400rpx; } */ .menu-list { margin: 20rpx 32rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); .menu-item, .menu-item-btn { display: flex; align-items: center; padding: 40rpx 32rpx; // border-bottom: 1rpx solid #f5f5f5; position: relative; &:last-child { border-bottom: none; } .menu-icon { width: 36rpx; height: 36rpx; margin-right: 24rpx; flex-shrink: 0; } .menu-text { flex: 1; font-size: 30rpx; color: #333; font-weight: 400; } .menu-arrow { width: 24rpx; height: 24rpx; margin-left: auto; flex-shrink: 0; } .message-num { margin-right: 16rpx; width: 36rpx; height: 36rpx; background: #ff4d4f; border-radius: 50%; color: #fff; font-size: 24rpx; display: flex; align-items: center; justify-content: center; } } .menu-item-btn { text-align: left; justify-content: flex-start; background: none; border: none; padding: 0; line-height: normal; width: 100%; &::after { display: none !important; border: none !important; } } } }