update

src/assets/img/left-a.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.15625" width="24" height="24" rx="12" fill="white" fill-opacity="0.2"/>
+<path d="M6 12.1523H18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18.1562L6 12.1562L12 6.15625" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/right-a.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" transform="matrix(-1 0 0 1 24 0.15625)" fill="white" fill-opacity="0.2"/>
+<path d="M18 12.1523H6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18.1562L18 12.1562L12 6.15625" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/views/Student/index.vue

@@ -89,7 +89,25 @@
           <ScreenSlideList :style="{ width: isFullscreen ? '100%' : slideWidth2 * canvasScale + 'px', height: isFullscreen ? '100%' : slideHeight2 * canvasScale + 'px', margin: '0 auto' }" :slideWidth="isFullscreen ? slideWidth * canvasScale : slideWidth2 * canvasScale" :slideHeight="isFullscreen ? slideHeight * canvasScale : slideHeight2 * canvasScale"
             :animationIndex="0" :turnSlideToId="() => { }" :manualExitFullscreen="() => { }"  :slideIndex="slideIndex"/>
 
-          <div class="slide-bottom" v-if="!isFullscreen"></div>
+          <div class="slide-bottom" v-if="!isFullscreen">
+              <div class="slide-bottom-center" v-if="!isFullscreen && (!isFollowModeActive || props.type == '1')">
+                <div class="slide-bottom-center-item">
+                  <img src="@/assets/img/left-a.svg" alt="" @click="previousSlide">
+                  <div class="slide-bottom-center-item-page">
+                      <span>{{ slideIndex + 1 }}</span>
+                      <span>/</span>
+                      <span>{{ slides.length }}</span>
+                  </div>
+                  <img src="@/assets/img/right-a.svg" alt="" @click="nextSlide">
+                </div>
+              </div>
+              <div class="slide-bottom-right" v-if="!isFullscreen && (!isFollowModeActive || props.type == '1')">
+                <IconStopwatchStart class="tool-btn" v-tooltip="'计时器'" @click="timerlVisible = !timerlVisible" />
+                <IconWrite class="tool-btn" v-tooltip="'画笔工具'" @click="writingBoardToolVisible = true" />
+                <IconMagic class="tool-btn" v-tooltip="'激光笔'" :class="{ 'active': laserPen }" @click="toggleLaserPen" />
+                <IconFullScreenOne class="tool-btn" v-tooltip="'打开全屏'" @click="enterFullscreen" />
+              </div>
+          </div>
         </div>
         <!-- 全屏时的左右下角工具按钮 -->
         <div v-if="isFullscreen && (!isFollowModeActive || props.type == '1')" class="tools-left">
@@ -2644,8 +2662,63 @@ const handleDisconnection = () => {
   background: #000;
   position: relative;
   z-index: 10;
+  posttion: relative;
 }
 
+.slide-bottom-center{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.slide-bottom-center-item{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+
+  img{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+  }
+
+  .slide-bottom-center-item-page{
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    gap: 5px;
+  }
+}
+.slide-bottom-right{
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  font-size: 24px;
+  color: #fff;
+
+  .tool-btn {
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      color: #1890ff;
+    }
+
+    &+.tool-btn {
+      margin-left: 15px;
+    }
+  }
+}
+
+
 .loading-indicator {
   position: absolute;
   top: 50%;