@jx3box/jx3box-vue3-ui 0.3.1 → 0.3.2

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.
@@ -1,7 +1,5 @@
1
1
  // tinymce文章样式
2
2
 
3
- @import "./var.less";
4
-
5
3
  @import "tinymce/_.less";
6
4
  @import "tinymce/a.less";
7
5
  @import "tinymce/list.less";
@@ -18,6 +16,21 @@
18
16
  @import "tinymce/latex.less";
19
17
  @import "tinymce/nextpage.less";
20
18
 
19
+ @import "module/macro.less";
20
+ @import "module/talent.less";
21
+
21
22
  @import "tinymce/video.less";
23
+ @import "tinymce/macro.less";
24
+ @import "tinymce/qixue.less";
25
+ @import "tinymce/pz.less";
26
+ @import "tinymce/combo.less";
22
27
 
23
28
  @import "module/directory.less";
29
+ @import "module/icon.less";
30
+ @import "module/resource.less";
31
+ @import "module/jx3_element.less";
32
+
33
+ @import "module/buff.less";
34
+ @import "module/skill.less";
35
+ @import "module/item.less";
36
+ @import "module/npc.less";
@@ -85,7 +85,7 @@
85
85
  background-color: rgba(15, 34, 34, 0.88);
86
86
  // background-color: #0f2222;
87
87
  color: #ffffff;
88
-
88
+
89
89
  *{
90
90
  font-weight: normal;
91
91
  font-size: 13.6px;
@@ -9,6 +9,10 @@
9
9
  fill: #fff !important;
10
10
  }
11
11
  }
12
+
13
+ .u-jx3-icon {
14
+ transform: scale(1.5);
15
+ }
12
16
  }
13
17
 
14
18
  .m-resource-count {
@@ -199,7 +203,7 @@
199
203
  }
200
204
  }
201
205
 
