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

2 months ago · 8655dd6c6a
parent a095522a04
commit 8655dd6c6a
10 changed files with 133 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="stylesheet" href="src/index.css">
    <title>Roller-课堂点名</title>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,7 @@
      "name": "roller",
      "version": "0.0.0",
      "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
        "element-plus": "^2.8.3",
        "vue": "^3.4.37"
      },
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
    "element-plus": "^2.8.3",
    "vue": "^3.4.37"
  },
--- a/src/App.vue
+++ b/src/App.vue
@ -1,8 +1,11 @@
 <script setup>
+import ScoreBoard from "./score-board.vue";
+import ResultBoard from "./result-board.vue";
 </script>

 <template>
-
+  <result-board></result-board>
+  <score-board></score-board>
 </template>

 <style scoped>
--- a/src/assets/fonts/Itim-Regular.ttf
+++ b/src/assets/fonts/Itim-Regular.ttf
--- a/src/assets/fonts/Kalam-Regular.ttf
+++ b/src/assets/fonts/Kalam-Regular.ttf
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,3 @@
+html{
+    background-color: #91A3B4;
+}
--- a/src/main.js
+++ b/src/main.js
@ -2,8 +2,12 @@ import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'

 const app = createApp(App)
 app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 app.mount('#app')
--- a/src/result-board.vue
+++ b/src/result-board.vue
@ -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>
--- a/src/score-board.vue
+++ b/src/score-board.vue
@ -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>