SpaceOfCheng
/
admin
Watch 3
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 2 Activity
Browse Source

0904排课

wangfei 6 years ago
parent
f2518db275 11270cfe9a
commit
c1978fbd0c
11 changed files with 635 additions and 3 deletions
Split View Show Diff Stats
  1. 1
    1
      index.html
  2. 101
    2
      src/pages/system/courseManager/courseList/index.vue
  3. 31
    0
      src/pages/system/page.js
  4. 19
    0
      src/pages/system/verificationManager/index.vue
  5. 57
    0
      src/pages/system/verificationManager/phoneVerification/index.vue
  6. 23
    0
      src/pages/system/verificationManager/phoneVerification/page.scss
  7. 148
    0
      src/pages/system/verificationManager/phoneVerification/verificationList/index.vue
  8. 75
    0
      src/pages/system/verificationManager/qrcodeVerification/index.vue
  9. 51
    0
      src/pages/system/verificationManager/qrcodeVerification/page.scss
  10. 126
    0
      src/pages/system/verificationManager/qrcodeVerification/verificationList/index.vue
  11. 3
    0
      src/style/main.css

+ 1
- 1
index.html View File 

@@ -3,7 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_c8w80pqou5c.css">
6 
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_25hulf12ph6.css">
7 7 
     <title>城的空间后台管理系统</title>
8 8 
   </head>
9 9 
   <body>

+ 101
- 2
src/pages/system/courseManager/courseList/index.vue View File 

@@ -113,7 +113,8 @@
113 113 
           <template slot-scope="scope">
114 114 
             <el-button
115 115 
               size="mini"
116 
-              type="success">添加课程详情</el-button>
116 
+              type="success"
117 
+              @click="addDetail(scope.row)">添加课程详情</el-button>
117 118 
             <el-button
118 119 
               size="mini"
119 120 
               type="warning"

@@ -157,6 +158,76 @@
157 158 
       layout="prev, pager, next, jumper"
158 159 
       :total="courses.pagenum">
159 160 
     </el-pagination>
161 
+    <el-dialog
162 
+      title="课程详情"
163 
+      :visible.sync="centerDialogVisible"
164 
+      width="500px"
165 
+      center>
166 
+      <ul>
167 
+        <li class="flex-h" style="align-items: flex-start;">
168 
+          <span>课程详情图片：</span>
169 
+          <div class="flex-item">
170 
+            <div>
171 
+              <el-upload
172 
+                class="avatar-uploader"
173 
+                :action='$api.file.image.url'
174 
+                :show-file-list="false"
175 
+                :on-success="handleAvatarSuccess">
176 
+                <img v-if="editCourseDetail.newImg" :src="editCourseDetail.newImg" class="avatar">
177 
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
178 
+              </el-upload>
179 
+            </div>
180 
+          </div>
181 
+          <el-button
182 
+            size="mini"
183 
+            type="success"
184 
+            v-if="editCourseDetail.newImg"
185 
+            @click="addThisImg">确定添加图片</el-button>
186 
+        </li>
187 
+      </ul>
188 
+      <el-table
189 
+        :data="currentCourseDetail"
190 
+        stripe
191 
+        style="width: 100%">
192 
+        <el-table-column
193 
+          prop="img"
194 
+          label="图片">
195 
+          <template slot-scope="scope">
196 
+            <img :src="scope.row.img" alt="">
197 
+          </template>
198 
+        </el-table-column>
199 
+        <el-table-column
200 
+          prop="sort"
201 
+          label="排序">
202 
+          <template slot-scope="scope">
203 
+            <el-input
204 
+              placeholder="请输入内容"
205 
+              v-model="scope.row.sort"
206 
+              :disabled="scope.row.edit ? false : true">
207 
+            </el-input>
208 
+          </template>
209 
+        </el-table-column>
210 
+        <el-table-column
211 
+          label="操作">
212 
+          <template slot-scope="scope">
213 
+            <el-button
214 
+              size="mini"
215 
+              type="success"
216 
+              v-if="!scope.row.edit"
217 
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
218 
+            <el-button
219 
+              size="mini"
220 
+              type="success"
221 
+              v-if="scope.row.edit"
222 
+              @click="sureSort(scope.$index, scope.row)">确认</el-button>
223 
+            <el-button
224 
+              size="mini"
225 
+              type="danger"
226 
+              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
227 
+          </template>
228 
+        </el-table-column>
229 
+      </el-table>
230 
+    </el-dialog>
160 231 
   </div>
