1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
| <template>
| <el-descriptions
| class="margin-top"
| title="With border"
| :column="3"
| :size="size"
| border
| >
| <!-- <template #extra>-->
| <!-- <el-button type="primary">Operation</el-button>-->
| <!-- </template>-->
| <el-descriptions-item>
| <template #label>
| <div class="cell-item">
| <!-- <el-icon :style="iconStyle">-->
| <!-- <user />-->
| <!-- </el-icon>-->
| 堆垛机状态
| </div>
| </template>
| kooriookami
| </el-descriptions-item>
| <el-descriptions-item>
| <template #label>
| <div class="cell-item">
| 堆垛机工作模式
| </div>
| </template>
| 18100000000
| </el-descriptions-item>
| <el-descriptions-item>
| <template #label>
| <div class="cell-item">
| Place
| </div>
| </template>
| Suzhou
| </el-descriptions-item>
| <el-descriptions-item>
| <template #label>
| <div class="cell-item">
| <el-icon :style="iconStyle">
| <tickets />
| </el-icon>
| Remarks
| </div>
| </template>
| <el-tag size="small">School</el-tag>
| </el-descriptions-item>
| <el-descriptions-item>
| <template #label>
| <div class="cell-item">
| <el-icon :style="iconStyle">
| <office-building />
| </el-icon>
| Address
| </div>
| </template>
| No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
| </el-descriptions-item>
| </el-descriptions>
|
| </template>
|
| <script setup>
| import { computed, ref } from 'vue'
| import {
| Iphone,
| Location,
| OfficeBuilding,
| Tickets,
| User,
| } from '@element-plus/icons-vue'
|
| const size = ref('default')
|
| const iconStyle = computed(() => {
| const marginMap = {
| large: '8px',
| default: '6px',
| small: '4px',
| }
| return {
| marginRight: marginMap[size.value] || marginMap.default,
| }
| })
| // const blockMargin = computed(() => {
| // const marginMap = {
| // large: '32px',
| // default: '28px',
| // small: '24px',
| // }
| // return {
| // marginTop: marginMap[size.value] || marginMap.default,
| // }
| // })
| </script>
|
| <style scoped>
| .el-descriptions {
| margin-top: 20px;
| }
| .cell-item {
| display: flex;
| align-items: center;
| }
| .margin-top {
| margin-top: 20px;
| }
| </style>
|
|
