.main_content { background: #f6f6f6; height: 100vh; width: 100vw; display: flex; flex-direction: column; } .main_content .header_info { padding: 20rpx; } .main_content .header_info .info_container { width: 100%; background: #fff; padding: 22rpx 38rpx; box-sizing: border-box; border-radius: 40rpx; align-items: center; justify-content: space-between; display: flex; } .main_content .header_info .info_container .name_wrap { display: flex; align-items: center; } .main_content .header_info .info_container .name_wrap .name_logo { width: 30rpx; height: 35rpx; } .main_content .header_info .info_container .name_wrap .name { font-size: 24rpx; font-weight: 500; letter-spacing: 0.03em; color: #000000; margin-left: 16rpx; } .main_content .header_info .info_container .idcard_wrap { display: flex; align-items: center; } .main_content .header_info .info_container .idcard_wrap .card_logo { width: 38rpx; height: 29rpx; } .main_content .header_info .info_container .idcard_wrap .card_number { font-size: 24rpx; font-weight: 500; letter-spacing: 0.03em; margin-left: 13rpx; color: #BBBBBB; } .main_content .content { flex: 1; padding: 20rpx; padding-top: 0; overflow: scroll; } .main_content .content .card_wrap { padding: 20rpx; background: #fff; box-sizing: border-box; border-radius: 19rpx; margin-bottom: 20rpx; } .main_content .content .card_wrap:last-child { margin-bottom: 0; } .main_content .content .card_wrap .time_wrap { display: flex; align-items: center; margin-bottom: 20rpx; } .main_content .content .card_wrap .time_wrap .time_logo { width: 32rpx; height: 32rpx; } .main_content .content .card_wrap .time_wrap .date { font-size: 26rpx; font-weight: 500; letter-spacing: 0.06em; color: #BBBBBB; margin-left: 18rpx; margin-right: 24rpx; } .main_content .content .card_wrap .time_wrap .time { font-size: 26rpx; font-weight: 500; letter-spacing: 0.06em; color: #BBBBBB; } .main_content .content .card_wrap .info_grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 20rpx; row-gap: 10rpx; } .main_content .content .card_wrap .info_grid .info { padding: 18rpx 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 26rpx; font-weight: 500; letter-spacing: 0.06em; color: #151515; border-radius: 8rpx; } .main_content .content .card_wrap .info_grid .bg1 { background: rgba(97, 43, 235, 0.06); } .main_content .content .card_wrap .info_grid .bg2 { background: rgba(97, 43, 235, 0.06); } .main_content .content .card_wrap .info_grid .bg3 { background: rgba(24, 164, 240, 0.06); } .main_content .content .card_wrap .info_grid .bg4 { background: rgba(24, 164, 240, 0.06); } .main_content .content .card_wrap .info_grid .bg5 { background: rgba(246, 170, 18, 0.06); } .main_content .content .card_wrap .info_grid .bg6 { background: rgba(246, 170, 18, 0.06); } .main_content .grid_layout { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); column-gap: 20rpx; row-gap: 20rpx; } .main_content .grid_layout .grid_box { border-radius: 19rpx; padding: 77rpx 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; } .main_content .grid_layout .grid_box .main_title { font-size: 60rpx; font-weight: bold; letter-spacing: 0.1em; color: #FFFFFF; margin-bottom: 25rpx; } .main_content .grid_layout .grid_box .capacity_btn { display: flex; align-items: center; justify-content: center; padding: 10rpx 40rpx; border-radius: 60rpx; background: rgba(255, 255, 255, 0.1); } .main_content .grid_layout .grid_box .capacity_btn .unit { white-space: nowrap; font-size: 40rpx; font-weight: normal; letter-spacing: 0em; color: #FFFFFF; } .main_content .grid_layout .background1 { background: #612BEB; } .main_content .grid_layout .background2 { background: #7540FD; } .main_content .grid_layout .background3 { background: #18A4F0; } .main_content .grid_layout .background4 { background: #1ACEEA; } .main_content .grid_layout .background5 { background: #F6AA12; } .main_content .grid_layout .background6 { background: #FDC030; } .main_content .footer_tab { padding: 19rpx 59rpx; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; } .main_content .footer_tab .btn { display: flex; align-items: center; padding: 22rpx 55rpx; justify-content: space-between; box-sizing: border-box; } .main_content .footer_tab .btn .result_logo { height: 28rpx; width: 25rpx; } .main_content .footer_tab .btn .history_logo { width: 32rpx; height: 28rpx; } .main_content .footer_tab .btn .font_btn { font-size: 26rpx; font-weight: 500; letter-spacing: 0em; color: #151515; margin-left: 16rpx; } .main_content .footer_tab .active { background: #F6F6F6; border-radius: 42rpx; }