Vue2—课堂随机点名

最新推荐文章于 2024-08-05 10:16:58 发布

Nan-Tang

最新推荐文章于 2024-08-05 10:16:58 发布

阅读量849

点赞数

分类专栏： Web前端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/QQ_382125470/article/details/127496504

版权

本文介绍如何使用Vue2创建一个简单的课堂随机点名应用。该应用无需完整项目搭建，仅通过在HTML中引入Vue.js库来实现。点名数据需手动输入，支持PC和手机端自适应，并具备全屏功能。

摘要由CSDN通过智能技术生成

父亲大人要求我给他做一个随机点名的小玩意，所以我用Vue2做一个简单的课堂随机点名。没有搭建Vue项目，只是在html里引入了Vue.js。学生数据的话只能手动输入。可以在pc和手机端自适应，可以全屏。
效果图：
在这里插入图片描述

代码如下啊：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂随机点名</title>
    <style type="text/css">
        * {
   
            margin: 0;
            padding: 0;
        }

        #app {
   
            width: 100%;
            height: 100vh;
            font-family: "楷体", "楷体_GB2312";
            background: url('./img/bg.png');
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
        }

        .top {
   
            position: relative;
            height: 17%;
            line-height: 5vh;
            /* background: red; */
        }

        .bottom {
   
            height: 83%;
            display: flex;
            flex-direction: column;
            /* background: blue; */
        }

        .team {
   
            display: flex;
            justify-content: center;
            line-height: 9vh;
            font-size: 7vh;
            font-family: "楷体", "楷体_GB2312";
        }

        .name {
   
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 7;
            font-size: 19vh;
            font-family: "楷体", "楷体_GB2312";
        }

        .btn {
   
            display: flex;
            justify-content: center;
            flex: 3;
        }

        .img-full {
   
            position: absolute;
            top: 0;