vue2-client 1.3.8 → 1.3.11

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 (52) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +1 -1
  3. package/src/base-client/components/common/AddressSearchCombobox/AddressSearchCombobox.vue +3 -3
  4. package/src/base-client/components/common/CustomColumnsDrawer/index.md +46 -46
  5. package/src/base-client/components/common/JSONToTree/jsontotree.vue +275 -275
  6. package/src/base-client/components/common/XForm/XFormItem.vue +1 -1
  7. package/src/base-client/components/system/LogDetailsView/LogDetailsView.vue +376 -372
  8. package/src/base-client/components/ticket/TicketDetailsView/TicketDetailsView.vue +13 -12
  9. package/src/base-client/components/ticket/TicketDetailsView/index.md +29 -29
  10. package/src/base-client/components/ticket/TicketDetailsView/part/TicketDetailsFlow.vue +260 -260
  11. package/src/base-client/components/ticket/TicketSubmitSuccessView/index.md +29 -29
  12. package/src/base-client/plugins/AppData.js +2 -4
  13. package/src/base-client/plugins/GetLoginInfoService.js +252 -252
  14. package/src/base-client/plugins/PagedList.js +3 -3
  15. package/src/base-client/plugins/i18n-extend.js +32 -32
  16. package/src/components/Ellipsis/index.md +38 -38
  17. package/src/components/NumberInfo/index.md +43 -43
  18. package/src/components/STable/README.md +341 -341
  19. package/src/components/Trend/index.md +45 -45
  20. package/src/components/checkbox/ColorCheckbox.vue +157 -157
  21. package/src/components/checkbox/ImgCheckbox.vue +163 -163
  22. package/src/components/exception/ExceptionPage.vue +70 -70
  23. package/src/components/form/FormRow.vue +52 -52
  24. package/src/components/menu/SideMenu.vue +62 -62
  25. package/src/components/menu/menu.js +273 -273
  26. package/src/components/setting/Setting.vue +235 -235
  27. package/src/components/table/advance/ActionColumns.vue +158 -158
  28. package/src/components/table/advance/SearchArea.vue +355 -355
  29. package/src/components/tool/AStepItem.vue +60 -60
  30. package/src/components/tool/AvatarList.vue +68 -69
  31. package/src/components/tool/Drawer.vue +142 -142
  32. package/src/components/transition/PageToggleTransition.vue +97 -97
  33. package/src/config/replacer/resolve.config.js +67 -67
  34. package/src/layouts/AdminLayout.vue +174 -174
  35. package/src/layouts/header/AdminHeader.vue +3 -3
  36. package/src/layouts/header/HeaderSearch.vue +67 -67
  37. package/src/layouts/header/InstitutionDetail.vue +181 -0
  38. package/src/layouts/tabs/TabsHead.vue +190 -190
  39. package/src/layouts/tabs/TabsView.vue +379 -379
  40. package/src/mock/goods/index.js +108 -108
  41. package/src/pages/report/ReportTable.js +124 -125
  42. package/src/pages/system/ticket/index.vue +1 -1
  43. package/src/theme/default/nprogress.less +76 -76
  44. package/src/utils/colors.js +103 -103
  45. package/src/utils/excel/Blob.js +53 -54
  46. package/src/utils/excel/Export2Excel.js +4 -4
  47. package/src/utils/formatter.js +68 -68
  48. package/src/utils/i18n.js +1 -1
  49. package/src/utils/routerUtil.js +3 -3
  50. package/src/utils/theme-color-replacer-extend.js +3 -3
  51. package/src/utils/themeUtil.js +100 -102
  52. package/src/utils/util.js +2 -2
@@ -47,7 +47,7 @@
47
47
  <div class="ant-upload-text">点击上传</div>
48
48
  </div>
49
49
  </a-upload>
50
- </x-form-item></div>
50
+ </div>
51
51
  </a-form-model-item>
52
52
  </a-form-model>
53
53
  </a-modal>
@@ -155,8 +155,8 @@
155
155
  :key="'is' + m"
156
156
  :class="changePhotoClassForSmall(pic.id)"
157
157
  :src="'data:image/png;base64,' + pic.url"
158
- @click="changePhotoClass(pic.id)"
159
- >
158
+ alt=""
159
+ @click="changePhotoClass(pic.id)">
160
160
  <div style="height: 1px;background: -webkit-linear-gradient(left, #fff -4%,#6b6c72 50%,#fff 100%);"></div>
161
161
  </div>
