qdt-admin-layout 1.1.18 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
@@ -72,14 +72,53 @@ export default {
|
|
|
72
72
|
<div class="user-dropdown-reference">
|
|
73
73
|
<span class="username time">{this.newTime}</span>
|
|
74
74
|
<span class="username shu">|</span>
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
75
|
+
<div id="downloadTrigger" class="download-trigger">
|
|
76
|
+
<i
|
|
77
|
+
style="color:#333"
|
|
78
|
+
class="el-icon-download header-icon"
|
|
79
|
+
on-click={() => this.showDownloadPopover()}
|
|
80
|
+
/>
|
|
81
|
+
<span class="username" on-click={() => this.showDownloadPopover()}>
|
|
82
|
+
下载
|
|
83
|
+
</span>
|
|
84
|
+
<el-popover
|
|
85
|
+
ref="downloadPopover" // 用于在代码中控制弹框
|
|
86
|
+
placement="bottom" // 弹框显示在按钮下方
|
|
87
|
+
width="350"
|
|
88
|
+
trigger="manual" // 手动触发模式
|
|
89
|
+
target="downloadTrigger"
|
|
90
|
+
>
|
|
91
|
+
<div class="tag">
|
|
92
|
+
<div
|
|
93
|
+
class="erweima"
|
|
94
|
+
style="display: inline-block; margin-right: 20px;"
|
|
95
|
+
>
|
|
96
|
+
<img
|
|
97
|
+
style="height: 150px"
|
|
98
|
+
src={require("../../asset/image/ioserweima.png")}
|
|
99
|
+
/>
|
|
100
|
+
<div
|
|
101
|
+
style="font-size: 14px; font-weight: 800; color: #000; text-align: center;"
|
|
102
|
+
class="user-text"
|
|
103
|
+
>
|
|
104
|
+
苹果用户
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="erweima" style="display: inline-block;">
|
|
108
|
+
<img
|
|
109
|
+
style="height: 150px"
|
|
110
|
+
src={require("../../asset/image/anzhuoerweima.png")}
|
|
111
|
+
/>
|
|
112
|
+
<div
|
|
113
|
+
style="font-size: 14px; font-weight: 800; color: #000; text-align: center;"
|
|
114
|
+
class="user-text"
|
|
115
|
+
>
|
|
116
|
+
安卓/鸿蒙用户
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</el-popover>
|
|
121
|
+
</div>
|
|
83
122
|
<span class="username shu">|</span>
|
|
84
123
|
|
|
85
124
|
<i
|
|
@@ -111,6 +150,22 @@ export default {
|
|
|
111
150
|
},
|
|
112
151
|
|
|
113
152
|
methods: {
|
|
153
|
+
showDownloadPopover() {
|
|
154
|
+
// 通过 ref 获取弹框实例并显示
|
|
155
|
+
this.$refs.downloadPopover.showPopper = true;
|
|
156
|
+
// 可选：点击其他区域时自动关闭弹框（监听文档点击）
|
|
157
|
+
document.addEventListener("click", this.hideDownloadPopover);
|
|
158
|
+
},
|
|
159
|
+
hideDownloadPopover(e) {
|
|
160
|
+
// 避免点击弹框内部时关闭
|
|
161
|
+
if (
|
|
162
|
+
!this.$refs.downloadPopover?.$el.contains(e.target) &&
|
|
163
|
+
!e.target.closest(".download-trigger")
|
|
164
|
+
) {
|
|
165
|
+
this.$refs.downloadPopover.showPopper = false;
|
|
166
|
+
document.removeEventListener("click", this.hideDownloadPopover);
|
|
167
|
+
}
|
|
168
|
+
},
|
|
114
169
|
/*顶栏的左、中、右三部分内容*/
|
|
115
170
|
renderLeftContent(h) {
|
|
116
171
|
const defaultContent = [this.defaultLogo, this.defaultHamburger];
|
|
@@ -71,7 +71,23 @@
|
|
|
71
71
|
padding-right: 20px;
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
+
/* 确保触发元素不被其他样式影响 */
|
|
75
|
+
.download-trigger {
|
|
76
|
+
position: relative; /* 作为弹框的直接定位基准 */
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: 4px;
|
|
80
|
+
padding: 5px 8px;
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
/* 新增：给触发元素添加明确的位置标识，辅助弹框定位 */
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
.el-popover {
|
|
86
|
+
top: 140%;
|
|
87
|
+
left: 65% !important; /* 水平居中对齐触发元素 */
|
|
88
|
+
transform: translateX(-50%) !important; /* 水平居中偏移 */
|
|
89
|
+
margin: 0 !important; /* 清除默认margin，避免偏移 */
|
|
90
|
+
z-index: 9999 !important;
|
|
74
91
|
}
|
|
75
|
-
|
|
76
92
|
@import "theme-light";
|
|
77
93
|
@import "theme-dark";
|