Skip to content

Commit e95e579

Browse files
zxwk1998zxwk1998
committed
♻️ refactor: code
1 parent 1bb282b commit e95e579

File tree

2 files changed

+60
-91
lines changed

2 files changed

+60
-91
lines changed

‎src/layouts/components/VabAvatar/index.vue

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@
44
<div class="avatar-wrapper">
55
<img :src="avatar" alt="用户头像" class="user-avatar" />
66
</div>
7-
<div class="user-info">
7+
<!-- <div class="user-info">
88
<div class="username">{{ username }}</div>
9-
<div class="user-role">管理员</div>
10-
</div>
11-
<i class="el-icon-arrow-down dropdown-icon"></i>
9+
</div> -->
1210
</div>
1311

1412
<el-dropdown-menu slot="dropdown" class="custom-dropdown">
@@ -141,17 +139,15 @@
141139
.avatar-container {
142140
display: flex;
143141
align-items: center;
144-
padding: 8px 12px;
145142
border-radius: 8px;
146143
cursor: pointer;
147144
148145
.avatar-wrapper {
149146
position: relative;
150-
margin-right: 12px;
151147
152148
.user-avatar {
153-
width: 40px;
154-
height: 40px;
149+
width: 37.5px;
150+
height: 37.5px;
155151
border-radius: 50%;
156152
object-fit: cover;
157153
border: 2px solid rgba(255, 255, 255, 0.3);

‎src/layouts/components/VabNav/index.vue

Lines changed: 56 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<el-row :gutter="15">
44
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
55
<div class="left-panel">
6-
<i
7-
:class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
6+
<vab-icon
7+
:icon="['fas', collapse ? 'indent' : 'outdent']"
88
:title="collapse ? '展开' : '收起'"
99
class="fold-unfold"
1010
@click="handleCollapse"
11-
></i>
11+
/>
1212
<vab-breadcrumb class="hidden-xs-only" />
1313
</div>
1414
</el-col>
@@ -102,22 +102,25 @@
102102
align-items: center;
103103
justify-items: center;
104104
height: $base-nav-bar-height;
105+
}
105106
107+
::v-deep {
106108
.fold-unfold {
107-
display: flex;
108-
align-items: center;
109-
justify-content: center;
110-
width: 38px;
111-
height: 38px;
109+
margin-right: 12px;
110+
}
111+
svg {
112+
width: 1em;
113+
height: 1em;
114+
padding: 9px;
112115
color: rgba(0, 0, 0, 0.7);
113116
background: rgba(255, 255, 255, 0.7);
114117
border: 1px solid rgba(0, 0, 0, 0.08);
115118
border-radius: 50%;
116119
cursor: pointer;
120+
fill: rgba(0, 0, 0, 0.7);
117121
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
118122
backdrop-filter: blur(10px);
119123
-webkit-backdrop-filter: blur(10px);
120-
margin-right: $base-padding;
121124
122125
&:hover {
123126
color: rgba(0, 0, 0, 0.9);
@@ -132,98 +135,68 @@
132135
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
133136
}
134137
}
135-
}
136-
137-
.right-panel {
138-
position: relative;
139-
display: flex;
140-
align-content: center;
141-
align-items: center;
142-
justify-content: flex-end;
143-
height: $base-nav-bar-height;
144-
gap: 12px;
145138
146-
::v-deep {
139+
button {
147140
svg {
148-
width: 1.25em;
149-
height: 1.25em;
150-
padding: 9px;
151-
color: rgba(0, 0, 0, 0.7);
141+
margin-right: 0;
142+
color: rgba(255, 255, 255, 0.95);
143+
background: linear-gradient(135deg, rgba(77, 138, 240, 0.9) 0%, rgba(52, 120, 246, 0.95) 100%);
144+
border-color: rgba(77, 138, 240, 0.8);
145+
cursor: pointer;
146+
fill: rgba(255, 255, 255, 0.95);
147+
148+
&:hover {
149+
background: linear-gradient(135deg, rgba(77, 138, 240, 1) 0%, rgba(52, 120, 246, 1) 100%);
150+
border-color: rgba(77, 138, 240, 1);
151+
box-shadow: 0 4px 12px rgba(77, 138, 240, 0.3), 0 2px 4px rgba(77, 138, 240, 0.2);
152+
}
153+
}
154+
}
155+
156+
.el-badge {
157+
margin-right: 0;
158+
159+
.el-button {
152160
background: rgba(255, 255, 255, 0.7);
153161
border: 1px solid rgba(0, 0, 0, 0.08);
154-
border-radius: 50%;
155-
cursor: pointer;
156-
fill: rgba(0, 0, 0, 0.7);
157-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
162+
border-radius: 12px;
158163
backdrop-filter: blur(10px);
159164
-webkit-backdrop-filter: blur(10px);
165+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
160166
161167
&:hover {
162-
color: rgba(0, 0, 0, 0.9);
163168
background: rgba(255, 255, 255, 0.9);
164169
border-color: rgba(0, 0, 0, 0.15);
165-
transform: translateY(-1px);
166170
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
167171
}
168-
169-
&:active {
170-
transform: translateY(0);
171-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
172-
}
173-
}
174-
175-
button {
176-
svg {
177-
margin-right: 0;
178-
color: rgba(255, 255, 255, 0.95);
179-
background: linear-gradient(135deg, rgba(77, 138, 240, 0.9) 0%, rgba(52, 120, 246, 0.95) 100%);
180-
border-color: rgba(77, 138, 240, 0.8);
181-
cursor: pointer;
182-
fill: rgba(255, 255, 255, 0.95);
183-
184-
&:hover {
185-
background: linear-gradient(135deg, rgba(77, 138, 240, 1) 0%, rgba(52, 120, 246, 1) 100%);
186-
border-color: rgba(77, 138, 240, 1);
187-
box-shadow: 0 4px 12px rgba(77, 138, 240, 0.3), 0 2px 4px rgba(77, 138, 240, 0.2);
188-
}
189-
}
190-
}
191-
192-
.el-badge {
193-
margin-right: 0;
194-
195-
.el-button {
196-
background: rgba(255, 255, 255, 0.7);
197-
border: 1px solid rgba(0, 0, 0, 0.08);
198-
border-radius: 12px;
199-
backdrop-filter: blur(10px);
200-
-webkit-backdrop-filter: blur(10px);
201-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
202-
203-
&:hover {
204-
background: rgba(255, 255, 255, 0.9);
205-
border-color: rgba(0, 0, 0, 0.15);
206-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
207-
}
208-
}
209172
}
173+
}
210174
211-
.user-name {
212-
color: rgba(0, 0, 0, 0.8);
213-
font-weight: 500;
214-
}
175+
.user-name {
176+
color: rgba(0, 0, 0, 0.8);
177+
font-weight: 500;
178+
}
215179
216-
.user-avatar {
217-
border: 2px solid rgba(255, 255, 255, 0.8);
218-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
219-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
180+
.user-avatar {
181+
border: 2px solid rgba(255, 255, 255, 0.8);
182+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
183+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
220184
221-
&:hover {
222-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
223-
transform: translateY(-1px);
224-
}
185+
&:hover {
186+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
187+
transform: translateY(-1px);
225188
}
226189
}
227190
}
191+
192+
.right-panel {
193+
position: relative;
194+
display: flex;
195+
align-content: center;
196+
align-items: center;
197+
justify-content: flex-end;
198+
height: $base-nav-bar-height;
199+
gap: 12px;
200+
}
228201
}
229202
</style>

0 commit comments

Comments
 (0)