diff --git a/vue/src/assets/下拉11.png b/vue/src/assets/下拉11.png new file mode 100644 index 0000000..453b4b9 Binary files /dev/null and b/vue/src/assets/下拉11.png differ diff --git a/vue/src/system/GraphDemo.vue b/vue/src/system/GraphDemo.vue index d1d3c64..ccb9341 100644 --- a/vue/src/system/GraphDemo.vue +++ b/vue/src/system/GraphDemo.vue @@ -8,7 +8,7 @@
- +
@@ -37,34 +37,49 @@
{{ drugCount.toLocaleString() }}种
{{checkCount.toLocaleString()}}种
-
-
- - +
+ +
+ +
+ {{ currentTypeLabel }} + +
+ + +
+
+ {{ item.label }} +
+
+
-
- - 疾病 - 药品 - 检查 - - -
+ + + + + + + + + + + + + + + + +
opt.value === this.typeRadio); + return option ? option.label : '请选择'; + }, // 根据当前选择的类型返回不同的背景颜色 headerStyle() { let backgroundColor = '#fff'; // 默认颜色 @@ -359,6 +384,19 @@ export default { edgeFontFamily: 'updateAllEdges', }, methods: { + // 切换下拉菜单显隐 + toggleDropdown() { + this.isDropdownOpen = !this.isDropdownOpen; + }, + +// 选择类型并关闭下拉 + selectType(value) { + if (this.typeRadio !== value) { + this.typeRadio = value; + this.changeTree(); // 触发数据更新 + } + this.isDropdownOpen = false; + }, search() { const keyword = this.searchKeyword?.trim(); if (!keyword) { @@ -1301,8 +1339,13 @@ button:hover { .search-btn { width: 16px; -} +} +/*.search-btn:hover { + background-color: rgba(34, 101, 244, 0.64); + border-radius: 50%; + padding: 2px 0; +}*/ .legend-box { display: flex; gap: 20px; @@ -1467,25 +1510,50 @@ button:hover { /deep/ .radio-check .el-radio__input.is-checked+.el-radio__label { color: #1890ff; } +/* 自定义下拉样式 */ .select-container { position: relative; - text-align: right; - display: flex; - align-items: center; + cursor: pointer; + user-select: none; } -select { - padding: 4px 12px; +.select-display { + display: flex; + align-items: center; + padding: 0 12px; + height: 25px; border-radius: 20px; - background-color: rgba(255, 255, 255); font-size: 12px; - appearance: none; /* 移除默认下拉箭头 */ - -webkit-appearance: none; - cursor: pointer; - height: 25px; - border: none; } -select:focus { - outline: none; + +.dropdown-icon { + width: 23px; + margin-left: 6px; } + +.select-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 4px; + background: rgba(255, 255, 255, 0.64); + border: 1px solid #e0e0e0; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + z-index: 10; + min-width: 80px; + color: #000; + padding: 3px 0px; +} + +.select-option { + padding: 7px 12px; + font-size: 13px; + text-align: center; +} + +.select-option:hover { + background-color: #f5f7fa; +} + \ No newline at end of file