sunlupeng 1 year ago
parent
commit
61d617dde4

+ 8 - 0
src/api/raffleManage.js

@@ -68,6 +68,14 @@ export function dataRemove(query) {
   })
 }
 
+export function logsList(query) {
+  return request({
+    url: '/mall-prize/prize/log',
+    method: 'get',
+    params:query
+  })
+}
+
 
 
 

+ 1 - 1
src/main.js

@@ -17,7 +17,7 @@ import './permission' // permission control
 Vue.use(Element, {
   size: 'medium' // set element-ui default size
 })
-const prodUrl = 'https://xiaoyou.dgtis.com/admin/storage/create';//正式地址
+const prodUrl = 'http://47.103.79.143:9085/admin/storage/create';//正式地址
 
 const devUrl = 'http://47.103.79.143:9085/admin/storage/create';//阿里云地址
 

+ 6 - 2
src/permission.js

@@ -17,12 +17,16 @@ function hasPermission(roles, permissionRoles) {
 const whiteList = ['/login', '/authredirect']// no redirect whitelist
 //自定义路由
 const myRoles = [
+  'couponsManage', 
+  'couponsList', 
+
   'answerGame', 
   'answerList', 
   
   'raffleManage', 
   'raffleList', 
   'raffleDataList', 
+  'raffleLogsList',
 
   'goodsManage', 
   'goodsExchangeRules', 
@@ -99,8 +103,8 @@ router.beforeEach((to, from, next) => {
       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetUserInfo').then(res => {
           store.dispatch('GetUserMenus').then(res => { // 拉取user_info
-            const roles = res.data.data // note: roles must be a array! such as: ['editor','develop']
-            // const roles = myRoles;
+            // const roles = res.data.data // note: roles must be a array! such as: ['editor','develop']
+            const roles = myRoles;
             store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
               router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
               next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record

+ 14 - 0
src/router/index.js

@@ -206,9 +206,23 @@ export const asyncRouterMap = [
     },
     children: [
       { path: 'raffleList', component: _import('raffleManage/raffleList'), name: 'raffleList', meta: { title: '奖池列表', noCache: true }},
+      { path: 'raffleLogsList', component: _import('raffleManage/raffleLogsList'), name: 'raffleLogsList', meta: { title: '抽奖记录', noCache: true }},
       { path: 'raffleDataList/:id', component: _import('raffleManage/raffleDataList'), name: 'raffleDataList', meta: { title: '奖池奖品', noCache: false, hideTag: true, hidden: true }},
     ]
   },
+  {
+    path: '/couponsManage',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'couponsManage',
+    meta: {
+      title: '兑换卷管理',
+      icon: 'huodong'
+    },
+    children: [
+      { path: 'couponsList', component: _import('couponsManage/couponsList'), name: 'couponsList', meta: { title: '兑换卷列表', icon: 'huodong', noCache: true }},
+    ]
+  },
   {
     path: '/commendManage',
     component: Layout,

+ 397 - 0
src/views/couponsManage/couponsList.vue

@@ -0,0 +1,397 @@
+<template>
+    <div class="app-container calendar-list-container">
+  
+      <!-- 查询和其他操作 -->
+      <div class="filter-container">
+        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入名称" v-model="listQuery.couponName"></el-input>
+        <el-select v-model="listQuery.couponType" clearable placeholder="请选择类型" class="filter-item" style="width: 200px">
+            <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+            </el-option>
+        </el-select>
+        <el-date-picker
+            class="filter-item"
+            value-format="yyyy-MM-dd"
+            v-model="listQuery.enableEndTime"
+            type="date"
+            placeholder="截止日期">
+            </el-date-picker>
+        <el-date-picker
+            class="filter-item"
+            value-format="yyyy-MM-dd"
+            v-model="listQuery.createTime"
+            type="date"
+            placeholder="创建日期">
+            </el-date-picker>
+        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
+        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
+        <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
+      </div>
+  
+      <!-- 查询结果 -->
+      <el-table
+        size="small"
+        :data="list"
+        @selection-change="handleSelectionChange"
+        v-loading="listLoading"
+        element-loading-text="正在查询中。。。"
+        border
+        fit
+        highlight-current-row
+      >
+        <el-table-column type="selection" width="55px"> </el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center">
+        </el-table-column>
+  
+        <el-table-column align="center" min-width="100px" label="名称" prop="couponName">
+        </el-table-column>
+        <el-table-column align="center" min-width="150px" label="类型" prop="couponType">
+        </el-table-column>
+        <el-table-column align="center" min-width="80px" label="数量" prop="num">
+        </el-table-column>
+        <el-table-column align="center" min-width="80px" label="截止日期" prop="enableEndTime">
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="状态">
+            <template slot-scope="scope">
+                <el-tag v-if="scope.row.status === '1'">停用</el-tag>
+                <el-tag v-else>正常</el-tag>
+            </template>
+            
+        </el-table-column>
+        <el-table-column align="center" min-width="150px" label="创建时间" prop="createTime">
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleUpdate(scope.row, false)"
+              >编辑</el-button
+            >
+  
+            <el-button type="danger" size="small"  @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
+  
+      <!-- 添加或修改对话框 -->
+      <el-dialog
+      :close-on-click-modal="false"
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        width="40%"
+      >
+        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
+            <el-form-item  label="名称" prop="couponName">
+              <el-input style="width: 300px" v-model="dataForm.couponName"></el-input>
+            </el-form-item>
+            <el-form-item label="兑换方式" prop="couponType">
+              <el-select v-model="dataForm.couponType" clearable placeholder="请选择类型" class="filter-item" style="width: 300px">
+                <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+                </el-option>
+              </el-select>  
+            </el-form-item>
+            <el-form-item label="关联商品" prop="skuId">
+              <el-select v-model="dataForm.skuId" clearable placeholder="请选择商品" class="filter-item" style="width: 300px">
+                <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+                </el-option>
+              </el-select>  
+            </el-form-item>
+            <el-form-item label="截止日期" prop="enableEndTime">
+              <el-date-picker
+              style="width: 300px"
+              class="filter-item"
+              value-format="yyyy-MM-dd"
+              v-model="dataForm.enableEndTime"
+              type="date"
+              placeholder="截止日期">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="数量" prop="num">
+                <el-input-number :precision="0" :step="1" v-model="dataForm.num"></el-input-number>
+            </el-form-item>
+            <el-form-item  label="状态">
+                <el-radio-group v-model="dataForm.status">
+                    <el-radio :label="'0'">正常</el-radio>
+                    <el-radio :label="'1'">停用</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item  label="备注">
+              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
+            </el-form-item>
+            
+            
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
+          <el-button v-else type="primary" @click="updateData">确定</el-button>
+        </div>
+      </el-dialog>
+  
+    </div>
+  </template>
+  
+  <style>
+    .demo-table-expand {
+      font-size: 0;
+    }
+    .demo-table-expand label {
+      width: 200px;
+      color: #99a9bf;
+    }
+    .demo-table-expand .el-form-item {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  </style>
+  
+  <script>
+    import { list, createItem, updateItem, deleteitem } from "@/api/dictManage";
+    import waves from "@/directive/waves"; // 水波纹指令
+    import Tinymce from '@/components/Tinymce'
+  
+  export default {
+    components: { Tinymce },
+    directives: { waves },
+    data() {
+      return {
+        typeList: [
+        {
+          type: "1",
+          name: "永久",
+        },
+        {
+          type: "2",
+          name: "有效",
+        },
+      ],
+        list: [
+          
+        ],
+        delarr: [],
+        multipleSelection: [],
+        total: 0,
+        listLoading: false,
+        listQuery: {
+          page: 1,
+          limit: 10,
+          couponName: '',
+          couponType: '',
+          enableEndTime:'',
+          createTime:'',
+        },
+        dataForm: {
+          couponName: undefined,
+          couponType: undefined,
+          skuId:undefined,
+          enableEndTime: undefined,
+          num: undefined,
+          status: '1',
+          remark: undefined,
+        },
+        dialogFormVisible: false,
+        dialogStatus: '',
+        textMap: {
+          update: "编辑",
+          create: "创建",
+        },
+        imageUrl: undefined,
+        rules: {
+          couponName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+          couponType: [{ required: true, message: "类型不能为空", trigger: "blur" }],
+          skuId: [{ required: true, message: "请选择商品", trigger: "blur" }],
+          enableEndTime: [{ required: true, message: "请选择截止日期", trigger: "blur" }],
+          num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
+        },
+      }
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+      resetForm() {
+        this.dataForm = {
+          couponName: undefined,
+          couponType: undefined,
+          skuId:undefined,
+          enableEndTime: undefined,
+          num: undefined,
+          status: '1',
+          remark: undefined,
+        };
+      },
+      handleCreate() {
+        this.resetForm();
+        this.dialogFormVisible = true;
+        this.dialogStatus = "create";
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      createData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            createItem(this.dataForm)
+                  .then(() => {
+                    this.getList();
+                    this.dialogFormVisible = false;
+  
+                    this.$notify({
+                      title: "成功",
+                      message: "创建成功",
+                      type: "success",
+                      duration: 2000,
+                    });
+                    this.getList()
+                  })
+          }
+        });
+      },
+      getList() {
+        this.listLoading = true
+        list(this.listQuery).then(response => {
+          this.list = response.data.data.items
+          this.total = response.data.data.total
+          this.listLoading = false
+        }).catch(() => {
+          this.list = []
+          this.total = 0
+          this.listLoading = false
+        })
+      },
+  
+      handleFilter() {
+        this.listQuery.page = 1
+        this.getList()
+      },
+  
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.getList()
+      },
+  
+      handleCurrentChange(val) {
+        this.listQuery.page = val
+        this.getList()
+      },
+  
+      handleUpdate(row) {
+        this.dataForm = Object.assign({}, row);
+        this.dialogStatus = 'update'
+        this.dialogFormVisible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      },
+  
+      updateData() {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            updateItem(this.dataForm).then(() => {
+                this.dialogFormVisible = false
+                this.$notify({
+                  title: '成功',
+                  message: '更新成功',
+                  type: 'success',
+                  duration: 2000
+                })
+                this.getList()
+              })
+            
+          }
+        })
+      },
+  
+      handleDelete(row) {
+  
+        this.$confirm('确认删除吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteitem({dictIds:row.dictId}).then(response => {
+            this.$notify({
+              title: '成功',
+              message: '删除成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }).catch(() => {
+  
+        })
+  
+      },
+      delAll() {
+            this.$confirm("确认删除吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    const length = this.multipleSelection.length;
+
+                    if (length > 0) {
+                        for (let i = 0; i < length; i++) {
+                            this.delarr.push(this.multipleSelection[i].dictId);
+                        }
+                        const dictIds = this.delarr.join(",");
+                        deleteitem({ dictIds: dictIds })
+                            .then(() => {
+                                this.$notify({
+                                    title: "成功",
+                                    message: "删除成功",
+                                    type: "success",
+                                    duration: 2000,
+                                });
+                                this.getList();
+                            })
+                            .catch(() => { });
+                    } else {
+                        this.$notify({
+                            title: "警告提示",
+                            message: "请选择要删除的信息!",
+                            type: "warning",
+                        });
+                    }
+                })
+                .catch(() => { });
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+    }
+  }
+  </script>
+  <style>
+    .ad-avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .ad-avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+    }
+    .ad-avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .ad-avatar {
+      display: block;
+    }
+  </style>
+  

