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.
310 lines
11 KiB
310 lines
11 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>课堂点名系统</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
<script src="script.js"></script> <!-- 引入你的函数文件 -->
|
|
<style>
|
|
.container {
|
|
display: grid; /* 使用 Grid 布局 */
|
|
grid-template-columns: repeat(3, 1fr); /* 创建三列 */
|
|
gap: 50px; /* 列间距 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-items: center; /* 水平均匀分布 */
|
|
position: absolute; /* 设置为绝对定位 */
|
|
top: 3%; /* 从顶部移动 */
|
|
left: 50%; /* 从左边移动 */
|
|
transform: translateX(-50%); /* 水平居中容器 */
|
|
|
|
|
|
}
|
|
.rcontainer {
|
|
position: absolute; /* 绝对定位 */
|
|
top: 30%;
|
|
right: 20%;
|
|
|
|
}
|
|
.lcontainer {
|
|
position: absolute; /* 绝对定位 */
|
|
top: 30%;
|
|
left: 20%;
|
|
|
|
}
|
|
.notinclass
|
|
{
|
|
position: absolute; /* 绝对定位 */
|
|
border-radius: 15px;
|
|
height: 50px;
|
|
width: 110px;
|
|
font-size: 17px;
|
|
bottom: 25%; /* 距离顶部50% */
|
|
left: 50%; /* 距离左侧50% */
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
.topstu {
|
|
display: flex; /* 使用 Flexbox */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
width: 150px; /* 圆的宽度 */
|
|
height: 150px; /* 圆的高度 */
|
|
background-color: #ffffff; /* 圆的背景颜色 */
|
|
border-radius: 50%; /* 使其变为圆形 */
|
|
color: rgb(0, 0, 0); /* 文本颜色 */
|
|
font-size: 20px; /* 文本大小 */
|
|
text-align: center; /* 文本居中 */
|
|
border: 4px solid #000000;
|
|
}
|
|
|
|
.pickbutton {
|
|
position: absolute; /* 绝对定位 */
|
|
bottom: 12%; /* 距离顶部50% */
|
|
left: 50%; /* 距离左侧50% */
|
|
transform: translate(-50%, -50%); /* 使按钮中心对齐 */
|
|
padding: 25px 40px; /* 增加内边距 */
|
|
font-size: 25px; /* 增加字体大小 */
|
|
border-radius: 15px;
|
|
width: 280px;
|
|
height: 80px;
|
|
justify-content: center; /* 水平居中 */
|
|
}
|
|
.rpointbutton
|
|
{
|
|
|
|
width: 120px; /* 设置宽度 */
|
|
height: 120px; /* 设置高度，确保与宽度相等 */
|
|
border-radius: 50%; /* 圆形 */
|
|
font-size: 25px; /* 字体大小 */
|
|
}
|
|
.lpointbutton
|
|
{
|
|
width: 120px; /* 设置宽度 */
|
|
height: 120px; /* 设置高度，确保与宽度相等 */
|
|
border-radius: 50%; /* 圆形 */
|
|
font-size: 25px; /* 字体大小 */
|
|
}
|
|
.small-button {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #000000;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
display: flex; /* 使用 flex 布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
opacity: 0; /* 初始隐藏 */
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.lsmall-button {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #000000;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
display: flex; /* 使用 flex 布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
opacity: 0; /* 初始隐藏 */
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.uploadbutton
|
|
{
|
|
position: absolute; /* 绝对定位 */
|
|
top: 10%; /* 距离顶部50% */
|
|
left: 10%; /* 距离左侧20px */
|
|
width: 100px; /* 设置宽度 */
|
|
height: 100px; /* 设置高度，确保与宽度相等 */
|
|
border-radius: 50%; /* 圆形 */
|
|
font-size: 25px; /* 字体大小 */
|
|
}
|
|
.pickedstu {
|
|
position: absolute; /* 绝对定位 */
|
|
top: 40%; /* 距离顶部50% */
|
|
left: 50%; /* 距离左侧20px */
|
|
width: 350px; /* 圆的宽度 */
|
|
height: 350px; /* 圆的高度 */
|
|
transform: translate(-50%, -50%);
|
|
background-color: #ffffff; /* 圆的背景颜色 */
|
|
border-radius: 50%; /* 使其变为圆形 */
|
|
display: flex; /* 使用 Flexbox 对齐文本 */
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
color: rgb(0, 0, 0); /* 文本颜色 */
|
|
font-size: 30px; /* 文本大小 */
|
|
text-align: center; /* 文本居中 */
|
|
border: 4px solid #000000;
|
|
}
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
background-color: #f4f4f4;
|
|
margin: 0;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
input[type="file"] {
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border: 2px solid #007BFF;
|
|
border-radius: 5px;
|
|
width: 250px;
|
|
}
|
|
button {
|
|
background-color: #020202;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
#result {
|
|
margin-top: 100px;
|
|
padding: 10px;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
width: 500px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 调整每个小按钮的旋转角度以保持垂直 */
|
|
.small-button:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
|
|
.small-button:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg); }
|
|
.small-button:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg); }
|
|
.small-button:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg); }
|
|
.small-button:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg); }
|
|
.small-button:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg); }
|
|
|
|
|
|
|
|
.show .small-button {
|
|
opacity: 1; /* 显示小按钮 */
|
|
}
|
|
|
|
.show .lsmall-button {
|
|
opacity: 1; /* 显示小按钮 */
|
|
}
|
|
|
|
/* 添加展开效果并使文本保持竖直 */
|
|
.show .small-button:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateX(100px); }
|
|
.show .small-button:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateX(100px) rotate(-60deg); }
|
|
.show .small-button:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateX(100px) rotate(-120deg); }
|
|
.show .small-button:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateX(100px) rotate(-180deg); }
|
|
.show .small-button:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateX(100px) rotate(-240deg); }
|
|
.show .small-button:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateX(100px) rotate(-300deg); }
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<div><button class="uploadbutton" @click="uploadFile">上传名单</button></div>
|
|
|
|
<div class="container">
|
|
<div class="topstu">{{ top3[0] }}<br>学号<br>积分</div>
|
|
<div class="topstu">{{ top3[1] }}<br>学号<br>积分</div>
|
|
<div class="topstu">{{ top3[2] }}<br>学号<br>积分</div>
|
|
</div>
|
|
|
|
|
|
<div class="pickedstu">文本内容</div>
|
|
|
|
|
|
<div><button class = "notinclass" @click="uploadFile">未到课堂</button></div>
|
|
<div><button class="pickbutton" @click="getRandomStudent">随机点名</button></div>
|
|
|
|
|
|
<div class="rcontainer">
|
|
<button class="rpointbutton" @click="rtoggleButtons">加分</button>
|
|
<div class="small-buttons">
|
|
<button class="small-button">1.5</button>
|
|
<button class="small-button">2.0</button>
|
|
<button class="small-button">2.5</button>
|
|
<button class="small-button">3.0</button>
|
|
<button class="small-button">0.5</button>
|
|
<button class="small-button">1.0</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lcontainer">
|
|
<button class="lpointbutton" @click="ltoggleButtons">减分</button>
|
|
<div class="lsmall-buttons">
|
|
<button class="small-button">1.5</button>
|
|
<button class="small-button">2.0</button>
|
|
<button class="small-button">2.5</button>
|
|
<button class="small-button">3.0</button>
|
|
<button class="small-button">0.5</button>
|
|
<button class="small-button">1.0</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
top3 :["haha","sdd","eeee"],
|
|
},
|
|
methods: {
|
|
uploadFile() {
|
|
// 调用外部的 uploadFile 函数
|
|
uploadFile();
|
|
},
|
|
getRandomStudent() {
|
|
// 调用外部的 getRandomStudent 函数
|
|
getRandomStudent();
|
|
},
|
|
handleFileUpload(event) {
|
|
const file = event.target.files[0];
|
|
// 处理文件上传
|
|
if (file) {
|
|
this.uploadFile();
|
|
}
|
|
},
|
|
addpoints()
|
|
{
|
|
|
|
},
|
|
divpoints()
|
|
{
|
|
|
|
},
|
|
rtoggleButtons()
|
|
{
|
|
smallButtons = document.querySelector('.small-buttons');
|
|
smallButtons.classList.toggle('show');
|
|
},
|
|
ltoggleButtons()
|
|
{
|
|
smallButtons = document.querySelector('.lsmall-buttons');
|
|
smallButtons.classList.toggle('show');
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|