@gm-pc/react 1.8.1-alpha.0 → 1.8.5-alpha.0

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 (4) hide show
  1. package/package.json +3 -3
  2. package/src/component/nav/nav.tsx +1 -1
  3. package/src/component/nav/nav_item.tsx +1 -0
  4. package/src/component/nav/style.less +71 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gm-pc/react",
3
- "version": "1.8.1-alpha.0",
3
+ "version": "1.8.5-alpha.0",
4
4
  "description": "观麦前端基础组件库",
5
5
  "author": "liyatang <liyatang@qq.com>",
6
6
  "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
24
24
  "dependencies": {
25
25
  "@gm-common/hooks": "^2.10.0",
26
26
  "@gm-common/tool": "^2.10.0",
27
- "@gm-pc/locales": "^1.8.1-alpha.0",
27
+ "@gm-pc/locales": "^1.8.5-alpha.0",
28
28
  "big.js": "^6.0.1",
29
29
  "classnames": "^2.2.5",
30
30
  "lodash": "^4.17.19",
@@ -46,5 +46,5 @@
46
46
  "react-dom": "^16.14.0",
47
47
  "react-window": "^1.8.5"
48
48
  },
49
- "gitHead": "47f2c19560d4fb25c095d71310e0defab725f4a4"
49
+ "gitHead": "6ea1315d78c7ab347c194f4ef5eaa9f51092f896"
50
50
  }
package/src/component/nav/nav.tsx CHANGED
@@ -91,7 +91,7 @@ const Nav: FC<NavProps> = ({
91
91
  ))}
92
92
  {other}
93
93
  </Flex>
