ol-base-components 2.6.0 → 2.7.1

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 (11) hide show
  1. package/package.json +2 -1
  2. package/src/App.vue +496 -329
  3. package/src/api/api.js +30 -44
  4. package/src/api/run.js +12 -20
  5. package/src/bin/add.js +235 -41
  6. package/src/bin/initTemplate.js +197 -63
  7. package/src/package/form/index.js +4 -4
  8. package/src/package/form/src/index.vue +14 -2
  9. package/src/package/index.js +4 -3
  10. package/src/utils/initData.js +84 -0
  11. package/public/index.js +0 -59941
package/src/App.vue CHANGED
@@ -21,6 +21,20 @@
21
21
  @handleindexChange="handleindexChange"
22
22
  ></ol-table>
23
23
  <el-button @click="handlePrint">接口</el-button>
24
+ <el-button @click="onAdd">新建</el-button>
25
+ <el-button @click="onEdit">编辑</el-button>
26
+
27
+ <!-- 编辑,查看弹窗 -->
28
+ <el-dialog :title="`${this.form.title}`" :visible.sync="dialogVisible" width="80%">
29
+ <ol-form
30
+ v-if="dialogVisible"
31
+ url="/api/app/admission-info/admission-info"
32
+ :form="form"
33
+ @onCancel="dialogVisible = false"
34
+ @onSubmit="onSubmit"
35
+ />
36
+ </el-dialog>
37
+
24
38
  <!-- <el-button @click="handlePrint">接口</el-button>
25
39
 
26
40
  <div
@@ -52,300 +66,453 @@
52
66
  </template>
53
67
 
54
68
  <script>
