改进得分选择板的外观

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "roller",
+  "name": "roller-frontend",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "roller",
+  "name": "roller-frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",

src/score-board.vue

@@ -2,16 +2,20 @@
 import {ref, computed} from "vue";
 const emit = defineEmits(['score-changed'])
 const prop = defineProps(['currentScore'])
-const n = 1;
+const reset = ref(true)
 const tag = ref(0)
 function clicked(num)
 {
+  reset.value=false;
   tag.value=num
   emit('score-changed', num)
 }
 function getButtonColor(score) {
-  if (score <= prop.currentScore)
-  {
+  if (reset.value) {
+    return {background: '#D9D9D9'}
+  }
+
+  if (score <= prop.currentScore) {
     if (prop.currentScore < 0) {
       return {background: '#6D3939'}
     }
@@ -28,19 +32,19 @@ function getButtonColor(score) {
 <template>
   <div class="score-board-container">
     <div class="score-container">
-      <div class="score">
-        <span v-if="currentScore >= 0">{{computed(()=>{return currentScore.toFixed(1)})}}</span>
-      </div>
+      <button class="score" @dblclick="reset=true;currentScore=0;$emit('score-changed',0)" :style="computed(()=>{return currentScore>=0?{background: '#297561'}:{background: '#754F29'}}).value">
+        <span>{{computed(()=>{return currentScore.toFixed(1)})}}</span>
+      </button>
       <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>
+      <button class="button" @click="clicked(3)" :style="getButtonColor(3)"></button>
+      <button class="button" @click="clicked(2.5)" :style="getButtonColor(2.5)"></button>
+      <button class="button" @click="clicked(2)" :style="getButtonColor(2)"></button>
+      <button class="button" @click="clicked(1.5)" :style="getButtonColor(1.5)"></button>
+      <button class="button" @click="clicked(1)" :style="getButtonColor(1)"></button>
+      <button class="button" @click="clicked(0.5)" :style="getButtonColor(0.5)"></button>
+      <button class="button" @click="clicked(-1)" :style="getButtonColor(-1)"></button>
     </div>
   </div>
 </template>
@@ -50,6 +54,7 @@ function getButtonColor(score) {
     font-family: Itim;
     src: url("/src/assets/fonts/Itim-Regular.ttf");
 }
+
 * {
   padding: 0;
   margin: 0;
@@ -58,7 +63,6 @@ function getButtonColor(score) {
   height: 60px;
   width: 60px;
   border-radius: 50px;
-  background-color: #297561;
   margin: 15px 5px 15px 5px;
   border: #2A3F45 3px solid;
   font-size: 32px;