161 232 
 </template>
162 233 
 

@@ -170,6 +241,16 @@ export default {
170 241 
   name: '',
171 242 
   data () {
172 243 
     return {
244 
+      currentCourseDetail: [{
245 
+        img: '',
246 
+        sort: 1,
247 
+        edit: false,
248 
+      }],
249 
+      editCourseDetail: {
250 
+        newImg: '',
251 
+        list: [],
252 
+      },
253 
+      centerDialogVisible: false, // 课程详情弹窗显隐
173 254 
       total: 0,
174 255 
       postData: { // 表格搜索条件
175 256 
         caseid: '', // 案场id

@@ -208,6 +289,24 @@ export default {
208 289 
     }
209 290 
   },
210 291 
   methods: {
292 
+    deleteItem (index, item) { // 删除图片
293 
+
294 
+    },
295 
+    sureSort (index, item) { // 确认图片排序
296 
+      this.currentCourseDetail[index].edit = false
297 
+    },
298 
+    editItem (index, item) { // 编辑图片排序
299 
+      this.currentCourseDetail[index].edit = true
300 
+    },
301 
+    addThisImg () { // 添加图片到课程详情
302 
+
303 
+    },
304 
+    handleAvatarSuccess (res, file) {
305 
+      this.editCourseDetail.newImg = res.result.url
306 
+    },
307 
+    addDetail (val) { // 添加课程详情
308 
+      this.centerDialogVisible = true
309 
+    },
211 310 
     ...mapCourseActions([
212 311 
       'GetCourseList',
213 312 
       'Public',

@@ -249,7 +348,7 @@ export default {
249 348 
         type: 'warning'
250 349 
       })
251 350 
         .then(() => {
252 
-          this.DelCourse({id: row.CourseId, callback: this.delCallBack})
351 
+          this.DelCourse({ id: row.CourseId, callback: this.delCallBack })
253 352 
         })
254 353 
         .catch(() => {
255 354 
           this.$message({

+ 31
- 0
src/pages/system/page.js View File 

@@ -67,6 +67,12 @@ import courseTag from './courseManager/courseTag/index' // 课程标签
67 67 
 import scheduleManager from './courseManager/scheduleManager/index' // 排课管理
68 68 
 import editSchedule from './courseManager/scheduleManager/edit' // 新增、编辑排课
69 69
70 
+import verificationManager from './verificationManager/index' // 核销管理
71 
+import qrcodeVerification from './verificationManager/qrcodeVerification/index' // 二维码核销
72 
+import qrcodeVerificationList from './verificationManager/qrcodeVerification/verificationList/index' // 二维码核销列表
73 
+import phoneVerification from './verificationManager/phoneVerification/index' // 手机核销
74 
+import phoneVerificationList from './verificationManager/phoneVerification/verificationList/index' // 手机核销列表
75 
+
70 76 
 import dataStatistics from './dataStatistics/index' // 数据统计
71 77 
 import frontEndUserList from './dataStatistics/frontEndUserList/index' // 课程管理
72 78 
 

@@ -376,6 +382,31 @@ export default {
376 382 
           component: courseTag,
377 383 
           children: []
378 384 
         }],
385 
+      }, { // 核销管理
386 
+        path: 'verificationManager',
387 
+        name: 'verificationManager',
388 
+        component: verificationManager,
389 
+        children: [{ // 二维码核销
390 
+          path: 'qrcodeVerification',
391 
+          name: 'qrcodeVerification',
392 
+          component: qrcodeVerification,
393 
+          children: [{ // 二维码核销列表
394 
+            path: 'qrcodeVerificationList',
395 
+            name: 'qrcodeVerificationList',
396 
+            component: qrcodeVerificationList,
397 
+            children: []
398 
+          }]
399 
+        }, { // 手机核销
400 
+          path: 'phoneVerification',
401 
+          name: 'phoneVerification',
402 
+          component: phoneVerification,
403 
+          children: [{ // 手机核销列表
404 
+            path: 'phoneVerificationList',
405 
+            name: 'phoneVerificationList',
406 
+            component: phoneVerificationList,
407 
+            children: []
408 
+          }]
409 
+        }]
379 410 
       }, { // 数据统计
380 411 
         path: 'dataStatistics',
381 412 
         name: 'dataStatistics',

+ 19
- 0
src/pages/system/verificationManager/index.vue View File 

@@ -0,0 +1,19 @@
1 
+<template>
2 
+  <div class="mainPage">
3 
+    <router-view></router-view>
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  name: '',
10 
+  data () {
11 
+    return {}
12 
+  },
13 
+  components: {}
14 
+}
15 
+</script>
16 
+
17 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
18 
+<style lang="scss" scoped>
19 
+</style>

+ 57
- 0
src/pages/system/verificationManager/phoneVerification/index.vue View File 

@@ -0,0 +1,57 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div>
4 
+      <div class="flex-h">
5 
+        <div class="flex-item">
6 
+          <div>
7 
+          <el-input
8 
+            placeholder="请输入手机号"
9 
+            v-model="phone"
10 
+            clearable>
11 
+          </el-input>
12 
+          </div>
13 
+        </div>
14 
+        <el-button type="danger" @click="toVerificationList">立即核销</el-button>
15 
+      </div>
16 
+    </div>
17 
+  </div>
18 
+</template>
19 
+
20 
+<script>
21 
+
22 
+export default {
23 
+  name: '',
24 
+  data () {
25 
+    return {
26 
+      phone: '',
27 
+    }
28 
+  },
29 
+  mounted () {
30 
+    this.$nextTick(function () { })
31 
+  },
32 
+  methods: {
33 
+    toVerificationList () { // 前往核销列表
34 
+      this.$router.push({name: 'phoneVerificationList', query: {code: this.phone}})
35 
+    },
36 
+  }
37 
+}
38 
+</script>
39 
+
40 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
41 
+<style lang="scss" scoped>
42 
+.subPage {
43 
+  > div {
44 
+    width: 100%;
45 
+    margin: 40px auto 0;
46 
+    > div {
47 
+      width: 400px;
48 
+      margin: 0 auto;
49 
+      white-space: nowrap;
50 
+      font-size: 0;
51 
+      > div {
52 
+        margin-right: 20px;
53 
+      }
54 
+    }
55 
+  }
56 
+}
57 
+</style>

+ 23
- 0
src/pages/system/verificationManager/phoneVerification/page.scss View File 

@@ -0,0 +1,23 @@
1 
+
2 
+
3 
+
4 
+
5 
+
6 
+
7 
+
8 
+
9 
+
10 
+
11 
+
12 
+
13 
+
14 
+
15 
+
16 
+
17 
+
18 
+
19 
+
20 
+
21 
+
22 
+
23 
+

+ 148
- 0
src/pages/system/verificationManager/phoneVerification/verificationList/index.vue View File 

@@ -0,0 +1,148 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div class="list flex-h">
4 
+      <div class="flex-item">
5 
+        <div class="flex-h" style="margin: 20px 0 0;border:none;">
6 
+          <div class="flex-item">
7 
+            <div class="userInfo">
8 
+              <span>用户名：</span>
9 
+              <b>某某某</b>
10 
+              <span>手机号：</span>
11 
+              <b>{{phone}}</b>
12 
+            </div>
13 
+          </div>
14 
+          <el-button
15 
+            size="mini"
16 
+            type="warning"
17 
+            @click="reback">返回</el-button>
18 
+        </div>
19 
+        <div>
20 
+          <el-table
21 
+              :data="coursesList"
22 
+              stripe
23 
+              style="width: 100%">
24 
+              <el-table-column
25 
+                prop="CaseName"
26 
+                label="所在案场">
27 
+              </el-table-column>
28 
+              <el-table-column
29 
+                prop="LocationId"
30 
+                label="课程类别">
31 
+              </el-table-column>
32 
+              <el-table-column
33 
+                prop="CourseName"
34 
+                label="课程名称">
35 
+              </el-table-column>
36 
+              <el-table-column
37 
+                prop="DetailName"
38 
+                label="课时名称">
39 
+              </el-table-column>
40 
+              <el-table-column
41 
+                prop="BeginDate"
42 
+                label="课程开始时间">
43 
+              </el-table-column>
44 
+              <el-table-column
45 
+                prop="EndDate"
46 
+                label="课程结束时间">
47 
+              </el-table-column>
48 
+              <el-table-column
49 
+                label="操作">
50 
+                <template slot-scope="scope">
51 
+                  <el-button
52 
+                    size="mini"
53 
+                    type="success"
54 
+                    @click="check(scope.row)">核销</el-button>
55 
+                </template>
56 
+              </el-table-column>
57 
+            </el-table>
58 
+        </div>
59 
+        <span class="noData">今日暂无可核销的课程</span>
60 
+      </div>
61 
+    </div>
62 
+    <el-dialog
63 
+      title="提示"
64 
+      :visible.sync="centerDialogVisible"
65 
+      width="300px"
66 
+      center>
67 
+      <span style="width:100%;display:block;text-align:center;margin:20px 0;">确认核销此课程？</span>
68 
+      <span slot="footer" class="dialog-footer">
69 
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
70 
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
71 
+      </span>
72 
+    </el-dialog>
73 
+  </div>
74 
+</template>
75 
+
76 
+<script>
77 
+
78 
+export default {
79 
+  name: '',
80 
+  data () {
81 
+    return {
82 
+      phone: this.$route.query.code,
83 
+      centerDialogVisible: false,
84 
+      coursesList: [{
85 
+        CaseName: 'xxx',
86 
+        LocationId: 'xxx',
87 
+        CourseName: 'xxx',
88 
+        DetailName: 'xxx',
89 
+        BeginDate: 'xxx',
90 
+        EndDate: 'xxx',
91 
+      }],
92 
+    }
93 
+  },
94 
+  mounted () {
95 
+    this.$nextTick(function () { })
96 
+  },
97 
+  methods: {
98 
+    check (item) { // 核销
99 
+      this.centerDialogVisible = true
100 
+    },
101 
+    reback () { // 返回
102 
+      this.$router.push({name: 'phoneVerification'})
103 
+    },
104 
+  }
105 
+}
106 
+</script>
107 
+
108 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
109 
+<style lang="scss" scoped>
110 
+.subPage {
111 
+  .userInfo{
112 
+    white-space: nowrap;
113 
+    font-size: 0;
114 
+    >*{
115 
+      display: inline-block;
116 
+      margin-right: 10px;
117 
+    }
118 
+    >b{
119 
+      font-weight: bolder;
120 
+      font-size: 15px;
121 
+      margin-right: 30px;
122 
+    }
123 
+  }
124 
+  .list {
125 
+    > div {
126 
+      margin: 0 20px;
127 
+      > div {
128 
+        width: 100%;
129 
+        position: relative;
130 
+        overflow: hidden;
131 
+        box-sizing: border-box;
132 
+        border: 1px solid #eee;
133 
+        border-bottom: none;
134 
+        margin-top: 20px;
135 
+      }
136 
+    }
137 
+  }
138 
+  .noData{
139 
+    width: 100%;
140 
+    display: block;
141 
+    line-height: 40px;
142 
+    font-size: 30px;
143 
+    color: #ccc;
144 
+    text-align: center;
145 
+    margin: 40px auto 0;
146 
+  }
147 
+}
148 
+</style>

+ 75
- 0
src/pages/system/verificationManager/qrcodeVerification/index.vue View File 

@@ -0,0 +1,75 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div class="flex-h top">
4 
+      <div class="flex-item">
5 
+        <div>
6 
+          <i class="iconfont icon-qrcode"></i>
7 
+          <span>1</span>
8 
+          <span>请用户出示核销的二维码</span>
9 
+        </div>
10 
+      </div>
11 
+      <div class="flex-item">
12 
+        <div>
13 
+          <i class="iconfont icon-saoma"></i>
14 
+          <span>2</span>
15 
+          <span>点击“立即核销”按钮<br>使用扫码枪扫描客户二维码</span>
16 
+        </div>
17 
+      </div>
18 
+      <div class="flex-item">
19 
+        <div>
20 
+          <i class="iconfont icon-hexiao"></i>
21 
+          <span>3</span>
22 
+          <span>根据提示进行核销操作</span>
23 
+        </div>
24 
+      </div>
25 
+    </div>
26 
+    <div style="text-align:center;margin-top:40px;">
27 
+      <el-button type="danger" round @click="centerDialogVisible = true">立即核销</el-button>
28 
+    </div>
29 
+    <el-dialog
30 
+      title="核销"
31 
+      :visible.sync="centerDialogVisible"
32 
+      width="500px"
33 
+      center>
34 
+      <div v-if="centerDialogVisible">
35 
+        <el-input
36 
+          autofocus
37 
+          ref="input"
38 
+          placeholder="请输入核销码"
39 
+          v-model="verificationCode"
40 
+          clearable>
41 
+        </el-input>
42 
+      </div>
43 
+      <span slot="footer" class="dialog-footer">
44 
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
45 
+        <el-button type="primary" @click="toVerificationList">确 定</el-button>
46 
+      </span>
47 
+    </el-dialog>
48 
+  </div>
49 
+</template>
50 
+
51 
+<script>
52 
+
53 
+export default {
54 
+  name: '',
55 
+  data () {
56 
+    return {
57 
+      centerDialogVisible: false, // 显隐核销弹窗
58 
+      verificationCode: '', // 核销码
59 
+    }
60 
+  },
61 
+  mounted () {
62 
+    this.$nextTick(function () { })
63 
+  },
64 
+  methods: {
65 
+    toVerificationList () { // 定向到核销列表
66 
+      this.$router.push({name: 'qrcodeVerificationList', query: {code: this.verificationCode}})
67 
+    },
68 
+  }
69 
+}
70 
+</script>
71 
+
72 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
73 
+<style lang="scss" scoped>
74 
+@import "page.scss";
75 
+</style>

+ 51
- 0
src/pages/system/verificationManager/qrcodeVerification/page.scss View File 

@@ -0,0 +1,51 @@
1 
+
2 
+.subPage{
3 
+  .top{
4 
+    width: 100%;
5 
+    position: relative;
6 
+    overflow: hidden;
7 
+    margin-top: 40px;
8 
+    >div{
9 
+      >div{
10 
+        width: 100%;
11 
+        position: relative;
12 
+        overflow: hidden;
13 
+        text-align: center;
14 
+        >span{
15 
+          width: 100%;
16 
+          display: block;
17 
+          text-align: center;
18 
+          line-height: 24px;
19 
+          font-size: 15px;
20 
+          color: #666;
21 
+        }
22 
+        >i{
23 
+          font-size: 30px;
24 
+          color: #409EFF;
25 
+          display: inline-block;
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 
+

+ 126
- 0
src/pages/system/verificationManager/qrcodeVerification/verificationList/index.vue View File 

@@ -0,0 +1,126 @@
1 
+<template>
2 
+  <div class="subPage">
3 
+    <div class="list flex-h">
4 
+      <div class="flex-item">
5 
+        <div style="text-align:right;margin: 20px 0 0;border:none;">
6 
+          <el-button
7 
+            size="mini"
8 
+            type="warning"
9 
+            @click="reback">返回</el-button>
10 
+        </div>
11 
+        <div>
12 
+          <el-table
13 
+              :data="coursesList"
14 
+              stripe
15 
+              style="width: 100%">
16 
+              <el-table-column
17 
+                prop="CaseName"
18 
+                label="所在案场">
19 
+              </el-table-column>
20 
+              <el-table-column
21 
+                prop="LocationId"
22 
+                label="课程类别">
23 
+              </el-table-column>
24 
+              <el-table-column
25 
+                prop="CourseName"
26 
+                label="课程名称">
27 
+              </el-table-column>
28 
+              <el-table-column
29 
+                prop="DetailName"
30 
+                label="课时名称">
31 
+              </el-table-column>
32 
+              <el-table-column
33 
+                prop="BeginDate"
34 
+                label="课程开始时间">
35 
+              </el-table-column>
36 
+              <el-table-column
37 
+                prop="EndDate"
38 
+                label="课程结束时间">
39 
+              </el-table-column>
40 
+              <el-table-column
41 
+                label="操作">
42 
+                <template slot-scope="scope">
43 
+                  <el-button
44 
+                    size="mini"
45 
+                    type="success"
46 
+                    @click="check(scope.row)">核销</el-button>
47 
+                </template>
48 
+              </el-table-column>
49 
+            </el-table>
50 
+        </div>
51 
+        <span class="noData">今日暂无可核销的课程</span>
52 
+      </div>
53 
+    </div>
54 
+    <el-dialog
55 
+      title="提示"
56 
+      :visible.sync="centerDialogVisible"
57 
+      width="300px"
58 
+      center>
59 
+      <span style="width:100%;display:block;text-align:center;margin:20px 0;">确认核销此课程？</span>
60 
+      <span slot="footer" class="dialog-footer">
61 
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
62 
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
63 
+      </span>
64 
+    </el-dialog>
65 
+  </div>
66 
+</template>
67 
+
68 
+<script>
69 
+
70 
+export default {
71 
+  name: '',
72 
+  data () {
73 
+    return {
74 
+      centerDialogVisible: false,
75 
+      coursesList: [{
76 
+        CaseName: 'xxx',
77 
+        LocationId: 'xxx',
78 
+        CourseName: 'xxx',
79 
+        DetailName: 'xxx',
80 
+        BeginDate: 'xxx',
81 
+        EndDate: 'xxx',
82 
+      }],
83 
+    }
84 
+  },
85 
+  mounted () {
86 
+    this.$nextTick(function () { })
87 
+  },
88 
+  methods: {
89 
+    check (item) { // 核销
90 
+      this.centerDialogVisible = true
91 
+    },
92 
+    reback () { // 返回
93 
+      this.$router.push({name: 'qrcodeVerification'})
94 
+    },
95 
+  }
96 
+}
97 
+</script>
98 
+
99 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
100 
+<style lang="scss" scoped>
101 
+.subPage {
102 
+  .list {
103 
+    > div {
104 
+      margin: 0 20px;
105 
+      > div {
106 
+        width: 100%;
107 
+        position: relative;
108 
+        overflow: hidden;
109 
+        box-sizing: border-box;
110 
+        border: 1px solid #eee;
111 
+        border-bottom: none;
112 
+        margin-top: 20px;
113 
+      }
114 
+    }
115 
+  }
116 
+  .noData{
117 
+    width: 100%;
118 
+    display: block;
119 
+    line-height: 40px;
120 
+    font-size: 30px;
121 
+    color: #ccc;
122 
+    text-align: center;
123 
+    margin: 40px auto 0;
124 
+  }
125 
+}
126 
+</style>

+ 3
- 0
src/style/main.css View File 

@@ -384,6 +384,9 @@ select:focus {
384 384 
   padding: 0 20px !important;
385 385 
 }
386 386
387 
+.avatar-uploader{
388 
+  display: inline-block;
389 
+}
387 390
388 391
389 392