|
|
@@ -0,0 +1,485 @@
|
|
|
1
|
+<template>
|
|
|
2
|
+ <div>
|
|
|
3
|
+ <div class="screenBox">
|
|
|
4
|
+ <div class="flex-align-center" style="flex-wrap: wrap;margin-right: 60px;">
|
|
|
5
|
+ <datePicker title="" :quickFlag="true" :afferent_time="default_time" :clearFlag='false' :reset="resetFlag" @changeTime="onChangeTime" style="margin-right: 10px;" />
|
|
|
6
|
+ <selfInput style="margin-right: 10px;" width="220px" :hasLabel="false" :reset="resetFlag" label_name="订单ID" @inputChange='onInputOrderId' @onChange="onChangeOrderId" />
|
|
|
7
|
+ <selfChannelMultiple style="margin-right: 10px;" title="" type='adqAccount' :reset="resetFlag" :labelWidth="true" @channelDefine="onChangeAccountId" />
|
|
|
8
|
+ <selfInput style="margin-right: 10px;" width="220px" :hasLabel="false" :reset="resetFlag" label_name="自定义参数" @inputChange="onInputCpsId" @onChange="onChangeCpsId" />
|
|
|
9
|
+ <!-- <selfChannel style="margin-right: 10px;" title="" type="" :reset="resetFlag" :labelWidth="true" @onChange="onChangeOrderStatus"/> -->
|
|
|
10
|
+ </div>
|
|
|
11
|
+ <div class="reset" @click="resetEvent">重置</div>
|
|
|
12
|
+ <!-- <el-button v-if="isCanExport" class="export-btn" type="primary" size="mini" @click="onClickExport">导出Excel</el-button> -->
|
|
|
13
|
+ </div>
|
|
|
14
|
+ <div v-loading="loading">
|
|
|
15
|
+ <ux-grid class="uxGridBox" ref="plxTable" :border="false" @row-click="() => { return }"
|
|
|
16
|
+ :header-cell-style="headerColor" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip"
|
|
|
17
|
+ size="mini">
|
|
|
18
|
+ <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop"
|
|
|
19
|
+ :title="item.label" :min-width="item.min_width ? item.min_width : 120" :fixed="item.fixed ? item.fixed : ''"
|
|
|
20
|
+ align="center">
|
|
|
21
|
+ <template #header>
|
|
|
22
|
+ <div class="flex-align-jus-center">{{ item.label }}
|
|
|
23
|
+ <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
|
|
|
24
|
+ <div><i class="el-icon-question"></i></div>
|
|
|
25
|
+ </el-tooltip>
|
|
|
26
|
+ </div>
|
|
|
27
|
+ </template>
|
|
|
28
|
+ <template v-slot="{ row, $index }">
|
|
|
29
|
+ <div v-if="item.prop == 'actionBtn'">
|
|
|
30
|
+ <template>
|
|
|
31
|
+ <span v-if="row.ad_report_order_status == '成功'" class="c-A5A5A5 pointer fWeight600 disabled">已回传</span>
|
|
|
32
|
+ <span v-else-if="row.order_status != 4 && row.predict_commission_fee > 0" class="c-00B38A pointer fWeight600" @click="onClickReport(row)">回传</span>
|
|
|
33
|
+ </template>
|
|
|
34
|
+ </div>
|
|
|
35
|
+
|
|
|
36
|
+ <span v-else-if="item.prop == 'order_id'">
|
|
|
37
|
+ {{ row[item.prop] || row[item.prop] == 0 ? row[item.prop] : '-' }}
|
|
|
38
|
+ </span>
|
|
|
39
|
+ <span v-else-if="item.prop == 'account_id'">
|
|
|
40
|
+ {{ row[item.prop] || row[item.prop] == 0 ? row[item.prop] : '-' }}
|
|
|
41
|
+ </span>
|
|
|
42
|
+ <span v-else>{{ (row[item.prop] || row[item.prop] == 0) && row[item.prop] != '' ? $formatNum(row[item.prop])
|
|
|
43
|
+ : '-'
|
|
|
44
|
+ }}</span>
|
|
|
45
|
+ </template>
|
|
|
46
|
+ </ux-table-column>
|
|
|
47
|
+ </ux-grid>
|
|
|
48
|
+ <div class="pagination" v-show="total > 0">
|
|
|
49
|
+ <el-pagination
|
|
|
50
|
+ background :current-page="page"
|
|
|
51
|
+ layout="prev, pager, next, sizes, jumper"
|
|
|
52
|
+ :page-sizes="[20, 50, 100]" :page-count='Number(pages)'
|
|
|
53
|
+ @current-change="handleCurrentChange" @size-change="handleSizeChange"
|
|
|
54
|
+ />
|
|
|
55
|
+ </div>
|
|
|
56
|
+ </div>
|
|
|
57
|
+ </div>
|
|
|
58
|
+</template>
|
|
|
59
|
+<script>
|
|
|
60
|
+import datePicker from '@/components/assembly/screen/datePicker.vue'
|
|
|
61
|
+import selfChannel from '@/components/assembly/screen/channel.vue'
|
|
|
62
|
+import selfInput from '@/components/assembly/screen/input.vue'
|
|
|
63
|
+import selfChannelV2 from '@/components/assembly/screen/channelV2.vue'
|
|
|
64
|
+import selfChannelMultiple from '@/components/assembly/screen/channelMultiple.vue'
|
|
|
65
|
+
|
|
|
66
|
+import { incomeSourceDesc, launchTypeDesc } from '@/assets/js/staticTypes'
|
|
|
67
|
+export default {
|
|
|
68
|
+ name: 'orderData',
|
|
|
69
|
+ components: {
|
|
|
70
|
+ datePicker,
|
|
|
71
|
+ selfChannel,
|
|
|
72
|
+ selfInput,
|
|
|
73
|
+ selfChannelV2,
|
|
|
74
|
+ selfChannelMultiple,
|
|
|
75
|
+ },
|
|
|
76
|
+ data () {
|
|
|
77
|
+ return {
|
|
|
78
|
+ dataLoading: false,
|
|
|
79
|
+ loading: false,
|
|
|
80
|
+ page: 1,
|
|
|
81
|
+ pages: 0,
|
|
|
82
|
+ total: 0,
|
|
|
83
|
+ page_size: 20,
|
|
|
84
|
+ default_time: [this.$getDay(0, false), this.$getDay(0, false)],
|
|
|
85
|
+ height: '',
|
|
|
86
|
+ resetFlag: false,
|
|
|
87
|
+ dataInfo_stat: {},
|
|
|
88
|
+ trendX: [],
|
|
|
89
|
+ trendData: {
|
|
|
90
|
+ key: 1,
|
|
|
91
|
+ dds: [],
|
|
|
92
|
+ zfje: []
|
|
|
93
|
+ },
|
|
|
94
|
+ desCol: [
|
|
|
95
|
+ { prop: "id", label: "订单编号",fixed: 'left' },
|
|
|
96
|
+ { prop: "order_id", label: "订单ID", min_width: 180 },
|
|
|
97
|
+ { prop: "payment_amount", label: "实际支付金额"},
|
|
|
98
|
+ { prop: "predict_commission_fee", label: "预估佣金" },
|
|
|
99
|
+ { prop: "payed_time", label: "支付时间", min_width: 160 },
|
|
|
100
|
+ { prop: "predict_report_time", label: "预估回传时间", min_width: 160 },
|
|
|
101
|
+ { prop: "order_status_desc", label: "订单状态"},
|
|
|
102
|
+ // { prop: "goods_name", label: "商品名称"},
|
|
|
103
|
+ { prop: "account_id", label: "投放账户", },
|
|
|
104
|
+ { prop: "tx_cps_id", label: "自定义参数"},
|
|
|
105
|
+ { prop: "ad_report_action_type", label: "回传类型"},
|
|
|
106
|
+ { prop: "ad_report_order_status", label: "回传状态"},
|
|
|
107
|
+ { prop: "adgroup_name", label: "回传广告名称"},
|
|
|
108
|
+ { prop: "actionBtn", label: "操作", fixed: 'right' },
|
|
|
109
|
+ ],
|
|
|
110
|
+
|
|
|
111
|
+ filter: {
|
|
|
112
|
+ time: [],
|
|
|
113
|
+ order_id: '', // 订单ID
|
|
|
114
|
+ order_status: '', // 支付状态
|
|
|
115
|
+ account_id: [], // ADQ账号
|
|
|
116
|
+ money: [], // 预估佣金
|
|
|
117
|
+ cps_id: '',// 自定义参数
|
|
|
118
|
+ },
|
|
|
119
|
+ }
|
|
|
120
|
+ },
|
|
|
121
|
+ computed: {
|
|
|
122
|
+ // 是否有“导出”权限
|
|
|
123
|
+ isCanExport() {
|
|
|
124
|
+ return !!this.$store.state.dataBoardAuth.can_export
|
|
|
125
|
+ },
|
|
|
126
|
+ },
|
|
|
127
|
+ created () {
|
|
|
128
|
+ this.height = document.documentElement.clientHeight - 280 > 400 ? document.documentElement.clientHeight - 280 : 400
|
|
|
129
|
+ this.filter.time = this.default_time
|
|
|
130
|
+ this.init(1)
|
|
|
131
|
+ // this.init_predata()
|
|
|
132
|
+ },
|
|
|
133
|
+ methods: {
|
|
|
134
|
+ getIncomeSourceDesc(code) {
|
|
|
135
|
+ if (code || code === 0) {
|
|
|
136
|
+ return incomeSourceDesc[code] || '-'
|
|
|
137
|
+ } else {
|
|
|
138
|
+ return '-'
|
|
|
139
|
+ }
|
|
|
140
|
+ },
|
|
|
141
|
+ getLaunchTypeDesc(code) {
|
|
|
142
|
+ if (code || code === 0) {
|
|
|
143
|
+ return launchTypeDesc[code] || '-'
|
|
|
144
|
+ } else {
|
|
|
145
|
+ return '-'
|
|
|
146
|
+ }
|
|
|
147
|
+ },
|
|
|
148
|
+ headerColor ({ row, column, rowIndex, columnIndex }) {
|
|
|
149
|
+ return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
|
|
|
150
|
+ },
|
|
|
151
|
+ initCharts () {
|
|
|
152
|
+ let myChart = this.$echarts.init(this.$refs.chart);
|
|
|
153
|
+ myChart.setOption({
|
|
|
154
|
+ xAxis: {
|
|
|
155
|
+ show: false,
|
|
|
156
|
+ boundaryGap: false,
|
|
|
157
|
+ data: this.trendX
|
|
|
158
|
+ },
|
|
|
159
|
+ yAxis: {
|
|
|
160
|
+ show: false
|
|
|
161
|
+ },
|
|
|
162
|
+ grid: {
|
|
|
163
|
+ top: 0,
|
|
|
164
|
+ left: 0,
|
|
|
165
|
+ right: 0,
|
|
|
166
|
+ bottom: '1%'
|
|
|
167
|
+ },
|
|
|
168
|
+ series: [{
|
|
|
169
|
+ name: '订单数',
|
|
|
170
|
+ type: 'line',
|
|
|
171
|
+ data: this.trendData.dds,
|
|
|
172
|
+ color: '#00B38A',
|
|
|
173
|
+ }, {
|
|
|
174
|
+ name: '支付金额',
|
|
|
175
|
+ type: 'line',
|
|
|
176
|
+ data: this.trendData.zfje,
|
|
|
177
|
+ color: '#FF8704',
|
|
|
178
|
+ }]
|
|
|
179
|
+ });
|
|
|
180
|
+ },
|
|
|
181
|
+
|
|
|
182
|
+ async init_predata () {
|
|
|
183
|
+ const url = this.URL.BASEURL + this.URL.charge_pre_data
|
|
|
184
|
+ const params = {
|
|
|
185
|
+ start_date: this.filter.time[0],
|
|
|
186
|
+ end_date: this.filter.time[1],
|
|
|
187
|
+ account_id: this.filter.account_id.join(','),
|
|
|
188
|
+ }
|
|
|
189
|
+ try {
|
|
|
190
|
+ this.dataLoading = true
|
|
|
191
|
+ const { data: res = {} } = await this.$axios.post(url, params)
|
|
|
192
|
+ if (res && res.errno == 0) {
|
|
|
193
|
+ this.dataInfo_stat = res.rst.data.stat;
|
|
|
194
|
+ this.trendX = []
|
|
|
195
|
+ this.trendData.dds = []
|
|
|
196
|
+ this.trendData.zfje = []
|
|
|
197
|
+ res.rst.data.trend.forEach(i => {
|
|
|
198
|
+ this.trendX.push(i.ref_date)
|
|
|
199
|
+ this.trendData.dds.push(i.order_count)
|
|
|
200
|
+ this.trendData.zfje.push(i.pay_money)
|
|
|
201
|
+ })
|
|
|
202
|
+ this.trendData.key += 1
|
|
|
203
|
+ } else if (res.errno != 4002) {
|
|
|
204
|
+ this.$message({
|
|
|
205
|
+ message: res.err,
|
|
|
206
|
+ type: "warning"
|
|
|
207
|
+ })
|
|
|
208
|
+ }
|
|
|
209
|
+ } catch (error) {
|
|
|
210
|
+ console.log('error => ', error)
|
|
|
211
|
+ } finally {
|
|
|
212
|
+ this.dataLoading = false
|
|
|
213
|
+ }
|
|
|
214
|
+ },
|
|
|
215
|
+ async init (page, type) {
|
|
|
216
|
+ this.page = page ? page : this.page;
|
|
|
217
|
+ this.loading = true
|
|
|
218
|
+ const url = `${this.URL.BASEURL}${this.URL.dataBoard_orderData_yxOrderList}`
|
|
|
219
|
+ const params = {
|
|
|
220
|
+ order_id: this.filter.order_id,
|
|
|
221
|
+ start_date: this.filter.time[0],
|
|
|
222
|
+ end_date: this.filter.time[1],
|
|
|
223
|
+ account_id: this.filter.account_id.join(','),
|
|
|
224
|
+ order_status: this.filter.order_status,
|
|
|
225
|
+ tx_cps_id: this.filter.cps_id,
|
|
|
226
|
+ sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
|
|
|
227
|
+ page: this.page,
|
|
|
228
|
+ page_size: this.page_size,
|
|
|
229
|
+ }
|
|
|
230
|
+ try {
|
|
|
231
|
+ const { data: res = {} } = await this.$axios.get(url, { params })
|
|
|
232
|
+ if (res && res.errno == 0) {
|
|
|
233
|
+ this.datas = res.rst.data // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
|
|
|
234
|
+ this.$refs.plxTable.reloadData(this.datas)
|
|
|
235
|
+ this.total = res.rst.pageInfo.total;
|
|
|
236
|
+ this.pages = res.rst.pageInfo.pages;
|
|
|
237
|
+ } else if (res.errno != 4002) {
|
|
|
238
|
+ this.$message.warning(res.err)
|
|
|
239
|
+ }
|
|
|
240
|
+ } catch (error) {
|
|
|
241
|
+ console.log('error => ', error)
|
|
|
242
|
+ } finally {
|
|
|
243
|
+ this.loading = false
|
|
|
244
|
+ }
|
|
|
245
|
+ },
|
|
|
246
|
+
|
|
|
247
|
+ // 支付状态变化
|
|
|
248
|
+ onChangeOrderStatus(val) {
|
|
|
249
|
+ this.filter.order_status = val;
|
|
|
250
|
+ this.init(1);
|
|
|
251
|
+ // this.init_predata;
|
|
|
252
|
+ },
|
|
|
253
|
+ //筛选时间变化
|
|
|
254
|
+ onChangeTime(time) {
|
|
|
255
|
+ if (!time || time && time.length == 0) {
|
|
|
256
|
+ this.filter.time = []
|
|
|
257
|
+ } else {
|
|
|
258
|
+ this.filter.time = time
|
|
|
259
|
+ }
|
|
|
260
|
+ // this.init_predata()
|
|
|
261
|
+ this.init(1)
|
|
|
262
|
+ },
|
|
|
263
|
+ onInputOrderId(val) {
|
|
|
264
|
+ this.filter.order_id = val
|
|
|
265
|
+ this.init(1)
|
|
|
266
|
+ },
|
|
|
267
|
+ onChangeOrderId(val) {
|
|
|
268
|
+ this.filter.order_id = val
|
|
|
269
|
+ },
|
|
|
270
|
+ onInputCpsId(val) {
|
|
|
271
|
+ this.filter.cps_id = val
|
|
|
272
|
+ this.init(1)
|
|
|
273
|
+ },
|
|
|
274
|
+ onChangeCpsId(val) {
|
|
|
275
|
+ this.filter.cps_id = val
|
|
|
276
|
+ },
|
|
|
277
|
+ onChangePlatOrderType(val) {
|
|
|
278
|
+ this.filter.plat_order_type = val;
|
|
|
279
|
+ this.init(1);
|
|
|
280
|
+ // this.init_predata()
|
|
|
281
|
+ },
|
|
|
282
|
+ onChangeAccountId(val) {
|
|
|
283
|
+ this.filter.account_id = val;
|
|
|
284
|
+ this.init(1);
|
|
|
285
|
+ // this.init_predata();
|
|
|
286
|
+ },
|
|
|
287
|
+ handleCurrentChange (val) {
|
|
|
288
|
+ this.init(val)
|
|
|
289
|
+ },
|
|
|
290
|
+ handleSizeChange (page_size) {
|
|
|
291
|
+ this.page_size = page_size
|
|
|
292
|
+ this.init(1)
|
|
|
293
|
+ },
|
|
|
294
|
+ resetEvent () {//重置
|
|
|
295
|
+ this.resetFlag = !this.resetFlag
|
|
|
296
|
+ this.system_enterprise = []
|
|
|
297
|
+ this.enterprise = {}
|
|
|
298
|
+ this.filter.time = [this.$getDay(-30, false), this.$getDay(0, false)]
|
|
|
299
|
+ this.filter.order_id = ''
|
|
|
300
|
+ this.filter.account_id = []
|
|
|
301
|
+ // this.init_predata()
|
|
|
302
|
+ this.init(1)
|
|
|
303
|
+ },
|
|
|
304
|
+ async onClickReport(row) {
|
|
|
305
|
+ try {
|
|
|
306
|
+ await this.$confirm(`订单ID【${row.order_id}】，确定手动回传吗？`, '提示', {
|
|
|
307
|
+ confirmButtonText: '确定',
|
|
|
308
|
+ cancelButtonText: '取消',
|
|
|
309
|
+ type: 'warning'
|
|
|
310
|
+ })
|
|
|
311
|
+ this.handleReport(row)
|
|
|
312
|
+ } catch (error) {
|
|
|
313
|
+ console.log(error)
|
|
|
314
|
+ }
|
|
|
315
|
+ },
|
|
|
316
|
+ async handleReport({ order_id, id }) {
|
|
|
317
|
+ try {
|
|
|
318
|
+ this.loading = true
|
|
|
319
|
+ const url = `${this.URL.BASEURL}${this.URL.dataBoard_orderData_yxOrderActionReport}`
|
|
|
320
|
+ const params = {
|
|
|
321
|
+ order_id,
|
|
|
322
|
+ order_data_id: id,
|
|
|
323
|
+ }
|
|
|
324
|
+ const { data: res = {} } = await this.$axios.get(url,{ params })
|
|
|
325
|
+ if (res && res.errno == 0) {
|
|
|
326
|
+ this.$message.success('操作成功')
|
|
|
327
|
+ this.init()
|
|
|
328
|
+ } else if (res.errno != 4002) {
|
|
|
329
|
+ this.$message.warning(res.err || '操作失败')
|
|
|
330
|
+ }
|
|
|
331
|
+ } catch (error) {
|
|
|
332
|
+ console.log(error)
|
|
|
333
|
+ } finally {
|
|
|
334
|
+ this.loading = false
|
|
|
335
|
+ }
|
|
|
336
|
+ },
|
|
|
337
|
+ // 监听点击"导出" - 离线导出
|
|
|
338
|
+ async onClickExport() {
|
|
|
339
|
+ try {
|
|
|
340
|
+ await this.$confirm(`确定根据当前筛选条件导出报表吗？`, '提示', {
|
|
|
341
|
+ confirmButtonText: '确定',
|
|
|
342
|
+ cancelButtonText: '取消',
|
|
|
343
|
+ type: 'warning'
|
|
|
344
|
+ })
|
|
|
345
|
+ this.handleCreateOrderExport()
|
|
|
346
|
+ } catch (error) {
|
|
|
347
|
+ console.log('error => ', error)
|
|
|
348
|
+ }
|
|
|
349
|
+ },
|
|
|
350
|
+ // 创建订单离线导出任务
|
|
|
351
|
+ async handleCreateOrderExport() {
|
|
|
352
|
+ try {
|
|
|
353
|
+ this.loading = true
|
|
|
354
|
+ const url = `${this.URL.BASEURL}${this.URL.dataBoard_orderData_orderExportOffline}`
|
|
|
355
|
+ const params = {
|
|
|
356
|
+ sys_group_id: this.$cookie.getCookie('isSuperManage') == 1 ? sessionStorage.getItem('company_session_defaultCorp_level_1').toString() : '',
|
|
|
357
|
+ start_date: this.filter.time[0],
|
|
|
358
|
+ end_date: this.filter.time[1],
|
|
|
359
|
+ order_id: this.filter.order_id,
|
|
|
360
|
+ account_id: this.filter.account_id.join(','),
|
|
|
361
|
+ }
|
|
|
362
|
+ const { data: res = {} } = await this.$axios.get(url, { params })
|
|
|
363
|
+ if (res && res.errno == 0) {
|
|
|
364
|
+ this.$alert('导出预约成功，请稍候到【导出列表】下载文件！', '提示', {
|
|
|
365
|
+ confirmButtonText: '知道了',
|
|
|
366
|
+ type: 'success',
|
|
|
367
|
+ })
|
|
|
368
|
+ } else if (res.errno != 4002) {
|
|
|
369
|
+ this.$message.warning(res.err || '操作失败')
|
|
|
370
|
+ }
|
|
|
371
|
+ } catch (error) {
|
|
|
372
|
+ console.log(error)
|
|
|
373
|
+ } finally {
|
|
|
374
|
+ this.loading = false
|
|
|
375
|
+ }
|
|
|
376
|
+ },
|
|
|
377
|
+ }
|
|
|
378
|
+}
|
|
|
379
|
+</script>
|
|
|
380
|
+<style lang="scss" scoped>
|
|
|
381
|
+.select-cls {
|
|
|
382
|
+ /deep/ &.el-select .el-input.is-focus .el-input__inner,
|
|
|
383
|
+ /deep/ &.el-select .el-input__inner:focus,
|
|
|
384
|
+ /deep/ &.el-cascader .el-input.is-focus .el-input__inner,
|
|
|
385
|
+ /deep/ &.el-cascader .el-input__inner:focus {
|
|
|
386
|
+ border-color: #DCDFE6;
|
|
|
387
|
+ }
|
|
|
388
|
+ /deep/ .el-input__suffix {
|
|
|
389
|
+ border-top-right-radius: 4px;
|
|
|
390
|
+ border-bottom-right-radius: 4px;
|
|
|
391
|
+ border: 1px solid #DCDFE6;
|
|
|
392
|
+ right: 0;
|
|
|
393
|
+ width: 30px;
|
|
|
394
|
+ background-color: #F1F1F1;
|
|
|
395
|
+ .el-input__icon {
|
|
|
396
|
+ color: #909399;
|
|
|
397
|
+ }
|
|
|
398
|
+ }
|
|
|
399
|
+ &.cascader {
|
|
|
400
|
+ /deep/ .el-input__suffix {
|
|
|
401
|
+ height: 32px;
|
|
|
402
|
+ top: 2px;
|
|
|
403
|
+ }
|
|
|
404
|
+ }
|
|
|
405
|
+}
|
|
|
406
|
+.disabled {
|
|
|
407
|
+ cursor: not-allowed;
|
|
|
408
|
+}
|
|
|
409
|
+.screenBox {
|
|
|
410
|
+ background: #fff;
|
|
|
411
|
+ padding: 5px 20px 26px;
|
|
|
412
|
+ position: relative;
|
|
|
413
|
+ .export-btn {
|
|
|
414
|
+ position: absolute;
|
|
|
415
|
+ top: 17px;
|
|
|
416
|
+ right: 4px;
|
|
|
417
|
+ }
|
|
|
418
|
+
|
|
|
419
|
+ .reset {
|
|
|
420
|
+ width: 80px;
|
|
|
421
|
+ height: 30px;
|
|
|
422
|
+ background: #00b38a;
|
|
|
423
|
+ border-radius: 100px 3px 3px 3px;
|
|
|
424
|
+ border: 1px solid #d2d2d2;
|
|
|
425
|
+ color: #ffffff;
|
|
|
426
|
+ font-size: 14px;
|
|
|
427
|
+ line-height: 30px;
|
|
|
428
|
+ text-align: center;
|
|
|
429
|
+ letter-spacing: 2px;
|
|
|
430
|
+ cursor: pointer;
|
|
|
431
|
+ position: absolute;
|
|
|
432
|
+ right: 0;
|
|
|
433
|
+ bottom: 0;
|
|
|
434
|
+ }
|
|
|
435
|
+}
|
|
|
436
|
+
|
|
|
437
|
+.dataInfoBox {
|
|
|
438
|
+ display: flex;
|
|
|
439
|
+ margin-top: 10px;
|
|
|
440
|
+ // justify-content: space-between;
|
|
|
441
|
+ flex-wrap: wrap;
|
|
|
442
|
+
|
|
|
443
|
+ .dataInfoItem {
|
|
|
444
|
+ background: #ffffff;
|
|
|
445
|
+ border-radius: 8px;
|
|
|
446
|
+ margin-right: 10px;
|
|
|
447
|
+ margin-bottom: 10px;
|
|
|
448
|
+ //padding: 15px 80px 19px 20px;
|
|
|
449
|
+ min-width: 200px;
|
|
|
450
|
+ //max-width: 240px;
|
|
|
451
|
+ height: 85px;
|
|
|
452
|
+ padding-left: 20px;
|
|
|
453
|
+ display: flex;
|
|
|
454
|
+ flex-direction: column;
|
|
|
455
|
+ justify-content: center;
|
|
|
456
|
+ align-items: start;
|
|
|
457
|
+
|
|
|
458
|
+ .dataItemTitle {
|
|
|
459
|
+ display: flex;
|
|
|
460
|
+ align-items: center;
|
|
|
461
|
+ color: #6f6f6f;
|
|
|
462
|
+ font-size: 13px;
|
|
|
463
|
+ line-height: 17px;
|
|
|
464
|
+ font-weight: bold;
|
|
|
465
|
+
|
|
|
466
|
+ .titleIcon {
|
|
|
467
|
+ height: 16px;
|
|
|
468
|
+ margin-right: 4px;
|
|
|
469
|
+ }
|
|
|
470
|
+ }
|
|
|
471
|
+
|
|
|
472
|
+ .dataItem-data {
|
|
|
473
|
+ color: #000000;
|
|
|
474
|
+ font-size: 19px;
|
|
|
475
|
+ line-height: 28px;
|
|
|
476
|
+ font-weight: bold;
|
|
|
477
|
+ margin-top: 2px;
|
|
|
478
|
+ display: flex;
|
|
|
479
|
+ align-items: center;
|
|
|
480
|
+ width: 100%;
|
|
|
481
|
+ height: 50px;
|
|
|
482
|
+ }
|
|
|
483
|
+ }
|
|
|
484
|
+}
|
|
|
485
|
+</style>
|
