ol-base-components 2.4.1 → 2.5.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/.eslintrc +59 -8
  2. package/.prettierignore +6 -0
  3. package/.prettierrc +14 -0
  4. package/package.json +4 -1
  5. package/src/App.vue +416 -457
  6. package/src/api/api.js +1 -2
  7. package/src/api/run.js +7 -7
  8. package/src/component/countCom.vue +105 -0
  9. package/src/package/formSearch/src/index.vue +53 -40
  10. package/src/package/table/src/TableColumn.vue +80 -0
  11. package/src/package/table/src/index.vue +883 -621
package/src/App.vue CHANGED
@@ -1,457 +1,416 @@
1
- <template>
2
- <div id="app">
3
- <div>table组件案例</div>
4
- <ol-search
5
- :form-search-data="formSearchData"
6
- @handleSearch="handleSearch"
7
- @handleReset="handleReset"
8
- url="/api/app/admission-info/paged-result"
9
- />
10
- <!-- url="/api/app/admission-info/paged-result" -->
11
-
12
- <ol-table
13
- :paginations="paginations"
14
- :empty-img="tableData.emptyImg"
15
- :btnlist="[]"
16
- url="/api/app/stock-out/send-pick-tray-back"
17
- :table-data="tableData"
18
- :multiple-selection="multipleSelection"
19
- @SelectionChange="SelectionChange"
20
- @handleSizeChange="handleSizeChange"
21
- @handleindexChange="handleindexChange"
22
- ></ol-table>
23
- <el-button @click="handlePrint">接口</el-button>
24
-
25
- <div class="ellipsis-container">
26
- 如何处理文本溢出？如何实现单行文本溢出显示省略号？如何实现多行文本溢出显示省略号？
27
- </div>
28
-
29
- <!-- 三角形 -->
30
- <div class="triangle-up"></div>
31
- <div class="grid-content">
32
- <div>11</div>
33
- <div>11</div>
34
- <!-- <div>11</div>
35
- <div>11</div>
36
- <div>11</div>
37
- <div>11</div>
38
- <div>11</div>
39
- <div>11</div>
40
- <div>11</div>
41
- <div>11</div>
42
- <div>11</div>
43
- <div>11</div>
44
- <div>11</div>
45
- <div>11</div>
46
- <div>11</div>
47
- <div>11</div>
48
- <div>11</div>
49
- <div>11</div>
50
- <div>11</div>
51
- <div>11</div> -->
52
- </div>
53
-
54
- <div class="container">
55
- <div class="item">1</div>
56
- <div class="item item2">2</div>
57
- <div class="item">3</div>
58
- </div>
59
-
60
- <div class="square-container">
61
- <div class="square"></div>
62
- </div>
63
- </div>
64
- </template>
65
-
66
- <script>
67
- export default {
68
- name: "App",
69
- components: {
70
- },
71
- data() {
72
- return {
73
- multipleSelection: [],
74
- tableData: {
75
- loading: false,
76
- emptyImg: true,
77
- options: {
78
- selection: true, // 多选框
79
- index: false, // 序号EmployeeInfoCode
80
- headTool: true, // 开启头部工具栏
81
- refreshBtn: true, // 开启表格头部刷新按钮
82
- downloadBtn: true, // 开启表格头部下载按钮
83
- }, // 序号和复选框
84
- rows: [], // 表数据
85
- columns: [
86
- // {
87
- // label: "",
88
- // minWidth: "",
89
- // type: "selection",
90
- // show: true,
91
- // },
92
- {
93
- prop: "remark",
94
- label: "备注123",
95
- },
96
- {
97
- prop: "qualityEnumDesc123",
98
- label: "状态1111112222222",
99
- },
100
- // {
101
- // prop: "stockTypeDesc",
102
- // label: "类型",
103
- // },
104
- // {
105
- // prop: "productCode",
106
- // label: "零件编码",
107
- // minWidth: "200",
108
- // sortable: false,
109
- // show: true,
110
- // },
111
- // {
112
- // prop: "productName",
113
- // label: "零件名称",
114
- // minWidth: "180",
115
- // sortable: false,
116
- // show: true,
117
- // },
118
- // {
119
- // prop: "productBatch",
120
- // label: "批次",
121
- // minWidth: "",
122
- // sortable: false,
123
- // show: true,
124
- // },
125
- // {
126
- // prop: "receivingTime",
127
- // label: "收货日期",
128
- // minWidth: "160",
129
- // sortable: false,
130
- // show: true,
131
- // },
132
- // {
133
- // prop: "expireTime",
134
- // label: "到期时间",
135
- // },
136
- // {
137
- // prop: "projectCode",
138
- // label: "项目号",
139
- // },
140
- // {
141
- // prop: "boxCode",
142
- // label: "箱卡号",
143
- // },
144
- // {
145
- // prop: "region",
146
- // label: "区域",
147
- // },
148
- // {
149
- // prop: "area",
150
- // label: "库区",
151
- // },
152
- // {
153
- // prop: "carBodyTagNumber",
154
- // label: "标签号",
155
- // },
156
- // {
157
- // prop: "cargoLocationCode",
158
- // label: "库位编码",
159
- // minWidth: "",
160
- // sortable: false,
161
- // show: true,
162
- // },
163
- // {
164
- // prop: "containerCode",
165
- // label: "容器编码",
166
- // minWidth: "",
167
- // sortable: false,
168
- // show: true,
169
- // },
170
- // {
171
- // prop: "totalQty",
172
- // label: "库存数量",
173
- // minWidth: "120",
174
- // sortable: false,
175
- // show: true,
176
- // },
177
- // {
178
- // prop: "usableQty",
179
- // label: "可用数量",
180
- // minWidth: "120",
181
- // sortable: false,
182
- // show: true,
183
- // },
184
- // {
185
- // prop: "lockQty",
186
- // label: "占用数量",
187
- // minWidth: "120",
188
- // sortable: false,
189
- // show: true,
190
- // },
191
- // {
192
- // prop: "stockoutBillNo",
193
- // label: "出库单号",
194
- // },
195
- // {
196
- // prop: "loadPercent",
197
- // label: "容器承载百分比",
198
- // },
199
- // {
200
- // prop: "alv",
201
- // label: "客户件号",
202
- // },
203
- ], // 表头
204
- operates: [], // 表格里面的操作按钮
205
- tableHeightDiff: 300,
206
- },
207
- paginations: {
208
- page: 1, // 当前位于那页面
209
- total: 10, // 总数
210
- limit: 30, // 一页显示多少条
211
- pagetionShow: true,
212
- },
213
-
214
- formSearchData: {
215
- reset: true, // 重置
216
- expendShow: true, // 展开
217
- tableSearchSlice: 5,
218
- value: {
219
- DocNo: null, // 对应输入框的value字段
220
- QualityCheckStateType: null,
221
- QualityCheckState: null,
222
- timer: []
223
- },
224
- tableSearch: [
225
- // {
226
- // label: "标签号",
227
- // value: "carBodyTagNumber",
228
- // inputType: "text"
229
- // },
230
- // {
231
- // label: "车架号",
232
- // value: "frameNumber",
233
- // inputType: "text"
234
- // // value: "QualityCheckStateType",
235
- // // inputType: "select",
236
- // // children: this.SET_enumsSelect({
237
- // // keyword: "qualityCheckTypeEnum",
238
- // // }),
239
- // },
240
- // {
241
- // label: "项目号",
242
- // value: "projectCode",
243
- // inputType: "text"
244
- // },
245
- // {
246
- // label: "状态描述",
247
- // value: "statusDescription",
248
- // inputType: "select",
249
- // // 0整车/1白车身/2碰撞加固车身/3爆破切割车身/4侧面切割下车身
250
- // children: [
251
- // {
252
- // key: 0,
253
- // value: "整车"
254
- // },
255
- // {
256
- // key: 1,
257
- // value: "白车身"
258
- // },
259
- // {
260
- // key: 2,
261
- // value: "碰撞加固车身"
262
- // },
263
- // {
264
- // key: 3,
265
- // value: "爆破切割车身"
266
- // },
267
- // {
268
- // key: 4,
269
- // value: "侧面切割下车身"
270
- // }
271
- // ]
272
- // },
273
- // {
274
- // label: "实验状态",
275
- // value: "experimentStatus",
276
- // inputType: "select",
277
- // // 0实验前 1实验中 2实验后
278
- // children: [
279
- // {
280
- // key: 0,
281
- // value: "实验前"
282
- // },
283
- // {
284
- // key: 1,
285
- // value: "实验中"
286
- // },
287
- // {
288
- // key: 2,
289
- // value: "实验后"
290
- // }
291
- // ]
292
- // },
293
- // {
294
- // label: "状态",
295
- // value: "tagStatus",
296
- // inputType: "select",
297
- // children: []
298
- // },
299
- // {
300
- // label: "车身类型",
301
- // value: "bodyWorkType",
302
- // inputType: "select",
303
- // children: []
304
- // },
305
- // {
306
- // label: "项目名称",
307
- // value: "projectName",
308
- // inputType: "text"
309
- // },
310
- // {
311
- // label: "入场日期",
312
- // inputType: "picker",
313
- // value: "admissionDate",
314
- // props: {
315
- // valueFormat: "yyyy-MM-dd",
316
- // format: "yyyy/MM/dd"
317
- // }
318
- // },
319
- // {
320
- // label: "打印次数",
321
- // value: "tagPrintNumber",
322
- // inputType: "number"
323
- // },
324
- // {
325
- // label: "创建时间",
326
- // value: "createdTime",
327
- // inputType: "picker",
328
- // props: {
329
- // type: "datetimerange",
330
- // startPlaceholder: "开始时间",
331
- // endPlaceholder: "结束时间",
332
- // placeholder: "选择时间范围",
333
- // valueFormat: "yyyy-MM-dd HH:mm:ss",
334
- // format: "yyyy/MM/dd HH:mm:ss"
335
- // }
336
- // },
337
- // {
338
- // label: "虚拟项目",
339
- // value: "tempProject",
340
- // inputType: "text"
341
- // }
342
- ]
343
- },
344
- };
345
- },
346
- onMounted() { },
347
- methods: {
348
- SelectionChange(row) {
349
- this.multipleSelection = row;
350
- },
351
- handleSearch(from) {
352
- this.formSearchData.value = { ...from };
353
- this.paginations.page = 1;
354
- this.getTable();
355
- },
356
- handleReset() { },
357
- handleSizeChange(val) {
358
- this.paginations.page = 1;
359
- this.paginations.limit = val;
360
- this.getTable();
361
- },
362
- handleindexChange(val) {
363
- this.paginations.page = val;
364
- this.getTable();
365
- },
366
- async handlePrint() {
367
- // console.log(this);
368
- // const aaa = this.$api.getApi("Stock.get_api_app_stock_stock_pages")
369
- // console.log(6666, aaa);
370
- },
371
- // ================
372
- getTable() { },
373
- handleSearch(from) {
374
-
375
- this.formSearchData.value = { ...from };
376
- this.paginations.page = 1;
377
- this.getTable();
378
- },
379
- handleReset() {
380
- for (let key in this.formSearchData.value) {
381
- this.formSearchData.value[key] = null;
382
- }
383
- this.paginations.page = 1;
384
- },
385
- },
386
- };
387
- </script>
388
-
389
- <style lang="scss" scoped>
390
- /* #app {
391
- font-family: Avenir, Helvetica, Arial, sans-serif;
392
- -webkit-font-smoothing: antialiased;
393
- -moz-osx-font-smoothing: grayscale;
394
- text-align: center;
395
- color: #2c3e50;
396
- margin-top: 60px;
397
- } */
398
- .grid-content {
399
- display: grid;
400
- // grid-template-columns: repeat(2, 1fr);
401
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
402
- // align-items: center;
403
- // justify-items: center;
404
- // justify-content: center;
405
- align-content: center;
406
- height: 300px; /* 你想要的高度 */
407
- gap: 10px;
408
- div {
409
- background-color: aqua;
410
- }
411
- }
412
-
413
- .container {
414
- display: flex;
415
- align-items: center; /* 默认让所有子项在垂直方向居中 */
416
- height: 200px;
417
- background: #eee;
418
- }
419
- .item {
420
- width: 60px;
421
- height: 60px;
422
- background: orange;
423
- margin: 5px;
424
- }
425
- .item2 {
426
- align-self: flex-start; /* 只让这个item到底部对齐 */
427
- }
428
-
429
- .triangle-up {
430
- margin-left: 400px;
431
- width: 100px;
432
- height: 100px;
433
- background-color: purple;
434
- clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 100% 100%);
435
- }
436
-
437
- .square-container {
438
- width: 100px; /* 控制容器宽度 */
439
- }
440
-
441
- .square {
442
- width: 100%;
443
- aspect-ratio: 1 / 1;
444
- background-color: red;
445
- }
446
-
447
- .ellipsis-container {
448
- width: 100px;
449
- // height: 100px;
450
- border: 1px solid #ccc;
451
- overflow: hidden;
452
- text-overflow: ellipsis;
453
- display: -webkit-box;
454
- -webkit-line-clamp: 4; /* 设置行数，例如3行 */
455
- -webkit-box-orient: vertical;
456
- }
457
- </style>
1
+ <template>
2
+ <div id="app">
3
+ <div>table组件案例</div>
4
+ <ol-search
5
+ :form-search-data="formSearchData"
6
+ @handleSearch="handleSearch"
7
+ @handleReset="handleReset"
8
+ url="/api/app/admission-info/paged-result"
9
+ />
10
+ <!-- url="/api/app/admission-info/paged-result" -->
11
+
12
+ <ol-table
13
+ :paginations="paginations"
14
+ :empty-img="tableData.emptyImg"
15
+ :btnlist="[]"
16
+ url="/api/app/bind-record/bind-record-detail-pages"
17
+ :table-data="tableData"
18
+ :multiple-selection="multipleSelection"
19
+ @SelectionChange="SelectionChange"
20
+ @handleSizeChange="handleSizeChange"
21
+ @handleindexChange="handleindexChange"
22
+ ></ol-table>
23
+ <el-button @click="handlePrint">接口</el-button>
24
+ <!-- <el-button @click="handlePrint">接口</el-button>
25
+
26
+ <div
27
+ class="ellipsis-container"
28
+ id="ellipsis-container"
29
+ v-for="item in 5"
30
+ :key="item"
31
+ >如何处理文本溢出如何实现单行文本溢出显示省略号</div>
32
+
33
+ <div class="triangle-up"></div>
34
+ <div class="grid-content">
35
+ <div>11</div>
36
+ <div>11</div>
37
+ </div>
38
+
39
+ <div class="container">
40
+ <div class="item">1</div>
41
+ <div class="item item2">2</div>
42
+ <div class="item">3</div>
43
+ </div>
44
+
45
+ <div class="square-container">
46
+ <div class="square"></div>
47
+ </div> -->
48
+ <div>
49
+ <CountCom v-model="quantity" />
50
+ </div>
51
+ </div>
52
+ </template>
53
+
54
+ <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: [
76
+ {
77
+ bindStateEnum: "11",
78
+ tagNumber: "22",
79
+ },
80
+ ], // 表数据
81
+ columns: [
82
+ {
83
+ prop: "unit",
84
+ show: false,
85
+ },
86
+ {
87
+ label: "多级表头",
88
+ beforeProp: "qty", // 位置
89
+ show: true,
90
+ children: [
91
+ {
92
+ label: "999",
93
+ children: [
94
+ {
95
+ prop: "creationTime",
96
+ },
97
+ {
98
+ prop: "orginalBillNo",
99
+ },
100
+ ],
101
+ },
102
+ {
103
+ prop: "tagNumber",
104
+ },
105
+ {
106
+ prop: "batch",
107
+ },
108
+ ],
109
+ },
110
+ {
111
+ label: "2222",
112
+ beforeProp: "containerType", // 位置
113
+ children: [
114
+ {
115
+ prop: "regionCode",
116
+ },
117
+ {
118
+ prop: "taskNo",
119
+ },
120
+ ],
121
+ },
122
+ ],
123
+ operates: [], // 表格里面的操作按钮
124
+ tableHeightDiff: 300,
125
+ },
126
+ paginations: {
127
+ page: 1, // 当前位于那页面
128
+ total: 10, // 总数
129
+ limit: 30, // 一页显示多少条
130
+ pagetionShow: true,
131
+ },
132
+
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
+ };
264
+ },
265
+ // onMounted() {
266
+
267
+ // },
268
+ mounted() {
269
+ // const el = document.getElementById("ellipsis-container");
270
+ // this.truncateMiddleByWidth(el)
271
+ },
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
+ }
340
+ }
341
+ el.textContent = result;
342
+ },
343
+ },
344
+ };
345
+ </script>
346
+
347
+ <style lang="scss" scoped>
348
+ /* #app {
349
+ font-family: Avenir, Helvetica, Arial, sans-serif;
350
+ -webkit-font-smoothing: antialiased;
351
+ -moz-osx-font-smoothing: grayscale;
352
+ text-align: center;
353
+ color: #2c3e50;
354
+ margin-top: 60px;
355
+ } */
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
+ }
369
+ }
370
+
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
+ }
386
+
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
+ }
394
+
395
+ .square-container {
396
+ width: 100px; /* 控制容器宽度 */
397
+ }
398
+
399
+ .square {
400
+ width: 100%;
401
+ aspect-ratio: 1 / 1;
402
+ background-color: red;
403
+ }
404
+
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
+ }
416
+ </style>