张延森 5 년 전
부모
커밋
458185c4ba

+ 27
- 0
src/components/HeaderCell.vue 파일 보기

1
+<template>
2
+  <div class="header-cell">
3
+    <slot></slot>
4
+    <slot name="action"></slot>
5
+  </div>
6
+</template>
7
+
8
+<script>
9
+export default {
10
+  name: 'HeaderCell',
11
+}
12
+</script>
13
+
14
+<style lang="scss" scoped>
15
+.header-cell {
16
+  display: flex;
17
+
18
+  &:first-child {
19
+    flex: auto;
20
+  }
21
+
22
+  &>* {
23
+    flex: none;
24
+  }
25
+}
26
+</style>
27
+

+ 1
- 1
src/components/RichEditor.vue 파일 보기

55
       // 重新定义图片上传
55
       // 重新定义图片上传
56
       editor.customConfig.customUploadImg = this.uploadImg
56
       editor.customConfig.customUploadImg = this.uploadImg
57
 
57
 
58
-      editor.customConfig.onblur = (html) => {
58
+      editor.customConfig.onchange = (html) => {
59
         this.html = html
59
         this.html = html
60
         this.$emit('input', html)
60
         this.$emit('input', html)
61
       }
61
       }

+ 32
- 0
src/views/indexEcharts/components/Card.vue 파일 보기

1
+<template>
2
+  <div class="x-card">
3
+    <p><slot></slot></p>
4
+    <span>{{label}}</span>
5
+  </div>
6
+</template>
7
+
8
+<script>
9
+export default {
10
+  name: 'XCard',
11
+  props: ['label'],
12
+}
13
+</script>
14
+
15
+<style lang="scss" scoped>
16
+.x-card {
17
+  background-color: #fff;
18
+  text-align: center;
19
+  color: #404C58;
20
+  padding: 26px 0;
21
+  border-radius: 4px;
22
+  p {
23
+    font-size: 24px;
24
+    margin: 0;
25
+    line-height: 40px;
26
+  }
27
+  span {
28
+    font-size: 16px;
29
+  }
30
+}
31
+</style>
32
+

+ 26
- 0
src/views/indexEcharts/components/UsrSRCLineAndPie.vue 파일 보기

1
+<template>
2
+  <header-cell>
3
+    <div>
4
+      <x-line ></x-line>
5
+    </div>
6
+    <div slot="action">
7
+
8
+    </div>
9
+  </header-cell>
10
+</template>
11
+
12
+<script>
13
+export default {
14
+  name: 'UsrSRCLineAndPie',
15
+  components: {
16
+    HeaderCell: () => import('@/components/HeaderCell'),
17
+    XLine: () => import('@/components/XLine'),
18
+  },
19
+  data () {
20
+    return {
21
+      title: { text: '用户来源', subtext: '最近七天' }
22
+    }
23
+  }
24
+}
25
+</script>
26
+

+ 9
- 14
src/views/indexEcharts/index.vue 파일 보기

1
 <template>
1
 <template>
2
-<div>
2
+<div class="chart-index">
3
   <el-row class="top-info"  :gutter="20">
3
   <el-row class="top-info"  :gutter="20">
4
     <el-col :span="8">
4
     <el-col :span="8">
5
-      <div class="grid-content">
6
-        <p>{{echartsInfo.selectUserCount}}</p>
7
-        <span>总用户</span>
8
-      </div>
5
+      <card label="总用户">{{echartsInfo.selectUserCount}}</card>
9
     </el-col>
6
     </el-col>
10
     <el-col :span="8">
7
     <el-col :span="8">
11
-      <div class="grid-content">
12
-        <p>{{echartsInfo.selectRegisteredCount}}</p>
13
-        <span>总注册用户</span>
14
-      </div>
8
+      <card label="总注册用户">{{echartsInfo.selectRegisteredCount}}</card>
15
     </el-col>
9
     </el-col>
16
     <el-col :span="8">
10
     <el-col :span="8">
17
-      <div @click="toNewUsers()" class="grid-content">
18
-        <p class="under-line">{{echartsInfo.selectRecentlyCount}}</p>
19
-        <span class="under-line">最近7天新增</span>
20
-      </div>
11
+      <card label="最近7天新增" @click="toNewUsers()" class="under-line" >{{echartsInfo.selectRecentlyCount}}</card>
21
     </el-col>
12
     </el-col>
22
   </el-row>
13
   </el-row>
23
-  <select-building></select-building>
24
   <p class="title under-line" @click="toUserSource()">用户来源</p>
14
   <p class="title under-line" @click="toUserSource()">用户来源</p>
25
   <span class="title-desc under-line" @click="toUserSource()">最近7天</span>
15
   <span class="title-desc under-line" @click="toUserSource()">最近7天</span>
26
   <el-row :gutter="20" :style="{ height: '560px',margin:'20px 0',border:'1px solid #eee',borderRadius:'5px'}">
16
   <el-row :gutter="20" :style="{ height: '560px',margin:'20px 0',border:'1px solid #eee',borderRadius:'5px'}">
82
 export default {
72
 export default {
83
   components: {
73
   components: {
84
     XLine: () => import('@/components/charts/XLine.vue'),
74
     XLine: () => import('@/components/charts/XLine.vue'),
75
+    Card: () => import('./components/Card'),
85
   },
76
   },
86
   data() {
77
   data() {
87
     return {
78
     return {
539
 </script>
530
 </script>
540
 
531
 
541
 <style lang="scss" scoped>
532
 <style lang="scss" scoped>
533
+.chart-index {
534
+  background-color: transparent !important;
535
+}
536
+
542
 p {
537
 p {
543
   margin: 0;
538
   margin: 0;
544
 }
539
 }