父亲大人要求我给他做一个随机点名的小玩意,所以我用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;