diff --git a/index.html b/index.html
index a17a652..5cbcc1f 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,21 @@
 <!doctype html>
 <html lang="en" class="dark">
-  <head>
+<head>
     <meta charset="UTF-8" />
     <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>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+</head>
+<body>
+<div class="container">
+<div class="main-menu" id="menu-sidebar"></div>
+
+<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>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
deleted file mode 100644
index 9efaaef..0000000
--- a/src/App.vue
+++ /dev/null
@@ -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>
diff --git a/src/assets/fonts/Inconsolata.ttf b/src/assets/fonts/Inconsolata.ttf
new file mode 100644
index 0000000..95ad718
Binary files /dev/null and b/src/assets/fonts/Inconsolata.ttf differ
diff --git a/src/event-description-board.vue b/src/event-description-board.vue
new file mode 100644
index 0000000..a6437bb
--- /dev/null
+++ b/src/event-description-board.vue
@@ -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>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 3eb4a3b..61b61b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,44 @@
+@font-face {
+    font-family: "Kalam";
+    src: url("/src/assets/fonts/Kalam-Regular.ttf");
+}
+* {
+    margin: 0;
+    padding: 0;
+}
 html{
     background-color: #91A3B4;
-}
\ No newline at end of file
+}
+
+.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;
+
+}
diff --git a/src/main.js b/src/main-frame.js
similarity index 78%
rename from src/main.js
rename to src/main-frame.js
index b8d6210..01b122b 100644
--- a/src/main.js
+++ b/src/main-frame.js
@@ -3,11 +3,11 @@ 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'
+import MainFrame from './main-frame.vue'
 
-const app = createApp(App)
+const app = createApp(MainFrame)
 app.use(ElementPlus)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
-app.mount('#app')
+app.mount('#main-frame')
diff --git a/src/main-frame.vue b/src/main-frame.vue
new file mode 100644
index 0000000..0124938
--- /dev/null
+++ b/src/main-frame.vue
@@ -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>
diff --git a/src/main-menu.js b/src/main-menu.js
new file mode 100644
index 0000000..65bba77
--- /dev/null
+++ b/src/main-menu.js
@@ -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')
\ No newline at end of file
diff --git a/src/menu-sidebar.vue b/src/menu-sidebar.vue
new file mode 100644
index 0000000..ed49278
--- /dev/null
+++ b/src/menu-sidebar.vue
@@ -0,0 +1,10 @@
+<script setup>
+
+</script>
+
+<template>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/result-board.vue b/src/result-board.vue
index 1a0abe3..b68d7f0 100644
--- a/src/result-board.vue
+++ b/src/result-board.vue
@@ -1,59 +1,76 @@
 <script setup>
-import {ref} from "vue";
-const result = ref(0)
+defineProps(['number', 'enable'])
 </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>
+  <div class="result-board-container">
+    <div class="special-event">
+      <span class="special-event-text" v-if="enable">special event !</span>
+    </div>
+      <div class="sno-number">1035034{{number >= 10? number : "0" + number}}</div>
+      <div class="s-name">李华</div>
+  </div>
 </template>
 
 <style scoped>
 @font-face {
   font-family: Itim;
-  src: url("src/assets/fonts/Itim-Regular.ttf");
+  src: url("/src/assets/fonts/Itim-Regular.ttf");
 }
 * {
   padding: 0;
   margin: 0;
 }
 .result-board-container {
-  width: 456px;
-  height: 338px;
+  width: 750px;
+  height: 440px;
   background-color: #B4BEC8;
   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 {
-  text-align: center;
-  display: block;
-  font-size: 42px;
-  width: 329px;
-  height: 56px;
+  display: flex;
+  width: 331px;
+  height: 52px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  justify-content: center;
+  margin:8.8% auto 0 auto;
+}
+.special-event-text{
+  width: 331px;
+  height: 52px;
   background-color: #E3F32880;
-  color: #251515;
-  border-radius: 50px;
-  margin-left: 60px;
-  margin-top: 20px;
+  border-radius: 30px;
+  color: #000000;
+  text-align: center;
   font-family: Itim,serif;
+  font-size: 40px;
 }
-.number-container {
-  padding: 0 0 10px 0;
-}
-.number {
-  font-size: 140px;
-  padding: 0 0 30px 0;
+.sno-number {
+  display: flex;
+  width: 486px;
+  height: 144px;
+  flex-direction: column;
+  justify-content: center;
   text-align: center;
-  display: block;
   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>
\ No newline at end of file
diff --git a/src/score-board.vue b/src/score-board.vue
index 0281325..3c82a91 100644
--- a/src/score-board.vue
+++ b/src/score-board.vue
@@ -1,54 +1,105 @@
 <script setup>
-import {ref} from "vue";
-
-const buttonColor = ref({
-  background: '#ffffff'
-})
+import {ref, computed} from "vue";
+const emit = defineEmits(['score-changed'])
+const prop = defineProps(['currentScore'])
+const n = 1;
 const tag = ref(0)
 function clicked(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>
 
 <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>
+  <div class="score-board-container">
+    <div class="score-container">
+      <div class="score">
+        <span v-if="currentScore >= 0">{{computed(()=>{return currentScore.toFixed(1)})}}</span>
+      </div>
+      <span class="score-text">s<br>c<br>o<br>r<br>e</span>
+    </div>
+    <div class="buttons-group">
+      <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>
 
 <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 {
   width: 161px;
-  height: 280px;
+  height: 440px;
   background-color: #3D3B3580;
   border-radius: 30px;
-  padding: 0 0 0 20px;
-}
-.el-main{
-  align-content: center;
-  padding: 0 0 0 20px;
+  flex-direction: row;
+  border: 3px solid #404F52;
+  display: flex;
+  justify-content: space-evenly;
 }
-.score-label {
-  width: 150px;
-  height: 221px;
-  font-size: 40px;
+
+.score-text {
+  width: 55px;
+  height: 316px;
   background-color: #BEAB8F;
   border-radius: 50px;
-  margin-top: 30px;
-  margin-bottom: 10px;
   text-align: center;
-  line-height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   color: #251515;
   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{
   height: 44px;
   width: 44px;
@@ -56,5 +107,6 @@ function clicked(num)
   border: 3px solid #000000;
   border-radius: 50%;
   margin: 8px;
+  display: flex;
 }
 </style>
\ No newline at end of file
