vue2-client 1.15.132 → 1.15.135

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.15.132",
3
+ "version": "1.15.135",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -1,178 +1,371 @@
1
- <script setup lang="ts">
2
- import XButtons from '@vue2-client/base-client/components/common/XButtons/XButtons.vue'
3
- import { ref } from 'vue'
4
-
5
- defineProps({
6
- // HButtons特有的属性
7
- buttonStyle: {
8
- type: String,
9
- default: 'button24'
10
- }
11
- })
12
-
13
- // 内部 XButtons 实例引用
14
- const xButtonsRef = ref()
15
-
16
- // 暴露方法:获取内部 XButtons 实例
17
- defineExpose({
18
- getXButtonsInstance: function () { return xButtonsRef.value }
19
- })
20
- </script>
21
-
22
- <template>
23
- <div
24
- class="h-buttons-wrapper"
25
- :class="[
26
- `h-buttons-${buttonStyle}`
27
- ]"
28
- >
29
- <x-buttons
30
- ref="xButtonsRef"
31
- v-bind="$attrs"
32
- v-on="$listeners"
33
- >
34
- <template v-for="(_, name) in $slots" #[name]="slotData">
35
- <slot :name="name" v-bind="slotData" />
36
- </template>
37
- </x-buttons>
38
- </div>
39
- </template>
40
-
41
- <style scoped lang="less">
42
- .h-buttons-wrapper {
43
- // 基础样式
44
- :deep(.ant-btn-group) {
45
- .ant-btn {
46
- border-radius: 6px;
47
- background-color: #FFFFFF;
48
- border: 1px solid #9499A0;
49
- color: #313131;
50
- font-weight: normal;
51
- letter-spacing: 0em;
52
- width: 110px;
53
- font-size: 16px;
54
- font-family: "Source Han Sans";
55
- line-height: normal;
56
- margin-right: 25px;
57
- height: 32px;
58
- }
59
- }
60
-
61
- // button24样式
62
- &.h-buttons-button24 {
63
- :deep(.ant-btn-group) {
64
- .ant-btn {
65
- border: 1px solid #CDCDCD;
66
- color: #5D5C5C;
67
- font-weight: normal;
68
- letter-spacing: 0em;
69
- font-size: 16px;
70
- line-height: normal;
71
- margin-right: 25px;
72
- border-radius: 6px;
73
- background-color: #FFFFFF;
74
- // 这个不合理
75
- // top: -100px;
76
- width: fit-content;
77
- min-width: 110px;
78
- font-family: "Source Han Sans";
79
- height: 32px;
80
- }
81
- }
82
- }
83
-
84
- // button23样式
85
- &.h-buttons-button23 {
86
- :deep(.ant-btn-group) {
87
- .ant-btn {
88
- border: none;
89
- padding: 0 !important;
90
- color: #FFFFFF;
91
- font-weight: normal;
92
- letter-spacing: 0em;
93
- font-size: 16px;
94
- line-height: normal;
95
- border-radius: 50%;
96
- background-color: #1890FF;
97
- margin-left: 10px;
98
- top: -88px;
99
- width: 30px;
100
- font-family: "Source Han Sans";
101
- height: 30px;
102
- }
103
- }
104
- }
105
-
106
- // +号样式
107
- &.h-buttons-table-height-button23 {
108
- :deep(.ant-btn-group) {
109
- display: inline-flex;
110
- align-items: center;
111
- height: 100%;
112
-
113
- .ant-btn {
114
- display: inline-flex;
115
- align-items: center;
116
- justify-content: center;
117
- border: none;
118
- padding: 0 !important;
119
- color: #FFFFFF;
120
- font-weight: normal;
121
- letter-spacing: 0em;
122
- font-size: 16px;
123
- line-height: normal;
124
- border-radius: 50%;
125
- background-color: #1890FF;
126
- margin-left: 10px;
127
- width: 30px;
128
- font-family: "Source Han Sans";
129
- height: 30px;
130
- /* 自适应上移:按按钮自身高度百分比位移 */
131
- transform: translateY(-100%);
132
- }
133
- }
134
- }
135
-
136
- // 居中+悬停高亮的新样式
137
- &.h-buttons-plus-center {
138
- :deep(.ant-btn-group) {
139
- display: flex;
140
- align-items: center;
141
- justify-content: center;
142
- gap: 16px;
143
-
144
- .ant-btn {
145
- display: inline-flex;
146
- align-items: center;
147
- justify-content: center;
148
- border: 1px solid #CDCDCD;
149
- background-color: #FFFFFF;
150
- color: #5D5C5C;
151
- border-radius: 6px;
152
- min-width: 110px;
153
- height: 32px;
154
- font-size: 16px;
155
- font-family: "Source Han Sans";
156
- transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
157
-
158
- &:hover {
159
- background-color: #0057FE;
160
- border-color: #0057FE;
161
- color: #FFFFFF;
162
- }
163
- }
164
- }
165
- }
166
-
167
- // 水印图标与按钮容器布局调整
168
- &.h-buttons-button-watermark-icon {
169
- :deep(.watermark-icon) { transform: translate(-50%, -54%) !important; }
170
- :deep(.x-button) { display: flex !important; }
171
- :deep(.ant-btn-group) {
172
- margin: 0 auto;
173
- display: block;
174
- }
175
- }
176
-
177
- }
178
- </style>
1
+ <script setup lang="ts">
2
+ import XButtons from '@vue2-client/base-client/components/common/XButtons/XButtons.vue'
3
+ import { ref } from 'vue'
4
+
5
+ defineProps({
6
+ // HButtons特有的属性
7
+ buttonStyle: {
8
+ type: String,
9
+ default: 'button24'
10
+ }
11
+ })
12
+
13
+ // 内部 XButtons 实例引用
14
+ const xButtonsRef = ref()
15
+
16
+ // 暴露方法:获取内部 XButtons 实例
17
+ defineExpose({
18
+ getXButtonsInstance: function () { return xButtonsRef.value }
19
+ })
20
+ </script>
21
+
22
+ <template>
23
+ <div
24
+ class="h-buttons-wrapper"
25
+ :class="[
26
+ `h-buttons-${buttonStyle}`
27
+ ]"
28
+ >
29
+ <x-buttons
30
+ ref="xButtonsRef"
31
+ v-bind="$attrs"
32
+ v-on="$listeners"
33
+ >
34
+ <template v-for="(_, name) in $slots" #[name]="slotData">
35
+ <slot :name="name" v-bind="slotData" />
36
+ </template>
37
+ </x-buttons>
38
+ </div>
39
+ </template>
40
+
41
+ <style scoped lang="less">
42
+ .h-buttons-wrapper {
43
+ // 基础样式
44
+ :deep(.ant-btn-group) {
45
+ .ant-btn {
46
+ border-radius: 6px;
47
+ background-color: #FFFFFF;
48
+ border: 1px solid #9499A0;
49
+ color: #313131;
50
+ font-weight: normal;
51
+ letter-spacing: 0em;
52
+ width: 110px;
53
+ font-size: 16px;
54
+ font-family: "Source Han Sans";
55
+ line-height: normal;
56
+ margin-right: 25px;
57
+ height: 32px;
58
+ }
59
+ }
60
+
61
+ // button24样式
62
+ &.h-buttons-button24 {
63
+ :deep(.ant-btn-group) {
64
+ .ant-btn {
65
+ border: 1px solid #CDCDCD;
66
+ color: #5D5C5C;
67
+ font-weight: normal;
68
+ letter-spacing: 0em;
69
+ font-size: 16px;
70
+ line-height: normal;
71
+ margin-right: 25px;
72
+ border-radius: 6px;
73
+ background-color: #FFFFFF;
74
+ // 这个不合理
75
+ // top: -100px;
76
+ width: fit-content;
77
+ min-width: 110px;
78
+ font-family: "Source Han Sans";
79
+ height: 32px;
80
+ }
81
+ }
82
+ }
83
+
84
+ // button23样式
85
+ &.h-buttons-button23 {
86
+ :deep(.ant-btn-group) {
87
+ .ant-btn {
88
+ border: none;
89
+ padding: 0 !important;
90
+ color: #FFFFFF;
91
+ font-weight: normal;
92
+ letter-spacing: 0em;
93
+ font-size: 16px;
94
+ line-height: normal;
95
+ border-radius: 50%;
96
+ background-color: #1890FF;
97
+ margin-left: 10px;
98
+ top: -88px;
99
+ width: 30px;
100
+ font-family: "Source Han Sans";
101
+ height: 30px;
102
+ }
103
+ }
104
+ }
105
+
106
+ // +号样式
107
+ &.h-buttons-table-height-button23 {
108
+ :deep(.ant-btn-group) {
109
+ display: inline-flex;
110
+ align-items: center;
111
+ height: 100%;
112
+
113
+ .ant-btn {
114
+ display: inline-flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ border: none;
118
+ padding: 0 !important;
119
+ color: #FFFFFF;
120
+ font-weight: normal;
121
+ letter-spacing: 0em;
122
+ font-size: 16px;
123
+ line-height: normal;
124
+ border-radius: 50%;
125
+ background-color: #1890FF;
126
+ margin-left: 10px;
127
+ width: 30px;
128
+ font-family: "Source Han Sans";
129
+ height: 30px;
130
+ /* 自适应上移:按按钮自身高度百分比位移 */
131
+ transform: translateY(-100%);
132
+ }
133
+ }
134
+ }
135
+
136
+ // 居中+悬停高亮的新样式
137
+ &.h-buttons-plus-center {
138
+ :deep(.ant-btn-group) {
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ gap: 16px;
143
+
144
+ .ant-btn {
145
+ display: inline-flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ border: 1px solid #CDCDCD;
149
+ background-color: #FFFFFF;
150
+ color: #5D5C5C;
151
+ border-radius: 6px;
152
+ min-width: 110px;
153
+ height: 32px;
154
+ font-size: 16px;
155
+ font-family: "Source Han Sans";
156
+ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
157
+
158
+ &:hover {
159
+ background-color: #0057FE;
160
+ border-color: #0057FE;
161
+ color: #FFFFFF;
162
+ }
163
+ }
164
+ }
165
+ }
166
+
167
+ // button-left样式 - 按钮从左到右排列
168
+ &.h-buttons-button-left {
169
+ :deep(.ant-btn-group) {
170
+ width: 100%;
171
+ display: flex;
172
+ flex-wrap: nowrap;
173
+ justify-content: flex-start;
174
+ gap: 12px;
175
+ .ant-btn {
176
+ border: 1px solid #CDCDCD;
177
+ color: #5D5C5C;
178
+ font-weight: normal;
179
+ letter-spacing: 0em;
180
+ font-size: 16px;
181
+ line-height: normal;
182
+ border-radius: 6px;
183
+ background-color: #FFFFFF;
184
+ font-family: "Source Han Sans";
185
+ height: 32px;
186
+ flex: 0 0 auto;
187
+ min-width: 124px;
188
+ width: auto;
189
+ white-space: nowrap;
190
+ overflow: hidden;
191
+ margin-right: 0px;
192
+ text-overflow: ellipsis;
193
+ }
194
+ }
195
+ }
196
+
197
+ // button-center样式 - 按钮居中排列
198
+ &.h-buttons-button-center {
199
+ :deep(.ant-btn-group) {
200
+ width: 100%;
201
+ display: flex;
202
+ flex-wrap: nowrap;
203
+ justify-content: center;
204
+ gap: 12px;
205
+ .ant-btn {
206
+ border: 1px solid #CDCDCD;
207
+ color: #5D5C5C;
208
+ font-weight: normal;
209
+ letter-spacing: 0em;
210
+ font-size: 16px;
211
+ line-height: normal;
212
+ border-radius: 6px;
213
+ background-color: #FFFFFF;
214
+ font-family: "Source Han Sans";
215
+ height: 32px;
216
+ flex: 0 0 auto;
217
+ min-width: 124px;
218
+ width: auto;
219
+ white-space: nowrap;
220
+ overflow: hidden;
221
+ margin-right: 0px;
222
+ text-overflow: ellipsis;
223
+ }
224
+ }
225
+ }
226
+
227
+ // button-right样式 - 按钮从右到左排列
228
+ &.h-buttons-button-right {
229
+ :deep(.ant-btn-group) {
230
+ width: 100%;
231
+ display: flex;
232
+ flex-wrap: nowrap;
233
+ justify-content: flex-end;
234
+ gap: 12px;
235
+ .ant-btn {
236
+ border: 1px solid #CDCDCD;
237
+ color: #5D5C5C;
238
+ font-weight: normal;
239
+ letter-spacing: 0em;
240
+ font-size: 16px;
241
+ line-height: normal;
242
+ border-radius: 6px;
243
+ background-color: #FFFFFF;
244
+ font-family: "Source Han Sans";
245
+ height: 32px;
246
+ flex: 0 0 auto;
247
+ width: auto;
248
+ min-width: 124px;
249
+ white-space: nowrap;
250
+ overflow: hidden;
251
+ margin-right: 0px;
252
+ text-overflow: ellipsis;
253
+ }
254
+ }
255
+ }
256
+
257
+ // button-space-between样式 - 按钮两端对齐(两个按钮时分布在两端)
258
+ &.h-buttons-button-space-between {
259
+ :deep(.ant-btn-group) {
260
+ width: 100%;
261
+ display: flex;
262
+ flex-wrap: nowrap;
263
+ justify-content: space-between;
264
+ .ant-btn {
265
+ border: 1px solid #CDCDCD;
266
+ color: #5D5C5C;
267
+ font-weight: normal;
268
+ letter-spacing: 0em;
269
+ font-size: 16px;
270
+ line-height: normal;
271
+ border-radius: 6px;
272
+ background-color: #FFFFFF;
273
+ font-family: "Source Han Sans";
274
+ height: 32px;
275
+ width: auto;
276
+ flex: 0 0 auto;
277
+ min-width: 124px;
278
+ white-space: nowrap;
279
+ overflow: hidden;
280
+ margin-right: 0px;
281
+ text-overflow: ellipsis;
282
+ }
283
+ }
284
+ }
285
+
286
+ // button-icon-tiles样式 - 左侧彩色图标块 + 右侧文字
287
+ &.h-buttons-button-icon-tiles {
288
+ :deep(.ant-btn-group) {
289
+ width: 100%;
290
+ display: flex;
291
+ flex-wrap: wrap; // 允许自动换行
292
+ justify-content: flex-start; // 左对齐
293
+ gap: 0; // 取消统一间距
294
+
295
+ .ant-btn {
296
+ position: relative;
297
+ display: inline-flex;
298
+ align-items: center;
299
+ gap: 10px; // 控制图标与文字间距
300
+ border: 1px solid #E6E8EB;
301
+ background-color: #FFFFFF;
302
+ color: #313131;
303
+ font-size: 14px;
304
+ height: 44px;
305
+ padding: 0 10px 0 10px;
306
+ border-radius: 8px;
307
+ min-width: 116px;
308
+ box-shadow: 0 2px 0 rgba(0,0,0,0.02);
309
+ margin-right: 12px; // 用margin控制横向间距,末尾一排自然换行
310
+ }
311
+
312
+ .ant-btn .anticon {
313
+ width: 26px;
314
+ height: 26px;
315
+ display: inline-flex;
316
+ align-items: center;
317
+ justify-content: center;
318
+ border-radius: 6px;
319
+ color: #fff;
320
+ font-size: 14px;
321
+ flex: 0 0 26px; // 固定正方形,防止随文本挤压变形
322
+ box-sizing: border-box;
323
+ }
324
+
325
+ /* 默认蓝色,支持通过 data-type 改变色块(success/warning/error/default)*/
326
+ .ant-btn .anticon { background: #3FA7FF; }
327
+ .ant-btn[data-type='success'] .anticon { background: #34C76E; }
328
+ .ant-btn[data-type='warning'] .anticon { background: #FFA940; }
329
+ .ant-btn[data-type='error'] .anticon { background: #FF7875; }
330
+ .ant-btn[disabled] .anticon { background: #BFBFBF; }
331
+
332
+ /* 图标与文字间距在有图标时更自然 */
333
+ .ant-btn > .anticon + span { margin-left: 10px; }
334
+ }
335
+ }
336
+
337
+ // 水印图标与按钮容器布局调整
338
+ &.h-buttons-button-watermark-icon {
339
+ :deep(.watermark-icon) { transform: translate(-50%, -54%) !important; }
340
+ :deep(.x-button) { display: flex !important; }
341
+ :deep(.ant-btn-group) {
342
+ margin: 0 auto;
343
+ display: block;
344
+ }
345
+ }
346
+ &.h-buttons-0padding-button {
347
+ padding: 0px 4px;
348
+ }
349
+ // button25样式 用于会诊申请侧边栏按钮样式
350
+ &.h-buttons-button25 {
351
+ :deep(.x-buttons) {
352
+ margin: -20px 3px -20px 3px;
353
+
354
+ .ant-btn-group {
355
+ width: 173px;
356
+ justify-content: space-between;
357
+
358
+ .ant-btn {
359
+ border-radius: 6px;
360
+ border: 1px solid #9499A0;
361
+ font-size: 16px;
362
+ height: 32px;
363
+ background-color: #FFFFFF;
364
+ color: #313131;
365
+ width: 173px;
366
+ }
367
+ }
368
+ }
369
+ }
370
+ }
371
+ </style>