实验室侧边栏图标修改

src/views/AILaboratory.vue

@@ -27,7 +27,7 @@
                 :key="index"
                 @click="navigateToAI(item)"
               >
-                <el-icon><component :is="item.icon" /></el-icon>
+                 <img :src="item.icon" alt="" class="menu-icon" />
                 {{ item.title }}
               </el-menu-item>
             </el-menu>
@@ -79,7 +79,7 @@ import {
   MagicStick,
   User
 } from '@element-plus/icons-vue'
-const router = useRouter()
+
 
 // 添加抽屉显示状态
 const drawerVisible = ref(true)
@@ -87,7 +87,7 @@ const drawerVisible = ref(true)
 const toggleDrawer = () => {
   drawerVisible.value = !drawerVisible.value
 }
-
+const router = useRouter()
 
 // 返回上一页
 const goBack = () => {
@@ -101,6 +101,11 @@ import NumberPeople03 from '@/assets/images/number-people03.png'
 import NumberPeople04 from '@/assets/images/number-people04.png'
 import NumberPeople05 from '@/assets/images/number-people05.png'
 
+// 导入图片
+import question from '@/assets/icon/question.png'
+import painting from '@/assets/icon/painting.png'
+import human from '@/assets/icon/human.png'
+
 // 渲染数字人老师及图片
 const peopleList = ref([
   { id: 21, name: '鲁迅', image: NumberPeople01 , message: '您好，我叫鲁迅，著名的文学家、思想家、革命家、教育家、民主战士，新文化运动的重要参与者，中国现代文学的奠基人之一' },
@@ -140,15 +145,15 @@ const navigateToAI = (group) => {
 // 渲染侧边栏
 const groupList = ref([
   {
-    icon: ChatLineRound,
+    icon: question,
     title: '智能问答'
   },
   {
-    icon: MagicStick,
+    icon: painting,
     title: '智能绘画'
   },
   {
-    icon: User,
+    icon: human,
     title: '数字人老师'
   }
 ])
@@ -204,6 +209,11 @@ const groupList = ref([
 .icon-expand .el-icon:active {
   color: black;
 }
+.menu-icon {
+  width:rpx(11);
+  height: rpx(11);
+  margin-right: rpx(2);
+}
 
 // 侧边栏
 .left-group {

src/views/AIPainting.vue

@@ -28,7 +28,7 @@
                 :key="index"
                 @click="navigateToAI(item)"
               >
-                <el-icon><component :is="item.icon" /></el-icon>
+                <img :src="item.icon" alt="" class="menu-icon" />
                 {{ item.title }}
               </el-menu-item>
             </el-menu>
@@ -191,6 +191,8 @@ import {
   Tickets,
   User
 } from '@element-plus/icons-vue'
+
+
 // 返回上一页
 const goBack = () => {
   router.push('/ai-laboratory')
@@ -198,6 +200,11 @@ const goBack = () => {
 const router = useRouter()
 const route = useRoute()
 
+// 导入图片
+import question from '@/assets/icon/question.png'
+import painting from '@/assets/icon/painting.png'
+import human from '@/assets/icon/human.png'
+
 // 添加抽屉显示状态
 const drawerVisible = ref(true)
 // 添加切换抽屉显示状态的函数
@@ -226,15 +233,15 @@ const navigateToAI = (group) => {
 // 渲染侧边栏
 const groupList = ref([
   {
-    icon: ChatLineRound,
+    icon: question,
     title: '智能问答'
   },
   {
-    icon: MagicStick,
+    icon: painting,
     title: '智能绘画'
   },
   {
-    icon: User,
+    icon: human,
     title: '数字人老师'
   }
 ])
@@ -386,6 +393,11 @@ const inProgressTimerFun = () => {
 .icon-expand .el-icon:active {
   color: black;
 }
+.menu-icon {
+  width:rpx(11);
+  height: rpx(11);
+  margin-right: rpx(2);
+}
 // 侧边栏
 .left-group1 {
   width: rpx(135);

src/views/AIQuestions.vue

@@ -27,7 +27,7 @@
                 :key="index"
                 @click="navigateToAI(item)"
               >
-                <el-icon><component :is="item.icon" /></el-icon>
+               <img :src="item.icon" alt="" class="menu-icon" />
                 {{ item.title }}
               </el-menu-item>
             </el-menu>
@@ -106,6 +106,11 @@ import {
   User
 } from '@element-plus/icons-vue'
 
+// 导入图片
+import question from '@/assets/icon/question.png'
+import painting from '@/assets/icon/painting.png'
+import human from '@/assets/icon/human.png'
+
 // 添加抽屉显示状态
 const drawerVisible = ref(true)
 // 添加切换抽屉显示状态的函数
@@ -114,9 +119,18 @@ const toggleDrawer = () => {
 }
 // 渲染侧边栏
 const groupList = ref([
-  { icon: ChatLineRound, title: '智能问答' },
-  { icon: MagicStick, title: '智能绘画' },
-  { icon: User, title: '数字人老师' }
+  {
+    icon: question,
+    title: '智能问答'
+  },
+  {
+    icon: painting,
+    title: '智能绘画'
+  },
+  {
+    icon: human,
+    title: '数字人老师'
+  }
 ])
 // 跳转智能问答
 const navigateToAI = group => {
@@ -535,7 +549,11 @@ onMounted(async () => {
 .icon-expand .el-icon:active {
   color: black;
 }
-
+.menu-icon {
+  width:rpx(11);
+  height: rpx(11);
+  margin-right: rpx(2);
+}
 .content-wrapper {
   display: flex;
   flex: 1;