From ca9a92cfc2f2bd8c724020ee5e46094633eb80a5 Mon Sep 17 00:00:00 2001 From: 黄何裕 <1053952480@qq.com> Date: 星期五, 12 七月 2024 17:39:45 +0800 Subject: [PATCH] 处理冲突 --- src/views/home/components/user-panel/index.vue | 228 +++++++++++++++++++++++++++----------------------------- 1 files changed, 110 insertions(+), 118 deletions(-) diff --git a/src/views/home/components/user-panel/index.vue b/src/views/home/components/user-panel/index.vue index f6b415c..ed05489 100644 --- a/src/views/home/components/user-panel/index.vue +++ b/src/views/home/components/user-panel/index.vue @@ -1,73 +1,62 @@ <template> - <div class="user-panel max-w-sm min-w-96 h-fit"> - <el-card class="card"> - <div class="panel-content flex flex-col items-center"> - <!-- 瀛︾敓淇℃伅 --> - <el-dropdown> - <div - class="avatar-container w-40 h-40 rounded-full overflow-hidden el-dropdown-link" - @click="stateClick()" - > - <div - class="avatar-content" - v-if="userInfo.imagePath" - > - <img - :src="userInfo.imagePath" - class="avatar-img" - alt="" - /> - </div> - <div - class="avatar-content" - :style="{ backgroundColor: getColor }" - v-else - > - <div class="name text-5xl font-bold text-white"> - {{ getFirstName }} - </div> - </div> - </div> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item>淇敼瀵嗙爜</el-dropdown-item> - <el-dropdown-item>涓汉涓績</el-dropdown-item> - <el-dropdown-item @click="quit()" - >閫�鍑虹櫥褰�</el-dropdown-item - > - </el-dropdown-menu> - </template> - </el-dropdown> - - <div class="name-container text-lg font-bold mt-5 mb-2"> - {{ userInfo.realName }} - </div> - - <div class="department-container text-base mb-10"> - {{ userInfo.userName }} - </div> - <!-- 瀛︾敓閫夐」 --> - <div class="tool-container grid grid-cols-3 gap-10"> - <div - class="tool-item text-center cursor-pointer" - v-for="item in toolList" - @click="toolClick(item)" - > - <div class="tool-icon mb-1"> - <img - :src="item.iconPath" - class="width-img" - alt="" - /> - </div> - <div class="tool-title"> - {{ item.title }} - </div> - </div> - </div> + <div class="user-panel max-w-sm min-w-96 h-fit"> + <el-card class="card"> + <div class="panel-content flex flex-col items-center"> + <!-- 瀛︾敓淇℃伅 --> + <el-dropdown> + <div + class="avatar-container w-40 h-40 rounded-full overflow-hidden el-dropdown-link" + @click="stateClick()" + > + <div class="avatar-content" v-if="userInfo.imagePath"> + <img :src="'/api/files/'+userInfo.imagePath" class="avatar-img" alt="" /> </div> - </el-card> - </div> + <div + class="avatar-content" + :style="{ backgroundColor: getColor }" + v-else + > + <div class="name text-5xl font-bold text-white"> + {{ getFirstName }} + </div> + </div> + </div> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item>淇敼瀵嗙爜</el-dropdown-item> + <el-dropdown-item @click="goPersonalCenter()" + >涓汉涓績</el-dropdown-item + > + <el-dropdown-item @click="quit()">閫�鍑虹櫥褰�</el-dropdown-item> + </el-dropdown-menu> + </template> + </el-dropdown> + + <div class="name-container text-lg font-bold mt-5 mb-2"> + {{ userInfo.realName }} + </div> + + <div class="department-container text-base mb-10"> + {{ userInfo.userName }} + </div> + <!-- 瀛︾敓閫夐」 --> + <div class="tool-container grid grid-cols-3 gap-10"> + <div + class="tool-item text-center cursor-pointer" + v-for="item in toolList" + @click="toolClick(item)" + > + <div class="tool-icon mb-1"> + <img :src="item.iconPath" class="width-img" alt="" /> + </div> + <div class="tool-title"> + {{ item.title }} + </div> + </div> + </div> + </div> + </el-card> + </div> </template> <script setup> @@ -84,86 +73,89 @@ const router = useRouter(); // 鑾峰彇鍒楄〃 const toolList = ref([ - { - id: 1, - title: "鍦ㄧ嚎鍩硅", - iconPath: new URL("@/assets/icons/icon1.png", import.meta.url).href, - path: "/train", - }, - { - id: 2, - title: "鎴戠殑鑰冭瘯", - iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href, - path: "/exam-list", - }, - { - id: 3, - title: "鎴戠殑鎴愮哗", - iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href, - path: "/grade-list", - }, + { + id: 1, + title: "鍦ㄧ嚎鍩硅", + iconPath: new URL("@/assets/icons/icon1.png", import.meta.url).href, + path: "/train", + }, + { + id: 2, + title: "鎴戠殑鑰冭瘯", + iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href, + path: "/exam-list", + }, + { + id: 3, + title: "鎴戠殑鎴愮哗", + iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href, + path: "/grade-list", + }, ]); // 鑾峰彇棰滆壊 const getColor = computed(() => { - return randomColor(); + return randomColor(); }); // 鑾峰彇鐢ㄦ埛淇℃伅 const getFirstName = computed(() => { - return userInfo.value.realName && userInfo.value.realName[0]; + return userInfo.value.realName && userInfo.value.realName[0]; }); // 鐐瑰嚮浜嬩欢 const toolClick = (item) => { - if (item.path) { - router.push(item.path); - } + if (item.path) { + router.push(item.path); + } }; // 鐢ㄦ埛閫夐」 const dropdownRef = ref(); // 閫�鍑虹櫥褰� const quit = () => { - logout() - .then(() => { - router.push("/login").then(() => { - userStore.setUserInfo(null); - localStorage.clear("user"); - }); - }) - .catch((err) => { - console.log("閫�鍑虹櫥褰曞け璐�,澶辫触鍘熷洜;", err); - }); + logout() + .then(() => { + router.push("/login").then(() => { + userStore.setUserInfo(null); + localStorage.clear("user"); + }); + }) + .catch((err) => { + console.log("閫�鍑虹櫥褰曞け璐�,澶辫触鍘熷洜;", err); + }); +}; +const goPersonalCenter = () => { + router.push("/personal-center"); }; </script> <style lang="scss" scoped> .card { - border-radius: 30px; + border-radius: 30px; } .avatar-content { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .avatar-img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } .avatar-container { - cursor: pointer; - color: var(--el-color-primary); - display: flex; - align-items: center; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; } .example-showcase .el-dropdown-link { - cursor: pointer; - color: var(--el-color-primary); - display: flex; - align-items: center; + cursor: pointer; + color: var(--el-color-primary); + display: flex; + align-items: center; } </style> -- Gitblit v1.8.0