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.
434 lines
6.9 KiB
434 lines
6.9 KiB
/* 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; |
|
} |
|
|
|
|
|
|