Selaa lähdekoodia

修改轨道图片,以及返回主题按钮

丸子 3 viikkoa sitten
vanhempi
sitoutus
a4ffe56526

BIN
src/assets/programming/track03.png


+ 19 - 2
src/components/HomePage.vue

@@ -2,7 +2,10 @@
   <div class="home-container">
     <div class="box-1">
       <div class="inner-box left-box">
-        <span @click="goToManagementInterface">{{ platformTitle }}</span>
+        <div class="box-icon" @click="goToManagementInterface">
+          <el-icon class="left-icon"><HomeFilled /></el-icon>
+           <span>{{ platformTitle }}</span>
+        </div>
         <div class="dropdown-box">
           <!-- 下拉菜单 -->
           <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" @visible-change="handleVisibleChange" popper-class="no-arrow-dropdown">
@@ -81,7 +84,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ClassList } from '@/api/class.js'
-import {ArrowUpBold, ArrowDownBold} from '@element-plus/icons-vue'
+import {ArrowUpBold, ArrowDownBold, HomeFilled} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import UserInfoPopover from '@/components/user/UserInfoPopover.vue'
 
@@ -376,6 +379,20 @@ window.updateTenantName = (newName) => {
   line-height: rpx(16); // 行高
   text-align: left;
 }
+.box-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: rpx(5);
+  padding: rpx(3) rpx(5);
+  margin-right: rpx(5);
+  border-radius: rpx(30);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: rpx(14);
+  color: white;
+}
 
 .right-box {
   flex: 1;

+ 8 - 6
src/views/laboratory/ExperimentalCourses.vue

@@ -484,16 +484,16 @@ watch(showVideo, (newValue, oldValue) => {
   flex: 1;
   cursor: grab; /* 显示可抓取图标 */
   z-index: 2;
-  padding: 0 rpx(30);
+  padding: 0 rpx(0);
   /* 硬件加速 */
   transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000px;
   /* 设置背景图  */
-  background-image: url('@/assets/programming/track01.png');
-  background-size: rpx(1360) rpx(350); /* 固定宽度,背景图大小一致 */
-  background-position: left calc(-1 * rpx(50));
-  background-repeat: no-repeat;
+  background-image: url('@/assets/programming/track03.png');
+  background-size: rpx(1360) rpx(400); /* 固定宽度,背景图大小一致 */
+  background-position: left calc(-1 * rpx(70));
+  background-repeat: repeat-x;
   background-attachment: local; /* 背景图跟内容一起滚动 */
 }
 
@@ -515,7 +515,9 @@ watch(showVideo, (newValue, oldValue) => {
 .slide-item {
   width: rpx(130); /* 设置固定宽度 */
   height: rpx(110); /* 高度设置 */
-  margin: rpx(85) rpx(40);
+  margin-top: rpx(90);
+  margin-right: rpx(85);
+  margin-left: rpx(10);
   border-radius: rpx(35);
   background-color: rgba(255, 255, 255);
   display: inline-flex;

+ 4 - 3
src/views/laboratory/ExperimentalTheme.vue

@@ -7,7 +7,7 @@
           <div class="top-left-inner-box" >
             <!-- 左侧返回图标 -->
             <div class="left-content-wrapper" @click="goToHomePage">
-              <!-- <el-icon class="left-icon"><ArrowLeftBold /></el-icon> -->
+              <el-icon class="left-icon"><HomeFilled /></el-icon>
               <span class="left-text">{{ platformTitle }}</span>
             </div>
           </div>
@@ -93,7 +93,7 @@
 <script setup>
 import {ref, reactive, watch, onMounted, computed, onUnmounted, nextTick} from 'vue'
 // 返回图标
-import {ArrowLeftBold, Message} from '@element-plus/icons-vue';
+import {HomeFilled, Message} from '@element-plus/icons-vue';
 // 导入路由
 import { useRouter } from 'vue-router';
 // 导入按钮图片
@@ -347,8 +347,9 @@ onUnmounted(() => {
   .left-content-wrapper{
     display: flex;
     align-items: center; /* 保持内部元素垂直居中 */
-    padding-left: rpx(30);
+    padding-left: rpx(15);
     padding-top: rpx(15);
+    gap: rpx(5);
   }
   .left-icon{
     font-size: rpx(14);

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

@@ -473,16 +473,16 @@ watch(showVideo, (newValue, oldValue) => {
   flex: 1;
   cursor: grab; /* 显示可抓取图标 */
   z-index: 2;
-  padding: 0 rpx(30);
+  padding: 0 rpx(0);
   /* 硬件加速 */
   transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000px;
   /* 设置背景图  */
-  background-image: url('@/assets/programming/track01.png');
-  background-size: rpx(1360) rpx(350); /* 固定宽度,背景图大小一致 */
-  background-position: left calc(-1 * rpx(50));
-  background-repeat: no-repeat;
+  background-image: url('@/assets/programming/track03.png');
+  background-size: rpx(1360) rpx(400); /* 固定宽度,背景图大小一致 */
+  background-position: left calc(-1 * rpx(70));
+  background-repeat: repeat-x; /* 水平方向平铺 */
   background-attachment: local; /* 背景图跟内容一起滚动 */
 }
 
@@ -504,7 +504,9 @@ watch(showVideo, (newValue, oldValue) => {
 .slide-item {
   width: rpx(130); /* 设置固定宽度 */
   height: rpx(110); /* 高度设置 */
-  margin: rpx(85) rpx(40);
+  margin-top: rpx(90);
+  margin-right: rpx(85);
+  margin-left: rpx(10);
   border-radius: rpx(35);
   background-color: rgba(255, 255, 255);
   display: inline-flex;

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

@@ -7,7 +7,7 @@
           <div class="top-left-inner-box" >
             <!-- 左侧返回图标 -->
             <div class="left-content-wrapper" @click="goToHomePage">
-              <!-- <el-icon class="left-icon"><ArrowLeftBold /></el-icon> -->
+              <el-icon class="left-icon"><HomeFilled /></el-icon>
               <span class="left-text">{{ platformTitle }}</span>
             </div>
           </div>
@@ -75,7 +75,7 @@
 <script setup>
 import {ref, reactive, watch, onMounted, nextTick} from 'vue'
 // 返回图标
-import { ArrowLeftBold } from '@element-plus/icons-vue';
+import { HomeFilled } from '@element-plus/icons-vue';
 // 导入路由
 import { useRouter } from 'vue-router';
 // 导入课程类别接口
@@ -317,8 +317,9 @@ onMounted(() => {
   display: flex;
   align-items: center; /* 垂直居中对齐 */
   .left-content-wrapper{
-    padding-left: rpx(30);
+    padding-left: rpx(15);
     padding-top: rpx(15);
+    gap: rpx(5);
     display: flex;
     align-items: center; /* 保持内部元素垂直居中 */
   }