修改返回按钮高度

src/views/block/MapGame.vue

@@ -5,7 +5,7 @@
       <div class="left-container">
         <div class="box-icon" @click="navigateBack">
           <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
-          {{ gameTitle }}
+          返回
         </div>
         <!-- 游戏编号 -->
         <div class="game-badge">{{ gameSort }}</div>
@@ -1861,6 +1861,7 @@ onUnmounted(() => {
 .box-icon {
   display: flex;
   align-items: center;
+  margin-top: rpx(5);
   gap: 10px;
   padding: 10px 20px;
   background-color: rgba(255, 255, 255, 0.8);

src/views/programming/Interface.vue

@@ -4,9 +4,9 @@
     <div class="content-box">
       <div class="box-1">
         <div class="inner-box left-box">
-          <div class="box-icon">
-            <el-icon class="left-icon" @click="emit('closeVideo')"><ArrowLeftBold /></el-icon>
-            {{ boxIconTitle }}
+          <div class="box-icon" @click="emit('closeVideo')">
+            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+            返回
           </div>
         </div>
       </div>
@@ -696,18 +696,29 @@ $text-color: #483d8b; // 文本颜色：靛蓝色
   cursor: pointer; // 添加鼠标指针样式
 }
 .box-icon {
-  width: 100%;
-  height: 100%;
-  flex: 1;
-  display: flex; // 添加 flex 布局
-  align-items: center; // 垂直居中
-  color: white; // 设置图标颜色为白色
-  padding-left: rpx(15);
-  font-size: rpx(10); // 设置图标大小，可按需调整
+  display: flex;
+  align-items: center;
+  margin-left: rpx(7);
+  gap: 10px;
+  padding: 10px 20px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 30px;
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 16px;
+  color: #333;
+  font-weight: 500;
+  width: fit-content;
 }
+
+.box-icon:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+  transform: translate(-3px);
+}
+
 .box-icon .left-icon {
-  margin-left: rpx(10);
-  margin-right: rpx(5); // 设置图标和文字之间的间距 ;
+  margin: 0;
 }
 
 .left-box span {

src/views/programming/ProgrammingCourset.vue

@@ -2,9 +2,9 @@
 <template>
   <div class="programming-content">
     <!-- 标题部分 -->
-    <div class="upper-box">
+    <div class="top-box">
       <!-- 返回按钮 -->
-      <div class="left-box">
+      <div class="top-left-box">
         <div class="top-left-inner-box">
           <!-- 左侧返回图标 -->
           <el-icon class="left-icon" @click="goBackIndex"><ArrowLeftBold /></el-icon>
@@ -12,13 +12,13 @@
         </div>
       </div>
       <!-- 标题 -->
-      <div class="middle-box">
+      <div class="top-center-box">
         <div class="top-center-inner-box" style="background-image: url('./src/assets/programming/list_title.png');">
           <span>{{ pageTitle }}</span>
         </div>
       </div>
       <!-- 课程提示 -->
-      <div class="right-box">
+      <div class="top-right-box">
         <div class="top-right-inner-box">
           <div class="course-info-box">{{ originalCourseTitle }}</div>
         </div>
@@ -177,15 +177,22 @@ const goBackIndex = () => {
   flex-direction: column;
 }
 
-.upper-box {
-  flex: 1;
+.top-box {
+  height: 20%;
   display: flex;
-  justify-content: space-between;
 }
 
-.left-box, .middle-box, .right-box {
+.top-left-box,
+.top-right-box {
   flex: 1;
-  margin: rpx(5);
+  height: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.top-center-box {
+  flex: 2;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -194,8 +201,8 @@ const goBackIndex = () => {
 .top-center-inner-box{
   width: 100%;
   height: 100%;
-  background-size: 100%; 
-  background-position: 50% 30%;
+  background-size: 70%; 
+  background-position: 50% 80%;
   background-repeat: no-repeat;
   display: flex; 
   align-items: center; 
@@ -246,7 +253,7 @@ const goBackIndex = () => {
 }
 
 .lower-box {
-  flex: 5;
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;