gy-webcode2 1.1.2 → 1.1.4

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,10 @@
1
1
  <template>
2
- <div class="wrapper_bar">
3
- <el-scrollbar style="height:calc(100% - 17px);">
4
- <div :style="`height:100%;padding:${top} ${right} ${bottom} ${left}`">
2
+ <div class="wrapper_bar" ref="wrapper_bar" :class="{showx:scrollX}">
3
+ <!-- :style="`height:${scrollX ? '100%' : 'calc(100% - 17px)'};`" -->
4
+ <el-scrollbar class="pa0" style="bottom:-17px">
5
+ <div
6
+ :style="`padding:${top} ${right} ${bottom} ${left};`"
7
+ >
5
8
  <slot></slot>
6
9
  </div>
7
10
  </el-scrollbar>
@@ -10,28 +13,30 @@
10
13
 
11
14
  <script>
12
15
  export default {
13
- props: {
14
- left: {
15
- default: "0"
16
+ props:{
17
+ left:{
18
+ default:"0"
16
19
  },
17
- right: {
18
- default: "0"
20
+ right:{
21
+ default:"0"
19
22
  },
20
- top: {
21
- default: "0"
23
+ top:{
24
+ default:"0"
22
25
  },
23
- bottom: {
24
- default: "0"
26
+ bottom:{
27
+ default:"0"
28
+ },
29
+ scrollX:{
30
+ default:false,
25
31
  }
26
32
  },
27
- created() {
33
+ created(){
28
34
  // console.log(this.left)
35
+ },
36
+ mounted(){
29
37
  }
30
- };
38
+ }
31
39
  </script>
32
40
 
33
41
  <style>
34
- .wrapper_bar .el-scrollbar__wrap {
35
- overflow-x: auto;
36
- }
37
42
  </style>
@@ -17,12 +17,13 @@
17
17
  {{item.name}}
18
18
  </span>
19
19
  </template>
20
+ <slot name="nameAfter"></slot>
20
21
  </div>
21
22
  </div>
22
- <div class="pageHeader" v-if="position == 'default'" >
23
+ <div class="pageHeader" v-else >
23
24
  <div class="name">
24
- <span :class="{myHover:isBack}" @click="backClick()">
25
- <i v-if="isBack" class="el-icon-arrow-left"></i>
25
+ <span class="flex aic" :class="{myHover:isBack}" @click="backClick()">
26
+ <i v-if="isBack" class="el-icon-arrow-left mar_r_6"></i>
26
27
  <template v-if="breadcrumb_list.length">
27
28
  {{breadcrumb_list[breadcrumb_list.length -1].name}}
28
29
  </template>
@@ -31,7 +32,10 @@
31
32
  </template>
32
33
  </span>
33
34
  </div>
34
- <div>
35
+ <slot name="nameAfter"></slot>
36
+ </div>
37
+ <div class="other">
38
+ <div class="otherContainer">
35
39
  <slot name="other"></slot>
36
40
  </div>
37
41
  </div>
@@ -82,12 +86,12 @@ export default {
82
86
  },
83
87
  showRow1(){
84
88
  if(this.position == 'default'){
85
- if(this.$store.state.breadcrumbShow && !this.headerMenuHide){
89
+ if(this.$store.state.vuex_breadcrumbShow){
86
90
  return true;
87
91
  }
88
92
  }
89
93
  else if(this.position == 'top'){
90
- if(this.$store.state.breadcrumbShow){
94
+ if(this.$store.state.vuex_breadcrumbShow){
91
95
  return true;
92
96
  }
93
97
  }
@@ -0,0 +1,34 @@
1
+ <template>
2
+ <span class="operateBtnIcon " :class="{disabled:disabled}" @click="iconClick" >
3
+ <el-tooltip :enterable="false" :content="title" popper-class="operateBtnIconPopper" placement="bottom" effect="light">
4
+ <slot></slot>
5
+ </el-tooltip>
6
+ </span>
7
+ </template>
8
+
9
+ <script>
10
+ export default {
11
+ props:{
12
+ title:{
13
+ type:String,
14
+ default:"",
15
+ },
16
+ disabled:{
17
+ type:Boolean,
18
+ default:false
19
+ }
20
+ },
21
+ methods:{
22
+ iconClick(){
23
+ if(!this.disabled){
24
+
25
+ this.$emit('click')
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+
32
+ <style>
33
+
34
+ </style>
@@ -36,7 +36,7 @@
36
36
  <div class="flex aic jcb pad_t_10 pad_b_10">
37
37
  <div>面包屑</div>
38
38
  <div>
39
- <el-switch v-model="$store.state.breadcrumbShow"></el-switch>
39
+ <el-switch @change="(value)=>{setPageStyle('breadcrumbShow',value)}" v-model="$store.state.vuex_breadcrumbShow"></el-switch>
40
40
  </div>
41
41
  </div>
42
42
  </div>
@@ -129,20 +129,35 @@
129
129
  },
130
130
  computed:{
131
131
  themeName(){
132
- return this.$store.state.themeName
132
+ return this.$store.state.vuex_themeName
133
133
  },
134
134
  themeColor(){
135
- return this.$store.state.themeColor
135
+ return this.$store.state.vuex_themeColor
136
136
  },
137
137
  },
138
138
  methods:{
139
139
  changeTheme(value){
140
- this.$store.state.themeName = value;
140
+ this.$store.state.vuex_themeName = value;
141
141
  window.document.body.setAttribute('data-theme', value)
142
+ this.setPageStyle('themeName',value)
142
143
  },
143
144
  changeThemeColor(value){
144
- this.$store.state.themeColor = value;
145
+ this.$store.state.vuex_themeColor = value;
145
146
  window.document.body.setAttribute('data-theme-color', value)
147
+ this.setPageStyle('themeColor',value)
148
+ },
149
+ setPageStyle(key,val){
150
+ let gyPageStyle = localStorage.getItem('gy_pageStyle');
151
+ if(gyPageStyle){
152
+ gyPageStyle =JSON.parse(gyPageStyle)
153
+ }
154
+ else{
155
+ gyPageStyle = {}
156
+ }
157
+ // console.log(gyPageStyle);
158
+ // console.log(key,val);
159
+ gyPageStyle[key] = val;
160
+ localStorage.setItem('gy_pageStyle',JSON.stringify(gyPageStyle))
146
161
  }
147
162
  }
148
163
  }
package/css/layout.scss CHANGED
@@ -82,67 +82,40 @@
82
82
  }
83
83
 
84
84
  .breadcrumb{
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
- }
116
- }
85
+ display: flex;
86
+ justify-content: space-between;
87
+ flex-wrap: wrap;
88
+ .row1{
89
+ padding-left: 16px;
90
+ padding-right: 16px;
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;
117
98
 
118
- }
119
- &.breadcrumb_top{
120
- height: 100%;
121
99
  display: flex;
122
- flex-direction: column;
123
- // align-items: center;
124
- justify-content: center;
125
- margin-left: 16px;
126
- .row1{
127
- align-items: center;
128
- overflow: hidden;
129
- position: relative;
100
+ justify-content: space-between;
101
+ .s1{
102
+ // color: #1890ff;
103
+ @include themeColor('color');
104
+ }
105
+
106
+ .title{
130
107
  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
-
108
+ align-items: center;
109
+ color:#595959;
110
+ .iconBox{
111
+ width:30px;
112
+ text-align: center;
113
+ font-size: 16px;
114
+ font-weight: bold;
143
115
  }
144
116
  }
145
117
  }
118
+
146
119
  .breadcrumb_iconBox{
147
120
  width:30px;
148
121
  text-align: center;
@@ -166,14 +139,14 @@
166
139
 
167
140
  // margin-top: 5px;
168
141
  display: flex;
169
- justify-content: space-between;
142
+ // justify-content: space-between;
170
143
  // margin-bottom: 8px;
171
144
  align-items: center;
172
145
  // align-items: flex-end;
173
146
  // margin-bottom: 16px;
174
147
  margin-bottom: 5px;
175
148
  margin-top: 5px;
176
- .name{
149
+ >.name{
177
150
  font-size: 16px;
178
151
  }
179
152
  .myHover{
@@ -187,6 +160,21 @@
187
160
  }
188
161
  // border: 1px solid #000;
189
162
  }
163
+
164
+ .other{
165
+ display: flex;
166
+ align-items: flex-end;
167
+ justify-content: flex-end;
168
+ margin-right: 16px;
169
+ margin-left: 16px;
170
+ flex: 1;
171
+ // align-items: center;
172
+ .otherContainer{
173
+ min-height: 32px;
174
+ margin-bottom: 5px;
175
+ margin-top: 5px;
176
+ }
177
+ }
190
178
  }
191
179
 
192
180
 
@@ -234,7 +222,7 @@
234
222
  bottom: 0;
235
223
  display: flex;
236
224
  flex-direction: column;
237
- .header{
225
+ >.header{
238
226
  height: 56px;
239
227
  display: flex;
240
228
  align-items: center;
@@ -248,7 +236,7 @@
248
236
  cursor: pointer;
249
237
  }
250
238
  }
251
- .body{
239
+ >.body{
252
240
  position: relative;
253
241
  flex: 1;
254
242
  height: 0;
@@ -401,4 +389,5 @@
401
389
  .other{
402
390
  }
403
391
  }
404
- }
392
+ }
393
+
@@ -1,2 +1,96 @@
1
+ .operateBtnIcon{
2
+ display: inline-flex;
3
+ width: 24px;
4
+ height: 24px;
5
+ cursor: pointer;
6
+ border-radius: 50%;
7
+ justify-content: center;
8
+ align-items: center;
9
+ color: #fff;
10
+ font-size: 12px;
1
11
 
12
+ user-select: none;
13
+ @include themeColor("background-color",'color');
14
+ &:hover{
15
+ // background: #419cf1;
16
+ @include themeColor("background-color",'hover');
17
+ }
18
+ &:active{
19
+ // background: #1174d1;
20
+ @include themeColor("background-color",'active');
21
+ }
22
+ &.disabled{
23
+ cursor: no-drop;
24
+ @include themeColor("background-color",'color');
25
+ opacity: 0.3;
26
+ }
2
27
 
28
+ &.small{
29
+ width: 28px;
30
+ height: 28px;
31
+ font-size: 14px;
32
+ }
33
+ &.mini{
34
+ width: 24px;
35
+ height: 24px;
36
+ font-size: 12px;
37
+ }
38
+
39
+ &.hong{
40
+ background: #ec5b56;
41
+ user-select: none;
42
+ &:hover{
43
+ background: #e87773;
44
+ }
45
+ &:active{
46
+ background: #ce4b46;
47
+ }
48
+ &.disabled{
49
+ cursor: no-drop;
50
+ background: #f5adaa;
51
+ }
52
+ }
53
+ &.huang{
54
+ background: #f3a531;
55
+ user-select: none;
56
+ &:hover{
57
+ background: #f2b354;
58
+ }
59
+ &:active{
60
+ background: #d38d24;
61
+ }
62
+ &.disabled{
63
+ cursor: no-drop;
64
+ background: #f7deb9;
65
+ }
66
+ }
67
+ &.lv{
68
+ background: #52c41a;
69
+ user-select: none;
70
+ &:hover{
71
+ background: #95de64;
72
+ }
73
+ &:active{
74
+ background: #52c41a;
75
+ }
76
+ &.disabled{
77
+ cursor: no-drop;
78
+ background: #52c41a;
79
+ opacity: 0.3;
80
+ }
81
+ }
82
+
83
+ }
84
+ .operateBtnIconPopper.is-light{
85
+ border: none;
86
+ box-shadow: 0 0 6px 0px rgba($color: #cfd0d3, $alpha: 1);
87
+ }
88
+ .operateBtnIconPopper[x-placement^=bottom] .popper__arrow{
89
+ border: none;
90
+ }
91
+ .operateBtnIconPopper[x-placement^=bottom]{
92
+ margin-top: 5px;
93
+ }
94
+ .operateBtnIconPopper{
95
+ padding: 5px 10px;
96
+ }
@@ -59,3 +59,6 @@
59
59
  .color_active{
60
60
  @include themeColor("color","color");
61
61
  }
62
+ .color_lan{
63
+ color: #5487ee;
64
+ }
@@ -213,14 +213,27 @@ a:hover{
213
213
 
214
214
 
215
215
 
216
+
216
217
  .wrapper_bar{
217
218
  position: absolute;
218
219
  left: 0;
219
220
  right: 0;
220
221
  top: 0;
221
- bottom: -17px;
222
- // bottom: 0;
222
+ // bottom: -17px;
223
+ bottom: 0;
223
224
  overflow: hidden;
225
+ .el-scrollbar__bar{
226
+ bottom: 17px;
227
+ }
228
+ // &.showx{
229
+ // .el-scrollbar__bar{
230
+ // bottom: 17px;
231
+ // }
232
+
233
+ // }
234
+ // .el-scrollbar__wrap{
235
+ // overflow-x: auto;
236
+ // }
224
237
  }
225
238
 
226
239
  .myBar,
@@ -78,12 +78,13 @@
78
78
  bottom: -1px;
79
79
  }
80
80
  &.gutter .el-table th.gutter{
81
- background: #fafafa;
81
+ background: #f0f0f0;
82
82
  display: table-cell!important;
83
83
  }
84
84
 
85
85
  .el-table__fixed-right-patch{
86
- background: #fafafa;
86
+ background: #f0f0f0;
87
+ border-radius: 0 8px 0 0;
87
88
  }
88
89
  .tr_error{
89
90
  background: #fff0f0;
@@ -1,5 +1,6 @@
1
1
  .tabs{
2
- height: 55px;
2
+ // height: 55px;
3
+ height: 44px;
3
4
  background: #fff;
4
5
  border-bottom: 1px solid #d9d9d9;
5
6
  display: flex;
@@ -13,7 +14,8 @@
13
14
  cursor: pointer;
14
15
  transition: all 0.3s ease;
15
16
  color: #000;
16
- padding-top: 22px;
17
+ // padding-top: 22px;
18
+ padding-top: 16px;
17
19
  min-width: 60px;
18
20
  text-align: center;
19
21
  justify-content: center;
@@ -35,7 +37,7 @@
35
37
  // right: 6px;
36
38
  left: 0;
37
39
  right: 0;
38
- width: 60px;
40
+ // width: 60px;
39
41
  height: 2px;
40
42
  margin: auto;
41
43
  @include themeColor('background-color','active');
@@ -51,4 +53,57 @@
51
53
  flex: 1;
52
54
 
53
55
  }
56
+ }
57
+ .tabs2{
58
+ height: 40px;
59
+ background: #fff;
60
+ border-bottom: 1px solid #d9d9d9;
61
+ display: flex;
62
+ .items{
63
+ display: flex;
64
+ }
65
+ .item{
66
+ position: relative;
67
+ min-width: 100px;
68
+ background: #fafafa;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ font-size: 14px;
73
+ color: #000000;
74
+ padding: 0 20px;
75
+ cursor: pointer;
76
+ transition: all 0.3s ease;
77
+ border: 1px solid #d9d9d9;
78
+ border-right: none;
79
+ position: relative;
80
+ bottom:-1px;
81
+ &:nth-last-of-type(1){
82
+ border-right: 1px solid #d9d9d9;
83
+ border-radius: 0 8px 0 0 ;
84
+ }
85
+ &:nth-of-type(1){
86
+ border-radius: 8px 0 0 0;
87
+ }
88
+
89
+ &.active{
90
+ background: #fff;
91
+ border-bottom-color: #fff;
92
+ position: relative;
93
+ @include themeColor("color",'active');
94
+
95
+ }
96
+ &:hover{
97
+ background: #fff;
98
+ @include themeColor("color",'active');
99
+ }
100
+ }
101
+ .other{
102
+ display: flex;
103
+ align-items: center;
104
+ justify-content: flex-end;
105
+ flex: 1;
106
+
107
+ }
108
+
54
109
  }
package/index.js CHANGED
@@ -13,5 +13,5 @@
13
13
  // 已使用项目 指标管理
14
14
 
15
15
  module.exports = {
16
- version :'1.1.2',
16
+ version :'1.1.4',
17
17
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gy-webcode2",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "description": "gy前端公共代码",
5
5
  "main": "index.js",
6
6
  "scripts": {