gy-webcode2 1.0.8 → 1.0.10

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 (8) hide show
  1. package/components/breadcrumb.vue +27 -17
  2. package/components/themeConfig.vue +32 -34
  3. package/css/common.scss +0 -110
  4. package/css/layout.scss +109 -54
  5. package/css/modules/color.scss +3 -0
  6. package/css/modules/common.scss +95 -19
  7. package/package.json +1 -1
  8. package/scripts/watermark.js +26 -0
package/components/breadcrumb.vue CHANGED
@@ -1,30 +1,25 @@
1
1
  <template>
2
- <div class="breadcrumb">
3
- <div class="row1" v-show="$store.state.breadcrumbShow">
2
+ <div class="breadcrumb" :class="{default:position=='default',breadcrumb_top:position == 'top'}">
3
+ <div class="row1" v-if="showRow1">
4
4
  <div class="title ">
5
5
  <span class="">{{$route.meta.headerMenuName}}</span>
6
- <span class="iconBox">
6
+ <span class="breadcrumb_iconBox">
7
7
  <i class="el-icon-arrow-right"></i>
8
8
  </span>
9
9
  <span @click="menuClick" :class="{myHover:breadcrumb_list.length,s1:breadcrumb_list.length == 0}" >
10
10
  {{$route.meta.name}}
11
11
  </span>
12
12
  <template v-for="item,index in breadcrumb_list">
13
- <span class="iconBox">
13
+ <span class="breadcrumb_iconBox">
14
14
  <i class="el-icon-arrow-right"></i>
15
15
  </span>
16
16
  <span :class="{hover2:index < breadcrumb_list.length -1,s1:index == breadcrumb_list.length -1}" @click="itemClick(item,index)">
17
17
  {{item.name}}
18
18
  </span>
19
- <!-- v-if="index < breadcrumb_list.length -1" -->
20
- <!-- <span v-else >
21
- {{item.name}}
22
- </span> -->
23
19
  </template>
24
20
  </div>
25
-
26
21
  </div>
27
- <div class="pageHeader" v-if="pageHeaderShow">
22
+ <div class="pageHeader" v-if="position == 'default'" >
28
23
  <div class="name">
29
24
  <span :class="{myHover:isBack && breadcrumb_list.length}" @click="backClick()">
30
25
  <template v-if="breadcrumb_list.length">
@@ -51,10 +46,15 @@ export default {
51
46
  type:String,
52
47
  default:""
53
48
  },
54
- pageHeaderShow:{
55
- type:Boolean,
56
- default:true,
57
- },
49
+ position:{
50
+ type:String,
51
+ default:"default"
52
+ }
53
+ },
54
+ data(){
55
+ return {
56
+ headerMenuHide:defaultConfig.headerMenuHide
57
+ }
58
58
  },