94
- <div className='gm-nav-footer-iot'>
94
+ <div className={footerConfig && footerConfig.length > 0 ? 'gm-nav-footer-iot' : ''}>
95
95
  {footerConfig?.map((item) => (
96
96
  <NavItem
97
97
  key={item.link}
package/src/component/nav/nav_item.tsx CHANGED
@@ -69,6 +69,7 @@ const NavItem: FC<NavItemProps> = ({
69
69
  >
70
70
  <span className='gm-nav-one-icon'>{iconE}</span>
71
71
  <span className='gm-nav-one-text'>{name}</span>
72
+ <i className='gm-nav-one-arrow' />
72
73
  </A>
73
74
  )}
74
75
 
package/src/component/nav/style.less CHANGED
@@ -1,11 +1,11 @@
1
1
  :root {
2
- --gm-nav-popup-item-color: #454545;
2
+ --gm-nav-popup-item-color: #333;
3
3
  --gm-nav-popup-item-hover-color: #0363ff;
4
4
  --gm-nav-background-color: #282c36;
5
5
  }
6
6
 
7
7
  .gm-nav {
8
- width: var(--gm-nav-size-width);
8
+ width: 136px;
9
9
  height: 100vh;
10
10
  background: var(--gm-nav-background-color);
11
11
 
@@ -21,6 +21,7 @@
21
21
  }
22
22
 
23
23
  .gm-nav-content {
24
+ padding-top: 16px;
24
25
  overflow-y: auto;
25
26
 
26
27
  &::-webkit-scrollbar {
@@ -29,12 +30,6 @@
29
30
  }
30
31
  }
31
32
 
32
- .gm-nav-footer-iot {
33
- width: 100%;
34
- height: 64px;
35
- cursor: pointer;
36
- }
37
-
38
33
  .gm-nav-one {
39
34
  display: flex;
40
35
  align-items: center;
@@ -45,7 +40,7 @@
45
40
 
46
41
  .gm-nav-one-icon {
47
42
  margin-right: 10px;
48
- font-size: 18px;
43
+ font-size: 20px;
49
44
  line-height: 1;
50
45
  }
51
46
 
@@ -53,25 +48,40 @@
53
48
  font-size: 16px;
54
49
  }
55
50
 
56
- &::after {
57
- content: '';
51
+ .gm-nav-one-arrow {
58
52
  position: absolute;
59
- right: 20px;
60
- top: 21px;
61
- height: 7px;
62
- width: 7px;
63
- border: 1px solid #fff;
64
- opacity: 0.36;
65
- border-top: none;
66
- border-left: none;
67
- transform: rotate(-45deg);
53
+ top: 25px;
54
+ right: 16px;
55
+ width: 10px;
56
+ color: rgba(0, 0, 0, 0.85);
57
+ transform: rotate(-90deg);
58
+
59
+ &::before {
60
+ content: '';
61
+ position: absolute;
62
+ width: 6px;
63
+ height: 1.5px;
64
+ background-color: #fff;
65
+ border-radius: 2px;
66
+ transform: rotate(-45deg) translateX(2.5px);
67
+ }
68
+
69
+ &::after {
70
+ content: '';
71
+ position: absolute;
72
+ width: 6px;
73
+ height: 1.5px;
74
+ background-color: #fff;
75
+ border-radius: 2px;
76
+ transform: rotate(45deg) translateX(-2.5px);
77
+ }
68
78
  }
69
79
  }
70
80
 
71
81
  .gm-nav-popup {
72
82
  position: absolute;
73
83
  top: 0;
74
- left: var(--gm-nav-size-width);
84
+ left: 136px;
75
85
  padding: 24px 8px 0 32px;
76
86
  color: var(--gm-color-default);
77
87
  background: #fff;
@@ -87,6 +97,7 @@
87
97
  font-size: 16px;
88
98
  font-weight: 600;
89
99
  color: var(--gm-nav-popup-item-color);
100
+ letter-spacing: 0.2px;
90
101
  }
91
102
  }
92
103
 
@@ -94,6 +105,7 @@
94
105
  position: relative;
95
106
  margin-bottom: 8px;
96
107
  background: #f7f7f7;
108
+ border-radius: 2px;
97
109
 
98
110
  &.gm-nav-three-wrap-bg {
99
111
  background-color: #dae7ff;
@@ -102,17 +114,18 @@
102
114
  &.active {
103
115
  color: var(--gm-color-primary-active);
104
116
  background-color: #dae7ff;
117
+ border-radius: 2px;
105
118
  }
106
119
 
107
120
  .gm-nav-three {
108
121
  display: inline-block;
109
122
  padding: 8px;
110
- // width: 100%;
123
+ width: 100%;
111
124
  font-size: 14px;
112
- color: var(--gm-color-default);
125
+ color: #333;
113
126
  text-decoration: none;
114
127
  white-space: nowrap;
115
- border-radius: 2px;
128
+ letter-spacing: 0.2px;
116
129
 
117
130
  &:last-child {
118
131
  margin-bottom: 0;
@@ -137,7 +150,7 @@
137
150
  .gm-nav-three-create {
138
151
  position: absolute;
139
152
  top: 7px;
140
- right: 4px;
153
+ right: 8px;
141
154
  z-index: 10;
142
155
  width: 20px;
143
156
  height: 20px;
@@ -159,7 +172,7 @@
159
172
  // 三角形
160
173
  .gm-nav-one-triangle {
161
174
  position: absolute;
162
- top: 19px;
175
+ top: 21px;
163
176
  right: -1px;
164
177
  display: none;
165
178
  width: 0;
@@ -181,41 +194,47 @@
181
194
  }
182
195
 
183
196
  &.active {
197
+ display: flex;
198
+ justify-content: center;
199
+ align-items: center;
200
+ width: 136px;
201
+ text-align: center;
202
+ padding-top: 10px;
203
+ padding-bottom: 10px;
204
+
205
+ // active hack
184
206
  .gm-nav-one {
185
- position: relative;
207
+ width: 120px;
208
+ height: 34px;
186
209
  color: #fff;
187
- background: #181b23;
188
- opacity: 1;
189
210
  font-weight: 600;
211
+ background: #0363ff;
212
+ border-radius: 4px;
213
+ padding-left: 12px;
190
214
 
191
- &::before {
192
- content: '';
193
- position: absolute;
194
- left: 0;
195
- top: 0;
196
- height: 100%;
197
- width: 3px;
198
- background-color: #0363ff;
199
- }
200
-
201
- &::after {
202
- content: '';
203
- position: absolute;
204
- right: 20px;
205
- top: 22px;
206
- height: 7px;
207
- width: 7px;
208
- border: 1px solid #fff;
209
- opacity: 1;
210
- border-top: none;
211
- border-left: none;
212
- transform: rotate(-45deg);
215
+ .gm-nav-one-arrow {
216
+ right: 8px;
217
+ top: 20px;
213
218
  }
214
219
  }
215
220
 
216
221
  .gm-nav-one-triangle {
217
- display: block;
222
+ display: none;
218
223
  }
219
224
  }
220
225
  }
226
+
227
+ .gm-nav-footer-iot {
228
+ width: 100%;
229
+ height: 64px;
230
+ cursor: pointer;
231
+
232
+ // 兼容 footImage 下的 active 样式不变化
233
+ .gm-nav-one-box.active {
234
+ display: block;
235
+ width: 100%;
236
+ height: 100%;
237
+ padding-top: 0;
238
+ }
239
+ }
221
240
  }