|
|
@@ -29,6 +29,11 @@
|
|
|
</div>
|
|
|
<div class="flex w-[320px] flex-col gap-4">
|
|
|
<div class="run-action relative">
|
|
|
+ <div class="status-header mt-8 ml-6">
|
|
|
+ <div class="status-indicator" :style="timerStatus === 'noStart' ? 'background-color: #FF4D4F' : timerStatus === 'running' ? 'background-color: #409EFF' : 'background-color: #E6A23C'">
|
|
|
+ </div>
|
|
|
+ <h3 class="status-title">{{ timerStatus === 'noStart' ? '课程未开始' : timerStatus === 'running' ? '课程运行中' : '课程已暂停' }}</h3>
|
|
|
+ </div>
|
|
|
<div v-if="!runStatus || runStatus?.runCourseID === Number(courseId)" class="absolute right-[10px] bottom-[20px] left-[10px] flex items-center justify-center">
|
|
|
<el-button v-if="timerStatus === 'noStart'" type="primary" @click="courseStart">开始课程</el-button>
|
|
|
<el-button v-else-if="timerStatus === 'running'" type="primary" @click="coursePause">暂停课程</el-button>
|
|
|
@@ -36,10 +41,6 @@
|
|
|
<el-button type="primary" :disabled="timerStatus === 'noStart'" @click="courseReset">结束课程</el-button>
|
|
|
</div>
|
|
|
<div v-else class="course-running-status">
|
|
|
- <div class="status-header">
|
|
|
- <div class="status-indicator"></div>
|
|
|
- <h3 class="status-title">课程运行中</h3>
|
|
|
- </div>
|
|
|
<div class="status-content">
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">课程ID</span>
|
|
|
@@ -236,7 +237,7 @@
|
|
|
.status-indicator {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
- background: #4caf50;
|
|
|
+ // background: #4caf50;
|
|
|
border-radius: 50%;
|
|
|
animation: pulse 2s infinite;
|
|
|
}
|