59
59
  computed:{
60
60
  names(){
@@ -65,6 +65,18 @@ export default {
65
65
  },
66
66
  isBack(){
67
67
  return this.$listeners && this.$listeners['goBack']
68
+ },
69
+ showRow1(){
70
+ if(this.position == 'default'){
71
+ if(this.$store.state.breadcrumbShow && !this.headerMenuHide){
72
+ return true;
73
+ }
74
+ }
75
+ else if(this.position == 'top'){
76
+ if(this.$store.state.breadcrumbShow){
77
+ return true;
78
+ }
79
+ }
68
80
  }
69
81
 
70
82
  },
@@ -82,9 +94,7 @@ export default {
82
94
  },
83
95
  methods:{
84
96
  backClick(){
85
- // if(this.showBack){
86
- this.$emit('goBack');
87
- // }
97
+ this.$emit('goBack');
88
98
  },
89
99
  itemClick(data,index){
90
100
  if(index < this.breadcrumb_list.length -1){
package/components/themeConfig.vue CHANGED
@@ -1,46 +1,44 @@
1
1
  <template>
2
- <scrollBar left="25px" top="10px" right="25px">
2
+ <scrollBar left="24px" top="10px" right="24px">
3
3
  <div class="pageStyle">
4
-
5
-
6
- <div class="row1">
7
- 整体风格设置
8
- </div>
9
- <div class="stylPreview">
10
- <div class="item" @click="changeTheme(item.value)" :class="[`item_${item.id}`,{active:themeName == item.value}]" v-for="item,index in themeList" :key="item.id">
11
- <div class="iconBox">
12
- <i class="el-icon-check"></i>
13
- </div>
4
+ <div class="row1">
5
+ 整体风格设置
14
6
  </div>
15
- </div>
16
- <div class="row1 mar_t_10">
17
- 主题色
18
- </div>
19
- <div class="themeColors">
20
- <el-tooltip v-for="item,index in themeColorList" :key="item.id" :open-delay="200" effect="dark" :content="item.name" placement="top">
21
- <div class="item" @click="changeThemeColor(item.value)" :class="{active:themeColor == item.value}" :style="`background-color:${item.color}`">
7
+ <div class="stylPreview">
8
+ <div class="item" @click="changeTheme(item.value)" :class="[`item_${item.id}`,{active:themeName == item.value}]" v-for="item,index in themeList" :key="item.id">
22
9
  <div class="iconBox">
23
10
  <i class="el-icon-check"></i>
24
11
  </div>
25
12
  </div>
26
- </el-tooltip>
27
- </div>
28
- <el-divider></el-divider>
29
- <div class="row1 mar_t_10">
30
- 内容区域
31
- </div>
32
- <!-- <div class="flex aic jcb pad_t_10 pad_b_10">
33
- <div>水印</div>
34
- <div>
35
- <el-switch v-model="$store.state.watermarkShow"></el-switch>
36
13
  </div>
37
- </div> -->
38
- <div class="flex aic jcb pad_t_10 pad_b_10">
39
- <div>面包屑</div>
40
- <div>
41
- <el-switch v-model="$store.state.breadcrumbShow"></el-switch>
14
+ <div class="row1 mar_t_10">
15
+ 主题色
16
+ </div>
17
+ <div class="themeColors">
18
+ <el-tooltip v-for="item,index in themeColorList" :key="item.id" :open-delay="200" effect="dark" :content="item.name" placement="top">
19
+ <div class="item" @click="changeThemeColor(item.value)" :class="{active:themeColor == item.value}" :style="`background-color:${item.color}`">
20
+ <div class="iconBox">
21
+ <i class="el-icon-check"></i>
22
+ </div>
23
+ </div>
24
+ </el-tooltip>
25
+ </div>
26
+ <el-divider></el-divider>
27
+ <div class="row1 mar_t_10">
28
+ 内容区域
29
+ </div>
30
+ <div class="flex aic jcb pad_t_10 pad_b_10">
31
+ <div>水印</div>
32
+ <div>
33
+ <el-switch v-model="$store.state.watermarkShow"></el-switch>
34
+ </div>
35
+ </div>
36
+ <div class="flex aic jcb pad_t_10 pad_b_10">
37
+ <div>面包屑</div>
38
+ <div>
39
+ <el-switch v-model="$store.state.breadcrumbShow"></el-switch>
40
+ </div>
42
41
  </div>
43
- </div>
44
42
  </div>
45
43
 
46
44
  </scrollBar>
package/css/common.scss CHANGED
@@ -12,116 +12,6 @@
12
12
  @import "./modules/tree_check.scss";
13
13
  @import "./layout.scss";
14
14
 
15
- body{
16
- color: #262626;
17
- line-height: 1;
18
- background: #f0f2f5;
19
- font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
20
- }
21
- a:hover{
22
- text-decoration: none;
23
- }
24
- .wrapper_bar{
25
- position: absolute;
26
- left: 0;
27
- right: 0;
28
- top: 0;
29
- bottom: -17px;
30
- // bottom: 0;
31
- overflow: hidden;
32
- }
33
15
 
34
- .myBar,
35
- .myBar .el-table--scrollable-x .el-table__body-wrapper ,
36
- .myBar .el-table--scrollable-y .el-table__body-wrapper
37
- {
38
- &::-webkit-scrollbar-track-piece {
39
- border-radius: 3px;
40
- }
41
- &::-webkit-scrollbar {
42
- width: 6px;
43
- height: 6px;
44
- }
45
- &::-webkit-scrollbar-thumb {
46
- height: 10px;
47
- background-color: rgba(144,147,153,.3);
48
- border-radius: 7px;
49
- }
50
- }
51
- .myBar .el-table--scrollable-x .el-table__body-wrapper,
52
- .myBar .el-table--scrollable-y .el-table__body-wrapper {
53
- &::-webkit-scrollbar {
54
- height: 16px;
55
- width: 16px;
56
- }
57
- }
58
16
 
59
- .myBar_X_MAX,
60
- .myBar_X_MAX .el-table--scrollable-x .el-table__body-wrapper ,
61
- .myBar_X_MAX .el-table--scrollable-y .el-table__body-wrapper {
62
- &::-webkit-scrollbar {
63
- height: 16px;
64
- }
65
- }
66
- .myBar_Y_MAX ,
67
- .myBar_Y_MAX .el-table--scrollable-x .el-table__body-wrapper ,
68
- .myBar_Y_MAX .el-table--scrollable-y .el-table__body-wrapper {
69
- &::-webkit-scrollbar {
70
- width: 16px;
71
- }
72
- }
73
- .myBar_MAX ,
74
- .myBar_MAX .el-table--scrollable-x .el-table__body-wrapper ,
75
- .myBar_MAX .el-table--scrollable-y .el-table__body-wrapper {
76
- &::-webkit-scrollbar {
77
- height: 16px;
78
- width: 16px;
79
- }
80
- }
81
17
 
82
-
83
- .hover,.iconHover{
84
- cursor: pointer;
85
- @include themeColor('color','color');
86
- &:hover{
87
- @include themeColor('color','hover');
88
- }
89
- &:active{
90
- @include themeColor('color','down');
91
- }
92
- }
93
- .hover2{
94
- cursor: pointer;
95
- &:hover{
96
- @include themeColor('color','hover');
97
- }
98
- &:active{
99
- @include themeColor('color','down');
100
- }
101
- }
102
-
103
- .color_active{
104
- @include themeColor("color","color");
105
- }
106
-
107
- .mxplaceholder{
108
- // width:50px;
109
- min-width: 30px;
110
- float: left;
111
- height:30px;
112
- background: #ccc;
113
- margin-right: 10px;
114
- border-radius: 3px;
115
- }
116
- .draggable_move{
117
- background: #fff;
118
- border: 1px solid #eee;
119
- border-radius: 3px;
120
- color: #2997ff;
121
- font-size: 12px;
122
- padding: 5px 10px;
123
- cursor: pointer;
124
- z-index: 3000;
125
- width: auto !important;
126
- height: auto !important;
127
- }
package/css/layout.scss CHANGED
@@ -82,36 +82,69 @@
82
82
  }
83
83
 
84
84
  .breadcrumb{
85
- // height: 88px;
86
-
87
- // line-height: 40px;
88
- .row1{
89
- padding-left: 15px;
90
- padding-right: 15px;
91
- // height: 44px;
92
- align-items: center;
93
- overflow: hidden;
94
- position: relative;
95
- padding-top: 15px;
96
- // padding-bottom: 10px;
97
- // padding-bottom: 12px;
98
-
99
- display: flex;
100
- justify-content: space-between;
101
- .s1{
102
- // color: #1890ff;
103
- @include themeColor('color');
85
+ &.default{
86
+
87
+ .row1{
88
+ padding-left: 16px;
89
+ padding-right: 15px;
90
+ // height: 44px;
91
+ align-items: center;
92
+ overflow: hidden;
93
+ position: relative;
94
+ padding-top: 15px;
95
+ // padding-bottom: 10px;
96
+ // padding-bottom: 12px;
97
+
98
+ display: flex;
99
+ justify-content: space-between;
100
+ .s1{
101
+ // color: #1890ff;
102
+ @include themeColor('color');
103
+ }
104
+
105
+ .title{
106
+ display: flex;
107
+ align-items: center;
108
+ color:#595959;
109
+ .iconBox{
110
+ width:30px;
111
+ text-align: center;
112
+ font-size: 16px;
113
+ font-weight: bold;
114
+ }
115
+ }
104
116
  }
105
117
 
106
- .title{
107
- display: flex;
118
+ }
119
+ &.breadcrumb_top{
120
+ height: 100%;
121
+ display: flex;
122
+ flex-direction: column;
123
+ // align-items: center;
124
+ justify-content: center;
125
+ margin-left: 16px;
126
+ .row1{
108
127
  align-items: center;
109
- color:#595959;
110
- .iconBox{
111
- width:30px;
112
- text-align: center;
113
- font-size: 16px;
114
- font-weight: bold;
128
+ overflow: hidden;
129
+ position: relative;
130
+ display: flex;
131
+
132
+ justify-content: space-between;
133
+ .s1{
134
+ // color: #1890ff;
135
+ @include themeColor('color');
136
+ }
137
+
138
+ .title{
139
+ display: flex;
140
+ align-items: center;
141
+ color:#acb5ce;
142
+ .breadcrumb_iconBox{
143
+ width:30px;
144
+ text-align: center;
145
+ font-size: 16px;
146
+ font-weight: bold;
147
+ }
115
148
  }
116
149
  }
117
150
  }
@@ -124,39 +157,39 @@
124
157
  @include themeColor("color",'active')
125
158
  }
126
159
  }
127
- }
128
-
129
- .pageHeader{
130
- padding-left: 16px;
131
- padding-right: 16px;
132
- height: 32px;
133
- color: #262626;
134
-
135
- // margin-top: 5px;
136
- display: flex;
137
- justify-content: space-between;
138
- // margin-bottom: 8px;
139
- align-items: center;
140
- // align-items: flex-end;
141
- // margin-bottom: 16px;
142
- margin-bottom: 10px;
143
- margin-top: 10px;
144
- .name{
145
- font-size: 20px;
146
- }
147
- .myHover{
148
- cursor: pointer;
149
- &:hover{
150
- @include themeColor("color",'hover')
160
+ .pageHeader{
161
+ padding-left: 16px;
162
+ padding-right: 16px;
163
+ height: 32px;
164
+ color: #262626;
165
+
166
+ // margin-top: 5px;
167
+ display: flex;
168
+ justify-content: space-between;
169
+ // margin-bottom: 8px;
170
+ align-items: center;
171
+ // align-items: flex-end;
172
+ // margin-bottom: 16px;
173
+ margin-bottom: 10px;
174
+ margin-top: 10px;
175
+ .name{
176
+ font-size: 20px;
151
177
  }
152
- &:active{
153
- @include themeColor("color",'active')
178
+ .myHover{
179
+ cursor: pointer;
180
+ &:hover{
181
+ @include themeColor("color",'hover')
182
+ }
183
+ &:active{
184
+ @include themeColor("color",'active')
185
+ }
154
186
  }
187
+ // border: 1px solid #000;
155
188
  }
156
- // border: 1px solid #000;
157
189
  }
158
190
 
159
191
 
192
+
160
193
  .findBox{
161
194
  display: flex;
162
195
  flex-wrap: wrap;
@@ -274,4 +307,26 @@
274
307
  }
275
308
 
276
309
  }
310
+ }
311
+
312
+ .mxplaceholder{
313
+ // width:50px;
314
+ min-width: 30px;
315
+ float: left;
316
+ height:30px;
317
+ background: #ccc;
318
+ margin-right: 10px;
319
+ border-radius: 3px;
320
+ }
321
+ .draggable_move{
322
+ background: #fff;
323
+ border: 1px solid #eee;
324
+ border-radius: 3px;
325
+ color: #2997ff;
326
+ font-size: 12px;
327
+ padding: 5px 10px;
328
+ cursor: pointer;
329
+ z-index: 3000;
330
+ width: auto !important;
331
+ height: auto !important;
277
332
  }
package/css/modules/color.scss CHANGED
@@ -56,3 +56,6 @@
56
56
  .bg_fff{
57
57
  background: #fff !important;
58
58
  }
59
+ .color_active{
60
+ @include themeColor("color","color");
61
+ }
package/css/modules/common.scss CHANGED
@@ -16,6 +16,13 @@ pre{
16
16
  word-wrap: break-word;
17
17
  font-family: "Microsoft Yahei" !important;
18
18
  }
19
+
20
+ body{
21
+ color: #262626;
22
+ line-height: 1;
23
+ background: #f0f2f5;
24
+ font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif !important;
25
+ }
19
26
  .clear{clear:both;height:0;overflow:hidden;display:block}
20
27
  //.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:"."}
21
28
  //.clearfix{ overflow:hidden; zoom:1}
@@ -45,14 +52,14 @@ pre{
45
52
  overflow: auto !important;
46
53
  }
47
54
  a{color:#333333; text-decoration:none}
48
- a:hover{ text-decoration: underline;}
49
55
  a:link{
50
56
  text-decoration: none;
51
57
  }
52
- .vt{
53
- vertical-align: top;
58
+ a:hover{
59
+ text-decoration: none;
54
60
  }
55
61
 
62
+
56
63
  .flex,.disFlex,.df{
57
64
  display: flex;
58
65
  }
@@ -99,6 +106,9 @@ a:link{
99
106
  .vs{
100
107
  visibility: visible;
101
108
  }
109
+ .vt{
110
+ vertical-align: top;
111
+ }
102
112
 
103
113
 
104
114
  //添加省略号
@@ -113,11 +123,6 @@ a:link{
113
123
  cursor: pointer;
114
124
  }
115
125
 
116
- @mixin DianDianDian {
117
- overflow: hidden;
118
- text-overflow: ellipsis;
119
- white-space: nowrap;
120
- }
121
126
 
122
127
  .tmbg{
123
128
  position: absolute;
@@ -157,10 +162,6 @@ a:link{
157
162
 
158
163
  .radius_#{$i} {border-radius:#{$i}px !important;}
159
164
  }
160
- //padding-right
161
-
162
-
163
- // margin
164
165
 
165
166
  .mar_0{
166
167
  margin: 0 !important;
@@ -178,12 +179,6 @@ a:link{
178
179
 
179
180
 
180
181
 
181
-
182
-
183
-
184
-
185
-
186
-
187
182
  .opacity-enter {
188
183
  opacity: 0;
189
184
  }
@@ -214,4 +209,85 @@ a:link{
214
209
 
215
210
  .bg_none{
216
211
  background: none !important;
217
- }
212
+ }
213
+
214
+
215
+
216
+ .wrapper_bar{
217
+ position: absolute;
218
+ left: 0;
219
+ right: 0;
220
+ top: 0;
221
+ bottom: -17px;
222
+ // bottom: 0;
223
+ overflow: hidden;
224
+ }
225
+
226
+ .myBar,
227
+ .myBar .el-table--scrollable-x .el-table__body-wrapper ,
228
+ .myBar .el-table--scrollable-y .el-table__body-wrapper
229
+ {
230
+ &::-webkit-scrollbar-track-piece {
231
+ border-radius: 3px;
232
+ }
233
+ &::-webkit-scrollbar {
234
+ width: 6px;
235
+ height: 6px;
236
+ }
237
+ &::-webkit-scrollbar-thumb {
238
+ height: 10px;
239
+ background-color: rgba(144,147,153,.3);
240
+ border-radius: 7px;
241
+ }
242
+ }
243
+ .myBar .el-table--scrollable-x .el-table__body-wrapper,
244
+ .myBar .el-table--scrollable-y .el-table__body-wrapper {
245
+ &::-webkit-scrollbar {
246
+ height: 16px;
247
+ width: 16px;
248
+ }
249
+ }
250
+
251
+ .myBar_X_MAX,
252
+ .myBar_X_MAX .el-table--scrollable-x .el-table__body-wrapper ,
253
+ .myBar_X_MAX .el-table--scrollable-y .el-table__body-wrapper {
254
+ &::-webkit-scrollbar {
255
+ height: 16px;
256
+ }
257
+ }
258
+ .myBar_Y_MAX ,
259
+ .myBar_Y_MAX .el-table--scrollable-x .el-table__body-wrapper ,
260
+ .myBar_Y_MAX .el-table--scrollable-y .el-table__body-wrapper {
261
+ &::-webkit-scrollbar {
262
+ width: 16px;
263
+ }
264
+ }
265
+ .myBar_MAX ,
266
+ .myBar_MAX .el-table--scrollable-x .el-table__body-wrapper ,
267
+ .myBar_MAX .el-table--scrollable-y .el-table__body-wrapper {
268
+ &::-webkit-scrollbar {
269
+ height: 16px;
270
+ width: 16px;
271
+ }
272
+ }
273
+
274
+
275
+ .hover,.iconHover{
276
+ cursor: pointer;
277
+ @include themeColor('color','color');
278
+ &:hover{
279
+ @include themeColor('color','hover');
280
+ }
281
+ &:active{
282
+ @include themeColor('color','down');
283
+ }
284
+ }
285
+ .hover2{
286
+ cursor: pointer;
287
+ &:hover{
288
+ @include themeColor('color','hover');
289
+ }
290
+ &:active{
291
+ @include themeColor('color','down');
292
+ }
293
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gy-webcode2",
3
- "version": "1.0.8",
3
+ "version": "1.0.10",
4
4
  "description": "gy前端公共代码",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scripts/watermark.js ADDED
@@ -0,0 +1,26 @@
1
+ export default function({text="",color="rgba(0,0,0,0.07)",width=300,height=300}){
2
+ if(!text){
3
+ return '';
4
+ }
5
+ // let width = 300;
6
+ // let height = 300;
7
+ var cw = document.createElement("canvas")
8
+ cw.width=width;
9
+ cw.height=height;
10
+
11
+ var ctx = cw.getContext("2d");
12
+ ctx.clearRect(0,0,width,height);
13
+ ctx.textAlign = "center"
14
+ ctx.textBaseline = "middle"
15
+ ctx.font="16px 微软雅黑";
16
+
17
+ ctx.fillStyle = color;
18
+
19
+ ctx.rotate(-25*Math.PI/180);
20
+ ctx.fillText(`(${text})`, 50, 80);
21
+ // ctx.rotate(30*Math.PI/180);
22
+ let img = cw.toDataURL("image/webp");
23
+ // console.log(a);
24
+ // this.watermark_img = img;
25
+ return img;
26
+ }