pify8ezms
/
102201638-roller-frontend-241001
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加得分选择器，序号显示面板静态组件

Browse Source
master
cflsxjw 2 months ago
parent a095522a04
commit 8655dd6c6a
10 changed files with 133 additions and 1 deletions
Show Stats Download Patch File Download Diff File

1
index.html
Unescape View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/index.css">
<title>Roller-课堂点名</title> <title>Roller-课堂点名</title>
</head> </head>
<body> <body>

1
package-lock.json generated
Unescape View File

@ -8,6 +8,7 @@
"name": "roller", "name": "roller",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.8.3", "element-plus": "^2.8.3",
"vue": "^3.4.37" "vue": "^3.4.37"
}, },

1
package.json
Unescape View File

@ -9,6 +9,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.8.3", "element-plus": "^2.8.3",
"vue": "^3.4.37" "vue": "^3.4.37"
}, },

5
src/App.vue
Unescape View File

@ -1,8 +1,11 @@
<script setup> <script setup>
import ScoreBoard from "./score-board.vue";
import ResultBoard from "./result-board.vue";
</script> </script>
<template> <template>
<result-board></result-board>
<score-board></score-board>
</template> </template>
<style scoped> <style scoped>

BIN
src/assets/fonts/Itim-Regular.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/Kalam-Regular.ttf
View File

Binary file not shown.

3
src/index.css
Unescape View File

@ -0,0 +1,3 @@
html{
background-color: #91A3B4;
}

4
src/main.js
Unescape View File

@ -2,8 +2,12 @@ import { createApp } from 'vue'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue' import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus) app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app') app.mount('#app')

59
src/result-board.vue
Unescape View File

@ -0,0 +1,59 @@
<script setup>
import {ref} from "vue";
const result = ref(0)
</script>
<template>
<el-container class="result-board-container">
<el-header class="special-header">
<label class="special-event">special event !</label>
</el-header>
<el-main class="number-container">
<label class="number">13</label>
</el-main>
</el-container>
</template>
<style scoped>
@font-face {
font-family: Itim;
src: url("src/assets/fonts/Itim-Regular.ttf");
}
* {
padding: 0;
margin: 0;
}
.result-board-container {
width: 456px;
height: 338px;
background-color: #B4BEC8;
border-radius: 10px;
}
.special-header {
height: 80px;
}
.special-event {
text-align: center;
display: block;
font-size: 42px;
width: 329px;
height: 56px;
background-color: #E3F32880;
color: #251515;
border-radius: 50px;
margin-left: 60px;
margin-top: 20px;
font-family: Itim,serif;
}
.number-container {
padding: 0 0 10px 0;
}
.number {
font-size: 140px;
padding: 0 0 30px 0;
text-align: center;
display: block;
font-family: Itim,serif;
color: #1D2D5F;
}
</style>

60
src/score-board.vue
Unescape View File

@ -0,0 +1,60 @@
<script setup>
import {ref} from "vue";
const buttonColor = ref({
background: '#ffffff'
})
const tag = ref(0)
function clicked(num)
{
tag.value=num
buttonColor.value.background = '#48653A'
}
</script>
<template>
<el-container class="score-board-container">
<label class="score-label">s<br>c<br>o<br>r<br>e</label>
<el-main class="el-main" direction="vertical">
<el-button class="button" @click="clicked(4)" :style="tag > 3? buttonColor: ''"></el-button>
<el-button class="button" @click="clicked(3)" :style="tag > 2? buttonColor: ''"></el-button>
<el-button class="button" @click="clicked(2)" :style="tag > 1? buttonColor: ''"></el-button>
<el-button class="button" @click="clicked(1)" :style="tag > 0? buttonColor: ''"></el-button>
</el-main>
</el-container>
</template>
<style scoped>
.score-board-container {
width: 161px;
height: 280px;
background-color: #3D3B3580;
border-radius: 30px;
padding: 0 0 0 20px;
}
.el-main{
align-content: center;
padding: 0 0 0 20px;
}
.score-label {
width: 150px;
height: 221px;
font-size: 40px;
background-color: #BEAB8F;
border-radius: 50px;
margin-top: 30px;
margin-bottom: 10px;
text-align: center;
line-height: 40px;
color: #251515;
font-family: Itim,serif;
}
.button{
height: 44px;
width: 44px;
background-color: #D9D9D9;
border: 3px solid #000000;
border-radius: 50%;
margin: 8px;
}
</style>
Write Preview
Loading…
Cancel
Save