@gm-pc/frame 1.27.0 → 1.27.1-beta.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.
- package/package.json +3 -3
- package/src/component/breadcrumb.tsx +119 -119
- package/src/component/framework.tsx +102 -102
- package/src/component/full_tabs.tsx +104 -104
- package/src/component/info.tsx +45 -45
- package/src/component/left.tsx +15 -15
- package/src/component/right_top.tsx +31 -31
- package/src/index.less +181 -181
- package/src/index.ts +13 -13
- package/src/mobile.less +38 -38
- package/src/print.less +28 -28
- package/src/stories.tsx +162 -162
- package/src/svg/more.svg +10 -10
package/src/component/info.tsx
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import React, { FC } from 'react'
|
|
2
|
-
import { Flex, Popover, List } from '@gm-pc/react'
|
|
3
|
-
import _ from 'lodash'
|
|
4
|
-
import SVGMore from '../svg/more.svg'
|
|
5
|
-
|
|
6
|
-
interface InfoMore {
|
|
7
|
-
text: string
|
|
8
|
-
onClick(): void
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
interface InfoProps {
|
|
12
|
-
more: InfoMore[]
|
|
13
|
-
children?: any
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
const Info: FC<InfoProps> = ({ more, children }) => {
|
|
17
|
-
const listData = _.map(more, (v, i) => ({ value: i, text: v.text }))
|
|
18
|
-
|
|
19
|
-
const handleSelect = (value: number): void => {
|
|
20
|
-
more[value].onClick()
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<Flex alignCenter className='gm-framework-info-default'>
|
|
25
|
-
<Flex flex />
|
|
26
|
-
<Flex>{children}</Flex>
|
|
27
|
-
{more && (
|
|
28
|
-
<Popover
|
|
29
|
-
showArrow
|
|
30
|
-
type='click'
|
|
31
|
-
right
|
|
32
|
-
className='gm-framework-info-default-setting-popover'
|
|
33
|
-
popup={<List data={listData} onSelect={handleSelect} className='gm-border-0' />}
|
|
34
|
-
>
|
|
35
|
-
<div className='gm-framework-info-default-item'>
|
|
36
|
-
<SVGMore style={{ transform: 'rotate(90deg)' }} />
|
|
37
|
-
</div>
|
|
38
|
-
</Popover>
|
|
39
|
-
)}
|
|
40
|
-
</Flex>
|
|
41
|
-
)
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
export default Info
|
|
45
|
-
export type { InfoProps, InfoMore }
|
|
1
|
+
import React, { FC } from 'react'
|
|
2
|
+
import { Flex, Popover, List } from '@gm-pc/react'
|
|
3
|
+
import _ from 'lodash'
|
|
4
|
+
import SVGMore from '../svg/more.svg'
|
|
5
|
+
|
|
6
|
+
interface InfoMore {
|
|
7
|
+
text: string
|
|
8
|
+
onClick(): void
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
interface InfoProps {
|
|
12
|
+
more: InfoMore[]
|
|
13
|
+
children?: any
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const Info: FC<InfoProps> = ({ more, children }) => {
|
|
17
|
+
const listData = _.map(more, (v, i) => ({ value: i, text: v.text }))
|
|
18
|
+
|
|
19
|
+
const handleSelect = (value: number): void => {
|
|
20
|
+
more[value].onClick()
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<Flex alignCenter className='gm-framework-info-default'>
|
|
25
|
+
<Flex flex />
|
|
26
|
+
<Flex>{children}</Flex>
|
|
27
|
+
{more && (
|
|
28
|
+
<Popover
|
|
29
|
+
showArrow
|
|
30
|
+
type='click'
|
|
31
|
+
right
|
|
32
|
+
className='gm-framework-info-default-setting-popover'
|
|
33
|
+
popup={<List data={listData} onSelect={handleSelect} className='gm-border-0' />}
|
|
34
|
+
>
|
|
35
|
+
<div className='gm-framework-info-default-item'>
|
|
36
|
+
<SVGMore style={{ transform: 'rotate(90deg)' }} />
|
|
37
|
+
</div>
|
|
38
|
+
</Popover>
|
|
39
|
+
)}
|
|
40
|
+
</Flex>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export default Info
|
|
45
|
+
export type { InfoProps, InfoMore }
|
package/src/component/left.tsx
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React, { FC, HTMLAttributes } from 'react'
|
|
2
|
-
import classNames from 'classnames'
|
|
3
|
-
|
|
4
|
-
type LeftProps = HTMLAttributes<HTMLDivElement>
|
|
5
|
-
|
|
6
|
-
const Left: FC<LeftProps> = ({ className, children, ...rest }) => {
|
|
7
|
-
return (
|
|
8
|
-
<div {...rest} className={classNames('gm-framework-left-default', className)}>
|
|
9
|
-
<div className='gm-framework-left-default-inner'>{children}</div>
|
|
10
|
-
</div>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default Left
|
|
15
|
-
export type { LeftProps }
|
|
1
|
+
import React, { FC, HTMLAttributes } from 'react'
|
|
2
|
+
import classNames from 'classnames'
|
|
3
|
+
|
|
4
|
+
type LeftProps = HTMLAttributes<HTMLDivElement>
|
|
5
|
+
|
|
6
|
+
const Left: FC<LeftProps> = ({ className, children, ...rest }) => {
|
|
7
|
+
return (
|
|
8
|
+
<div {...rest} className={classNames('gm-framework-left-default', className)}>
|
|
9
|
+
<div className='gm-framework-left-default-inner'>{children}</div>
|
|
10
|
+
</div>
|
|
11
|
+
)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export default Left
|
|
15
|
+
export type { LeftProps }
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import React, { ReactNode, FC } from 'react'
|
|
2
|
-
import { Flex } from '@gm-pc/react'
|
|
3
|
-
import SVGMenu from '../svg/menu.svg'
|
|
4
|
-
|
|
5
|
-
export interface RightTopProps {
|
|
6
|
-
breadcrumb?: ReactNode
|
|
7
|
-
info?: ReactNode
|
|
8
|
-
onMenuBtnClick?(): void
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const RightTop: FC<RightTopProps> = ({ breadcrumb, onMenuBtnClick, info }) => {
|
|
12
|
-
return (
|
|
13
|
-
<div className='gm-framework-right-top-default'>
|
|
14
|
-
<Flex className='gm-framework-right-top-default-inner' alignCenter>
|
|
15
|
-
<Flex
|
|
16
|
-
alignCenter
|
|
17
|
-
className='gm-framework-right-top-default-mobile-nav'
|
|
18
|
-
onClick={onMenuBtnClick}
|
|
19
|
-
>
|
|
20
|
-
<SVGMenu className='gm-padding-lr-10 gm-cursor' />
|
|
21
|
-
</Flex>
|
|
22
|
-
<Flex flex className='gm-framework-breadcrumb'>
|
|
23
|
-
{breadcrumb}
|
|
24
|
-
</Flex>
|
|
25
|
-
<div className='gm-framework-info'>{info}</div>
|
|
26
|
-
</Flex>
|
|
27
|
-
</div>
|
|
28
|
-
)
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export default RightTop
|
|
1
|
+
import React, { ReactNode, FC } from 'react'
|
|
2
|
+
import { Flex } from '@gm-pc/react'
|
|
3
|
+
import SVGMenu from '../svg/menu.svg'
|
|
4
|
+
|
|
5
|
+
export interface RightTopProps {
|
|
6
|
+
breadcrumb?: ReactNode
|
|
7
|
+
info?: ReactNode
|
|
8
|
+
onMenuBtnClick?(): void
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const RightTop: FC<RightTopProps> = ({ breadcrumb, onMenuBtnClick, info }) => {
|
|
12
|
+
return (
|
|
13
|
+
<div className='gm-framework-right-top-default'>
|
|
14
|
+
<Flex className='gm-framework-right-top-default-inner' alignCenter>
|
|
15
|
+
<Flex
|
|
16
|
+
alignCenter
|
|
17
|
+
className='gm-framework-right-top-default-mobile-nav'
|
|
18
|
+
onClick={onMenuBtnClick}
|
|
19
|
+
>
|
|
20
|
+
<SVGMenu className='gm-padding-lr-10 gm-cursor' />
|
|
21
|
+
</Flex>
|
|
22
|
+
<Flex flex className='gm-framework-breadcrumb'>
|
|
23
|
+
{breadcrumb}
|
|
24
|
+
</Flex>
|
|
25
|
+
<div className='gm-framework-info'>{info}</div>
|
|
26
|
+
</Flex>
|
|
27
|
+
</div>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default RightTop
|
package/src/index.less
CHANGED
|
@@ -1,181 +1,181 @@
|
|
|
1
|
-
@import '~@gm-pc/react/src/var.less';
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
--gm-framework-size-left-width: 136px;
|
|
5
|
-
--gm-framework-size-top-right-height: 64px;
|
|
6
|
-
--gm-framework-z-index-tabs-head: 101;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.gm-framework {
|
|
10
|
-
// 满足内容区域最小一屏
|
|
11
|
-
.gm-framework-full-height {
|
|
12
|
-
min-height: 100vh;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.gm-framework-left {
|
|
16
|
-
z-index: 990; // 需要少于1000大于950。1000-浮层的最小值，950-stick的值，先取990
|
|
17
|
-
width: var(--gm-framework-size-left-width);
|
|
18
|
-
|
|
19
|
-
.gm-framework-left-default {
|
|
20
|
-
width: inherit;
|
|
21
|
-
|
|
22
|
-
.gm-framework-left-default-inner {
|
|
23
|
-
z-index: 110;
|
|
24
|
-
position: fixed;
|
|
25
|
-
height: 100vh;
|
|
26
|
-
width: inherit;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.gm-framework-right {
|
|
32
|
-
width: var(--gm-framework-size-left-width);
|
|
33
|
-
|
|
34
|
-
.gm-framework-right-top {
|
|
35
|
-
.gm-framework-right-top-default {
|
|
36
|
-
height: var(--gm-framework-size-top-right-height);
|
|
37
|
-
|
|
38
|
-
.gm-framework-right-top-default-inner {
|
|
39
|
-
position: fixed;
|
|
40
|
-
top: 0;
|
|
41
|
-
left: var(--gm-framework-size-left-width);
|
|
42
|
-
right: 0;
|
|
43
|
-
border-bottom: 1px solid var(--gm-color-border-special);
|
|
44
|
-
z-index: 101;
|
|
45
|
-
background: white;
|
|
46
|
-
height: var(--gm-framework-size-top-right-height);
|
|
47
|
-
|
|
48
|
-
.gm-framework-right-top-default-mobile-nav {
|
|
49
|
-
display: none;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// breadcrumb
|
|
57
|
-
.gm-framework-breadcrumb {
|
|
58
|
-
.gm-framework-breadcrumb-default {
|
|
59
|
-
position: relative;
|
|
60
|
-
margin-bottom: 0;
|
|
61
|
-
padding: 0 20px 0 20px;
|
|
62
|
-
line-height: 1;
|
|
63
|
-
font-size: 12px;
|
|
64
|
-
|
|
65
|
-
a {
|
|
66
|
-
display: inline-block;
|
|
67
|
-
color: var(--gm-color-desc);
|
|
68
|
-
text-decoration: none;
|
|
69
|
-
|
|
70
|
-
&:hover {
|
|
71
|
-
color: var(--gm-color-primary);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&::before {
|
|
75
|
-
content: '/\00a0';
|
|
76
|
-
padding: 0 5px;
|
|
77
|
-
color: #ccc;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
a:first-child {
|
|
82
|
-
&::before {
|
|
83
|
-
display: none;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
a:last-child {
|
|
88
|
-
color: var(--gm-color-default);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.gm-framework-info {
|
|
94
|
-
.gm-framework-info-default {
|
|
95
|
-
.gm-framework-info-default-item {
|
|
96
|
-
cursor: pointer;
|
|
97
|
-
width: 30px;
|
|
98
|
-
height: 30px;
|
|
99
|
-
border-radius: 50%;
|
|
100
|
-
text-align: center;
|
|
101
|
-
font-size: 18px;
|
|
102
|
-
line-height: 30px;
|
|
103
|
-
margin-right: 20px;
|
|
104
|
-
|
|
105
|
-
&:hover {
|
|
106
|
-
background-color: rgba(239, 242, 246, 0.5);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.gm-framework-info-default-setting-popover {
|
|
111
|
-
min-width: 100px;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.gm-framework-info-default-mobile-nav {
|
|
115
|
-
display: none;
|
|
116
|
-
line-height: 30px;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// 暴露给外面用
|
|
122
|
-
.gm-framework-content-full {
|
|
123
|
-
height: calc(100vh - var(--gm-framework-size-top-right-height));
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.gm-framework-full-tabs {
|
|
127
|
-
min-height: calc(100% - var(--gm-framework-size-top-right-height));
|
|
128
|
-
|
|
129
|
-
.gm-framework-full-tabs-head-fix {
|
|
130
|
-
height: 40px;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.gm-framework-full-tabs-head {
|
|
134
|
-
position: fixed;
|
|
135
|
-
right: 0;
|
|
136
|
-
top: var(--gm-framework-size-top-right-height);
|
|
137
|
-
left: var(--gm-framework-size-left-width);
|
|
138
|
-
z-index: 10;
|
|
139
|
-
height: 40px;
|
|
140
|
-
padding: 0 20px;
|
|
141
|
-
background: var(--gm-color-bg-back);
|
|
142
|
-
border-bottom: 1px solid var(--gm-color-border-special);
|
|
143
|
-
|
|
144
|
-
.gm-framework-full-tabs-head-item {
|
|
145
|
-
font-size: 14px;
|
|
146
|
-
line-height: 28px;
|
|
147
|
-
padding: 0 10px;
|
|
148
|
-
position: relative;
|
|
149
|
-
cursor: pointer;
|
|
150
|
-
color: var(--gm-color-default);
|
|
151
|
-
border-left: 1px solid transparent;
|
|
152
|
-
border-top: 1px solid transparent;
|
|
153
|
-
border-right: 1px solid transparent;
|
|
154
|
-
border-bottom: none;
|
|
155
|
-
border-top-left-radius: 4px;
|
|
156
|
-
border-top-right-radius: 4px;
|
|
157
|
-
|
|
158
|
-
&.active {
|
|
159
|
-
background: white;
|
|
160
|
-
border-left: 1px solid var(--gm-color-border);
|
|
161
|
-
border-top: 1px solid var(--gm-color-border);
|
|
162
|
-
border-right: 1px solid var(--gm-color-border);
|
|
163
|
-
|
|
164
|
-
&::after {
|
|
165
|
-
content: '';
|
|
166
|
-
height: 1px;
|
|
167
|
-
position: absolute;
|
|
168
|
-
left: 0;
|
|
169
|
-
right: 0;
|
|
170
|
-
bottom: -1px;
|
|
171
|
-
background: white;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// 放后面
|
|
180
|
-
@import './mobile.less';
|
|
181
|
-
@import './print.less';
|
|
1
|
+
@import '~@gm-pc/react/src/var.less';
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--gm-framework-size-left-width: 136px;
|
|
5
|
+
--gm-framework-size-top-right-height: 64px;
|
|
6
|
+
--gm-framework-z-index-tabs-head: 101;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.gm-framework {
|
|
10
|
+
// 满足内容区域最小一屏
|
|
11
|
+
.gm-framework-full-height {
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.gm-framework-left {
|
|
16
|
+
z-index: 990; // 需要少于1000大于950。1000-浮层的最小值，950-stick的值，先取990
|
|
17
|
+
width: var(--gm-framework-size-left-width);
|
|
18
|
+
|
|
19
|
+
.gm-framework-left-default {
|
|
20
|
+
width: inherit;
|
|
21
|
+
|
|
22
|
+
.gm-framework-left-default-inner {
|
|
23
|
+
z-index: 110;
|
|
24
|
+
position: fixed;
|
|
25
|
+
height: 100vh;
|
|
26
|
+
width: inherit;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.gm-framework-right {
|
|
32
|
+
width: var(--gm-framework-size-left-width);
|
|
33
|
+
|
|
34
|
+
.gm-framework-right-top {
|
|
35
|
+
.gm-framework-right-top-default {
|
|
36
|
+
height: var(--gm-framework-size-top-right-height);
|
|
37
|
+
|
|
38
|
+
.gm-framework-right-top-default-inner {
|
|
39
|
+
position: fixed;
|
|
40
|
+
top: 0;
|
|
41
|
+
left: var(--gm-framework-size-left-width);
|
|
42
|
+
right: 0;
|
|
43
|
+
border-bottom: 1px solid var(--gm-color-border-special);
|
|
44
|
+
z-index: 101;
|
|
45
|
+
background: white;
|
|
46
|
+
height: var(--gm-framework-size-top-right-height);
|
|
47
|
+
|
|
48
|
+
.gm-framework-right-top-default-mobile-nav {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// breadcrumb
|
|
57
|
+
.gm-framework-breadcrumb {
|
|
58
|
+
.gm-framework-breadcrumb-default {
|
|
59
|
+
position: relative;
|
|
60
|
+
margin-bottom: 0;
|
|
61
|
+
padding: 0 20px 0 20px;
|
|
62
|
+
line-height: 1;
|
|
63
|
+
font-size: 12px;
|
|
64
|
+
|
|
65
|
+
a {
|
|
66
|
+
display: inline-block;
|
|
67
|
+
color: var(--gm-color-desc);
|
|
68
|
+
text-decoration: none;
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
color: var(--gm-color-primary);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&::before {
|
|
75
|
+
content: '/\00a0';
|
|
76
|
+
padding: 0 5px;
|
|
77
|
+
color: #ccc;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
a:first-child {
|
|
82
|
+
&::before {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
a:last-child {
|
|
88
|
+
color: var(--gm-color-default);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.gm-framework-info {
|
|
94
|
+
.gm-framework-info-default {
|
|
95
|
+
.gm-framework-info-default-item {
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
width: 30px;
|
|
98
|
+
height: 30px;
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
text-align: center;
|
|
101
|
+
font-size: 18px;
|
|
102
|
+
line-height: 30px;
|
|
103
|
+
margin-right: 20px;
|
|
104
|
+
|
|
105
|
+
&:hover {
|
|
106
|
+
background-color: rgba(239, 242, 246, 0.5);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.gm-framework-info-default-setting-popover {
|
|
111
|
+
min-width: 100px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.gm-framework-info-default-mobile-nav {
|
|
115
|
+
display: none;
|
|
116
|
+
line-height: 30px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// 暴露给外面用
|
|
122
|
+
.gm-framework-content-full {
|
|
123
|
+
height: calc(100vh - var(--gm-framework-size-top-right-height));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.gm-framework-full-tabs {
|
|
127
|
+
min-height: calc(100% - var(--gm-framework-size-top-right-height));
|
|
128
|
+
|
|
129
|
+
.gm-framework-full-tabs-head-fix {
|
|
130
|
+
height: 40px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.gm-framework-full-tabs-head {
|
|
134
|
+
position: fixed;
|
|
135
|
+
right: 0;
|
|
136
|
+
top: var(--gm-framework-size-top-right-height);
|
|
137
|
+
left: var(--gm-framework-size-left-width);
|
|
138
|
+
z-index: 10;
|
|
139
|
+
height: 40px;
|
|
140
|
+
padding: 0 20px;
|
|
141
|
+
background: var(--gm-color-bg-back);
|
|
142
|
+
border-bottom: 1px solid var(--gm-color-border-special);
|
|
143
|
+
|
|
144
|
+
.gm-framework-full-tabs-head-item {
|
|
145
|
+
font-size: 14px;
|
|
146
|
+
line-height: 28px;
|
|
147
|
+
padding: 0 10px;
|
|
148
|
+
position: relative;
|
|
149
|
+
cursor: pointer;
|
|
150
|
+
color: var(--gm-color-default);
|
|
151
|
+
border-left: 1px solid transparent;
|
|
152
|
+
border-top: 1px solid transparent;
|
|
153
|
+
border-right: 1px solid transparent;
|
|
154
|
+
border-bottom: none;
|
|
155
|
+
border-top-left-radius: 4px;
|
|
156
|
+
border-top-right-radius: 4px;
|
|
157
|
+
|
|
158
|
+
&.active {
|
|
159
|
+
background: white;
|
|
160
|
+
border-left: 1px solid var(--gm-color-border);
|
|
161
|
+
border-top: 1px solid var(--gm-color-border);
|
|
162
|
+
border-right: 1px solid var(--gm-color-border);
|
|
163
|
+
|
|
164
|
+
&::after {
|
|
165
|
+
content: '';
|
|
166
|
+
height: 1px;
|
|
167
|
+
position: absolute;
|
|
168
|
+
left: 0;
|
|
169
|
+
right: 0;
|
|
170
|
+
bottom: -1px;
|
|
171
|
+
background: white;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// 放后面
|
|
180
|
+
@import './mobile.less';
|
|
181
|
+
@import './print.less';
|
package/src/index.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export { default as Breadcrumb } from './component/breadcrumb'
|
|
2
|
-
export { default as Framework } from './component/framework'
|
|
3
|
-
export { default as FullTabs } from './component/full_tabs'
|
|
4
|
-
export { default as Info } from './component/info'
|
|
5
|
-
export { default as Left } from './component/left'
|
|
6
|
-
export { default as RightTop } from './component/right_top'
|
|
7
|
-
|
|
8
|
-
export type { BreadcrumbProps, BreadCrumbsItem } from './component/breadcrumb'
|
|
9
|
-
export type { FrameworkProps, FrameworkStatic } from './component/framework'
|
|
10
|
-
export type { FullTabsProps, FullTabsItem } from './component/full_tabs'
|
|
11
|
-
export type { InfoProps, InfoMore } from './component/info'
|
|
12
|
-
export type { LeftProps } from './component/left'
|
|
13
|
-
export type { RightTopProps } from './component/right_top'
|
|
1
|
+
export { default as Breadcrumb } from './component/breadcrumb'
|
|
2
|
+
export { default as Framework } from './component/framework'
|
|
3
|
+
export { default as FullTabs } from './component/full_tabs'
|
|
4
|
+
export { default as Info } from './component/info'
|
|
5
|
+
export { default as Left } from './component/left'
|
|
6
|
+
export { default as RightTop } from './component/right_top'
|
|
7
|
+
|
|
8
|
+
export type { BreadcrumbProps, BreadCrumbsItem } from './component/breadcrumb'
|
|
9
|
+
export type { FrameworkProps, FrameworkStatic } from './component/framework'
|
|
10
|
+
export type { FullTabsProps, FullTabsItem } from './component/full_tabs'
|
|
11
|
+
export type { InfoProps, InfoMore } from './component/info'
|
|
12
|
+
export type { LeftProps } from './component/left'
|
|
13
|
+
export type { RightTopProps } from './component/right_top'
|
package/src/mobile.less
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
@media (max-width: 768px) {
|
|
2
|
-
.gm-framework {
|
|
3
|
-
&-left {
|
|
4
|
-
&-default {
|
|
5
|
-
width: 0 !important;
|
|
6
|
-
|
|
7
|
-
&-inner {
|
|
8
|
-
left: -110%;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
&-right-top {
|
|
14
|
-
&-default {
|
|
15
|
-
&-inner {
|
|
16
|
-
left: 0 !important;
|
|
17
|
-
|
|
18
|
-
.gm-framework-right-top-default-mobile-nav {
|
|
19
|
-
display: block;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
&.gm-framework-mobile-menu {
|
|
26
|
-
.gm-framework-left-default-inner {
|
|
27
|
-
left: 0;
|
|
28
|
-
width: 100vw !important;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.gm-framework-full-tabs {
|
|
33
|
-
.gm-framework-full-tabs-list {
|
|
34
|
-
left: 0 !important;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
1
|
+
@media (max-width: 768px) {
|
|
2
|
+
.gm-framework {
|
|
3
|
+
&-left {
|
|
4
|
+
&-default {
|
|
5
|
+
width: 0 !important;
|
|
6
|
+
|
|
7
|
+
&-inner {
|
|
8
|
+
left: -110%;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&-right-top {
|
|
14
|
+
&-default {
|
|
15
|
+
&-inner {
|
|
16
|
+
left: 0 !important;
|
|
17
|
+
|
|
18
|
+
.gm-framework-right-top-default-mobile-nav {
|
|
19
|
+
display: block;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&.gm-framework-mobile-menu {
|
|
26
|
+
.gm-framework-left-default-inner {
|
|
27
|
+
left: 0;
|
|
28
|
+
width: 100vw !important;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.gm-framework-full-tabs {
|
|
33
|
+
.gm-framework-full-tabs-list {
|
|
34
|
+
left: 0 !important;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|