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 46af810576
commit 1fc150ea02
11 changed files with 302 additions and 85 deletions
Show Stats Download Patch File Download Diff File

22
index.html
Unescape View File

@ -1,13 +1,21 @@
<!doctype html> <!doctype html>
<html lang="en" class="dark"> <html lang="en" class="dark">
<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"> <link rel="stylesheet" href="./src/index.css">
<title>Roller-课堂点名</title> <title>Roller-课堂点名</title>
</head> </head>
<body> <body>
<div id="app"></div> <div class="container">
<script type="module" src="/src/main.js"></script> <div class="main-menu" id="menu-sidebar"></div>
</body>
<script type="module" src="./src/main-menu.js"></script>
<div class="main-content">
<div class="header">Roller</div>
<div class="main-frame" id="main-frame"></div>
<script type="module" src="./src/main-frame.js"></script>
</div>
</div>
</body>
</html> </html>

12
src/App.vue
Unescape View File

@ -1,12 +0,0 @@
<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>
</style>

BIN
src/assets/fonts/Inconsolata.ttf
View File

Binary file not shown.

17
src/event-description-board.vue
Unescape View File

@ -0,0 +1,17 @@
<script setup>
</script>
<template>
<div class="event-description">
</div>
</template>
<style scoped>
.event-description {
width: 20.33%;
height: 100%;
background-color: #537045A5;
}
</style>

41
src/index.css
Unescape View File

@ -1,3 +1,44 @@
@font-face {
font-family: "Kalam";
src: url("/src/assets/fonts/Kalam-Regular.ttf");
}
* {
margin: 0;
padding: 0;
}
html{ html{
background-color: #91A3B4; background-color: #91A3B4;
} }
.container{
display: flex;
height: 100vh;
flex-direction: row;
}
.header{
width: 87vw;
height: 16.5vh;
text-align: center;
display: block;
background-color: #3E4B5E;
font-size: 104px;
font-family: 'Kalam', serif;
color: #91A3B4;
}
.main-content{
width: 100vh;
flex-direction: column;
}
.main-menu{
display: flex;
width: 13vw;
height: 100vh;
background-color: #616E7F;
}
.main-frame{
display: flex;
flex-direction: row;
width: 87vw;
height: 83.5vh;
}

6
src/main.js → src/main-frame.js
Unescape View File

@ -3,11 +3,11 @@ 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 * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue' import MainFrame from './main-frame.vue'
const app = createApp(App) const app = createApp(MainFrame)
app.use(ElementPlus) app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
app.mount('#app') app.mount('#main-frame')

71
src/main-frame.vue
Unescape View File

@ -0,0 +1,71 @@
<script setup>
import ScoreBoard from "./score-board.vue";
import ResultBoard from "./result-board.vue";
import {ref} from "vue";
import EventDescriptionBoard from "./event-description-board.vue";
const number=ref(0);
const enable=ref(false);
const score=ref(0);
function changeNumber()
{
number.value=Math.floor(Math.random()*100)
enable.value=(number.value % 2 === 0)
}
</script>
<template>
<div class="frame-container">
<score-board class="score-board" :current-score="score" @score-changed="(s)=>{score=s}"></score-board>
<div class="result-board-container">
<result-board class="result-board" :number :enable></result-board>
<el-button class="start-button" @click="changeNumber">start</el-button>
</div>
<event-description-board class="event-description"></event-description-board>
</div>
</template>
<style scoped>
@font-face {
font-family: Itim;
src: url("/src/assets/fonts/Itim-Regular.ttf");
}
@font-face {
font-family: Inconsolata;
src: url("/src/assets/fonts/Inconsolata.ttf");
}
* {
margin: 0;
padding: 0;
}
.frame-container {
display: grid;
grid-template-columns:27.3% 52.37% 20.33%;
flex-direction: row;
width: 100%;
background-color: #7B8795;
}
.score-board {
margin: 11.39vh 0 0 40.26%;
}
.result-board-container {
}
.result-board{
margin: 11.39vh 0 0 0;
}
.start-button {
margin: 6.53vh 0 0 10.51vw;
width: 16.07vw;
height: 9.5vh;
color: #283C50;
text-align: center;
font-size: 64px;
background-color: #8CA1B8;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 20px;
font-family: Inconsolata,serif;
}
.event-description{
display: flex;
width: 100%;
}
</style>

13
src/main-menu.js
Unescape View File

@ -0,0 +1,13 @@
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 MenuSidebar from './menu-sidebar.vue'
const app = createApp(MenuSidebar)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#menu-sidebar')

10
src/menu-sidebar.vue
Unescape View File

@ -0,0 +1,10 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

83
src/result-board.vue
Unescape View File

