pwfnlmjh2
/
jiedui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化界面

Browse Source
main^2
QMZ 4 months ago
parent c17a5479ee
commit 5461ed90bb
1 changed files with 227 additions and 19 deletions
Show Stats Download Patch File Download Diff File

244
public/index.html
Unescape View File

@ -7,9 +7,145 @@
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="script.js"></script> <!-- 引入你的函数文件 -->
<style>
.move-button {
margin-top: 300px; /* 向下移动 30 像素 */
margin-left: 200px; /* 向右移动 20 像素 */
.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;
@ -20,10 +156,6 @@
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
input[type="file"] {
margin-bottom: 10px;
padding: 10px;
@ -40,8 +172,6 @@
cursor: pointer;
margin: 5px;
transition: background-color 0.3s;
margin-top: 20px; /* 向下移动 20 像素 */
margin-left: 10px; /* 向右移动 10 像素 */
}
button:hover {
background-color: #0056b3;
@ -56,23 +186,87 @@
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">
<h1>课堂点名系统</h1>
<button @click="uploadFile">上传学生名单</button>
<button @click="getRandomStudent">随机点名</button>
<div id="result">{{ result }}</div>
<input type="file" id="fileInput" accept=".xlsx" @change="handleFileUpload" />
<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: {
result: ''
top3 :["haha","sdd","eeee"],
},
methods: {
uploadFile() {
@ -90,12 +284,26 @@
this.uploadFile();
}
},
creatroom(){
createroom();
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>

Write Preview
Loading…
Cancel
Save