.home_page_container { position: relative; width: 100vw; /* height: 100vh; */ overflow: hidden; } .home_page_header { width: 100%; height: 703rpx; background-color: #ADCEFF; color: #FFFFFF; z-index: 2; position: relative; } .home_page_menu { position: absolute; width: 100%; height: 740rpx; background-color: #ADCEFF; top: 310rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .home_page_menu_circular { width: 600rpx; height: 600rpx; /* background-color:#2866FF ; */ border-radius: 50%; position: relative; /* transform: rotateZ(180deg); */ transition: all 1s; z-index: 2; display: flex; justify-content: center; } .home_page_header_icon { Width: 100; Height: 52rpx; text-align: end; /* padding-right:34rpx ; */ } .iconclass { font-weight: 600; position: absolute; float: right; right: 34rpx; } .home_page_header_title { font-size: 62rpx; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 30rpx; } .home_page_header_identity { position: relative; font-size: 28rpx; text-align: center; z-index: 1; line-height: 22rpx; margin-top: 12rpx; } .home_page_menu_name { width: 300rpx; height: 300rpx; background-color: #ADCEFF; color: #2866FF; font-size: 32rpx; position: absolute; border-radius: 50%; top: 0; left: 0; right: 0; left: 0; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center; z-index: 3; transform: rotate(180deg); } .home_page_menu_item { position: absolute; /* width: fit-content;; */ width: 60rpx; height: 60rpx; /* background-color: #007AFF; */ border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 1s; } .bgtracking { width: 120rpx; height: 120rpx; background-color: #FFFFFF; border-radius: 50%; position: absolute; transition: all .5s; bottom: calc((740rpx - 640rpx) / 2 ); z-index: 2; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .menu_icon{ transition: all .5s; } .bj { width: 600rpx; height: 600rpx; background-color: #2866FF; border-radius: 50%; position: absolute; transition: all 1s; z-index: 1; } .Submenu{ position: relative; margin: 0 auto; margin-top: 120rpx; width: 595rpx; height: 433rpx; z-index: 1; display: flex; justify-content: space-between; transform: translateY(-433rpx); transition: all .5s; } .Submenu_item{ height: 100%; background-color: #FFFFFF; border-radius: 0px 0px 10px 10px; width: 290rpx; padding: 15rpx ; } .collection{ /* padding: 27rpx; */ height: 260rpx; margin: 0 auto; display: flex; margin-top: 30rpx; padding: 0 27rpx; position: relative; box-sizing: border-box; /* justify-content: space-between; */ } .collectionbg{ width: calc(100% - 54rpx); height: 100%; position: absolute; z-index: -1; box-sizing: border-box; display: flex; } .collection_item{ width: 200rpx; height: 100%; background-color: #FFFFFF; border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-left: calc((100% - 600rpx) / 2); position: relative; animation: name 0.5s; } .collection_itembg{ width: 200rpx; height: 100%; /* background-color: #BBBBBB; */ border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-left: calc((100% - 595rpx) / 2); border: 6rpx dashed #BBBBBB; box-sizing: border-box; font-size: 32rpx; color: #BBBBBB; flex-direction: column; } @keyframes name{ from{opacity: 0;} to{opacity: 1;} } .collectionbg .collection_itembg:first-child{ margin-left: 0; } .collection_item:first-child{ margin-left: 0; } .collection_item_name{ text-align: center; } .tip{ position: absolute; top: -10rpx; right: -10rpx; background-color: #EC4645; border-radius: 50%; width: 40rpx; height: 40rpx; display: flex !important; justify-content: center !important; align-items: center !important; } .collection_item_text{ margin-top: 20rpx; font-size: 32rpx; color: #666666; } .Submenu_item .label { margin-top: 65rpx ; height: 217rpx; width: 90rpx; background-color: #F0F0F0; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 20rpx 0; } .Submenu_item_name{ font-weight: 400; font-size: 32rpx; color: #666666; width: 100%; text-align: center; margin-top: 45rpx; } .Submenu_item:nth-child(2){ display: flex; flex-direction: column; align-items: flex-end; }