优化首页相关视图

This commit is contained in:
Qi 2025-03-23 20:42:12 +08:00
parent 56cff6ecdd
commit 13d5df6d05
1 changed files with 27 additions and 10 deletions

View File

@ -15,7 +15,7 @@
<!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />--> <!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
<!-- 主外层容器包括一级和二级菜单并排 --> <!-- 主外层容器包括一级和二级菜单并排 -->
<div class="dropdown-wrapper"> <div class="dropdown-wrapper" @blur="loseFocus" tabindex="0">
<div class="dropdown-trigger" @click="toggleDropdown"> <div class="dropdown-trigger" @click="toggleDropdown">
<span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span> <span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
<DownOutlined class="trigger-icon" /> <DownOutlined class="trigger-icon" />
@ -26,7 +26,7 @@
<div class="main-menu"> <div class="main-menu">
<div class="main-menu-scroll"> <div class="main-menu-scroll">
<div v-for="item in collegeMajorOptions" :key="item.key" class="menu-item"> <div v-for="item in collegeMajorOptions" :key="item.key" class="menu-item">
<span @click.stop="selectItem(item)">{{ item.label }}</span> <span @click.stop="selectItem(item)" style="width: 90%">{{ item.label }}</span>
<span v-if="item.children" class="expand-icon" @click.stop="expandSubMenu(item)"> <span v-if="item.children" class="expand-icon" @click.stop="expandSubMenu(item)">
<RightOutlined /> <RightOutlined />
</span> </span>
@ -38,7 +38,7 @@
<div v-if="subMenuVisible" class="sub-menu"> <div v-if="subMenuVisible" class="sub-menu">
<div class="sub-menu-scroll"> <div class="sub-menu-scroll">
<div v-for="subItem in currentSubMenu" :key="subItem.key" class="menu-item"> <div v-for="subItem in currentSubMenu" :key="subItem.key" class="menu-item">
<span @click.stop="selectItem(subItem)">{{ subItem.label }}</span> <span @click.stop="selectItem(subItem)" style="width: 100%">{{ subItem.label }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -139,6 +139,7 @@
selectedLabel: '全校', selectedLabel: '全校',
currentSubMenu: [], currentSubMenu: [],
currentSubSubMenu: [], currentSubSubMenu: [],
losefocus: false,
// //
//menuData: [ //menuData: [
// { key: '1', label: '' }, // { key: '1', label: '' },
@ -342,6 +343,9 @@
this.getEntrydate(); this.getEntrydate();
}, },
methods: { methods: {
loseFocus() {
this.dropdownVisible = false;
},
toggleDropdown() { toggleDropdown() {
this.dropdownVisible = !this.dropdownVisible; this.dropdownVisible = !this.dropdownVisible;
this.subMenuVisible = false; this.subMenuVisible = false;
@ -519,17 +523,30 @@
'#FAF0E6 ', '#FAF0E6 ',
]; ];
let j = 0; let j = 0;
//
for (let i in data) { let filteredData = [];
if (this.selectedLabel === '全校(不含艺体美外语)') {
for (let i in data) {
//
filteredData[i] = data[i].filter((college) => {
return !['体育科学学院', '美术学院', '音乐学院'].includes(college.college);
});
}
} else {
filteredData = data;
}
console.log('filteredData', filteredData);
for (let i in filteredData) {
xData = []; xData = [];
let yData = []; let yData = [];
for (let key in data[i]) { for (let key in filteredData[i]) {
xData.push(data[i][key].college); xData.push(filteredData[i][key].college);
// % // %
yData.push(data[i][key].passRate); yData.push(filteredData[i][key].passRate);
} }
console.log('xData', xData);
xData = xData.map((label) => label.split('').join('\n')); //x xData = xData.map((label) => label.split('').join('\n')); //x
seriesData.push({ seriesData.push({
name: i + '级累计总通过率', name: i + '级累计总通过率',
type: 'bar', type: 'bar',
@ -1151,7 +1168,7 @@
display: inline-block; display: inline-block;
} }
.dropdown-trigger { .dropdown-trigger {
width: 160px; /* ✅ 设置选择框宽度 */ width: 190px; /* ✅ 设置选择框宽度 */
height: 32px; height: 32px;
border: 1px solid #ccc; /* ✅ 添加边框 */ border: 1px solid #ccc; /* ✅ 添加边框 */
padding: 6px 12px; padding: 6px 12px;