202
- .c-large-dialog .el-dialog {
206
+ .c-large-dialog {
203
207
  .w(60%);
204
208
  height: 70%;
205
209
  .el-dialog__body {
@@ -211,12 +215,12 @@
211
215
  }
212
216
  }
213
217
  @media screen and (max-width: @notebook) {
214
- .c-large-dialog .el-dialog {
218
+ .c-large-dialog {
215
219
  .w(90%);
216
220
  }
217
221
  }
218
222
  @media screen and (max-width: @ipad-y) {
219
- .c-large-dialog .el-dialog {
223
+ .c-large-dialog {
220
224
  margin: 0 !important;
221
225
  .size(100%);
222
226
  max-height: none;
@@ -1,4 +1,4 @@
1
- .c-article-tinymce {
1
+ .c-article-tinymce{
2
2
  font-size: 1em;
3
3
  line-height: 1.8;
4
4
  color: #3d454d;
@@ -6,23 +6,23 @@
6
6
  -webkit-font-smoothing: antialiased !important;
7
7
  overflow-wrap: break-word;
8
8
  word-wrap: break-word;
9
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Microsoft YaHei", Trebuchet MS, Calibri,
9
+ font-family: -apple-system,BlinkMacSystemFont,Segoe UI,"Microsoft YaHei", Trebuchet MS, Calibri,
10
10
  BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, sans-serif;
11
11
  text-rendering: optimizelegibility;
12
12
 
13
- * {
13
+ *{
14
14
  max-width: 100%;
15
15
  box-sizing: border-box;
16
16
  }
17
17
  }
18
- .c-article-editor {
19
- margin: 8px;
18
+ .c-article-editor{
19
+ margin:8px;
20
20
  }
21
- .c-article-origin {
21
+ .c-article-origin{
22
22
  display: none;
23
23
  }
24
- @media print {
25
- .c-article-tinymce {
24
+ @media print{
25
+ .c-article-tinymce{
26
26
  -webkit-print-color-adjust: exact;
27
27
  }
28
- }
28
+ }
@@ -1,5 +1,5 @@
1
1
  /* 链接 */
2
- .c-article-tinymce {
2
+ .c-article-tinymce{
3
3
  a {
4
4
  color: #0366d6;
5
5
  text-decoration: none;
@@ -8,13 +8,13 @@
8
8
  }
9
9
  }
10
10
 
11
- .e-jx3-author {
11
+ .e-jx3-author{
12
12
  // padding: 2px 5px;
13
13
  // border-radius: 3px;
14
14
  // border: 1px solid #8250df;
15
- color: #8250df;
15
+ color:#8250df;
16
16
 
17
- &:hover {
17
+ &:hover{
18
18
  box-shadow: 0 1px 0 #8250df;
19
19
  // background-color: #fafbfc;
20
20
  }
@@ -1,4 +1,4 @@
1
- .c-article-tinymce {
1
+ .c-article-tinymce{
2
2
  //兼容旧代码
3
3
  code {
4
4
  font-family: Consolas, monospace, serif;
@@ -0,0 +1,86 @@
1
+ .c-article-tinymce:not(.c-article-editor) {
2
+ .w-skill-combo {
3
+ .flex;
4
+ gap: 20px;
5
+ flex-wrap: wrap;
6
+ list-style: none;
7
+ padding:0;
8
+ margin:0;
9
+ }
10
+ .w-skill-combo-item {
11
+ list-style: none;
12
+ .pr;
13
+ .flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ &:not(:last-of-type)::after {
17
+ content: "▲";
18
+ .pa;
19
+ right: -20px;
20
+ top: 5px;
21
+ transform: rotate(90deg);
22
+ }
23
+
24
+ img {
25
+ border: none;
26
+ padding: 0;
27
+ margin: 0;
28
+ }
29
+
30
+ .u-gcd-icon {
31
+ .pa;
32
+ // 左上角
33
+ left: -4px;
34
+ top: -4px;
35
+ background-color: #0366d6;
36
+ .size(12px);
37
+ .r(50%);
38
+ .db;
39
+ .none;
40
+
41
+ &.is-show {
42
+ display: inline-block;
43
+ }
44
+
45
+ i {
46
+ color: #fff;
47
+ .fz(12px);
48
+ .db;
49
+ }
50
+ }
51
+ .u-skill-name {
52
+ .fz(13px,1.5);
53
+ width: 56px;
54
+ overflow: hidden;
55
+ text-overflow: clip;
56
+ white-space: pre-wrap;
57
+ text-align: center;
58
+ }
59
+ }
60
+ }
61
+ .c-article-editor {
62
+ .e-skill-combo {
63
+ font-size: 14px;
64
+ width: 100%;
65
+ box-sizing: border-box;
66
+ background-color: #f1f8ff;
67
+ border: 1px solid #c8e1ff;
68
+ color: #62a9ff;
69
+ padding: 10px 10px 10px 30px;
70
+ font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
71
+ position: relative;
72
+ *zoom: 1;
73
+ border-radius: 3px;
74
+ }
75
+ .e-skill-combo:after {
76
+ content: "JX3BOX·连招套路";
77
+ position: absolute;
78
+ right: 8px;
79
+ top: 8px;
80
+ background-color: #62a9ff;
81
+ color: #fff;
82
+ border-radius: 3px;
83
+ padding: 2px 8px;
84
+ line-height: 21px;
85
+ }
86
+ }
@@ -1,9 +1,10 @@
1
1
  // 折叠文本
2
- .c-article-tinymce {
2
+ .c-article-tinymce{
3
3
  .e-details,
4
4
  .e-summary {
5
- font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
6
- Segoe UI Emoji, Segoe UI Symbol;
5
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
6
+ Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
7
+ Segoe UI Symbol;
7
8
  white-space: pre-wrap;
8
9
  margin: 0;
9
10
  }
@@ -1,5 +1,5 @@
1
1
  /* 水平线 */
2
- .c-article-tinymce {
2
+ .c-article-tinymce{
3
3
  hr {
4
4
  margin-top: 22px;
5
5
  margin-bottom: 22px;
@@ -1,21 +1,14 @@
1
1
  .hevue-imgpreview-wrap {
2
2
  .he-img-wrap {
3
- background: rgba(0, 0, 0, 0.8);
3
+ background: rgba(0,0,0,0.8);
4
4
  }
5
- .arrow,
6
- .he-close-icon {
7
- display: block !important;
8
- text-align: center !important;
5
+ .arrow, .he-close-icon {
6
+ display: block!important;
7
+ text-align: center!important;
9
8
  }
10
9
  .he-close-icon {
11
10
  &:hover {
12
11
  transform: scale(1.2);
13
12
  }
14
13
  }
15
- }
16
-
17
- .el-image-viewer__canvas {
18
- img {
19
- border: none;
20
- }
21
- }
14
+ }
@@ -1,47 +1,43 @@
1
1
  // 编辑器内样式
2
- .c-article-tinymce {
3
- .w-latex {
4
- .pr;
5
- font-family: Georgia, "Times New Roman", Times, serif;
6
- &:after {
7
- content: "JX3BOX·Katex";
8
- position: absolute;
9
- right: 0;
10
- top: -30px;
11
- background-color: @bg-black;
12
- color: #fff;
13
- border-radius: 3px;
14
- padding: 0 8px;
15
- line-height: 28px;
16
- height: 28px;
17
- box-sizing: border-box;
18
- font-size: 14px;
19
- font-family: consolas;
20
- }
21
- }
2
+ .c-article-tinymce{
3
+ .w-latex{
4
+ .pr;
5
+ font-family: Georgia, 'Times New Roman', Times, serif;
6
+ &:after{
7
+ content : 'JX3BOX·Katex';
8
+ position: absolute;right:0;top:-30px;
9
+ background-color:@bg-black;
10
+ color:#fff;
11
+ border-radius:3px;
12
+ padding:0 8px;
13
+ line-height:28px;
14
+ height: 28px;
15
+ box-sizing: border-box;
16
+ font-size: 14px;
17
+ font-family: consolas;
18
+ }
19
+ }
22
20
  }
23
21
  .c-article-editor {
24
- .e-latex-area {
25
- min-height: 24px;
26
- border-radius: 4px;
27
- padding: 10px;
28
- font-size: 14px;
29
- white-space: pre-wrap;
30
- background-color: #f1f8ff;
31
- border: 1px solid #c8e1ff;
32
- color: darken(#c8e1ff, 20%);
33
- font-family: Georgia, "Times New Roman", Times, serif;
34
- .pr;
35
- &:after {
36
- content: "Latex";
37
- position: absolute;
38
- right: 10px;
39
- top: 10px;
40
- background-color: darken(#c8e1ff, 20%);
41
- color: #fff;
42
- border-radius: 3px;
43
- padding: 0 8px;
44
- font-family: consolas;
45
- }
46
- }
47
- }
22
+ .e-latex-area{
23
+ min-height:24px;
24
+ border-radius:4px;
25
+ padding:10px;
26
+ font-size: 14px;
27
+ white-space: pre-wrap;
28
+ background-color: #f1f8ff;
29
+ border: 1px solid #c8e1ff;
30
+ color:darken(#c8e1ff,20%);
31
+ font-family: Georgia, 'Times New Roman', Times, serif;
32
+ .pr;
33
+ &:after{
34
+ content : 'Latex';
35
+ position: absolute;right:10px;top:10px;
36
+ background-color:darken(#c8e1ff,20%);
37
+ color:#fff;
38
+ border-radius:3px;
39
+ padding:0 8px;
40
+ font-family: consolas;
41
+ }
42
+ }
43
+ }
@@ -1,5 +1,5 @@
1
1
  /* 列表 */
2
- .c-article-tinymce {
2
+ .c-article-tinymce{
3
3
  ul,
4
4
  ol {
5
5
  margin: 20px 0;
@@ -35,9 +35,9 @@
35
35
  }
36
36
 
37
37
  // 新版checklist
38
- .tox-checklist > li {
38
+ .tox-checklist > li{
39
39
  line-height: 2.2;
40
- margin: 0 !important;
40
+ margin:0 !important;
41
41
  }
42
42
  .tox-checklist > li:not(.tox-checklist--hidden) {
43
43
  list-style: none;
@@ -54,7 +54,8 @@
54
54
  position: absolute;
55
55
  width: 1em;
56
56
  }
57
- .tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
57
+ .tox-checklist
58
+ li:not(.tox-checklist--hidden).tox-checklist--checked::before {
58
59
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
59
60
  }
60
61
  [dir="rtl"] .tox-checklist > li:not(.tox-checklist--hidden)::before {
@@ -0,0 +1,40 @@
1
+ // 编辑器外样式
2
+ .c-article-tinymce{
3
+ .e-jx3macro-area{
4
+ .pr;
5
+ &:after{
6
+ content : 'JX3BOX·MACRO';
7
+ position: absolute;right:0;top:-30px;
8
+ background-color:@bg-black;
9
+ color:#fff;
10
+ border-radius:3px;
11
+ padding:0 8px;
12
+ line-height:28px;
13
+ height: 28px;
14
+ box-sizing: border-box;
15
+ font-size: 14px;
16
+ }
17
+ }
18
+ }
19
+ // tinymce编辑器
20
+ .c-article-editor {
21
+ .e-jx3macro-area{
22
+ min-height:24px;
23
+ border-radius:4px;
24
+ padding:10px;
25
+ font-size: 14px;
26
+ white-space: pre-wrap;
27
+ background-color: #f1f8ff;
28
+ border: 1px solid #c8e1ff;
29
+ color:darken(#c8e1ff,20%);
30
+ .pr;
31
+ &:after{
32
+ content : 'JX3BOX·MACRO';
33
+ position: absolute;right:10px;top:10px;
34
+ background-color:darken(#c8e1ff,20%);
35
+ color:#fff;
36
+ border-radius:3px;
37
+ padding:0 8px;
38
+ }
39
+ }
40
+ }
@@ -24,11 +24,10 @@
24
24
  max-width: 100%;
25
25
  overflow-x: auto;
26
26
  text-align: center;
27
- justify-content: center;
28
27
 
29
- .el-pager {
30
- margin: 0;
31
- padding: 0;
28
+ .el-pager{
29
+ margin:0;
30
+ padding:0;
32
31
  }
33
32
  }
34
33
 
@@ -0,0 +1,39 @@
1
+ // 编辑器内
2
+ .e-pz-iframe{
3
+ min-height: 24px;
4
+ border-radius: 4px;
5
+ font-size: 14px;
6
+ width: 100%;
7
+ box-sizing: border-box;
8
+ background-color: #f1f8ff;
9
+ border: 1px solid #c8e1ff;
10
+ color: darken(#c8e1ff, 20%);
11
+
12
+ line-height: 40px !important;
13
+ padding: 0 10px 0 140px;
14
+ font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
15
+
16
+ .pr;
17
+ &:after {
18
+ content: "JX3BOX·配装方案";
19
+ position: absolute;
20
+ .lt(8px);
21
+ background-color: darken(#c8e1ff, 20%);
22
+ color: #fff;
23
+ border-radius: 3px;
24
+ padding: 2px 8px;
25
+ line-height: 21px;
26
+ }
27
+ }
28
+ // 渲染模式隐藏
29
+ .c-article-tinymce{
30
+ .e-pz-iframe{
31
+ display: none;
32
+ }
33
+ }
34
+ // tinymce编辑器内展示
35
+ .c-article-editor{
36
+ .e-pz-iframe{
37
+ display: block;
38
+ }
39
+ }
@@ -0,0 +1,39 @@
1
+ // 编辑器内
2
+ .e-jx3qixue-area ,.e-jx3talent2-area{
3
+ min-height: 24px;
4
+ border-radius: 4px;
5
+ font-size: 14px;
6
+ width: 100%;
7
+ box-sizing: border-box;
8
+ background-color: #f1f8ff;
9
+ border: 1px solid #c8e1ff;
10
+ color: darken(#c8e1ff, 20%);
11
+
12
+ line-height: 40px !important;
13
+ padding: 0 10px;
14
+ font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
15
+
16
+ .pr;
17
+ &:after {
18
+ content: "JX3BOX·TALENT";
19
+ position: absolute;
20
+ .rt(8px);
21
+ background-color: darken(#c8e1ff, 20%);
22
+ color: #fff;
23
+ border-radius: 3px;
24
+ padding: 2px 8px;
25
+ line-height: 21px;
26
+ }
27
+ }
28
+ // 渲染模式隐藏
29
+ .c-article{
30
+ .e-jx3qixue-area,.e-jx3talent2-area{
31
+ display: none;
32
+ }
33
+ }
34
+ // tinymce编辑器内展示
35
+ .c-article-editor{
36
+ .e-jx3qixue-area,.e-jx3talent2-area{
37
+ display: block;
38
+ }
39
+ }
@@ -1,5 +1,5 @@
1
1
  /* 引用 */
2
- .c-article-tinymce {
2
+ .c-article-tinymce{
3
3
  blockquote {
4
4
  border: 1px dashed #e1e4e8;
5
5
  border-radius: 4px;
@@ -3,14 +3,14 @@
3
3
  table {
4
4
  border-collapse: collapse;
5
5
  width: 100%;
6
- height: auto;
6
+ height:auto;
7
7
  margin: 10px 0;
8
8
  overflow-x: auto;
9
9
  max-width: 100%;
10
10
  border: none;
11
11
 
12
- line-height: 2.2;
13
- color: @color;
12
+ line-height:2.2;
13
+ color:@color;
14
14
 
15
15
  td,
16
16
  th {
@@ -39,22 +39,21 @@
39
39
  }
40
40
 
41
41
  @media screen and (max-width: @phone) {
42
- .c-article-tinymce {
42
+ .c-article-tinymce{
43
43
  table {
44
44
  display: block;
45
45
  width: 100% !important;
46
46
  height: auto !important;
47
47
 
48
- th,
49
- td {
48
+ th,td{
50
49
  white-space: nowrap;
51
50
  }
52
51
  }
53
52
  }
54
53
  }
55
54
 
56
- @media print {
57
- table {
55
+ @media print{
56
+ table{
58
57
  page-break-inside: avoid !important;
59
58
  }
60
- }
59
+ }
@@ -16,6 +16,32 @@
16
16
  box-sizing: border-box;
17
17
  }
18
18
  }
19
+ .w-player-bilibili {
20
+ width: 100%;
21
+ height: 800px;
22
+ border: 1px solid #eee;
23
+ box-sizing: border-box;
24
+ }
25
+ @media screen and (max-width:@ipad){
26
+ .w-player-bilibili{
27
+ height: 600px;
28
+ }
29
+ }
30
+ @media screen and (max-width:@ipad-y){
31
+ .w-player-bilibili{
32
+ height: 500px;
33
+ }
34
+ }
35
+ @media screen and (max-width:@phone){
36
+ .w-player-bilibili{
37
+ height: 240px;
38
+ }
39
+ }
40
+ @media screen and (max-width:@ip5){
41
+ .w-player-bilibili{
42
+ height: 180px;
43
+ }
44
+ }
19
45
  .c-article-editor {
20
46
  video,
21
47
  iframe {
@@ -12,13 +12,17 @@ function renderItem(vm, selector = ".w-jx3-element") {
12
12
  // 获取元素数据
13
13
  let type = $(e.target).attr("data-type");
14
14
  if (type == 'item') {
15
+ vm.item = {}
15
16
  vm.item.id = $(e.target).attr("data-id");
16
17
  vm.item.client = $(e.target).attr("data-client") == 'origin' ? 2 : 1;
17
18
  } else if (type === 'author') {
19
+ vm.author = {}
18
20
  vm.author.id = $(e.target).attr("data-id");
19
21
  } else if (type === 'emotion') {
22
+ vm.emotion = {}
20
23
  vm.emotion.id = $(e.target).attr("data-id");
21
24
  } else {
25
+ vm[type] = {}
22
26
  vm[type].client = $(e.target).attr("data-client");
23
27
  vm[type].id = $(e.target).attr("data-id");
24
28
  vm[type].level = $(e.target).attr("data-level");
@@ -26,6 +30,10 @@ function renderItem(vm, selector = ".w-jx3-element") {
26
30
 
27
31
  // 显示浮层
28
32
  $(pop_class).fadeIn();
33
+ vm.jx3_element ? '' : vm.jx3_element = {
34
+ style: {},
35
+ type: ''
36
+ }
29
37
  vm.jx3_element.type = type
30
38
 
31
39
  // 计算浮层位置
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-vue3-ui",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
4
4
  "description": "JX3BOX Vue3 UI",
5
5
  "main": "index.js",
6
6
  "scripts": {