55
- import CountCom from "@/component/countCom.vue";
56
- export default {
57
- name: "App",
58
- components: {
59
- CountCom,
60
- },
61
- data() {
62
- return {
63
- quantity: 0,
64
- multipleSelection: [],
65
- tableData: {
66
- loading: false,
67
- emptyImg: true,
68
- options: {
69
- selection: true, // 多选框
70
- index: false, // 序号EmployeeInfoCode
71
- headTool: true, // 开启头部工具栏
72
- refreshBtn: true, // 开启表格头部刷新按钮
73
- downloadBtn: true, // 开启表格头部下载按钮
74
- }, // 序号和复选框
75
- rows: [
69
+ import CountCom from "@/component/countCom.vue";
70
+ export default {
71
+ name: "App",
72
+ components: {
73
+ CountCom,
74
+ },
75
+ data() {
76
+ return {
77
+ quantity: 0,
78
+ multipleSelection: [],
79
+ tableData: {
80
+ loading: false,
81
+ emptyImg: true,
82
+ options: {
83
+ selection: true, // 多选框
84
+ index: false, // 序号EmployeeInfoCode
85
+ headTool: true, // 开启头部工具栏
86
+ refreshBtn: true, // 开启表格头部刷新按钮
87
+ downloadBtn: true, // 开启表格头部下载按钮
88
+ }, // 序号和复选框
89
+ rows: [
90
+ {
91
+ bindStateEnum: "11",
92
+ tagNumber: "22",
93
+ },
94
+ ], // 表数据
95
+ columns: [
96
+ {
97
+ prop: "unit",
98
+ show: false,
99
+ },
100
+ {
101
+ label: "一级表头",
102
+ beforeProp: "qty", // 位置
103
+ show: true,
104
+ children: [
105
+ {
106
+ label: "二级表头",
107
+ children: [
108
+ {
109
+ prop: "creationTime",
110
+ },
111
+ {
112
+ prop: "orginalBillNo",
113
+ },
114
+ ],
115
+ },
116
+ {
117
+ prop: "roadWayCode",
118
+ },
119
+ {
120
+ prop: "batch",
121
+ },
122
+ ],
123
+ },
124
+ {
125
+ label: "一级表头-1",
126
+ beforeProp: "containerType", // 位置
127
+ children: [
128
+ {
129
+ prop: "regionCode",
130
+ },
131
+ {
132
+ prop: "taskNo",
133
+ },
134
+ ],
135
+ },
136
+ ],
137
+ operates: [], // 表格里面的操作按钮
138
+ tableHeightDiff: 300,
139
+ },
140
+ paginations: {
141
+ page: 1, // 当前位于那页面
142
+ total: 10, // 总数
143
+ limit: 30, // 一页显示多少条
144
+ pagetionShow: true,
145
+ },
146
+
147
+ formSearchData: {
148
+ reset: true, // 重置
149
+ expendShow: true, // 展开
150
+ tableSearchSlice: 5,
151
+ value: {
152
+ DocNo: null, // 对应输入框的value字段
153
+ QualityCheckStateType: null,
154
+ QualityCheckState: null,
155
+ timer: [],
156
+ },
157
+ tableSearch: [
158
+ // {
159
+ // label: "标签号",
160
+ // value: "carBodyTagNumber",
161
+ // inputType: "text"
162
+ // },
163
+ // {
164
+ // label: "车架号",
165
+ // value: "frameNumber",
166
+ // inputType: "text"
167
+ // // value: "QualityCheckStateType",
168
+ // // inputType: "select",
169
+ // // children: this.SET_enumsSelect({
170
+ // // keyword: "qualityCheckTypeEnum",
171
+ // // }),
172
+ // },
173
+ // {
174
+ // label: "项目号",
175
+ // value: "projectCode",
176
+ // inputType: "text"
177
+ // },
178
+ // {
179
+ // label: "状态描述",
180
+ // value: "statusDescription",
181
+ // inputType: "select",
182
+ // // 0整车/1白车身/2碰撞加固车身/3爆破切割车身/4侧面切割下车身
183
+ // children: [
184
+ // {
185
+ // key: 0,
186
+ // value: "整车"
187
+ // },
188
+ // {
189
+ // key: 1,
190
+ // value: "白车身"
191
+ // },
192
+ // {
193
+ // key: 2,
194
+ // value: "碰撞加固车身"
195
+ // },
196
+ // {
197
+ // key: 3,
198
+ // value: "爆破切割车身"
199
+ // },
200
+ // {
201
+ // key: 4,
202
+ // value: "侧面切割下车身"
203
+ // }
204
+ // ]
205
+ // },
206
+ // {
207
+ // label: "实验状态",
208
+ // value: "experimentStatus",
209
+ // inputType: "select",
210
+ // // 0实验前 1实验中 2实验后
211
+ // children: [
212
+ // {
213
+ // key: 0,
214
+ // value: "实验前"
215
+ // },
216
+ // {
217
+ // key: 1,
218
+ // value: "实验中"
219
+ // },
220
+ // {
221
+ // key: 2,
222
+ // value: "实验后"
223
+ // }
224
+ // ]
225
+ // },
226
+ // {
227
+ // label: "状态",
228
+ // value: "tagStatus",
229
+ // inputType: "select",
230
+ // children: []
231
+ // },
232
+ // {
233
+ // label: "车身类型",
234
+ // value: "bodyWorkType",
235
+ // inputType: "select",
236
+ // children: []
237
+ // },
238
+ // {
239
+ // label: "项目名称",
240
+ // value: "projectName",
241
+ // inputType: "text"
242
+ // },
243
+ // {
244
+ // label: "入场日期",
245
+ // inputType: "picker",
246
+ // value: "admissionDate",
247
+ // props: {
248
+ // valueFormat: "yyyy-MM-dd",
249
+ // format: "yyyy/MM/dd"
250
+ // }
251
+ // },
252
+ // {
253
+ // label: "打印次数",
254
+ // value: "tagPrintNumber",
255
+ // inputType: "number"
256
+ // },
257
+ // {
258
+ // label: "创建时间",
259
+ // value: "createdTime",
260
+ // inputType: "picker",
261
+ // props: {
262
+ // type: "datetimerange",
263
+ // startPlaceholder: "开始时间",
264
+ // endPlaceholder: "结束时间",
265
+ // placeholder: "选择时间范围",
266
+ // valueFormat: "yyyy-MM-dd HH:mm:ss",
267
+ // format: "yyyy/MM/dd HH:mm:ss"
268
+ // }
269
+ // },
270
+ // {
271
+ // label: "虚拟项目",
272
+ // value: "tempProject",
273
+ // inputType: "text"
274
+ // }
275
+ ],
276
+ },
277
+
278
+ form: {
279
+ type: 0, // 0详情，1新增, 2编辑
280
+ title: "",
281
+ // 默认值
282
+ defaultValue: {},
283
+ value: {},
284
+ model: [
285
+ // {
286
+ // prop: "warehouseCode",
287
+ // },
288
+ {
289
+ label: "项目名称",
290
+ type: "input",
291
+ prop: "projectName",
292
+ },
293
+ {
294
+ label: "项目状态",
295
+ type: "select",
296
+ prop: "projectStatus",
297
+ child: [
298
+ {
299
+ value: "正常",
300
+ key: 0,
301
+ },
302
+ {
303
+ value: "保密一级",
304
+ key: 1,
305
+ },
306
+ {
307
+ value: "保密二级",
308
+ key: 2,
309
+ },
310
+ ],
311
+ },
312
+ ],
313
+ rules: {
314
+ // employeePhoneNumber: [
315
+ // {
316
+ // required: true,
317
+ // message: "手机号不能为空",
318
+ // trigger: "blur",
319
+ // },
320
+ // {
321
+ // pattern: /^1[3-9]\d{9}$/,
322
+ // message: "请输入有效的手机号",
323
+ // trigger: "blur",
324
+ // },
325
+ // ],
326
+ projectCode: [
327
+ {
328
+ required: true,
329
+ message: "项目号不能为空",
330
+ trigger: "blur",
331
+ },
332
+ ],
333
+ projectName: [
334
+ {
335
+ required: true,
336
+ message: "项目名称不能为空",
337
+ trigger: "blur",
338
+ },
339
+ ],
340
+ projectStatus: [
76
341
  {
77
- bindStateEnum: "11",
78
- tagNumber: "22",
342
+ required: true,
343
+ message: "项目状态不能为空",
344
+ trigger: "blur",
79
345
  },
80
- ], // 表数据
81
- columns: [
346
+ ],
347
+ // productCode: [
348
+ // {
349
+ // required: true,
350
+ // message: "ALV零件号不能为空",
351
+ // trigger: "blur",
352
+ // },
353
+ // ],
354
+ productName: [
82
355
  {
83
- prop: "unit",
84
- show: false,
356
+ required: true,
357
+ message: "零件名称不能为空",
358
+ trigger: "blur",
85
359
  },
360
+ ],
361
+ qty: [
86
362
  {
87
- label: "一级表头",
88
- beforeProp: "qty", // 位置
89
- show: true,
90
- children: [
91
- {
92
- label: "二级表头",
93
- children: [
94
- {
95
- prop: "creationTime",
96
- },
97
- {
98
- prop: "orginalBillNo",
99
- },
100
- ],
101
- },
102
- {
103
- prop: "roadWayCode",
104
- },
105
- {
106
- prop: "batch",
107
- },
108
- ],
363
+ required: true,
364
+ message: "收货数量不能为空",
365
+ trigger: "blur",
109
366
  },
367
+ ],
368
+ receivedBatch: [
110
369
  {
111
- label: "一级表头-1",
112
- beforeProp: "containerType", // 位置
113
- children: [
114
- {
115
- prop: "regionCode",
116
- },
117
- {
118
- prop: "taskNo",
119
- },
120
- ],
370
+ required: true,
371
+ message: "收货批次不能为空",
372
+ trigger: "blur",
121
373
  },
122
374
  ],
123
- operates: [], // 表格里面的操作按钮
124
- tableHeightDiff: 300,
375
+ employeeInfoId: [
376
+ {
377
+ required: true,
378
+ message: "接收人不能为空",
379
+ trigger: "blur",
380
+ },
381
+ ],
382
+ // storageLocation: [
383
+ // {
384
+ // required: true,
385
+ // message: "外仓编码不能为空",
386
+ // trigger: "blur"
387
+ // }
388
+ // ]
125
389
  },
126
- paginations: {
127
- page: 1, // 当前位于那页面
128
- total: 10, // 总数
129
- limit: 30, // 一页显示多少条
130
- pagetionShow: true,
390
+ attrs: {
391
+ labelWidth: "100px",
131
392
  },
393
+ },
394
+ dialogVisible: false,
395
+ };
396
+ },
397
+ // onMounted() {
132
398
 
133
- formSearchData: {
134
- reset: true, // 重置
135
- expendShow: true, // 展开
136
- tableSearchSlice: 5,
137
- value: {
138
- DocNo: null, // 对应输入框的value字段
139
- QualityCheckStateType: null,
140
- QualityCheckState: null,
141
- timer: [],
142
- },
143
- tableSearch: [
144
- // {
145
- // label: "标签号",
146
- // value: "carBodyTagNumber",
147
- // inputType: "text"
148
- // },
149
- // {
150
- // label: "车架号",
151
- // value: "frameNumber",
152
- // inputType: "text"
153
- // // value: "QualityCheckStateType",
154
- // // inputType: "select",
155
- // // children: this.SET_enumsSelect({
156
- // // keyword: "qualityCheckTypeEnum",
157
- // // }),
158
- // },
159
- // {
160
- // label: "项目号",
161
- // value: "projectCode",
162
- // inputType: "text"
163
- // },
164
- // {
165
- // label: "状态描述",
166
- // value: "statusDescription",
167
- // inputType: "select",
168
- // // 0整车/1白车身/2碰撞加固车身/3爆破切割车身/4侧面切割下车身
169
- // children: [
170
- // {
171
- // key: 0,
172
- // value: "整车"
173
- // },
174
- // {
175
- // key: 1,
176
- // value: "白车身"
177
- // },
178
- // {
179
- // key: 2,
180
- // value: "碰撞加固车身"
181
- // },
182
- // {
183
- // key: 3,
184
- // value: "爆破切割车身"
185
- // },
186
- // {
187
- // key: 4,
188
- // value: "侧面切割下车身"
189
- // }
190
- // ]
191
- // },
192
- // {
193
- // label: "实验状态",
194
- // value: "experimentStatus",
195
- // inputType: "select",
196
- // // 0实验前 1实验中 2实验后
197
- // children: [
198
- // {
199
- // key: 0,
200
- // value: "实验前"
201
- // },
202
- // {
203
- // key: 1,
204
- // value: "实验中"
205
- // },
206
- // {
207
- // key: 2,
208
- // value: "实验后"
209
- // }
210
- // ]
211
- // },
212
- // {
213
- // label: "状态",
214
- // value: "tagStatus",
215
- // inputType: "select",
216
- // children: []
217
- // },
218
- // {
219
- // label: "车身类型",
220
- // value: "bodyWorkType",
221
- // inputType: "select",
222
- // children: []
223
- // },
224
- // {
225
- // label: "项目名称",
226
- // value: "projectName",
227
- // inputType: "text"
228
- // },
229
- // {
230
- // label: "入场日期",
231
- // inputType: "picker",
232
- // value: "admissionDate",
233
- // props: {
234
- // valueFormat: "yyyy-MM-dd",
235
- // format: "yyyy/MM/dd"
236
- // }
237
- // },
238
- // {
239
- // label: "打印次数",
240
- // value: "tagPrintNumber",
241
- // inputType: "number"
242
- // },
243
- // {
244
- // label: "创建时间",
245
- // value: "createdTime",
246
- // inputType: "picker",
247
- // props: {
248
- // type: "datetimerange",
249
- // startPlaceholder: "开始时间",
250
- // endPlaceholder: "结束时间",
251
- // placeholder: "选择时间范围",
252
- // valueFormat: "yyyy-MM-dd HH:mm:ss",
253
- // format: "yyyy/MM/dd HH:mm:ss"
254
- // }
255
- // },
256
- // {
257
- // label: "虚拟项目",
258
- // value: "tempProject",
259
- // inputType: "text"
260
- // }
261
- ],
262
- },
263
- };
399
+ // },
400
+ mounted() {
401
+ // const el = document.getElementById("ellipsis-container");
402
+ // this.truncateMiddleByWidth(el)
403
+ },
404
+ methods: {
405
+ SelectionChange(row) {
406
+ this.multipleSelection = row;
264
407
  },
265
- // onMounted() {
266
-
267
- // },
268
- mounted() {
269
- // const el = document.getElementById("ellipsis-container");
270
- // this.truncateMiddleByWidth(el)
408
+ handleSearch(from) {
409
+ this.formSearchData.value = { ...from };
410
+ this.paginations.page = 1;
411
+ this.getTable();
271
412
  },
272
- methods: {
273
- SelectionChange(row) {
274
- this.multipleSelection = row;
275
- },
276
- handleSearch(from) {
277
- this.formSearchData.value = { ...from };
278
- this.paginations.page = 1;
279
- this.getTable();
280
- },
281
- handleReset() {},
282
- handleSizeChange(val) {
283
- this.paginations.page = 1;
284
- this.paginations.limit = val;
285
- this.getTable();
286
- },
287
- handleindexChange(val) {
288
- this.paginations.page = val;
289
- this.getTable();
290
- },
291
- async handlePrint() {
292
- const newColumns = JSON.parse(JSON.stringify(this.tableData.columns));
293
- const temp = newColumns.find(e => e.label == "多级表头");
294
- // temp.children[0].label = "3333";
295
- // temp.children[0].show = false
296
- this.$set(temp.children[0], "show", false);
297
- this.tableData.columns = newColumns;
298
- // this.$set(temp.children[0], 'show', false)
299
- // temp.children.push({
300
- // prop: 'containerType',
301
- // label: '容器类型',
302
- // show: true
303
- // })
304
- // this.tableData.columns.push({
305
- // prop: 'aaaa',
306
- // label: 'aaaa',
307
- // show: true
308
- // })
309
- },
310
- // ================
311
- getTable() {},
312
- handleSearch(from) {
313
- this.formSearchData.value = { ...from };
314
- this.paginations.page = 1;
315
- this.getTable();
316
- },
317
- handleReset() {
318
- for (let key in this.formSearchData.value) {
319
- this.formSearchData.value[key] = null;
320
- }
321
- this.paginations.page = 1;
322
- },
323
- truncateMiddleByWidth(el) {
324
- let text = el.textContent;
325
- if (el.scrollWidth <= el.clientWidth) return;
326
- const suffix = text.slice(-3);
327
- let left = 0;
328
- let right = text.length - 3;
329
- let result = "";
330
- while (left <= right) {
331
- let mid = Math.floor((left + right) / 2);
332
- const temp = text.slice(0, mid) + "..." + suffix;
333
- el.textContent = temp;
334
- if (el.scrollWidth <= el.clientWidth) {
335
- result = temp;
336
- left = mid + 1;
337
- } else {
338
- right = mid - 1;
339
- }
413
+ handleReset() {},
414
+ handleSizeChange(val) {
415
+ this.paginations.page = 1;
416
+ this.paginations.limit = val;
417
+ this.getTable();
418
+ },
419
+ handleindexChange(val) {
420
+ this.paginations.page = val;
421
+ this.getTable();
422
+ },
423
+ async handlePrint() {
424
+ const newColumns = JSON.parse(JSON.stringify(this.tableData.columns));
425
+ const temp = newColumns.find(e => e.label == "多级表头");
426
+ // temp.children[0].label = "3333";
427
+ // temp.children[0].show = false
428
+ this.$set(temp.children[0], "show", false);
429
+ this.tableData.columns = newColumns;
430
+ // this.$set(temp.children[0], 'show', false)
431
+ // temp.children.push({
432
+ // prop: 'containerType',
433
+ // label: '容器类型',
434
+ // show: true
435
+ // })
436
+ // this.tableData.columns.push({
437
+ // prop: 'aaaa',
438
+ // label: 'aaaa',
439
+ // show: true
440
+ // })
441
+ },
442
+ // ================
443
+ getTable() {},
444
+ handleSearch(from) {
445
+ this.formSearchData.value = { ...from };
446
+ this.paginations.page = 1;
447
+ this.getTable();
448
+ },
449
+ handleReset() {
450
+ for (let key in this.formSearchData.value) {
451
+ this.formSearchData.value[key] = null;
452
+ }
453
+ this.paginations.page = 1;
454
+ },
455
+ truncateMiddleByWidth(el) {
456
+ let text = el.textContent;
457
+ if (el.scrollWidth <= el.clientWidth) return;
458
+ const suffix = text.slice(-3);
459
+ let left = 0;
460
+ let right = text.length - 3;
461
+ let result = "";
462
+ while (left <= right) {
463
+ let mid = Math.floor((left + right) / 2);
464
+ const temp = text.slice(0, mid) + "..." + suffix;
465
+ el.textContent = temp;
466
+ if (el.scrollWidth <= el.clientWidth) {
467
+ result = temp;
468
+ left = mid + 1;
469
+ } else {
470
+ right = mid - 1;
340
471
  }
341
- el.textContent = result;
342
- },
472
+ }
473
+ el.textContent = result;
474
+ },
475
+ onAdd() {
476
+ this.form.type = 1;
477
+ this.dialogVisible = true;
478
+ },
479
+ onEdit() {
480
+ this.form.type = 2;
481
+ this.dialogVisible = true;
482
+ },
483
+ async onSubmit(form) {
484
+ const { type } = this.form;
485
+ if (type === 1) {
486
+ // putAdmissioninfoByAdmissionId
487
+ // 新增
488
+ this.post({
489
+ url: StockIn.addStockIn,
490
+ data: this.form.value,
491
+ isLoading: true,
492
+ }).then(res => {
493
+ this.$message({ type: "success", message: "操作成功!" });
494
+ this.dialogVisible = false;
495
+ this.init();
496
+ });
497
+ } else if (type === 2) {
498
+ // 编辑
499
+ this.put({
500
+ url: `${StockIn.editStockIn}/${this.form.value.id}`,
501
+ data: this.form.value,
502
+ isLoading: true,
503
+ }).then(res => {
504
+ this.init();
505
+ this.dialogVisible = false;
506
+ this.message({ type: "success", message: "操作成功!" });
507
+ });
508
+ }
343
509
  },
344
- };
510
+ },
511
+ };
345
512
  </script>
346
513
 
347
514
  <style lang="scss" scoped>
348
- /* #app {
515
+ /* #app {
349
516
  font-family: Avenir, Helvetica, Arial, sans-serif;
350
517
  -webkit-font-smoothing: antialiased;
351
518
  -moz-osx-font-smoothing: grayscale;
@@ -353,64 +520,64 @@
353
520
  color: #2c3e50;
354
521
  margin-top: 60px;
355
522
  } */
356
- .grid-content {
357
- display: grid;
358
- // grid-template-columns: repeat(2, 1fr);
359
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
360
- // align-items: center;
361
- // justify-items: center;
362
- // justify-content: center;
363
- align-content: center;
364
- height: 300px; /* 你想要的高度 */
365
- gap: 10px;
366
- div {
367
- background-color: aqua;
368
- }
523
+ .grid-content {
524
+ display: grid;
525
+ // grid-template-columns: repeat(2, 1fr);
526
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
527
+ // align-items: center;
528
+ // justify-items: center;
529
+ // justify-content: center;
530
+ align-content: center;
531
+ height: 300px; /* 你想要的高度 */
532
+ gap: 10px;
533
+ div {
534
+ background-color: aqua;
369
535
  }
536
+ }
370
537
 
371
- .container {
372
- display: flex;
373
- align-items: center; /* 默认让所有子项在垂直方向居中 */
374
- height: 200px;
375
- background: #eee;
376
- }
377
- .item {
378
- width: 60px;
379
- height: 60px;
380
- background: orange;
381
- margin: 5px;
382
- }
383
- .item2 {
384
- align-self: flex-start; /* 只让这个item到底部对齐 */
385
- }
538
+ .container {
539
+ display: flex;
540
+ align-items: center; /* 默认让所有子项在垂直方向居中 */
541
+ height: 200px;
542
+ background: #eee;
543
+ }
544
+ .item {
545
+ width: 60px;
546
+ height: 60px;
547
+ background: orange;
548
+ margin: 5px;
549
+ }
550
+ .item2 {
551
+ align-self: flex-start; /* 只让这个item到底部对齐 */
552
+ }
386
553
 
387
- .triangle-up {
388
- margin-left: 400px;
389
- width: 100px;
390
- height: 100px;
391
- background-color: purple;
392
- clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 100% 100%);
393
- }
554
+ .triangle-up {
555
+ margin-left: 400px;
556
+ width: 100px;
557
+ height: 100px;
558
+ background-color: purple;
559
+ clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 100% 100%);
560
+ }
394
561
 
395
- .square-container {
396
- width: 100px; /* 控制容器宽度 */
397
- }
562
+ .square-container {
563
+ width: 100px; /* 控制容器宽度 */
564
+ }
398
565
 
399
- .square {
400
- width: 100%;
401
- aspect-ratio: 1 / 1;
402
- background-color: red;
403
- }
566
+ .square {
567
+ width: 100%;
568
+ aspect-ratio: 1 / 1;
569
+ background-color: red;
570
+ }
404
571
 
405
- .ellipsis-container {
406
- width: 200px;
407
- // height: 100px;
408
- border: 1px solid #ccc;
409
- overflow: hidden;
410
- white-space: nowrap;
411
- // text-overflow: ellipsis;
412
- // display: -webkit-box;
413
- // -webkit-line-clamp: 4; /* 设置行数，例如3行 */
414
- // -webkit-box-orient: vertical;
415
- }
572
+ .ellipsis-container {
573
+ width: 200px;
574
+ // height: 100px;
575
+ border: 1px solid #ccc;
576
+ overflow: hidden;
577
+ white-space: nowrap;
578
+ // text-overflow: ellipsis;
579
+ // display: -webkit-box;
580
+ // -webkit-line-clamp: 4; /* 设置行数，例如3行 */
581
+ // -webkit-box-orient: vertical;
582
+ }
416
583
  </style>