+ 1 - 1
src/views/dictManage/dictDataList.vue

@@ -45,7 +45,7 @@
                 <template slot-scope="scope">
                     <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
 
-                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>

+ 1 - 1
src/views/dictManage/dictList.vue

@@ -58,7 +58,7 @@
               >编辑</el-button
             >
   
-            <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
+            <el-button type="danger" size="small"  @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>

+ 31 - 23
src/views/raffleManage/raffleDataList.vue

@@ -23,7 +23,7 @@
             </el-table-column>
             <el-table-column align="center" min-width="150px" label="关联商品" prop="skuId">
             </el-table-column>
-            <el-table-column align="center" min-width="100px" label="积分" prop="integral">
+            <el-table-column align="center" min-width="100px" label="奖励积分" prop="integral">
             </el-table-column>
             <el-table-column align="center" min-width="100px" label="奖品权重" prop="prizeWeight">
             </el-table-column>
@@ -43,7 +43,7 @@
                 <template slot-scope="scope">
                     <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
 
-                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -64,22 +64,24 @@
         width="40%"
       >
         <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
-            <el-form-item  label="字典类型" prop="poolId">
+            <el-form-item  label="奖池名称" prop="poolId">
               <el-input disabled style="width: 300px" v-model="dataForm.poolId"></el-input>
             </el-form-item>
