feat: 完成项目原型设计的Vue3实现

src/views/rating/RatingPage.vue

@@ -6,13 +6,71 @@
     </h1>
     <h2 class="sub-heading">你成功的复述了所提的问题吗？</h2>
     <div class="buttons">
-      <el-button class="button">是</el-button>
-      <el-button class="button">否</el-button>
+      <!-- 使用 Element Plus 的 ElButton 组件 -->
+      <el-button class="ax_default button" @click="showRating = true"
+        ><span class="button-text">是</span></el-button
+      >
+      <el-button class="ax_default button" @click="showAngryFace = true"
+        ><span class="button-text">否</span></el-button
+      >
+    </div>
+    <!-- 通过v-show控制评分部分的显示和隐藏 -->
+    <div v-show="showRating" class="rating">
+      <h3>对你这次回答表现的评分是：</h3>
+      <!-- 使用 Element Plus 的 ElRate 组件，添加 disabled 属性 -->
+      <el-rate
+        v-model="currentRating"
+        :max="5"
+        :disabled="isRatingDisabled"
+        @change="disableRating"
+      />
+
+      <!-- 再抽一次按钮 -->
+      <el-button
+        v-if="isRatingDisabled"
+        class="ax_default button retry-button"
+        @click="goToRollCall"
+      >
+        <span class="button-text">再抽一次</span>
+      </el-button>
+    </div>
+
+    <!-- 显示生气的 emoji 和文字 -->
+    <div v-if="showAngryFace" class="angry-face">
+      <img src="@/assets/image.png" alt="生气表情" class="emoji" />
+      <h2 class="angry-text">为 什 么 不 好 好 听 课</h2>
+
+      <!-- 再抽一次按钮 -->
+      <el-button class="ax_default button retry-button" @click="goToRollCall">
+        <span class="button-text">再抽一次</span>
+      </el-button>
     </div>
   </div>
 </template>
 
-<script></script>
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router' // 引入 useRouter
+
+// 使用 ref 来定义响应式数据
+const currentRating = ref(0)
+const showRating = ref(false)
+const isRatingDisabled = ref(false) // 控制星星是否禁用
+const showAngryFace = ref(false) // 控制生气表情和文字的显示
+
+// 获取 router 实例
+const router = useRouter()
+
+// 评分完成后禁用星星评分
+const disableRating = () => {
+  isRatingDisabled.value = true
+}
+
+// 跳转到 /roll-call 路由
+const goToRollCall = () => {
+  router.push('/roll-call') // 路由跳转到 /roll-call
+}
+</script>
 
 <style scoped>
 .container {
@@ -20,38 +78,37 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 40vh;
+  height: 80vh;
   text-align: center;
 }
 
 .heading {
-  font-size: 2em;
+  font-size: 3em;
   margin-bottom: 20px;
 }
 
 .sub-heading {
-  font-size: 1.5em;
+  font-size: 2.5em;
   margin-bottom: 30px;
 }
 
+.rating h3 {
+  font-size: 2.5em;
+  margin-bottom: 20px;
+}
+
 .buttons {
   display: flex;
-  gap: 20px;
+  justify-content: center;
+  gap: 60px;
 }
 
 .button {
   cursor: pointer;
   background-color: #007bff;
-  width: 150px;
-  height: 60px;
+  width: 164px;
+  height: 64px;
   border-radius: 22px;
-  border: none;
-  color: white;
-  font-size: 18px;
-  transition:
-    background-color 0.3s,
-    box-shadow 0.3s,
-    transform 0.1s;
 }
 
 .button:hover {
@@ -64,4 +121,41 @@
   box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.3);
   transform: translateY(2px);
 }
+
+.button-text {
+  font-size: 22px;
+  color: #ffffff;
+}
+
+/* 星星组件样式 */
+::v-deep .el-rate__icon {
+  margin-right: 30px;
+  margin-top: 65px;
+  font-size: 112px;
+}
+
+/* 再抽一次按钮的样式 */
+.retry-button {
+  margin-top: 30px; /* 调整按钮与星星组件之间的距离 */
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* 生气表情的样式 */
+.angry-face {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.emoji {
+  width: 100px;
+  height: 100px;
+}
+
+.angry-text {
+  font-size: 2.5em;
+  color: #333;
+  margin-top: 20px;
+}
 </style>

src/views/roll/RollCallPage.vue

@@ -10,8 +10,13 @@
         @rollCompleted="handleRollCompleted(index)"
       />
     </div>
-    <button class="button" @click="toggleScrolling">
-      {{ isScrolling ? '停止点名' : '开始点名' }}
+    <button
+      class="button"
+      @click="toggleScrolling"
+      :disabled="isButtonPressed"
+      :class="{ 'button-pressed': isButtonPressed }"
+    >
+      {{ isScrolling ? '停止' : '开始点名' }}
     </button>
   </div>
 </template>
@@ -33,8 +38,15 @@ const durations = ref(
 
 const completedRolls = ref(new Array(stopNumbers.value.length).fill(false))
 const confirmed = ref(false)
+const isButtonPressed = ref(false)
 
 const toggleScrolling = () => {
+  isButtonPressed.value = true
+  if (isScrolling.value == false) {
+    setTimeout(() => {
+      isButtonPressed.value = false
+    }, 10)
+  }
   isScrolling.value = !isScrolling.value // 切换 isScrolling 的值
   if (isScrolling.value) {
     completedRolls.value = new Array(stopNumbers.value.length).fill(false) // 重置 completedRolls 数组
@@ -49,6 +61,7 @@ const handleRollCompleted = (index) => {
     !confirmed.value
   ) {
     setTimeout(() => {
+      isButtonPressed.value = false // 确认弹窗出现后，重置按钮按下状态
       if (
         !confirmed.value &&
         confirm(`抽到了: ${stopNumbers.value.join('')}，确定后跳转`)
@@ -73,7 +86,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   height: 100vh;
-  gap: 20px; /* 设置按钮与RollingNumber部分之间的间距 */
+  gap: 20px;
 }
 
 .rolling-numbers {
@@ -98,14 +111,24 @@ onUnmounted(() => {
     transform 0.1s;
 }
 
-.button:hover {
+.button-pressed {
+  background-color: #0056b3;
+  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.3);
+  transform: translateY(2px);
+}
+
+.button:hover:not(:disabled) {
   background-color: #1e90ff;
   box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.2);
 }
 
-.button:active {
+.button:active:not(:disabled) {
   background-color: #0056b3;
   box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.3);
   transform: translateY(2px);
 }
+
+.button:disabled {
+  cursor: not-allowed;
+}
 </style>