From 5461ed90bbe33657820c0f44bee059efc37c6a62 Mon Sep 17 00:00:00 2001
From: QMZ <1164250597@qq.com>
Date: Tue, 1 Oct 2024 20:24:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 246 ++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 227 insertions(+), 19 deletions(-)

diff --git a/public/index.html b/public/index.html
index fed78c2..02f3ce9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
+    
+        <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>
+        
         
-        <button @click="uploadFile">上传学生名单</button>
-        <button  @click="getRandomStudent">随机点名</button>
-        <div id="result">{{ result }}</div>
-        <input type="file" id="fileInput" accept=".xlsx" @change="handleFileUpload" />
     </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>