-            <el-form-item  label="字典标签" prop="dictLabel">
-              <el-input style="width: 300px" v-model="dataForm.dictLabel"></el-input>
+            <el-form-item  label="奖品名称" prop="prizeName">
+              <el-input style="width: 300px" v-model="dataForm.prizeName"></el-input>
             </el-form-item>
-            <el-form-item  label="字典键值" prop="dictValue">
-              <el-input style="width: 300px" v-model="dataForm.dictValue"></el-input>
+            <el-form-item  label="奖励积分" prop="integral">
+                <el-input-number style="width: 300px" :precision="0" :step="1" v-model="dataForm.integral"></el-input-number>
+            </el-form-item>
+            <el-form-item  label="奖品权重" prop="prizeWeight">
+                <el-input-number style="width: 300px" :precision="0" :step="1" v-model="dataForm.prizeWeight"></el-input-number>
+            </el-form-item>
+            <el-form-item  label="奖品数量" prop="prizeActualStock">
+                <el-input-number style="width: 300px" :precision="0" :step="1" v-model="dataForm.prizeActualStock"></el-input-number>
+            </el-form-item>
+            <el-form-item  label="剩余数量" prop="prizeStock">
+                <el-input-number style="width: 300px" :precision="0" :step="1" v-model="dataForm.prizeStock"></el-input-number>
             </el-form-item>
