@lambo-design/pro-layout 1.0.0-beta.241 → 1.0.0-beta.243

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/pro-layout-nav-slide-btn.vue +2 -2
  3. package/src/components/pro-layout-nav-slide.vue +17 -86
  4. package/src/components/pro-layout-sider-search.vue +8 -1
  5. package/src/styles/color.less +51 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lambo-design/pro-layout",
3
- "version": "1.0.0-beta.241",
3
+ "version": "1.0.0-beta.243",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "lambo",
package/src/components/pro-layout-nav-slide-btn.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div>
2
+ <div class="pro-layout-nav-slide-wrapper">
3
3
  <div class="nav-box-slide">
4
4
  <LamboProNavSlide :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen" @topMen-true="topMenTrue"></LamboProNavSlide>
5
5
  </div>
@@ -75,7 +75,7 @@ export default {
75
75
  <style scoped lang="less">
76
76
 
77
77
  .more-menu {
78
- color: #d9eeec;
78
+ //color: #d9eeec;
79
79
  font-size: 22px;
80
80
  cursor: pointer;
81
81
  }
package/src/components/pro-layout-nav-slide.vue CHANGED
@@ -1,15 +1,13 @@
1
1
  <template>
2
- <div style="margin-left: 53px;">
3
- <div class="menu-list" >
4
- <ul class="top-menu" ref="topNav">
5
- <li class="top-menu-item" :class="{ 'active': activeName === item.appId }" v-for="(item,index) in topMenList" :key="item.appId" @click="selectApp(item.appId)">
6
- <div class="menu-item" v-show="pointer <= index && index < pointer + topMenuNum && flag">
7
- <p class="menu-icon"><Icon :type="item.icon" :size="20"></Icon></p>
8
- <p class="menu-txt">{{ item.name }}</p>
9
- </div>
10
- </li>
11
- </ul>
12
- </div>
2
+ <div class="menu-list" >
3
+ <ul class="top-menu" ref="topNav">
4
+ <li class="top-menu-item" :class="{ 'active': activeName === item.appId }" v-for="(item,index) in topMenList" :key="item.appId" @click="selectApp(item.appId)">
5
+ <div class="menu-item" v-show="pointer <= index && index < pointer + topMenuNum && flag">
6
+ <p class="menu-icon"><Icon :type="item.icon" :size="20"></Icon></p>
7
+ <p class="menu-txt">{{ item.name }}</p>
8
+ </div>
9
+ </li>
10
+ </ul>
13
11
  </div>
14
12
  </template>
15
13
 
@@ -18,7 +16,6 @@ import Bus from '@lambo-design/shared/utils/bus'
18
16
  import { deepCopy } from '@lambo-design/shared/utils/assist'
19
17
 
20
18
  export default {
21
- name: 'pro-layout-tqm',
22
19
  props: {
23
20
  acceptInt: {
24
21
  type: Number,
@@ -128,91 +125,33 @@ export default {
128
125
 
129
126
  <style scoped lang="less">
130
127
  @import '@lambo-design/core/src/styles/default.less';
131
-
132
- .pro-layout-nav-wrapper {
133
- .ivu-menu {
134
- .ivu-menu-item {
135
- &:hover {
136
- //background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
137
-
138
- .line {
139
- border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
140
- position: absolute;
141
- left: 0;
142
- right: 0;
143
- }
144
- }
145
-
146
- &.ivu-menu-item-active, &.ivu-menu-item-selected {
147
- //background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
148
-
149
- .line {
150
- border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
151
- position: absolute;
152
- left: 0;
153
- right: 0;
154
- //bottom: 0;
155
- }
156
- }
157
- }
158
-
159
- /deep/ .ivu-menu-submenu {
160
- .ivu-menu-submenu-title > i {
161
- &.ivu-menu-submenu-title-icon {
162
-
163
- }
164
- }
165
-
166
- .ivu-select-dropdown {
167
- //background: var(--menu-dark-title, @_menu-dark-title);
168
- //color: var(--heading-color-dark, @_heading-color-dark);
169
-
170
- .ivu-menu-drop-list {
171
- .ivu-menu-item {
172
- //color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
173
-
174
- &:hover {
175
- //background: rgba(255, 255, 255, 0.2);
176
- //color: var(--heading-color-dark, @_heading-color-dark);
177
- }
178
-
179
- &.ivu-menu-item-active, &.ivu-menu-item-selected {
180
- //background: rgba(255, 255, 255, 0.2);
181
- //color: var(--heading-color-dark, @_heading-color-dark);
182
- }
183
- }
184
- }
185
- }
186
- }
187
- }
188
- }
189
-
190
128
  .menu-list {
191
129
  height: 100%;
192
130
  line-height: 24px;
193
- color: #ffffff;
131
+ //color: #ffffff;
194
132
  cursor: pointer;
195
133
  font-size: 16px;
134
+ margin-left: 53px;
196
135
  .top-menu {
197
136
  overflow: hidden;
198
137
  height: 100%;
199
138
  .top-menu-item {
200
139
  position: relative;
201
140
  height: 100%;
202
- color: #FFFFFF;
141
+ //color: #FFFFFF;
203
142
  list-style: none;
204
143
  float: left;
205
144
  &:hover {
206
- background: transparent;
145
+ //background: transparent;
207
146
  .menu-item {
208
- color: #fff;
147
+ //color: #fff;
209
148
  }
210
149
  }
211
150
  &.active {
212
- background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;
213
- border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
151
+ //background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;
152
+ //border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
214
153
  .menu-item {
215
- color: #fff;
154
+ //color: #fff;
216
155
  }
217
156
  }
218
157
  .menu-item {
@@ -234,12 +173,4 @@ export default {
234
173
  }
235
174
  }
236
175
  }
237
-
238
-
239
-
240
- .more-menu {
241
- color: #d9eeec;
242
- font-size: 22px;
243
- cursor: pointer;
244
- }
245
176
  </style>
package/src/components/pro-layout-sider-search.vue CHANGED
@@ -28,7 +28,7 @@
28
28
  </div>
29
29
  </div>
30
30
  <div v-if="menuData.length === 0">
31
- <span style="display: flex;justify-content: center;align-items: center;color: #FFFFFF;font-size: 15px">暂无数据</span>
31
+ <span class="no-result">暂无数据</span>
32
32
  </div>
33
33
  </div>
34
34
  </Modal>
@@ -205,6 +205,7 @@ export default {
205
205
  font-weight: 400;
206
206
  width: 200px;
207
207
  margin-bottom: 8px;
208
+ padding: 2px 0px;
208
209
  white-space: nowrap;
209
210
  text-overflow: ellipsis;
210
211
  cursor: pointer;
@@ -223,6 +224,12 @@ export default {
223
224
  }
224
225
  }
225
226
  }
227
+ .no-result{
228
+ display: flex;
229
+ justify-content: center;
230
+ align-items: center;
231
+ font-size: var(--font-size-base,@_font-size-base);
232
+ }
226
233
  }
227
234
  }
228
235
 
package/src/styles/color.less CHANGED
@@ -54,6 +54,39 @@
54
54
  }
55
55
  }
56
56
  }
57
+
58
+ .pro-layout-nav-slide-wrapper{
59
+ .nav-box-slide{
60
+ .menu-list{
61
+ color: var(--layout-header-nav-color,@_layout-header-nav-color);
62
+ .top-menu-item{
63
+ color: var(--layout-header-nav-color,@_layout-header-nav-color);
64
+ &:hover {
65
+ background: transparent;
66
+ .menu-item {
67
+ color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
68
+ }
69
+ }
70
+ &.active {
71
+ background: linear-gradient(to bottom, var(--layout-header-nav-active-background-begin,@_layout-header-nav-active-background-begin) 0%, var(--layout-header-nav-active-background-end,@_layout-header-nav-active-background-end) 100%);
72
+ border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
73
+ .menu-item {
74
+ color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
75
+ }
76
+ }
77
+ }
78
+ }
79
+ }
80
+ .tools-box-slide{
81
+ .more-menu{
82
+ color: var(--layout-header-color ,@_layout-header-color);
83
+ &:hover{
84
+ color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
85
+ }
86
+ }
87
+ }
88
+ }
89
+
57
90
  .pro-layout-tools-wrapper{
58
91
  .font-padding{
59
92
  color: var(--layout-header-drop-color,@_layout-header-drop-color);
@@ -62,6 +95,11 @@
62
95
  }
63
96
  }
64
97
  .user-avatar-dropdown{
98
+ .ivu-dropdown-rel{
99
+ &:hover{
100
+ color: var(--layout-header-drop-active-color,@_layout-header-drop-active-color);
101
+ }
102
+ }
65
103
  .ivu-select-dropdown{
66
104
  background: var(--layout-header-background,@_layout-header-background);
67
105
  color: var(--layout-header-drop-color,@_layout-header-drop-color);
@@ -136,13 +174,13 @@
136
174
  }
137
175
  }
138
176
  .search-fast-con{
139
- background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
140
- color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
177
+ background: var(--layout-sider-search-background,@_layout-sider-search-background);
178
+ color: var(--layout-sider-search-color,@_layout-sider-search-color);
141
179
  .search-fast-con-side{
142
180
  .sideInput{
143
181
  .ivu-input{
144
- background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
145
- color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
182
+ background: var(--layout-sider-search-background,@_layout-sider-search-background);
183
+ color: var(--layout-sider-search-color,@_layout-sider-search-color);
146
184
  }
147
185
  }
148
186
  }
@@ -162,15 +200,18 @@
162
200
  }
163
201
  .search-fast-con-side-modal{
164
202
  .ivu-modal-content{
165
- background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
166
- color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
203
+ background: var(--layout-sider-search-background,@_layout-sider-search-background);
204
+ color: var(--layout-sider-search-color,@_layout-sider-search-color);
167
205
  .menu-side-style{
168
- background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
169
- color: var(--layout-header-drop-color,@_layout-header-drop-color);
206
+ background: var(--layout-sider-search-background,@_layout-sider-search-background);
207
+ color: var(--layout-sider-search-color,@_layout-sider-search-color);
170
208
  &:hover {
171
- background: var(--layout-header-drop-active-background,@_layout-header-drop-active-background);
172
- color: var(--layout-header-drop-active-color,@_layout-header-drop-active-color);
209
+ background: var(--layout-sider-search-active-background,@_layout-sider-search-active-background);
210
+ color: var(--layout-sider-search-active-color,@_layout-sider-search-active-color);
173
211
  }
174
212
  }
213
+ .no-result{
214
+ color: var(--layout-sider-search-color,@_layout-sider-search-color);
215
+ }
175
216
  }
176
217
  }