Przeglądaj źródła

修改返回部分

丸子 4 miesięcy temu
rodzic
commit
927bfe1c5b

+ 8 - 2
src/views/programming/ProgrammingCourset.vue

@@ -7,8 +7,10 @@
       <div class="top-left-box">
         <div class="top-left-inner-box">
           <!-- 左侧返回图标 -->
-          <el-icon class="left-icon" @click="goBackIndex"><ArrowLeftBold /></el-icon>
-          <span class="left-text">返回</span>
+          <div class="left-content-wrapper" @click="goBackIndex">
+            <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+            <span class="left-text">返回</span>
+          </div>
         </div>
       </div>
       <!-- 标题 -->
@@ -382,6 +384,10 @@ const goBackIndex = () => {
   align-items: center; /* 垂直居中对齐 */
   width: 100%;
   height: 100%;
+  .left-content-wrapper{
+    display: flex;
+    align-items: center; /* 保持内部元素垂直居中 */
+  }
   .left-icon{
     font-size: rpx(14);
     color: white;

+ 9 - 3
src/views/programming/ProgrammingGame.vue

@@ -4,10 +4,12 @@
       <!-- 标题部分 -->
       <div class="top-box">
         <div class="top-left-box">
-          <div class="top-left-inner-box" @click="goToHomePage">
+          <div class="top-left-inner-box" >
             <!-- 左侧返回图标 -->
-             <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
-             <span class="left-text">首页</span>
+            <div class="left-content-wrapper" @click="goToHomePage">
+              <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+              <span class="left-text">首页</span>
+            </div>
           </div>
         </div>
         <div class="top-center-box">
@@ -323,6 +325,10 @@ const goToHomePage = () => {
 .top-left-inner-box{
   display: flex;
   align-items: center; /* 垂直居中对齐 */
+  .left-content-wrapper{
+    display: flex;
+    align-items: center; /* 保持内部元素垂直居中 */
+  }
   .left-icon{
     font-size: rpx(14);
     color: white;

+ 8 - 2
src/views/programming/ProgrammingList.vue

@@ -6,8 +6,10 @@
         <div class="top-left-box">
           <div class="top-left-inner-box">
             <!-- 左侧返回图标 -->
-             <el-icon class="left-icon" @click="goBackIndex"><ArrowLeftBold /></el-icon>
-             <span class="left-text">AI编程课</span>
+            <div class="left-content-wrapper" @click="goBackIndex">
+              <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
+              <span class="left-text">AI编程课</span>
+            </div>
           </div>
         </div>
         <div class="top-center-box">
@@ -433,6 +435,10 @@ const disableBlockly = (blocklyId = categoryId.value) => {
 .top-left-inner-box{
   display: flex;
   align-items: center; /* 垂直居中对齐 */
+  .left-content-wrapper{
+    display: flex;
+    align-items: center; /* 保持内部元素垂直居中 */
+  }
   .left-icon{
     font-size: rpx(14);
     color: white;