@ -1,59 +1,76 @@
<script setup> <script setup>
import {ref} from "vue"; defineProps(['number', 'enable'])
const result = ref(0)
</script> </script>
<template> <template>
<el-container class="result-board-container"> <div class="result-board-container">
<el-header class="special-header"> <div class="special-event">
<label class="special-event">special event !</label> <span class="special-event-text" v-if="enable">special event !</span>
</el-header> </div>
<el-main class="number-container"> <div class="sno-number">1035034{{number >= 10? number : "0" + number}}</div>
<label class="number">13</label> <div class="s-name">李华</div>
</el-main> </div>
</el-container>
</template> </template>
<style scoped> <style scoped>
@font-face { @font-face {
font-family: Itim; font-family: Itim;
src: url("src/assets/fonts/Itim-Regular.ttf"); src: url("/src/assets/fonts/Itim-Regular.ttf");
} }
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.result-board-container { .result-board-container {
width: 456px; width: 750px;
height: 338px; height: 440px;
background-color: #B4BEC8; background-color: #B4BEC8;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 6px 4px 0 rgba(0, 0, 0, 0.25);
flex-direction: column;
padding-top: 1px;
position: relative;
} }
.special-header {
height: 80px;
}
.special-event { .special-event {
text-align: center; display: flex;
display: block; width: 331px;
font-size: 42px; height: 52px;
width: 329px; flex-shrink: 0;
height: 56px; flex-grow: 0;
justify-content: center;
margin:8.8% auto 0 auto;
}
.special-event-text{
width: 331px;
height: 52px;
background-color: #E3F32880; background-color: #E3F32880;
color: #251515; border-radius: 30px;
border-radius: 50px; color: #000000;
margin-left: 60px; text-align: center;
margin-top: 20px;
font-family: Itim,serif; font-family: Itim,serif;
font-size: 40px;
} }
.number-container { .sno-number {
padding: 0 0 10px 0; display: flex;
} width: 486px;
.number { height: 144px;
font-size: 140px; flex-direction: column;
padding: 0 0 30px 0; justify-content: center;
text-align: center; text-align: center;
display: block;
font-family: Itim,serif; font-family: Itim,serif;
color: #1D2D5F; color: #1D3D5F;
font-size: 96px;
font-style: normal;
font-weight: 400;
margin: 0 auto 0 auto;
}
.s-name {
color: #000000;
font-size: 64px;
width: 341px;
height: 51px;
margin: 0 auto 0 auto;
text-align: center;
} }
</style> </style>

108
src/score-board.vue
Unescape View File

@ -1,54 +1,105 @@
<script setup> <script setup>
import {ref} from "vue"; import {ref, computed} from "vue";
const emit = defineEmits(['score-changed'])
const buttonColor = ref({ const prop = defineProps(['currentScore'])
background: '#ffffff' const n = 1;
})
const tag = ref(0) const tag = ref(0)
function clicked(num) function clicked(num)
{ {
tag.value=num tag.value=num
buttonColor.value.background = '#48653A' emit('score-changed', num)
}
function getButtonColor(score) {
if (score <= prop.currentScore)
{
if (prop.currentScore < 0) {
return {background: '#6D3939'}
}
else {
return {background: '#48653A'}
}
}
else {
return {background: '#D9D9D9'}
}
} }
</script> </script>
<template> <template>
<el-container class="score-board-container"> <div class="score-board-container">
<label class="score-label">s<br>c<br>o<br>r<br>e</label> <div class="score-container">
<el-main class="el-main" direction="vertical"> <div class="score">
<el-button class="button" @click="clicked(4)" :style="tag > 3? buttonColor: ''"></el-button> <span v-if="currentScore >= 0">{{computed(()=>{return currentScore.toFixed(1)})}}</span>
<el-button class="button" @click="clicked(3)" :style="tag > 2? buttonColor: ''"></el-button> </div>
<el-button class="button" @click="clicked(2)" :style="tag > 1? buttonColor: ''"></el-button> <span class="score-text">s<br>c<br>o<br>r<br>e</span>
<el-button class="button" @click="clicked(1)" :style="tag > 0? buttonColor: ''"></el-button> </div>
</el-main> <div class="buttons-group">
</el-container> <el-button class="button" @click="clicked(3)" :style="getButtonColor(3)"></el-button>
<el-button class="button" @click="clicked(2.5)" :style="getButtonColor(2.5)"></el-button>
<el-button class="button" @click="clicked(2)" :style="getButtonColor(2)"></el-button>
<el-button class="button" @click="clicked(1.5)" :style="getButtonColor(1.5)"></el-button>
<el-button class="button" @click="clicked(1)" :style="getButtonColor(1)"></el-button>
<el-button class="button" @click="clicked(0.5)" :style="getButtonColor(0.5)"></el-button>
<el-button class="button" @click="clicked(-1)" :style="getButtonColor(-1)"></el-button>
</div>
</div>
</template> </template>
<style scoped> <style scoped>
@font-face {
font-family: Itim;
src: url("/src/assets/fonts/Itim-Regular.ttf");
}
* {
padding: 0;
margin: 0;
}
.score {
height: 60px;
width: 60px;
border-radius: 50px;
background-color: #297561;
margin: 15px 5px 15px 5px;
border: #2A3F45 3px solid;
font-size: 32px;
line-height: 56px;
color: #C6A8A8;
font-weight: bold;
display: flex;
justify-content: center;
}
.score-board-container { .score-board-container {
width: 161px; width: 161px;
height: 280px; height: 440px;
background-color: #3D3B3580; background-color: #3D3B3580;
border-radius: 30px; border-radius: 30px;
padding: 0 0 0 20px; flex-direction: row;
} border: 3px solid #404F52;
.el-main{ display: flex;
align-content: center; justify-content: space-evenly;
padding: 0 0 0 20px;
} }
.score-label {
width: 150px; .score-text {
height: 221px; width: 55px;
font-size: 40px; height: 316px;
background-color: #BEAB8F; background-color: #BEAB8F;
border-radius: 50px; border-radius: 50px;
margin-top: 30px;
margin-bottom: 10px;
text-align: center; text-align: center;
line-height: 40px; display: flex;
flex-direction: column;
justify-content: center;
color: #251515; color: #251515;
font-family: Itim,serif; font-family: Itim,serif;
font-size: 64px;
line-height: 56px;
margin: auto 10% auto 11.8%;
} }
.buttons-group {
display: flex;
flex-direction: column;
float: right;
}
.button{ .button{
height: 44px; height: 44px;
width: 44px; width: 44px;
@ -56,5 +107,6 @@ function clicked(num)
border: 3px solid #000000; border: 3px solid #000000;
border-radius: 50%; border-radius: 50%;
margin: 8px; margin: 8px;
display: flex;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save