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.
398 lines
7.6 KiB
398 lines
7.6 KiB
/* .container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
} */
|
|
.fontColorBox,
|
|
.fontColorBox1,
|
|
.fontColorBox2,
|
|
.fontColorBox3 {
|
|
/* 文字默认颜色 */
|
|
color: black;
|
|
}
|
|
.header{
|
|
height: 250rpx;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.title{
|
|
position: absolute;
|
|
font-family: "xiaowei";
|
|
font-weight: 300;
|
|
font-size: 70px;
|
|
color: #333;
|
|
top:30px;
|
|
left: 20px;
|
|
}
|
|
|
|
.logo{
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 15px;
|
|
height: 120px;
|
|
width:120px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.navBox {
|
|
/* border: 1px solid lightgreen; */
|
|
/* 顶部tab盒子样式 */
|
|
position: fixed;
|
|
bottom: 1%;
|
|
width: 100%;
|
|
height: 8vh;
|
|
background: white;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.titleBox {
|
|
/* border: 1px solid lightgreen; */
|
|
/* 未选中文字的样式 */
|
|
font-family: 'Franklin Gothic Medium';
|
|
font-weight: 200;
|
|
box-sizing: border-box;
|
|
height: 80%;
|
|
width: 30%;
|
|
color: rgb(168, 170, 175);
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.lineBox,.notLineBox{
|
|
/* 选中及未选中底线共同样式 */
|
|
width: 32rpx;
|
|
height: 8rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lineBox {
|
|
/* 选中底线样式 */
|
|
background: rgb(43, 44, 45);
|
|
margin-top: 16rpx;
|
|
border-radius: 4rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.notLineBox {
|
|
/* 未选中底线样式 */
|
|
background: transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
.picture47 {
|
|
position: fixed;
|
|
width: 15%;
|
|
top:14%;
|
|
right:34% ;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toggle-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 29%;
|
|
width: 80%; /* 让这一行占据宽度的 80% */
|
|
margin-bottom: 20px; /* 让这一行和图片之间有些距离 */
|
|
}
|
|
|
|
.toggle-label {
|
|
position: fixed;
|
|
left: 31%;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: fixed;
|
|
right: 29%;
|
|
transform:scale(0.8) ;
|
|
}
|
|
|
|
.picture10 {
|
|
position: fixed;
|
|
width: 35%;
|
|
left: 31%;
|
|
top: 32.5%;
|
|
}
|
|
|
|
/* 外层按钮样式 */
|
|
.center-button {
|
|
/* position: fixed; */
|
|
/* left: 20%;
|
|
top:70%; */
|
|
position: fixed;
|
|
width: 47%;
|
|
height: 10.5%;
|
|
left: 22%;
|
|
bottom: 31.9%;
|
|
border: 2px solid #5994DB; /* 边框颜色 */
|
|
background-color: #5994DB; /* 按钮背景颜色 */
|
|
color: #5994DB; /* 字体颜色 */
|
|
border-radius: 20px; /* 圆角设置 */
|
|
padding: 5px 10px; /* 内边距 */
|
|
font-size: 40px; /* 字体大小 */
|
|
text-align: center;
|
|
justify-content: center;
|
|
/* align-items: center; */
|
|
}
|
|
|
|
/* 内部内容区域样式 */
|
|
.inner-content {
|
|
position: fixed;
|
|
width: 60%;
|
|
height: 10%;
|
|
bottom: 33%;
|
|
left: 25%;
|
|
background-color: #FAE39F; /* 内部背景颜色 */
|
|
color: #5994DB;
|
|
padding: 12px; /* 内边距 */
|
|
border-radius: 15px; /* 内部圆角半径 */
|
|
font-size: 40px; /* 字体大小 */
|
|
font-family: "youshebiaotihei";
|
|
line-height: 130%;
|
|
z-index: 2;
|
|
font-weight: 150;
|
|
}
|
|
|
|
.picture101 {
|
|
position: fixed;
|
|
width: 35%;
|
|
left: 31%;
|
|
top: 10%;
|
|
}
|
|
|
|
.random-button {
|
|
position: fixed;
|
|
width: 47%;
|
|
height: 10.5%;
|
|
left: 22%;
|
|
bottom: 54.4%;
|
|
border: 2px solid #D88A8E; /* 边框颜色 */
|
|
background-color: #D88A8E; /* 按钮背景颜色 */
|
|
color: #D88A8E; /* 字体颜色 */
|
|
border-radius: 20px; /* 圆角设置 */
|
|
padding: 5px 10px; /* 内边距 */
|
|
font-size: 40px; /* 字体大小 */
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.random-content {
|
|
position: fixed;
|
|
width: 60%;
|
|
height: 10%;
|
|
bottom: 55.5%;
|
|
left: 25%;
|
|
background-color: #FAE39F; /* 内部背景颜色 */
|
|
color: #D88A8E;
|
|
padding: 12px; /* 内边距 */
|
|
border-radius: 15px; /* 内部圆角半径 */
|
|
font-size: 40px; /* 字体大小 */
|
|
font-family: "youshebiaotihei";
|
|
line-height: 130%;
|
|
z-index: 2;
|
|
font-weight: 150;
|
|
}
|
|
|
|
.picture26 {
|
|
position: fixed;
|
|
width: 35%;
|
|
left: 31%;
|
|
top: 40%;
|
|
}
|
|
|
|
.solid-button {
|
|
position: fixed;
|
|
width: 47%;
|
|
height: 10.5%;
|
|
left: 22%;
|
|
bottom: 24.4%;
|
|
border: 2px solid #5994DB; /* 边框颜色 */
|
|
background-color: #5994DB; /* 按钮背景颜色 */
|
|
color: #5994DB; /* 字体颜色 */
|
|
border-radius: 20px; /* 圆角设置 */
|
|
padding: 5px 10px; /* 内边距 */
|
|
font-size: 40px; /* 字体大小 */
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.solid-content {
|
|
position: fixed;
|
|
width: 60%;
|
|
height: 10%;
|
|
bottom: 25.5%;
|
|
left: 25%;
|
|
background-color: #FAE39F; /* 内部背景颜色 */
|
|
color: #5994DB;
|
|
padding: 12px; /* 内边距 */
|
|
border-radius: 15px; /* 内部圆角半径 */
|
|
font-size: 40px; /* 字体大小 */
|
|
font-family: "youshebiaotihei";
|
|
line-height: 130%;
|
|
z-index: 2;
|
|
font-weight: 150;
|
|
}
|
|
|
|
.headerr {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
justify-content: space-around;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* .ranking-header {
|
|
margin-right: 7%;
|
|
margin-left: 7%;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
} */
|
|
|
|
|
|
.ranking-top {
|
|
background-color: #9BD1F1; /* 设置背景为蓝色 */
|
|
color: white; /* 设置字体颜色为白色 */
|
|
font-size: 36px; /* 设置字体大小 */
|
|
text-align: center; /* 让文本水平居中 */
|
|
padding: 10px 10px; /* 添加上下内边距，使其在背景中垂直居中 */
|
|
margin-bottom: 4%;
|
|
font-weight: bold; /* 设置字体加粗 */
|
|
}
|
|
|
|
.ranking-text1 {
|
|
margin-left: 10%;
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
color: #4D95DF;
|
|
}
|
|
|
|
.ranking-text2{
|
|
margin-left: 9%;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ranking-text3 {
|
|
margin-left: 1%;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.ranking-text4 {
|
|
position: absolute;
|
|
right: 12%;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
font-size: 20px;
|
|
color: #A73E33;
|
|
z-index: -1;
|
|
}
|
|
|
|
.ranking-item {
|
|
margin-bottom: 3%;
|
|
margin-top: 3%;
|
|
display: flex;
|
|
align-items: center;
|
|
/* border-bottom: 1px solid #E0E0E0; */
|
|
border-top: 1px solid #E0E0E0;
|
|
padding-top: 3%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.picture44 {
|
|
position: fixed;
|
|
width: 40%;
|
|
left: 31%;
|
|
top: 18%;
|
|
}
|
|
|
|
.picture44-text {
|
|
position: fixed;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 48px;
|
|
left: 16%;
|
|
top:43%;
|
|
}
|
|
|
|
.picker {
|
|
width: 60%;
|
|
height: 5%;
|
|
position: fixed;
|
|
top: 55%;
|
|
left: 17%;
|
|
border: 10px solid white;
|
|
border-radius: 10px;
|
|
font-size: 25px;
|
|
background-color: white;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
.pickerback{
|
|
position: fixed;
|
|
width: 65%;
|
|
height: 7%;
|
|
top: 54%;
|
|
left: 15%;
|
|
background-color: #4D95DF ;
|
|
border: 10px solid #4D95DF;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.check-button {
|
|
position: fixed;
|
|
width: 45%;
|
|
height: 4.5%;
|
|
left: 24%;
|
|
bottom: 24.7%;
|
|
border: 2px solid #F8E39F; /* 边框颜色 */
|
|
background-color: #F8E39F; /* 按钮背景颜色 */
|
|
color: #F8E39F; /* 字体颜色 */
|
|
border-radius: 20px; /* 圆角设置 */
|
|
padding: 5px 10px; /* 内边距 */
|
|
font-size: 40px; /* 字体大小 */
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.check-content {
|
|
position: fixed;
|
|
/* width: 10%; */
|
|
height: 5%;
|
|
bottom: 25.5%;
|
|
left: 26%;
|
|
background-color: white; /* 内部背景颜色 */
|
|
color: black;
|
|
/* padding: 12px; */
|
|
border-radius: 15px; /* 内部圆角半径 */
|
|
font-size: 28px; /* 字体大小 */
|
|
font-family: "youshebiaotihei";
|
|
font-weight: 150;
|
|
line-height: 90%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.return1 {
|
|
position: fixed;
|
|
bottom: 10%;
|
|
right: -7%;
|
|
font-size: 20px ;
|
|
background-color: white;
|
|
}
|
|
|
|
.image-btn {
|
|
position: absolute;
|
|
width: 10%;
|
|
right: 10%;
|
|
top: 5.8%;
|
|
} |