调整下拉框图标

src/components/HomePage.vue

@@ -5,10 +5,12 @@
         <span>{{ platformTitle }}</span>
         <div class="dropdown-box">
           <!-- 下拉菜单 -->
-          <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" popper-class="no-arrow-dropdown">
+          <el-dropdown v-model="selectedGrade" @command="handleGradeSelect" @visible-change="handleVisibleChange" popper-class="no-arrow-dropdown">
             <el-button type="primary">
               {{ selectedGrade }}
-              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+              <!-- 根据下拉框状态显示不同的箭头图标 -->
+              <el-icon class="el-icon--right" v-if="!dropdownVisible"><ArrowDownBold /></el-icon>
+              <el-icon class="el-icon--right" v-else><ArrowUpBold /></el-icon>
             </el-button>
             <template #dropdown>
               <el-dropdown-menu class="dropdown-menu">
@@ -79,7 +81,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ClassList } from '@/api/class.js'
-import {ArrowDown} from '@element-plus/icons-vue'
+import {ArrowUpBold, ArrowDownBold} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import UserInfoPopover from '@/components/user/UserInfoPopover.vue'
 
@@ -197,8 +199,16 @@ const goToPersonalized = () =>{
 const selectedGrade = ref(localStorage.getItem('selectedGrade') || '')
 // 年级ID存储变量
 const selectedGradeId = ref(localStorage.getItem('selectedGradeId') || '')
+// 下拉框可见性状态
+const dropdownVisible = ref(false)
 // 获取年级
 const classData = ref([])
+
+// 处理下拉框显示/隐藏事件
+const handleVisibleChange = (visible) => {
+  dropdownVisible.value = visible
+}
+
 const fetchCtTypes = async () => {
   try {
     const response = await ClassList()

src/components/user/UserInfoPopover.vue

@@ -1,8 +1,11 @@
 <template>
   <!-- 用户信息下拉菜单 -->
-  <el-dropdown>
+  <el-dropdown @visible-change="handleVisibleChange">
     <div class="user-name-box">
       {{ userName }}
+      <!-- 根据下拉框状态显示不同的箭头图标 -->
+      <el-icon v-if="!dropdownVisible" class="arrow-icon"><ArrowDownBold /></el-icon>
+      <el-icon v-else class="arrow-icon"><ArrowUpBold /></el-icon>
     </div>
     <template #dropdown>
       <el-dropdown-menu class="dropdown-menu user-popover-content">
@@ -53,6 +56,8 @@ import { logoutLogic } from '@/utils/loginUtils.js'
 import { homeRoutes } from "@/router/index.js"
 // 用户信息接口
 import { getUserInfo } from '@/api/user/user.js'
+// 图标
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
 
 // 激活码响应式变量
 const activationCode = ref('')
@@ -63,11 +68,19 @@ const courses = ref([])
 // 用户名响应式变量
 const userName = ref(import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME)
 
+// 下拉框可见性状态
+const dropdownVisible = ref(false)
+
 // 更新用户名
 const updateUserName = () => {
   userName.value = localStorage.getItem('userName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME
 }
 
+// 处理下拉框显示/隐藏事件
+const handleVisibleChange = (visible) => {
+  dropdownVisible.value = visible
+}
+
 // 获取用户信息
 const fetchUserInfo = async () => {
   try {
@@ -160,6 +173,13 @@ onMounted(() => {
   border-radius: rpx(15);
   padding: rpx(0) rpx(10);
   min-width: rpx(20);
+  gap: rpx(3);
+}
+
+// 箭头图标样式
+.arrow-icon {
+  font-size: rpx(7);
+  transition: transform 0.3s ease;
 }
 
 // 用户信息弹框样式