-            <el-form-item label="显示排序" prop="dictSort">
-                <el-input-number
-                  :precision="0"
-                  :step="1"
-                  v-model="dataForm.dictSort"
-                ></el-input-number>
-              </el-form-item>
             <el-form-item  label="状态">
                 <el-radio-group v-model="dataForm.status">
                     <el-radio :label="'0'">正常</el-radio>
@@ -150,9 +152,11 @@ export default {
             },
             dataForm: {
                 poolId: undefined,
-                dictLabel: undefined,
-                dictValue: undefined,
-                dictSort: undefined,
+                prizeName: undefined,
+                integral: undefined,
+                prizeWeight: undefined,
+                prizeActualStock: undefined,
+                prizeStock: undefined,
                 status: '0',
             },
             dialogFormVisible: false,
@@ -163,9 +167,11 @@ export default {
             },
             imageUrl: undefined,
             rules: {
-                dictLabel: [{ required: true, message: "字典标签不能为空", trigger: "blur" }],
-                dictValue: [{ required: true, message: "字典键值不能为空", trigger: "blur" }],
-                dictSort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+                prizeName: [{ required: true, message: "奖品名称不能为空", trigger: "blur" }],
+                integral: [{ required: true, message: "奖励积分不能为空", trigger: "blur" }],
+                prizeWeight: [{ required: true, message: "奖品权重不能为空", trigger: "blur" }],
+                prizeActualStock: [{ required: true, message: "奖品数量不能为空", trigger: "blur" }],
+                prizeStock: [{ required: true, message: "剩余数量不能为空", trigger: "blur" }],
             },
         }
     },
@@ -189,9 +195,11 @@ export default {
         resetForm() {
             this.dataForm = {
                 poolId: undefined,
-                dictLabel: undefined,
-                dictValue: undefined,
-                dictSort: undefined,
+                prizeName: undefined,
+                integral: undefined,
+                prizeWeight: undefined,
+                prizeActualStock: undefined,
+                prizeStock: undefined,
                 status: '0',
             };
         },

+ 142 - 0
src/views/raffleManage/raffleLogsList.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="app-container calendar-list-container">
+
+        <!-- 查询和其他操作 -->
+        <div class="filter-container">
+            <el-input clearable class="filter-item" style="width: 200px;" placeholder="员工"
+                v-model="listQuery.userName"></el-input>
+            <el-input clearable class="filter-item" style="width: 200px;" placeholder="活动名称"
+                v-model="listQuery.actTitle"></el-input>
+            <el-date-picker
+            class="filter-item"
+            value-format="yyyy-MM-dd"
+            v-model="listQuery.createTime"
+            type="date"
+            placeholder="创建日期">
+            </el-date-picker>
+            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
+
+        </div>
+
+        <!-- 查询结果 -->
+        <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
+            highlight-current-row>
+            <el-table-column type="index" label="序号" header-align="center" align="center">
+            </el-table-column>
+            <el-table-column align="center" min-width="180px" label="部门" prop="deptName">
+            </el-table-column>
+            <el-table-column align="center" min-width="80px" label="员工" prop="userName">
+            </el-table-column>
+            <el-table-column align="center" min-width="80px" label="活动名称" prop="actTitle">
+            </el-table-column>
+            <el-table-column align="center" min-width="80px" label="奖品" prop="prizeName">
+            </el-table-column>
+            <el-table-column align="center" min-width="150px" label="获取日期" prop="createTime">
+            </el-table-column>
+           
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+                layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+  
+<style>
+.demo-table-expand {
+    font-size: 0;
+}
+
+.demo-table-expand label {
+    width: 200px;
+    color: #99a9bf;
+}
+
+.demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+}
+</style>
+  
+<script>
+import { logsList } from "@/api/raffleManage";
+import waves from "@/directive/waves"; // 水波纹指令
+
+export default {
+    directives: { waves },
+    data() {
+        return {
+            list: [],
+            total: 0,
+            listLoading: false,
+            listQuery: {
+                page: 1,
+                limit: 10,
+                userName: '',
+                actTitle:'',
+                createTime: '',
+            },
+        }
+    },
+    created() {
+        this.getList();
+    },
+    methods: {
+        getList() {
+            this.listLoading = true
+            logsList(this.listQuery).then(response => {
+                this.list = response.data.data.items
+                this.total = response.data.data.total
+                this.listLoading = false
+            }).catch(() => {})
+        },
+       
+
+        handleFilter() {
+            this.listQuery.page = 1
+            this.getList()
+        },
+        handleSizeChange(val) {
+            this.listQuery.limit = val
+            this.getList()
+        },
+        handleCurrentChange(val) {
+            this.listQuery.page = val
+            this.getList()
+        },
+
+        
+    }
+}
+</script>
+<style>
+.ad-avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.ad-avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+}
+
+.ad-avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+}
+
+.ad-avatar {
+    display: block;
+}
+</style>
+