162
162
  <span style="font-size: 2em;margin-right: 20px">{{ details.uploader }}</span>
@@ -169,7 +169,7 @@
169
169
  :src="'data:image/png;base64,' + originalPic.url"
170
170
  style="margin-bottom: 10px"
171
171
  @click="changePhotoClass(originalPic.id)"
172
- >
172
+ alt="">
173
173
  </a-card>
174
174
  </a-tab-pane>
175
175
  <!-- 工单流转历史 -->
@@ -189,7 +189,8 @@
189
189
  <div v-if="selectedImageShow" class="imgBackground" @click="changePhotoClass(selectedImage.id)">
190
190
  <img
191
191
  :src="'data:image/png;base64,' + selectedImage.url"
192
- class="img_xl">
192
+ class="img_xl"
193
+ alt="">
193
194
  </div>
194
195
  </a-drawer>
195
196
  </template>
@@ -197,7 +198,7 @@
197
198
  <script>
198
199
  import JsonViewer from 'vue-json-viewer'
199
200
  import { formatDate } from '@vue2-client/utils/util'
200
- import { TicketDetailsViewApi, EmployeeDetailsViewApi, post } from '@vue2-client/services/api'
201
+ import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
201
202
  import XTable from '@vue2-client/base-client/components/common/XTable/XTable'
202
203
  import { mapState } from 'vuex'
203
204
  import TicketDetailsFlow from './part/TicketDetailsFlow'
@@ -339,7 +340,7 @@
339
340
  file: file
340
341
  })
