@zgfe/modules-attribution 1.1.13-zhongyuan.0 → 1.1.13-zhongyuan.1
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/README.md +35 -35
- package/es/components/common/styles/index.less +27 -27
- package/es/components/option/styles/index.less +22 -22
- package/es/components/searchTime/styles/index.less +18 -18
- package/es/components/tableList/styles/index.less +18 -18
- package/es/components/title/styles/index.less +84 -84
- package/es/components/title/styles/search.less +27 -27
- package/es/images/empty.png +0 -0
- package/es/modules/content/styles/index.less +39 -39
- package/es/modules/home/demo/styles/index.less +33 -33
- package/es/modules/home/styles/index.less +68 -68
- package/es/modules/searchPanel/index.js +1 -3
- package/es/modules/searchPanel/styles/index.less +226 -226
- package/es/style/image/ring.svg +8 -8
- package/es/style/index.less +47 -47
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
# modules-attribution
|
|
2
|
-
|
|
3
|
-
洞察分析
|
|
4
|
-
|
|
5
|
-
## Getting Started
|
|
6
|
-
|
|
7
|
-
Install dependencies,
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
$ npm i
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Start the dev server,
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
$ npm start
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Build documentation,
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
$ npm run docs:build
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Run test,
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
$ npm test
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Build library via `father-build`,
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
$ npm run build
|
|
35
|
-
```
|
|
1
|
+
# modules-attribution
|
|
2
|
+
|
|
3
|
+
洞察分析
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
Install dependencies,
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
$ npm i
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Start the dev server,
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
$ npm start
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Build documentation,
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
$ npm run docs:build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Run test,
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
$ npm test
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Build library via `father-build`,
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
$ npm run build
|
|
35
|
+
```
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
-
|
|
3
|
-
.mi-common {
|
|
4
|
-
&-loading-icon {
|
|
5
|
-
z-index: 1000;
|
|
6
|
-
display: inline-block;
|
|
7
|
-
width: 40px;
|
|
8
|
-
height: 40px;
|
|
9
|
-
background: url('../../../style/image/ring.svg') no-repeat;
|
|
10
|
-
background-size: contain;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
&-none-text {
|
|
14
|
-
color: @text-color;
|
|
15
|
-
font-size: 16px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
&-none {
|
|
19
|
-
width: 348px;
|
|
20
|
-
height: 132px;
|
|
21
|
-
background: url('../../../style/image/noData.png') no-repeat;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&-none-container {
|
|
25
|
-
text-align: center;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
1
|
+
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
+
|
|
3
|
+
.mi-common {
|
|
4
|
+
&-loading-icon {
|
|
5
|
+
z-index: 1000;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
width: 40px;
|
|
8
|
+
height: 40px;
|
|
9
|
+
background: url('../../../style/image/ring.svg') no-repeat;
|
|
10
|
+
background-size: contain;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&-none-text {
|
|
14
|
+
color: @text-color;
|
|
15
|
+
font-size: 16px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&-none {
|
|
19
|
+
width: 348px;
|
|
20
|
+
height: 132px;
|
|
21
|
+
background: url('../../../style/image/noData.png') no-repeat;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&-none-container {
|
|
25
|
+
text-align: center;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
@import '~@zgfe/business-lib/es/assets/styles/variable.less';
|
|
2
|
-
|
|
3
|
-
.attr-option-group {
|
|
4
|
-
display: flex;
|
|
5
|
-
&-refresh {
|
|
6
|
-
display: flex !important;
|
|
7
|
-
gap: 4px;
|
|
8
|
-
}
|
|
9
|
-
&-icon.bsicon {
|
|
10
|
-
margin-right: @margin-xss;
|
|
11
|
-
font-size: 18px;
|
|
12
|
-
}
|
|
13
|
-
.ant-btn {
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
margin-right: 16px;
|
|
17
|
-
padding: 0 12px;
|
|
18
|
-
// &:not(:first-child) {
|
|
19
|
-
// margin-left: 16px;
|
|
20
|
-
// }
|
|
21
|
-
}
|
|
22
|
-
}
|
|
1
|
+
@import '~@zgfe/business-lib/es/assets/styles/variable.less';
|
|
2
|
+
|
|
3
|
+
.attr-option-group {
|
|
4
|
+
display: flex;
|
|
5
|
+
&-refresh {
|
|
6
|
+
display: flex !important;
|
|
7
|
+
gap: 4px;
|
|
8
|
+
}
|
|
9
|
+
&-icon.bsicon {
|
|
10
|
+
margin-right: @margin-xss;
|
|
11
|
+
font-size: 18px;
|
|
12
|
+
}
|
|
13
|
+
.ant-btn {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
margin-right: 16px;
|
|
17
|
+
padding: 0 12px;
|
|
18
|
+
// &:not(:first-child) {
|
|
19
|
+
// margin-left: 16px;
|
|
20
|
+
// }
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
@import '~@zgfe/business-lib/es/assets/styles/variable.less';
|
|
2
|
-
|
|
3
|
-
.attribution-search-panel {
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
.biz-date-picker-wrap {
|
|
7
|
-
> :nth-child(1) {
|
|
8
|
-
display: none;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
&-search-right {
|
|
12
|
-
display: flex;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&-select {
|
|
16
|
-
width: 112px;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
1
|
+
@import '~@zgfe/business-lib/es/assets/styles/variable.less';
|
|
2
|
+
|
|
3
|
+
.attribution-search-panel {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
.biz-date-picker-wrap {
|
|
7
|
+
> :nth-child(1) {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
&-search-right {
|
|
12
|
+
display: flex;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&-select {
|
|
16
|
+
width: 112px;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
.table-list {
|
|
2
|
-
margin-top: 25px;
|
|
3
|
-
.ant-table-wrapper{
|
|
4
|
-
margin-bottom: 40px;
|
|
5
|
-
}
|
|
6
|
-
&-empty-tips {
|
|
7
|
-
margin-top: 112px;
|
|
8
|
-
text-align: center;
|
|
9
|
-
img{
|
|
10
|
-
width: 88px;
|
|
11
|
-
height: 88px;
|
|
12
|
-
}
|
|
13
|
-
p{
|
|
14
|
-
color: #354354;
|
|
15
|
-
line-height: 20px;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
1
|
+
.table-list {
|
|
2
|
+
margin-top: 25px;
|
|
3
|
+
.ant-table-wrapper{
|
|
4
|
+
margin-bottom: 40px;
|
|
5
|
+
}
|
|
6
|
+
&-empty-tips {
|
|
7
|
+
margin-top: 112px;
|
|
8
|
+
text-align: center;
|
|
9
|
+
img{
|
|
10
|
+
width: 88px;
|
|
11
|
+
height: 88px;
|
|
12
|
+
}
|
|
13
|
+
p{
|
|
14
|
+
color: #354354;
|
|
15
|
+
line-height: 20px;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
-
|
|
3
|
-
.attribution-title {
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
justify-content: space-between;
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 64px;
|
|
9
|
-
padding: 0 24px;
|
|
10
|
-
background: #fff;
|
|
11
|
-
|
|
12
|
-
&-option {
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
}
|
|
16
|
-
&-input-box {
|
|
17
|
-
white-space: nowrap;
|
|
18
|
-
.btn-back {
|
|
19
|
-
margin-right: 8px;
|
|
20
|
-
color: #5f6085;
|
|
21
|
-
}
|
|
22
|
-
&-container {
|
|
23
|
-
position: relative;
|
|
24
|
-
display: inline-block;
|
|
25
|
-
height: 100%;
|
|
26
|
-
}
|
|
27
|
-
&-content {
|
|
28
|
-
height: @height-base;
|
|
29
|
-
color: @text-color;
|
|
30
|
-
font-weight: 600;
|
|
31
|
-
font-size: 16px;
|
|
32
|
-
background: @white !important;
|
|
33
|
-
border: 1px solid transparent;
|
|
34
|
-
|
|
35
|
-
&:hover,
|
|
36
|
-
&:focus {
|
|
37
|
-
// border-color: @primary-color;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
&-error-tip {
|
|
42
|
-
position: absolute;
|
|
43
|
-
top: 100%;
|
|
44
|
-
left: 0;
|
|
45
|
-
color: @error-color;
|
|
46
|
-
line-height: 1.2;
|
|
47
|
-
}
|
|
48
|
-
&-dropdown {
|
|
49
|
-
.ant-dropdown-menu-item:hover span {
|
|
50
|
-
// color: @primary-color;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.ant-dropdown-menu-item-icon {
|
|
54
|
-
font-size: 16px;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
/*更多按钮*/
|
|
58
|
-
&-pop-btn {
|
|
59
|
-
width: @height-base;
|
|
60
|
-
height: @height-base;
|
|
61
|
-
color: @text-color-secondary;
|
|
62
|
-
font-size: 16px;
|
|
63
|
-
line-height: @height-base;
|
|
64
|
-
text-align: center;
|
|
65
|
-
border-radius: @border-radius-small;
|
|
66
|
-
transform: rotate(90deg);
|
|
67
|
-
|
|
68
|
-
&:hover {
|
|
69
|
-
.__default-hover();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.attribution-btn {
|
|
75
|
-
margin-right: 16px;
|
|
76
|
-
border-radius: @border-radius-small;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.attribution-divider {
|
|
80
|
-
width: 1px;
|
|
81
|
-
height: @height-base;
|
|
82
|
-
margin: 0 32px;
|
|
83
|
-
background: @border-color-base;
|
|
84
|
-
}
|
|
1
|
+
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
+
|
|
3
|
+
.attribution-title {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: space-between;
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 64px;
|
|
9
|
+
padding: 0 24px;
|
|
10
|
+
background: #fff;
|
|
11
|
+
|
|
12
|
+
&-option {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
}
|
|
16
|
+
&-input-box {
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
.btn-back {
|
|
19
|
+
margin-right: 8px;
|
|
20
|
+
color: #5f6085;
|
|
21
|
+
}
|
|
22
|
+
&-container {
|
|
23
|
+
position: relative;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
height: 100%;
|
|
26
|
+
}
|
|
27
|
+
&-content {
|
|
28
|
+
height: @height-base;
|
|
29
|
+
color: @text-color;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
font-size: 16px;
|
|
32
|
+
background: @white !important;
|
|
33
|
+
border: 1px solid transparent;
|
|
34
|
+
|
|
35
|
+
&:hover,
|
|
36
|
+
&:focus {
|
|
37
|
+
// border-color: @primary-color;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
&-error-tip {
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 100%;
|
|
44
|
+
left: 0;
|
|
45
|
+
color: @error-color;
|
|
46
|
+
line-height: 1.2;
|
|
47
|
+
}
|
|
48
|
+
&-dropdown {
|
|
49
|
+
.ant-dropdown-menu-item:hover span {
|
|
50
|
+
// color: @primary-color;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ant-dropdown-menu-item-icon {
|
|
54
|
+
font-size: 16px;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
/*更多按钮*/
|
|
58
|
+
&-pop-btn {
|
|
59
|
+
width: @height-base;
|
|
60
|
+
height: @height-base;
|
|
61
|
+
color: @text-color-secondary;
|
|
62
|
+
font-size: 16px;
|
|
63
|
+
line-height: @height-base;
|
|
64
|
+
text-align: center;
|
|
65
|
+
border-radius: @border-radius-small;
|
|
66
|
+
transform: rotate(90deg);
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
.__default-hover();
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.attribution-btn {
|
|
75
|
+
margin-right: 16px;
|
|
76
|
+
border-radius: @border-radius-small;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.attribution-divider {
|
|
80
|
+
width: 1px;
|
|
81
|
+
height: @height-base;
|
|
82
|
+
margin: 0 32px;
|
|
83
|
+
background: @border-color-base;
|
|
84
|
+
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
-
|
|
3
|
-
.search-title {
|
|
4
|
-
display: flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
height: 24px;
|
|
7
|
-
transition: all 0.3s;
|
|
8
|
-
|
|
9
|
-
&-title {
|
|
10
|
-
margin-right: 15px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
&-input {
|
|
14
|
-
min-width: 100px;
|
|
15
|
-
max-width: 200px;
|
|
16
|
-
height: 24px;
|
|
17
|
-
background-color: #fff !important;
|
|
18
|
-
.ant-input {
|
|
19
|
-
background-color: #fff !important;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&-icon {
|
|
24
|
-
color: #5f6085;
|
|
25
|
-
font-size: 12px;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
1
|
+
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
+
|
|
3
|
+
.search-title {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
height: 24px;
|
|
7
|
+
transition: all 0.3s;
|
|
8
|
+
|
|
9
|
+
&-title {
|
|
10
|
+
margin-right: 15px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&-input {
|
|
14
|
+
min-width: 100px;
|
|
15
|
+
max-width: 200px;
|
|
16
|
+
height: 24px;
|
|
17
|
+
background-color: #fff !important;
|
|
18
|
+
.ant-input {
|
|
19
|
+
background-color: #fff !important;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-icon {
|
|
24
|
+
color: #5f6085;
|
|
25
|
+
font-size: 12px;
|
|
26
|
+
}
|
|
27
|
+
}
|
package/es/images/empty.png
CHANGED
|
File without changes
|
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
// .attribution-content {
|
|
2
|
-
// &-options {
|
|
3
|
-
// display: flex;
|
|
4
|
-
// justify-content: flex-end;
|
|
5
|
-
// // margin-bottom: 16px;
|
|
6
|
-
// }
|
|
7
|
-
// }
|
|
8
|
-
.attribution-container-content {
|
|
9
|
-
border-top: none;
|
|
10
|
-
}
|
|
11
|
-
.attribution-content {
|
|
12
|
-
&-top-content {
|
|
13
|
-
padding-top: 0 !important;
|
|
14
|
-
&-head {
|
|
15
|
-
background: #fafafb;
|
|
16
|
-
width: 100%;
|
|
17
|
-
display: flex;
|
|
18
|
-
justify-content: space-between;
|
|
19
|
-
align-items: center;
|
|
20
|
-
padding: 8px 0;
|
|
21
|
-
&-title {
|
|
22
|
-
color: var(--io-N-, #021429);
|
|
23
|
-
font-weight: 500;
|
|
24
|
-
font-size: 16px;
|
|
25
|
-
font-family: 'PingFang SC';
|
|
26
|
-
font-style: normal;
|
|
27
|
-
line-height: 20px; /* 125% */
|
|
28
|
-
letter-spacing: 0.016px;
|
|
29
|
-
}
|
|
30
|
-
&-right {
|
|
31
|
-
display: flex;
|
|
32
|
-
.option-group {
|
|
33
|
-
margin-right: 16px;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
}
|
|
1
|
+
// .attribution-content {
|
|
2
|
+
// &-options {
|
|
3
|
+
// display: flex;
|
|
4
|
+
// justify-content: flex-end;
|
|
5
|
+
// // margin-bottom: 16px;
|
|
6
|
+
// }
|
|
7
|
+
// }
|
|
8
|
+
.attribution-container-content {
|
|
9
|
+
border-top: none;
|
|
10
|
+
}
|
|
11
|
+
.attribution-content {
|
|
12
|
+
&-top-content {
|
|
13
|
+
padding-top: 0 !important;
|
|
14
|
+
&-head {
|
|
15
|
+
background: #fafafb;
|
|
16
|
+
width: 100%;
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: space-between;
|
|
19
|
+
align-items: center;
|
|
20
|
+
padding: 8px 0;
|
|
21
|
+
&-title {
|
|
22
|
+
color: var(--io-N-, #021429);
|
|
23
|
+
font-weight: 500;
|
|
24
|
+
font-size: 16px;
|
|
25
|
+
font-family: 'PingFang SC';
|
|
26
|
+
font-style: normal;
|
|
27
|
+
line-height: 20px; /* 125% */
|
|
28
|
+
letter-spacing: 0.016px;
|
|
29
|
+
}
|
|
30
|
+
&-right {
|
|
31
|
+
display: flex;
|
|
32
|
+
.option-group {
|
|
33
|
+
margin-right: 16px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
/*滚动条凹槽的颜色，还可以设置边框属性 */
|
|
2
|
-
::-webkit-scrollbar-track-piece {
|
|
3
|
-
background-color: #fff;
|
|
4
|
-
-webkit-border-radius: 10px;
|
|
5
|
-
-moz-border-radius: 10px;
|
|
6
|
-
border-radius: 10px;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
/*滚动条的宽度*/
|
|
10
|
-
::-webkit-scrollbar {
|
|
11
|
-
width: 10px;
|
|
12
|
-
height: 10px;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/*滚动条的设置*/
|
|
16
|
-
::-webkit-scrollbar-thumb {
|
|
17
|
-
background-color: #cacdd4;
|
|
18
|
-
background-clip: padding-box;
|
|
19
|
-
border: 2px solid #fff;
|
|
20
|
-
-webkit-border-radius: 10px;
|
|
21
|
-
-moz-border-radius: 10px;
|
|
22
|
-
border-radius: 10px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/*滚动条鼠标移上去*/
|
|
26
|
-
::-webkit-scrollbar-thumb:hover {
|
|
27
|
-
// background-color: #bbb;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
::-webkit-scrollbar-track-piece {
|
|
31
|
-
width: 6px;
|
|
32
|
-
height: 6px;
|
|
33
|
-
}
|
|
1
|
+
/*滚动条凹槽的颜色，还可以设置边框属性 */
|
|
2
|
+
::-webkit-scrollbar-track-piece {
|
|
3
|
+
background-color: #fff;
|
|
4
|
+
-webkit-border-radius: 10px;
|
|
5
|
+
-moz-border-radius: 10px;
|
|
6
|
+
border-radius: 10px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/*滚动条的宽度*/
|
|
10
|
+
::-webkit-scrollbar {
|
|
11
|
+
width: 10px;
|
|
12
|
+
height: 10px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/*滚动条的设置*/
|
|
16
|
+
::-webkit-scrollbar-thumb {
|
|
17
|
+
background-color: #cacdd4;
|
|
18
|
+
background-clip: padding-box;
|
|
19
|
+
border: 2px solid #fff;
|
|
20
|
+
-webkit-border-radius: 10px;
|
|
21
|
+
-moz-border-radius: 10px;
|
|
22
|
+
border-radius: 10px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/*滚动条鼠标移上去*/
|
|
26
|
+
::-webkit-scrollbar-thumb:hover {
|
|
27
|
+
// background-color: #bbb;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
::-webkit-scrollbar-track-piece {
|
|
31
|
+
width: 6px;
|
|
32
|
+
height: 6px;
|
|
33
|
+
}
|