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