/* page { background: ; } */ .home_page_container { position: relative; padding-top: 330rpx; width: 100vw; overflow: hidden; /* display: flex; height: 100vh; flex-direction: column; */ } /* .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: 350rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .home_page_menu_circular { width: 600rpx; height: 600rpx; border-radius: 50%; position: relative; transition: all 1s; z-index: 2; display: flex; justify-content: center; } .home_page_header_icon { Width: 100; Height: 52rpx; text-align: end; } */ .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: 2; 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); font-weight: 600; } .home_page_menu_item { position: absolute; width: 60rpx; height: 60rpx; 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 ; } */ .header { position: fixed; top: 0; left: 0; /* position: relative; */ width: 100%; height: 336rpx; background: #2866FF; z-index: 10; } .info-frame { position: absolute; left: 50%; bottom: -44rpx; transform: translateX(-50%); padding: 20rpx 0 20rpx 200rpx; display: flex; flex-direction: column; justify-content: space-evenly; width: 670rpx; height: 160rpx; border-radius: 20rpx; background: #fff; } .info-frame > view:nth-of-type(1), .info-frame > view:nth-of-type(3) { /* font-size: 32rpx; */ overflow: hidden; width: 320rpx; text-overflow: ellipsis; /* margin-top: 60rpx; */ white-space: nowrap; color: #666; } .info-frame > view:nth-of-type(2) { /* font-size: 32rpx; */ color: #bbb; } .info-frame > image { position: absolute; left: 40rpx; top: -30rpx; width: 120rpx; height: 120rpx; /* border-radius: 50%; */ } .domain { /* flex: 1; */ padding-bottom: 320rpx; } .domain > .item { margin-top: 30rpx; } .domain > .item:nth-of-type(1) { margin-top: 90rpx; } .domain > .item > .title { padding-left: 40rpx; font-size: 32rpx; color: #666; } .options-frame { margin-top: 10rpx; padding-left: 106rpx; display: flex; } .options-frame > .option { position: relative; margin-left: 20rpx; padding: 10rpx 14rpx; width: 240rpx; height: 140rpx; background: #fff; border-radius: 20rpx; } .options-frame > .option:nth-of-type(1) { margin-left: 0; } .options-frame > .option > .star { position: absolute; top: 0; right: 0; width: 80rpx; height: 80rpx; line-height: 80rpx; text-align: center; background: #ffffff; border-radius: 20rpx; z-index: 5; } .options-frame > .option > .wall { position: relative; padding-left: 20rpx; padding-top: 9rpx; width: 212rpx; height: 120rpx; background: rgba(40, 102, 255, .1) ; border-radius: 20rpx; } .options-frame > .option > .wall > .name { position: absolute; left: 24rpx; bottom: 12rpx; font-size: 28rpx; color: #666; } .collection{ position: fixed; left: 0; bottom: 0; width: 100%; height: 318rpx; background: #F0F2FF; z-index: 10; } .collection > .collect-frame { display: flex; justify-content: space-between; position: absolute; left: 0; bottom: 0; padding: 0 54rpx; width: 100%; height: 218rpx; background: #adceff; border-radius: 30rpx 30rpx 0 0; } .collection_item { position: relative; top: -74rpx; display: flex; justify-content: center; align-items: center; /* margin-left: calc((100% - 60/* 0rpx) / 2); */ width: 200rpx; height: 240rpx; background-color: #FFF; border-radius: 20rpx; animation: name 0.5s; } .collection-empty { position: relative; top: -74rpx; width: 200rpx; height: 240rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #FFF; border: 6rpx dashed #BBBBBB; border-radius: 20rpx; } /* .collectionbg{ width: calc(100% - 54rpx); height: 100%; position: absolute; z-index: -1; box-sizing: border-box; display: flex; } */ /* .collection_item{ position: relative; display: flex; justify-content: center; align-items: center; margin-left: calc((100% - 600rpx) / 2); width: 200rpx; height: 100%; background-color: #FFFFFF; border-radius: 10px; animation: name 0.5s; } */ /* .collection_itembg{ width: 200rpx; height: 100%; 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; }