parent
04a8a968e0
commit
d298b5856b
@ -0,0 +1,139 @@
|
||||
.lucky-popup {
|
||||
/* background-image: url('../assets/image/bgcImg.png'); */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* position: relative; */
|
||||
/* position: fixed; */
|
||||
/* background-size: 100% 100%; */
|
||||
}
|
||||
|
||||
/* header */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 60px;
|
||||
padding-bottom: 0;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: #626868;
|
||||
}
|
||||
.icon {
|
||||
width: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* 姓名学号 */
|
||||
.lucky-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.lucky-icon {
|
||||
width: 780px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.student-id {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
font-size: 75px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
.student-name {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
font-size: 75px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
.student-msg {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
top: 65%;
|
||||
font-size: 35px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
/* 分数按钮 */
|
||||
.score-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.score-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px 115px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #A182FF;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.score-btn.active, .score-btn:hover {
|
||||
background-color: #6231F5;
|
||||
}
|
||||
|
||||
.score-btn input {
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-right: 8px;
|
||||
font-size: 28px;
|
||||
border: none;
|
||||
background-color: #EBE4FF;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.bottom{
|
||||
position: absolute;
|
||||
display: flex; align-items: center;justify-content: space-around;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
background-color: #EBE4FF;
|
||||
}
|
||||
.cancel {
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
padding: 10px 25px;
|
||||
font-size: 23px;
|
||||
background-color: #fff;
|
||||
color: #A182FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cancel:hover {
|
||||
background-color: #dfdede;
|
||||
}
|
||||
.confirm{
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
padding: 10px 25px;
|
||||
font-size: 23px;
|
||||
background-color: #A182FF;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm:hover {
|
||||
background-color: #6231F5;
|
||||
}
|
||||
@ -0,0 +1,142 @@
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 40px;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
box-shadow: 5px 10px 10px 5px rgba(2, 2, 2, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 头部 */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 60px;
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.icon {
|
||||
width: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-bar {
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
.search-input {
|
||||
flex-grow: 1;
|
||||
padding: 10px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.search-btn {
|
||||
background-color: #A182FF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 30px;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
font-size: 30px;
|
||||
}
|
||||
.search-btn:hover{
|
||||
background-color: #6231F5;
|
||||
}
|
||||
|
||||
/* 表格滚动容器样式 */
|
||||
.table-scroll-container {
|
||||
max-height: 480px; /* 设置一个合适的高度 */
|
||||
overflow-y: auto; /* 当内容超出时显示滚动条 */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th, td {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
padding: 12px 40px;
|
||||
border-bottom: 1.5px solid #ddd;
|
||||
border-right: 1.5px solid #ddd;
|
||||
/* 防止换行 */
|
||||
/* white-space: nowrap; */
|
||||
&:last-child{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
}
|
||||
th {
|
||||
background-color: #EBE4FF;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
.medal {
|
||||
font-size: 20px;
|
||||
}
|
||||
/* 分页 */
|
||||
.pagination {
|
||||
padding: 30px 20px 15px 0px;
|
||||
text-align: right;
|
||||
color: #797878;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.page-btn {
|
||||
background-color: #b39cf2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
margin: 0 8px;
|
||||
font-size: 18px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-btn:hover {
|
||||
background-color: #9272f3;
|
||||
}
|
||||
|
||||
|
||||
/* 底部 */
|
||||
.bottom{
|
||||
position: absolute;
|
||||
display: flex; align-items: center; justify-content: right;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 30px 30px;
|
||||
background-color: #EBE4FF;
|
||||
}
|
||||
.cancel {
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
padding: 20px 35px;
|
||||
margin-right: 70px;
|
||||
font-size: 28px;
|
||||
background-color: #fff;
|
||||
color: #A182FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cancel:hover {
|
||||
background-color: #dfdede;
|
||||
}
|
||||
.confirm{
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
padding: 20px 35px;
|
||||
margin-right: 30px;
|
||||
font-size: 28px;
|
||||
background-color: #A182FF;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm:hover {
|
||||
background-color: #6231F5;
|
||||
}
|
||||
|
After Width: | Height: | Size: 951 B |
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
Reference in new issue