341
342
  .then(res => {
342
- if (res === 'success') {
343
+ if (res.data === 'success') {
343
344
  this.$message.success('删除成功')
344
345
  }
345
346
  this.fileList = this.fileList.filter((item) => {
@@ -413,7 +414,7 @@
413
414
  // 控制未放大图像变暗
414
415
  changePhotoClassForSmall (id) {
415
416
  for (let i = 0; i < this.images.length; i++) {
416
- if (id == this.images[i].id) {
417
+ if (id === this.images[i].id) {
417
418
  if (this.images[i].isLarge === true) {
418
419
  return 'img_sm_dark'
419
420
  } else {
@@ -472,7 +473,7 @@
472
473
  time: this.format(new Date(), 'yyyy-MM-dd hh:mm:ss')
473
474
  })
474
475
  .then(res => {
475
- if (res !== 0) {
476
+ if (res.data !== 0) {
476
477
  this.$message.success(
477
478
  '操作成功',
478
479
  5
@@ -501,7 +502,7 @@
501
502
  empId: this.currUser.id
502
503
  })
503
504
  .then(res => {
504
- if (res !== 0) {
505
+ if (res.data !== 0) {
505
506
  this.$message.success('操作成功', 5)
506
507
  } else {
507
508
  this.$message.error('工单已被他人处理或关闭,请刷新再试', 5)
@@ -541,7 +542,7 @@
541
542
  .then(res => {
542
543
  const result = res
543
544
  this.transVisible = false
544
- if (result === 1) {
545
+ if (result.data === 1) {
545
546
  this.$message.success(
546
547
  '操作成功',
547
548
  5
@@ -638,7 +639,7 @@
638
639
  },
639
640
  // 控制关闭工单按钮可用状态
640
641
  closeBtnDisable () {
641
- return this.step === 0 || this.disableCloseBtn || this.details.name != this.currUser.ename
642
+ return this.step === 0 || this.disableCloseBtn || this.details.name !== this.currUser.ename
642
643
  },
643
644
  // 优先级文字显示
644
645
  showPriority () {
@@ -1,29 +1,29 @@
1
- # TicketDetailsView 工单详情页
2
-
3
- 提供一个可以对单个工单进行一系列通用业务操作的抽屉实现
4
-
5
-
6
-
7
- ## 何时使用
8
-
9
- 允许用户对单个工单进行一系列通用业务操作
10
-
11
-
12
-
13
- ## 代码演示
14
-
15
- ```html
16
- <ticket-details-view
17
- :visible.sync="detailVisible"
18
- :ticketId="ticketId"
19
- v-if="ticketId"
20
- />
21
- ```
22
-
23
- ## API
24
-
25
- | 参数 | 说明 | 类型 | 默认值 |
26
- |---------------|-------|---------|-------|
27
- | detailVisible | 是否显示 | Boolean | false |
28
- | ticketId | 工单编号 | String | null |
29
- | id | 负责人id | String | null |
1
+ # TicketDetailsView 工单详情页
2
+
3
+ 提供一个可以对单个工单进行一系列通用业务操作的抽屉实现
4
+
5
+
6
+
7
+ ## 何时使用
8
+
9
+ 允许用户对单个工单进行一系列通用业务操作
10
+
11
+
12
+
13
+ ## 代码演示
14
+
15
+ ```html
16
+ <ticket-details-view
17
+ :visible.sync="detailVisible"
18
+ :ticketId="ticketId"
19
+ v-if="ticketId"
20
+ />
21
+ ```
22
+
23
+ ## API
24
+
25
+ | 参数 | 说明 | 类型 | 默认值 |
26
+ |---------------|-------|---------|-------|
27
+ | detailVisible | 是否显示 | Boolean | false |
28
+ | ticketId | 工单编号 | String | null |
29
+ | id | 负责人id | String | null |
@@ -1,260 +1,260 @@
1
- <template>
2
- <div>
3
- <a-card :bordered="false" :loading="loading">
4
- <a-timeline ref="timeline" :pending="pendingText" :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
5
- <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workFLowList" color="green">
6
- <div style="color: #0d1a26;font-weight: 500;">
7
- <span style="font-size: 16px;">{{ value.name }}</span>
8
- <span style="margin-left: 5px;">({{ format(value.created_time,'yyyy-MM-dd hh:mm:ss') }} 至 {{ format(value.end_time,'yyyy-MM-dd hh:mm:ss') }})</span>
9
- </div>
10
- <div class="antd-pro-pages-profile-advanced-style-stepDescription" style="margin-top: 5px;margin-bottom: 5px">
11
- <span class="note" style="font-size: 1.1em;margin-top: 5px;margin-bottom: 5px">留言:{{ value.note }}</span>
12
- </div>
13
- <img
14
- v-for="(item,n) in value.images"
15
- :src="'data:image/png;base64,' + item.url"
16
- :key="'s' + n"
17
- @click="changePhotoClass(item)"
18
- class="img_sm"
19
- >
20
- </a-timeline-item>
21
- </a-timeline>
22
- <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workFLowList.length > 3">
23
- <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
24
- <a @click="toggleAdvanced" style="margin-left: 8px">
25
- {{ advanced ? '收起' : '展开' }}
26
- <a-icon :type="advanced ? 'up' : 'down'"/>
27
- </a>
28
- </span>
29
- </a-col>
30
- </a-card>
31
- </div>
32
- </template>
33
- <script>
34
- import { formatDate } from '@vue2-client/utils/util'
35
- import { mapState } from 'vuex'
36
- import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
37
-
38
- export default {
39
- name: 'TicketDetailsFlow',
40
- props: {
41
- ticketId: {
42
- type: String,
43
- required: true
44
- },
45
- disableCloseBtn: {
46
- type: Boolean,
47
- required: true
48
- },
49
- id: {
50
- type: Number,
51
- required: true
52
- }
53
- },
54
- computed: {
55
- ...mapState('setting', ['isMobile'])
56
- },
57
- data () {
58
- return {
59
- // 历史操作 展开/关闭
60
- advanced: false,
61
- workFLowList: [],
62
- loading: false,
63
- pendingText: '持续记录中...',
64
- // 工单流转留言,详细信息框可见性
65
- workFlowDetailsVisible: false,
66
- // 模态框中内容
67
- modalData: {
68
- note: '',
69
- images: []
70
- },
71
- // 选中照片是否显示
72
- selectedImageShow: false,
73
- // 选中的照片
74
- selectedImage: null
75
- }
76
- },
77
- mounted () {
78
- this.getTicketWorkFlowDetail(this.ticketId)
79
- },
80
- methods: {
81
- format (date, format) {
82
- return formatDate(date, format)
83
- },
84
- // 图像点击切换放大缩小
85
- changePhotoClass (item) {
86
- this.$emit('imageClick', item)
87
- },
88
- // 获取流转工单详情
89
- getTicketWorkFlowDetail (num) {
90
- if (this.disableCloseBtn) {
91
- this.pendingText = ''
92
- } else {
93
- this.pendingText = '持续记录中...'
94
- }
95
- this.loading = true
96
- return post(TicketDetailsViewApi.getTicketWorkFlowDetails, {
97
- ticketId: num
98
- }).then(res => {
99
- this.workFLowDetails = res
100
- // 解析workFLowDetails数据
101
- this.workFLowList = []
102
- const len = this.workFLowDetails.length
103
- for (let i = 0; i < len; i++) {
104
- if (this.workFLowDetails[i].note === undefined) {
105
- this.workFLowDetails[i].note = ''
106
- }
107
- if (this.workFLowDetails[i].images === undefined) {
108
- this.workFLowDetails[i].images = []
109
- }
110
- this.workFLowList.push({
111
- name: this.workFLowDetails[i].name,
112
- created_time: this.workFLowDetails[i].created_time,
113
- end_time: this.workFLowDetails[i].end_time,
114
- note: this.workFLowDetails[i].note,
115
- images: this.workFLowDetails[i].images
116
- })
117
- for (let j = 0; j < this.workFLowDetails[i].images.length; j++) {
118
- this.workFLowDetails[i].images[j].isLarge = false
119
- }
120
- }
121
- this.workFLowList = this.workFLowList.reverse()
122
- this.loading = false
123
- })
124
- },
125
- toggleAdvanced () {
126
- this.advanced = !this.advanced
127
- }
128
- },
129
- watch: {
130
- 'ticketId' () {
131
- this.getTicketWorkFlowDetail(this.ticketId)
132
- },
133
- 'disableCloseBtn' () {
134
- this.getTicketWorkFlowDetail(this.ticketId)
135
- },
136
- 'id' () {
137
- this.getTicketWorkFlowDetail(this.ticketId)
138
- }
139
- }
140
- }
141
- </script>
142
-
143
- <style lang="less" scoped>
144
- .card_view {
145
- width: 70%;
146
- min-width: 700px;
147
- }
148
-
149
- .card_view_mobile {
150
- width: 100%;
151
- }
152
-
153
- .card_details_title {
154
- margin: 4px 0;
155
- font-size: 14px;
156
- }
157
-
158
- .card_details_value {
159
- font-size: 16px;
160
- font-weight: bold;
161
- color: #444;
162
- margin-bottom: 0;
163
- overflow: hidden;
164
- text-overflow:ellipsis;
165
- white-space: nowrap;
166
- }
167
-
168
- .card_guid {
169
- width: 25%;
170
- text-align:left;
171
- }
172
-
173
- .card_guid_mobile {
174
- width: 50%;
175
- text-align:left;
176
- }
177
-
178
- .detail-layout {
179
- margin-left: 44px;
180
- }
181
- .text {
182
- color: rgba(0, 0, 0, .45);
183
- }
184
-
185
- .heading {
186
- color: rgba(0, 0, 0, .85);
187
- font-size: 20px;
188
- }
189
-
190
- .no-data {
191
- color: rgba(0, 0, 0, .25);
192
- text-align: center;
193
- line-height: 64px;
194
- font-size: 16px;
195
-
196
- i {
197
- font-size: 24px;
198
- margin-right: 16px;
199
- position: relative;
200
- top: 3px;
201
- }
202
- }
203
-
204
- .mobile {
205
- .detail-layout {
206
- margin-left: unset;
207
- }
208
- .text {
209
-
210
- }
211
- .status-list {
212
- text-align: left;
213
- }
214
- }
215
-
216
- .img_sm {
217
- border: rgba(84, 84, 84, 0.2) solid 1.5px;
218
- border-radius: 5px;
219
- padding: 10px;
220
- width: 160px;
221
- height: 120px;
222
- }
223
- .img_xl {
224
- position: absolute;
225
- top:0;bottom:0;left:0;right:0;
226
- margin: auto;
227
- width: 100%;
228
- max-width: 1000px;
229
- cursor: zoom-out;
230
- z-index: 9999;
231
- animation: imgZoomIn 0.4s;
232
- -webkit-animation: imgZoomIn 0.4s;
233
- }
234
- @keyframes imgZoomIn
235
- {
236
- from {width: 160px;}
237
- to {width: 100%;}
238
- }
239
- .img_sm:hover {
240
- opacity: 0.6;
241
- cursor: zoom-in;
242
- }
243
- .img_sm_dark{
244
- filter: grayscale(100%);
245
- opacity: 0.6;
246
- border: rgba(84, 84, 84, 0.2) solid 1.5px;
247
- border-radius: 5px;
248
- padding: 10px;
249
- width: 160px;
250
- height: 120px;
251
- }
252
- .imgBackground {
253
- position: absolute;
254
- top:0;bottom:0;left:0;right:0;
255
- width: 100%;
256
- height: 100%;
257
- z-index: 9998;
258
- background-color: rgba(0,0,0,0.7);
259
- }
260
- </style>
1
+ <template>
2
+ <div>
3
+ <a-card :bordered="false" :loading="loading">
4
+ <a-timeline ref="timeline" :pending="pendingText" :reverse="true" mode="alternate" style="max-width: 800px;margin: 0 auto;">
5
+ <a-timeline-item v-if="index < 3 ? true : advanced" :key="index" v-for="(value,index) in workFLowList" color="green">
6
+ <div style="color: #0d1a26;font-weight: 500;">
7
+ <span style="font-size: 16px;">{{ value.name }}</span>
8
+ <span style="margin-left: 5px;">({{ format(value.created_time,'yyyy-MM-dd hh:mm:ss') }} 至 {{ format(value.end_time,'yyyy-MM-dd hh:mm:ss') }})</span>
9
+ </div>
10
+ <div class="antd-pro-pages-profile-advanced-style-stepDescription" style="margin-top: 5px;margin-bottom: 5px">
11
+ <span class="note" style="font-size: 1.1em;margin-top: 5px;margin-bottom: 5px">留言:{{ value.note }}</span>
12
+ </div>
13
+ <img
14
+ v-for="(item,n) in value.images"
15
+ :src="'data:image/png;base64,' + item.url"
16
+ :key="'s' + n"
17
+ @click="changePhotoClass(item)"
18
+ class="img_sm"
19
+ alt="">
20
+ </a-timeline-item>
21
+ </a-timeline>
22
+ <a-col :md="!advanced && 8 || 24" :sm="24" v-if="workFLowList.length > 3">
23
+ <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
24
+ <a @click="toggleAdvanced" style="margin-left: 8px">
25
+ {{ advanced ? '收起' : '展开' }}
26
+ <a-icon :type="advanced ? 'up' : 'down'"/>
27
+ </a>
28
+ </span>
29
+ </a-col>
30
+ </a-card>
31
+ </div>
32
+ </template>
33
+ <script>
34
+ import { formatDate } from '@vue2-client/utils/util'
35
+ import { mapState } from 'vuex'
36
+ import { TicketDetailsViewApi, post } from '@vue2-client/services/api'
37
+
38
+ export default {
39
+ name: 'TicketDetailsFlow',
40
+ props: {
41
+ ticketId: {
42
+ type: String,
43
+ required: true
44
+ },
45
+ disableCloseBtn: {
46
+ type: Boolean,
47
+ required: true
48
+ },
49
+ id: {
50
+ type: Number,
51
+ required: true
52
+ }
53
+ },
54
+ computed: {
55
+ ...mapState('setting', ['isMobile'])
56
+ },
57
+ data () {
58
+ return {
59
+ // 历史操作 展开/关闭
60
+ advanced: false,
61
+ workFLowList: [],
62
+ loading: false,
63
+ pendingText: '持续记录中...',
64
+ // 工单流转留言,详细信息框可见性
65
+ workFlowDetailsVisible: false,
66
+ // 模态框中内容
67
+ modalData: {
68
+ note: '',
69
+ images: []
70
+ },
71
+ // 选中照片是否显示
72
+ selectedImageShow: false,
73
+ // 选中的照片
74
+ selectedImage: null
75
+ }
76
+ },
77
+ mounted () {
78
+ this.getTicketWorkFlowDetail(this.ticketId)
79
+ },
80
+ methods: {
81
+ format (date, format) {
82
+ return formatDate(date, format)
83
+ },
84
+ // 图像点击切换放大缩小
85
+ changePhotoClass (item) {
86
+ this.$emit('imageClick', item)
87
+ },
88
+ // 获取流转工单详情
89
+ getTicketWorkFlowDetail (num) {
90
+ if (this.disableCloseBtn) {
91
+ this.pendingText = ''
92
+ } else {
93
+ this.pendingText = '持续记录中...'
94
+ }
95
+ this.loading = true
96
+ return post(TicketDetailsViewApi.getTicketWorkFlowDetails, {
97
+ ticketId: num
98
+ }).then(res => {
99
+ this.workFLowDetails = res
100
+ // 解析workFLowDetails数据
101
+ this.workFLowList = []
102
+ const len = this.workFLowDetails.length
103
+ for (let i = 0; i < len; i++) {
104
+ if (this.workFLowDetails[i].note === undefined) {
105
+ this.workFLowDetails[i].note = ''
106
+ }
107
+ if (this.workFLowDetails[i].images === undefined) {
108
+ this.workFLowDetails[i].images = []
109
+ }
110
+ this.workFLowList.push({
111
+ name: this.workFLowDetails[i].name,
112
+ created_time: this.workFLowDetails[i].created_time,
113
+ end_time: this.workFLowDetails[i].end_time,
114
+ note: this.workFLowDetails[i].note,
115
+ images: this.workFLowDetails[i].images
116
+ })
117
+ for (let j = 0; j < this.workFLowDetails[i].images.length; j++) {
118
+ this.workFLowDetails[i].images[j].isLarge = false
119
+ }
120
+ }
121
+ this.workFLowList = this.workFLowList.reverse()
122
+ this.loading = false
123
+ })
124
+ },
125
+ toggleAdvanced () {
126
+ this.advanced = !this.advanced
127
+ }
128
+ },
129
+ watch: {
130
+ 'ticketId' () {
131
+ this.getTicketWorkFlowDetail(this.ticketId)
132
+ },
133
+ 'disableCloseBtn' () {
134
+ this.getTicketWorkFlowDetail(this.ticketId)
135
+ },
136
+ 'id' () {
137
+ this.getTicketWorkFlowDetail(this.ticketId)
138
+ }
139
+ }
140
+ }
141
+ </script>
142
+
143
+ <style lang="less" scoped>
144
+ .card_view {
145
+ width: 70%;
146
+ min-width: 700px;
147
+ }
148
+
149
+ .card_view_mobile {
150
+ width: 100%;
151
+ }
152
+
153
+ .card_details_title {
154
+ margin: 4px 0;
155
+ font-size: 14px;
156
+ }
157
+
158
+ .card_details_value {
159
+ font-size: 16px;
160
+ font-weight: bold;
161
+ color: #444;
162
+ margin-bottom: 0;
163
+ overflow: hidden;
164
+ text-overflow:ellipsis;
165
+ white-space: nowrap;
166
+ }
167
+
168
+ .card_guid {
169
+ width: 25%;
170
+ text-align:left;
171
+ }
172
+
173
+ .card_guid_mobile {
174
+ width: 50%;
175
+ text-align:left;
176
+ }
177
+
178
+ .detail-layout {
179
+ margin-left: 44px;
180
+ }
181
+ .text {
182
+ color: rgba(0, 0, 0, .45);
183
+ }
184
+
185
+ .heading {
186
+ color: rgba(0, 0, 0, .85);
187
+ font-size: 20px;
188
+ }
189
+
190
+ .no-data {
191
+ color: rgba(0, 0, 0, .25);
192
+ text-align: center;
193
+ line-height: 64px;
194
+ font-size: 16px;
195
+
196
+ i {
197
+ font-size: 24px;
198
+ margin-right: 16px;
199
+ position: relative;
200
+ top: 3px;
201
+ }
202
+ }
203
+
204
+ .mobile {
205
+ .detail-layout {
206
+ margin-left: unset;
207
+ }
208
+ .text {
209
+
210
+ }
211
+ .status-list {
212
+ text-align: left;
213
+ }
214
+ }
215
+
216
+ .img_sm {
217
+ border: rgba(84, 84, 84, 0.2) solid 1.5px;
218
+ border-radius: 5px;
219
+ padding: 10px;
220
+ width: 160px;
221
+ height: 120px;
222
+ }
223
+ .img_xl {
224
+ position: absolute;
225
+ top:0;bottom:0;left:0;right:0;
226
+ margin: auto;
227
+ width: 100%;
228
+ max-width: 1000px;
229
+ cursor: zoom-out;
230
+ z-index: 9999;
231
+ animation: imgZoomIn 0.4s;
232
+ -webkit-animation: imgZoomIn 0.4s;
233
+ }
234
+ @keyframes imgZoomIn
235
+ {
236
+ from {width: 160px;}
237
+ to {width: 100%;}
238
+ }
239
+ .img_sm:hover {
240
+ opacity: 0.6;
241
+ cursor: zoom-in;
242
+ }
243
+ .img_sm_dark{
244
+ filter: grayscale(100%);
245
+ opacity: 0.6;
246
+ border: rgba(84, 84, 84, 0.2) solid 1.5px;
247
+ border-radius: 5px;
248
+ padding: 10px;
249
+ width: 160px;
250
+ height: 120px;
251
+ }
252
+ .imgBackground {
253
+ position: absolute;
254
+ top:0;bottom:0;left:0;right:0;
255
+ width: 100%;
256
+ height: 100%;
257
+ z-index: 9998;
258
+ background-color: rgba(0,0,0,0.7);
259
+ }
260
+ </style>