n20-common-lib 3.1.10 → 3.1.11
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 +1 -1
- package/src/assets/css/element-variables.scss +2 -2
- package/src/assets/css/expandable-pane.scss +12 -9
- package/src/assets/css/expandable.scss +15 -6
- package/src/assets/css/plain-text.scss +11 -15
- package/src/components/Expandable/main.vue +14 -6
- package/style/index.css +1 -1
- package/theme/blue.css +1 -1
- package/theme/cctcRed.css +1 -1
- package/theme/green.css +1 -1
- package/theme/lightBlue.css +1 -1
- package/theme/orange.css +1 -1
- package/theme/purple.css +1 -1
- package/theme/red.css +1 -1
- package/theme/yellow.css +1 -1
package/package.json
CHANGED
|
@@ -991,8 +991,8 @@ $--empty-bottom-margin-top: 20px !default;
|
|
|
991
991
|
-------------------------- */
|
|
992
992
|
$--descriptions-header-margin-bottom: 20px !default;
|
|
993
993
|
$--descriptions-title-font-size: 16px !default;
|
|
994
|
-
$--descriptions-table-border: 1px solid
|
|
995
|
-
$--descriptions-item-bordered-label-background: #
|
|
994
|
+
$--descriptions-table-border: 1px solid #e5e6eb !default;
|
|
995
|
+
$--descriptions-item-bordered-label-background: #f7f8fa !default;
|
|
996
996
|
|
|
997
997
|
/* Skeleton
|
|
998
998
|
--------------------------*/
|
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
$--expandable-pane-height: 28px;
|
|
2
1
|
.n20-form-expandable-pane {
|
|
3
2
|
padding-bottom: 8px;
|
|
4
3
|
.n20-title {
|
|
5
|
-
height:
|
|
6
|
-
line-height:
|
|
7
|
-
|
|
8
|
-
color: $--color-text-primary;
|
|
4
|
+
height: auto;
|
|
5
|
+
line-height: 24px;
|
|
6
|
+
color: #1d2129;
|
|
9
7
|
padding: 0 12px;
|
|
10
|
-
margin-bottom:
|
|
8
|
+
margin-bottom: 12px;
|
|
11
9
|
margin-top: 8px;
|
|
10
|
+
font-size: 16px;
|
|
11
|
+
font-weight: 500;
|
|
12
12
|
&__algin_l {
|
|
13
13
|
margin-left: 20px;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.n20-tips {
|
|
18
|
-
font-size:
|
|
18
|
+
font-size: 16px;
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
display: flex;
|
|
21
21
|
align-items: center;
|
|
22
|
+
gap: 4px;
|
|
22
23
|
|
|
23
24
|
&:hover {
|
|
24
25
|
color: $--link-hover-color;
|
|
@@ -40,7 +41,9 @@ $--expandable-pane-height: 28px;
|
|
|
40
41
|
}
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
// 折叠图标样式
|
|
45
|
+
.n20-expand-icon {
|
|
46
|
+
font-size: 14px;
|
|
47
|
+
color: #4e5969;
|
|
45
48
|
}
|
|
46
49
|
}
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
.n20-form-expandable {
|
|
2
2
|
.n20-title {
|
|
3
|
-
height:
|
|
4
|
-
line-height:
|
|
5
|
-
|
|
6
|
-
color: $--color-text-primary;
|
|
3
|
+
height: auto;
|
|
4
|
+
line-height: 24px;
|
|
5
|
+
color: #1d2129;
|
|
7
6
|
padding: 0 12px;
|
|
8
|
-
margin-bottom:
|
|
7
|
+
margin-bottom: 12px;
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
font-weight: 500;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.n20-tips {
|
|
12
|
-
font-size:
|
|
13
|
+
font-size: 16px;
|
|
13
14
|
cursor: pointer;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: 4px;
|
|
14
18
|
|
|
15
19
|
&:hover {
|
|
16
20
|
color: $--link-hover-color;
|
|
@@ -24,4 +28,9 @@
|
|
|
24
28
|
transform: rotate(90deg);
|
|
25
29
|
}
|
|
26
30
|
}
|
|
31
|
+
|
|
32
|
+
.n20-expand-icon {
|
|
33
|
+
font-size: 14px;
|
|
34
|
+
color: #4e5969;
|
|
35
|
+
}
|
|
27
36
|
}
|
|
@@ -1,24 +1,20 @@
|
|
|
1
1
|
.n20-descriptions {
|
|
2
2
|
.el-descriptions__table {
|
|
3
3
|
table-layout: fixed;
|
|
4
|
-
border: 1px solid #
|
|
5
|
-
}
|
|
6
|
-
.el-descriptions-item__cell {
|
|
7
|
-
width: 70px;
|
|
8
|
-
border-top: none !important;
|
|
9
|
-
border-left: none !important;
|
|
10
|
-
border-bottom: none !important;
|
|
11
|
-
color: $--color-text-primary;
|
|
4
|
+
border: 1px solid #e5e6eb;
|
|
12
5
|
}
|
|
6
|
+
// 标签单元格（带边框标题）
|
|
13
7
|
.el-descriptions-item__label {
|
|
14
|
-
width:
|
|
15
|
-
background:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
color:
|
|
8
|
+
width: 160px;
|
|
9
|
+
background: #f7f8fa !important;
|
|
10
|
+
text-align: left !important;
|
|
11
|
+
padding: 7px 16px !important;
|
|
12
|
+
color: #4e5969;
|
|
19
13
|
}
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
// 内容单元格（带边框内容）
|
|
15
|
+
.el-descriptions-item__cell {
|
|
16
|
+
padding: 7px 16px !important;
|
|
17
|
+
color: #1d2129;
|
|
22
18
|
}
|
|
23
19
|
|
|
24
20
|
.after-color {
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="n20-form-expandable-pane">
|
|
3
|
-
<div
|
|
3
|
+
<div
|
|
4
|
+
v-if="position === 'top'"
|
|
5
|
+
class="n20-title flex-box flex-lr flex-v"
|
|
6
|
+
:class="{ 'n20-title__top': expand, titleClass }"
|
|
7
|
+
>
|
|
4
8
|
<span class="n20-tips flex-item" @click="getExpand">
|
|
5
|
-
<i v-if="icon" class="
|
|
9
|
+
<i v-if="icon" class="v3-icon-right1 n20-expand-icon" :class="{ expand: expand }"></i>
|
|
6
10
|
<slot name="title">
|
|
7
|
-
<span :class="{'n20-title__algin_l'
|
|
11
|
+
<span :class="{ 'n20-title__algin_l': !icon }">{{ title }}</span>
|
|
8
12
|
</slot>
|
|
9
13
|
</span>
|
|
10
14
|
<div>
|
|
@@ -16,9 +20,13 @@
|
|
|
16
20
|
<slot></slot>
|
|
17
21
|
</div>
|
|
18
22
|
</el-collapse-transition>
|
|
19
|
-
<div
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
<div
|
|
24
|
+
v-if="position === 'bottom'"
|
|
25
|
+
class="n20-title flex-box flex-lr flex-v"
|
|
26
|
+
:class="{ 'n20-title__bottom': expand, titleClass }"
|
|
27
|
+
>
|
|
28
|
+
<span class="n20-tips flex-item" @click="getExpand">
|
|
29
|
+
<i v-if="icon" class="v3-icon-right1 n20-expand-icon" :class="{ topExpand: expand }"></i>
|
|
22
30
|
<slot name="title">
|
|
23
31
|
<span>{{ title }}</span>
|
|
24
32
|
</slot>
|