up

src/views/productService/components/addProduct.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'" :form="form" :rules="rules" @submit="submit">
+    <xy-dialog :width="66" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'add' ? '新增商品' : '编辑商品'"
+      :form="form" :rules="rules" @submit="submit">
       <template v-slot:name>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -17,28 +18,15 @@
             海报图：
           </div>
           <div class="xy-table-item-content">
-            <div v-if="form.poster" style="position: relative;">
+            <div v-if="form.poster_url" style="position: relative;">
-              <img :src="form.poster" class="avatar">
+              <img :src="form.poster_url" class="avatar">
-              <Button
+              <Button shape="circle" icon="md-close" type="error" size="small" class="img__delete"
-                shape="circle"
+                @click="form.poster_url = ''"></Button>
-                icon="md-close"
-                type="error"
-                size="small"
-                class="img__delete"
-                @click="form.poster = ''"></Button>
             </div>
-            <el-upload
+            <el-upload v-else accept="picture" :limit="1" class="avatar-uploader" list-type="picture-card"
-              v-else
+              :action="action" :show-file-list="true" :on-error="uploadFail" :on-success="uploadSuccess"
-              accept="picture"
-              :limit="1"
-              class="avatar-uploader"
-              list-type="picture-card"
-              :action="action"
-              :show-file-list="true"
-              :on-error="uploadFail"
-              :on-success="uploadSuccess"
               :before-upload="uploadBefore">
-              <i  class="el-icon-plus avatar-uploader-icon"></i>
+              <i class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </div>
         </div>
@@ -49,7 +37,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属商户：
           </div>
           <div class="xy-table-item-content">
-            <el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户" clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
+            <el-input suffix-icon="el-icon-arrow-down" readonly :value="form.merchantId.label" placeholder="请选择所属商户"
+              clearable style="width: 300px;" @focus="isShowMerchantSelect = true,getMerchants()"></el-input>
           </div>
         </div>
       </template>
@@ -69,7 +58,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>所属板块：
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid" @change="typeChange">
+            <el-select clearable placeholder="请选择所属板块" style="width: 300px" v-model="form.productTypePid"
+              @change="typeChange">
               <el-option v-for="item in types" :key="item.id" :value="item.id" :label="item.name">
               </el-option>
             </el-select>
@@ -95,7 +85,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>原价：
           </div>
           <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable v-model="form.originalPrice" style="width: 300px;"></el-input-number>
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入原价" clearable
+              v-model="form.originalPrice" style="width: 300px;"></el-input-number>
           </div>
         </div>
       </template>
@@ -105,7 +96,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>价格：
           </div>
           <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable v-model="form.price" style="width: 300px;"></el-input-number>
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入价格" clearable
+              v-model="form.price" style="width: 300px;"></el-input-number>
           </div>
         </div>
       </template>
@@ -115,7 +107,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>平台佣金：
           </div>
           <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable v-model="form.fee" style="width: 300px;"></el-input-number>
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入平台佣金" clearable
+              v-model="form.fee" style="width: 300px;"></el-input-number>
           </div>
         </div>
       </template>
@@ -125,7 +118,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>分享金：
           </div>
           <div class="xy-table-item-content number-input">
-            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable v-model="form.sharing" style="width: 300px;"></el-input-number>
+            <el-input-number :precision="2" :controls="false" :min="0" placeholder="请输入分享金" clearable
+              v-model="form.sharing" style="width: 300px;"></el-input-number>
           </div>
         </div>
       </template>
@@ -135,7 +129,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>总份数：
           </div>
           <div class="xy-table-item-content">
-            <el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;"></el-input-number>
+            <el-input-number :min="0" placeholder="请输入总份数" clearable v-model="form.maxQuantity" style="width: 200px;">
+            </el-input-number>
           </div>
         </div>
       </template>
@@ -145,7 +140,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>每用户限购：
           </div>
           <div class="xy-table-item-content">
-            <el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity" style="width: 200px;"></el-input-number>
+            <el-input-number :min="0" placeholder="请输入每用户限购数" clearable v-model="form.limitQuantity"
+              style="width: 200px;"></el-input-number>
           </div>
         </div>
       </template>
@@ -155,7 +151,8 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>虚拟购买次数：
           </div>
           <div class="xy-table-item-content">
-            <el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity" style="width: 200px;"></el-input-number>
+            <el-input-number :min="0" placeholder="请输入虚拟购买次数" clearable v-model="form.pretendQuantity"
+              style="width: 200px;"></el-input-number>
           </div>
         </div>
       </template>
@@ -165,17 +162,9 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>上架/下架时间：
           </div>
           <div class="xy-table-item-content">
-            <el-date-picker
+            <el-date-picker clearable style="width: 440px;" v-model="form.time" type="datetimerange"
-              clearable
+              :picker-options="pickerOptions" range-separator="至" start-placeholder="上架日期" end-placeholder="下架日期"
-              style="width: 440px;"
+              align="right" value-format="yyyy-MM-dd hh:mm:ss">
-              v-model="form.time"
-              type="datetimerange"
-              :picker-options="pickerOptions"
-              range-separator="至"
-              start-placeholder="上架日期"
-              end-placeholder="下架日期"
-              align="right"
-              value-format="yyyy-MM-dd hh:mm:ss">
             </el-date-picker>
           </div>
         </div>
@@ -183,7 +172,8 @@
       <template v-slot:sortnumber>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序<span
+              style="font-size: 12px;padding-left: 2px;color: rgb(140,140,140)">（大到小）</span> ：
           </div>
           <div class="xy-table-item-content">
             <el-input-number v-model="form.sortnumber" :controls="false" style="width: 200px;"></el-input-number>
@@ -203,14 +193,10 @@
     </xy-dialog>
 
     <Modal v-model="isShowMerchantSelect" title="所属商户选择">
-      <Table
+      <Table size="small" highlight-row ref="currentRowTable" :columns="merchantTable" :data="merchants"
-        size="small"
-        highlight-row
-        ref="currentRowTable"
-        :columns="merchantTable"
-        :data="merchants"
         @on-current-change="merchantSelect" />
-      <Page :current="merchantIndex" :total="merchantTotal" simple style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange"/>
+      <Page :current="merchantIndex" :total="merchantTotal" simple
+        style="padding-top: 14px;display: flex;justify-content: center;" @on-change="merchantPageChange" />
     </Modal>
 
 
@@ -218,327 +204,354 @@
 </template>
 
 <script>
-import {store,show,save} from '@/api/product'
+  import {
-import {index as merchantIndex} from '@/api/merchant'
+    store,
-import { Message } from 'element-ui'
+    show,
+    save
+  } from '@/api/product'
+  import {
+    index as merchantIndex
+  } from '@/api/merchant'
+  import {
+    Message
+  } from 'element-ui'
 
-import tinymce from "@/components/Tinymce"
+  import tinymce from "@/components/Tinymce"
-export default {
+  export default {
-  components:{
+    components: {
-    tinymce
+      tinymce
-  },
+    },
-  props:{
+    props: {
-    types:Array
+      types: Array
-  },
+    },
-  data() {
+    data() {
-    return {
+      return {
-      id:'',
+        id: '',
-      isShow:false,
+        isShow: false,
-      type:'add',
+        type: 'add',
-      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
+        action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
-      pickerOptions: {
+        pickerOptions: {
-        shortcuts: [{
+          shortcuts: [{
-          text: '最近一周',
+            text: '最近一周',
-          onClick(picker) {
+            onClick(picker) {
-            const end = new Date();
+              const end = new Date();
-            const start = new Date();
+              const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            picker.$emit('pick', [start, end]);
+              picker.$emit('pick', [start, end]);
-          }
+            }
-        }, {
+          }, {
-          text: '最近一个月',
+            text: '最近一个月',
-          onClick(picker) {
+            onClick(picker) {
-            const end = new Date();
+              const end = new Date();
-            const start = new Date();
+              const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-            picker.$emit('pick', [start, end]);
+              picker.$emit('pick', [start, end]);
-          }
+            }
-        }]
+          }]
-      },
-
-      form:{
-        name:'',
-        poster:'',
-        merchantId:'',
-        shopIds:'',
-        productTypePid:'',
-        productTypeId:'',
-        originalPrice:'',
-        price:'',
-        fee:'',
-        sharing:'',
-        maxQuantity:'',
-        limitQuantity:'1',
-        pretendQuantity:0,
-        time:[],
-        sortnumber:0,
-        content:''
-      },
-      rules:{
-        name:[
-          {required:true,message:'请填写商品名称'}
-        ],
-        merchantId:[
-          {required:true,message:'请选择所属商家'}
-        ],
-        productTypePid:[
-          {required:true,message:'请选择所属模块'}
-        ],
-        productTypeId:[
-          {required:true,message:'请选择产品类别'}
-        ],
-        originalPrice:[
-          {required:true,message:'请输入原价'}
-        ],
-        price:[
-          {required:true,message:'请输入价格'}
-        ],
-        fee:[
-          {required:true,message:'请输入平台佣金'}
-        ],
-        sharing:[
-          {required:true,message:'请输入分享金'}
-        ],
-        maxQuantity:[
-          {required:true,message:'请输入总分数'}
-        ],
-        limitQuantity:[
-          {required:true,message:'请输入用户限购'}
-        ],
-        time:[
-          {required:true,message:'请选择上架/下架时间'}
-        ]
-      },
-
-      products:[],//板块下商品
-
-      isShowMerchantSelect:false,
-      merchants:[],
-      merchantTable:[
-        {
-          title:'简称',
-          key:'username',
-          width:130
         },
-        {
+
-          title:'全称',
+        form: {
-          key:'name',
+          name: '',
-          align:'left',
+          poster: '',
-          width:220
+          merchantId: '',
+          shopIds: '',
+          productTypePid: '',
+          productTypeId: '',
+          originalPrice: '',
+          price: '',
+          fee: '',
+          sharing: '',
+          maxQuantity: '',
+          limitQuantity: '1',
+          pretendQuantity: 0,
+          time: [],
+          sortnumber: 0,
+          content: '',
+          poster_url: ""
         },
-        {
+        rules: {
-          title:'状态',
+          name: [{
-          key:'state',
+            required: true,
-          sortable:true
+            message: '请填写商品名称'
-        }
+          }],
-      ],
+          merchantId: [{
-      merchantIndex:1,
+            required: true,
-      merchantTotal:0,
+            message: '请选择所属商家'
-    }
+          }],
-  },
+          productTypePid: [{
-  methods: {
+            required: true,
-    async getDetail(){
+            message: '请选择所属模块'
-      const res = await show({id:this.id})
+          }],
-      this.typeChange(res?.product_type_pid)
+          productTypeId: [{
-      this.form = {
+            required: true,
-        name:res?.name,
+            message: '请选择产品类别'
-        poster:res?.poster,
+          }],
-        merchantId:{
+          originalPrice: [{
-          label:res.merchant.name,
+            required: true,
-          value:res.merchant.id
+            message: '请输入原价'
+          }],
+          price: [{
+            required: true,
+            message: '请输入价格'
+          }],
+          fee: [{
+            required: true,
+            message: '请输入平台佣金'
+          }],
+          sharing: [{
+            required: true,
+            message: '请输入分享金'
+          }],
+          maxQuantity: [{
+            required: true,
+            message: '请输入总分数'
+          }],
+          limitQuantity: [{
+            required: true,
+            message: '请输入用户限购'
+          }],
+          time: [{
+            required: true,
+            message: '请选择上架/下架时间'
+          }]
         },
-        shopIds:res?.shop_ids,
-        productTypePid:res?.product_type_pid,
-        productTypeId:res?.product_type_id,
-        originalPrice:res?.original_price,
-        price:res?.price,
-        fee:res?.fee,
-        sharing:res?.sharing,
-        maxQuantity:res?.max_quantity,
-        limitQuantity:res?.limit_quantity,
-        pretendQuantity:res?.pretend_quantity,
-        time:[res?.start_time,res?.end_time],
-        sortnumber:res?.sortnumber,
-        content:res?.content
-      }
-      this.$refs['tinymce'].setContent(this.form.content ||' ')
-    },
-
-    //上传
-    uploadFail(err){
-      console.log(err)
-    },
-    uploadSuccess(response){
-      console.log(response)
-      this.form.poster = response.url
-    },
-    uploadBefore(file){
-      if((file.size/1000) > 2024){
-        Message({
-          type:'warning',
-          message:'上传图片大小超过2M！'
-        })
-        return false
-      }
-    },
 
-    typeChange(val){
+        products: [], //板块下商品
-      if(!val){
-        this.products = []
-        return
-      }
-      let res = this.types.filter(item => {
-        return item.id === val
-      })
-      this.products = res[0].children
-    },
 
-    async getMerchants(){
+        isShowMerchantSelect: false,
-      const res = await merchantIndex({
+        merchants: [],
-        page_size:10,
+        merchantTable: [{
-        page:this.merchantIndex
+            title: '简称',
-      })
+            key: 'username',
-      this.merchantTotal = res.total
+            width: 130
-      this.merchants = res.data
+          },
-    },
+          {
-    merchantPageChange(e){
+            title: '全称',
-      this.merchantIndex = e
+            key: 'name',
-      this.getMerchants()
+            align: 'left',
-    },
+            width: 220
-    merchantSelect(row){
+          },
-      this.form.merchantId = {
+          {
-        label:row.username,
+            title: '状态',
-        value:row.id
+            key: 'state',
+            sortable: true
+          }
+        ],
+        merchantIndex: 1,
+        merchantTotal: 0,
       }
     },
+    methods: {
+      async getDetail() {
+        const res = await show({
+          id: this.id
+        })
+        this.typeChange(res?.product_type_pid)
+        this.form = {
+          name: res?.name,
+          poster: res?.poster,
+          poster_url: res?.poster_url,
+          merchantId: {
+            label: res.merchant.name,
+            value: res.merchant.id
+          },
+          shopIds: res?.shop_ids,
+          productTypePid: res?.product_type_pid,
+          productTypeId: res?.product_type_id,
+          originalPrice: res?.original_price,
+          price: res?.price,
+          fee: res?.fee,
+          sharing: res?.sharing,
+          maxQuantity: res?.max_quantity,
+          limitQuantity: res?.limit_quantity,
+          pretendQuantity: res?.pretend_quantity,
+          time: [res?.start_time, res?.end_time],
+          sortnumber: res?.sortnumber,
+          content: res?.content
+        }
+        this.$refs['tinymce'].setContent(this.form.content || ' ')
+      },
 
-
+      //上传
-    submit(){
+      uploadFail(err) {
-      if(this.type === 'add'){
+        console.log(err)
-        store({
+      },
-          name:this.form.name,
+      uploadSuccess(response) {
-          poster:this.form.poster,
+        console.log(response)
-          merchant_id:this.form.merchantId?.value,
+        this.form.poster = "/" + response.folder + "/" + response.name
-          shop_ids:this.form.shopIds,
+        this.form.poster_url = response.url;
-          product_type_pid:this.form.productTypePid,
+      },
-          product_type_id:this.form.productTypeId,
+      uploadBefore(file) {
-          original_price:this.form.originalPrice.toString(),
+        if ((file.size / 1000) > 2024) {
-          price:this.form.price.toString(),
-          fee:this.form.fee.toString(),
-          sharing:this.form.sharing.toString(),
-          max_quantity:this.form.maxQuantity.toString(),
-          limit_quantity:this.form.limitQuantity.toString(),
-          pretend_quantity:this.form.pretendQuantity.toString(),
-          start_time:this.form.time[0],
-          sortnumber:this.form.sortnumber,
-          end_time:this.form.time[1],
-          content:this.form.content
-        }).then(res => {
           Message({
-            type:'success',
+            type: 'warning',
-            message:'新增成功'
+            message: '上传图片大小超过2M！'
           })
-          this.isShow = false
+          return false
-          this.$emit('refresh')
+        }
+      },
+
+      typeChange(val) {
+        if (!val) {
+          this.products = []
+          return
+        }
+        let res = this.types.filter(item => {
+          return item.id === val
         })
-        return
+        this.products = res[0].children
-      }
+      },
-      if(this.type === 'editor'){
+
-        save({
+      async getMerchants() {
-          id:this.id,
+        const res = await merchantIndex({
-          name:this.form.name,
+          page_size: 10,
-          poster:this.form.poster,
+          page: this.merchantIndex
-          merchant_id:this.form.merchantId?.value,
+        })
-          shop_ids:this.form.shopIds,
+        this.merchantTotal = res.total
-          product_type_pid:this.form.productTypePid,
+        this.merchants = res.data
-          product_type_id:this.form.productTypeId,
+      },
-          original_price:this.form.originalPrice.toString(),
+      merchantPageChange(e) {
-          price:this.form.price.toString(),
+        this.merchantIndex = e
-          fee:this.form.fee.toString(),
+        this.getMerchants()
-          sharing:this.form.sharing.toString(),
+      },
-          max_quantity:this.form.maxQuantity.toString(),
+      merchantSelect(row) {
-          limit_quantity:this.form.limitQuantity.toString(),
+        this.form.merchantId = {
-          pretend_quantity:this.form.pretendQuantity.toString(),
+          label: row.username,
-          start_time:this.form.time[0],
+          value: row.id
-          sortnumber:this.form.sortnumber,
+        }
-          end_time:this.form.time[1],
+      },
-          content:this.form.content
+
-        }).then(res => {
+
-          Message({
+      submit() {
-            type:'success',
+        if (this.type === 'add') {
-            message:'编辑商品成功'
+          store({
+            name: this.form.name,
+            poster: this.form.poster,
+            merchant_id: this.form.merchantId?.value,
+            shop_ids: this.form.shopIds,
+            product_type_pid: this.form.productTypePid,
+            product_type_id: this.form.productTypeId,
+            original_price: this.form.originalPrice.toString(),
+            price: this.form.price.toString(),
+            fee: this.form.fee.toString(),
+            sharing: this.form.sharing.toString(),
+            max_quantity: this.form.maxQuantity.toString(),
+            limit_quantity: this.form.limitQuantity.toString(),
+            pretend_quantity: this.form.pretendQuantity.toString(),
+            start_time: this.form.time[0],
+            sortnumber: this.form.sortnumber,
+            end_time: this.form.time[1],
+            content: this.form.content
+          }).then(res => {
+            Message({
+              type: 'success',
+              message: '新增成功'
+            })
+            this.isShow = false
+            this.$emit('refresh')
           })
+          return
+        }
+        if (this.type === 'editor') {
+          save({
+            id: this.id,
+            name: this.form.name,
+            poster: this.form.poster,
+            merchant_id: this.form.merchantId?.value,
+            shop_ids: this.form.shopIds,
+            product_type_pid: this.form.productTypePid,
+            product_type_id: this.form.productTypeId,
+            original_price: this.form.originalPrice.toString(),
+            price: this.form.price.toString(),
+            fee: this.form.fee.toString(),
+            sharing: this.form.sharing.toString(),
+            max_quantity: this.form.maxQuantity.toString(),
+            limit_quantity: this.form.limitQuantity.toString(),
+            pretend_quantity: this.form.pretendQuantity.toString(),
+            start_time: this.form.time[0],
+            sortnumber: this.form.sortnumber,
+            end_time: this.form.time[1],
+            content: this.form.content
+          }).then(res => {
+            Message({
+              type: 'success',
+              message: '编辑商品成功'
+            })
             this.isShow = false
-          this.$emit('refresh')
+            this.$emit('refresh')
-        })
+          })
+        }
       }
-    }
+    },
-  },
+    watch: {
-  watch:{
+      isShow(newVal) {
-    isShow(newVal){
+        if (newVal) {
-      if(newVal){
 
-        if(this.type === 'editor'){
+          if (this.type === 'editor') {
-          this.getDetail()
+            this.getDetail()
+          }
+        } else {
+          this.$refs['tinymce'].setContent(' ')
+          this.$refs['dialog'].reset()
+          this.id = ''
+          this.type = ''
         }
-      }else{
-        this.$refs['tinymce'].setContent(' ')
-        this.$refs['dialog'].reset()
-        this.id = ''
-        this.type = ''
       }
     }
-  }
 
-}
+  }
 </script>
 
 <style scoped lang="scss">
-.xy-table-item-label{
+  .xy-table-item-label {
-  width: 164px;
+    width: 164px;
-}
+  }
 
-.number-input{
+  .number-input {
-  ::v-deep .el-input-number .el-input__inner{
+    ::v-deep .el-input-number .el-input__inner {
-    text-align: left !important;
+      text-align: left !important;
+    }
   }
-}
 </style>
 
 <style>
-.avatar-uploader .el-upload {
+  .avatar-uploader .el-upload {
-  width: 110px;
+    width: 110px;
-  height: 110px;
+    height: 110px;
-  border: 1px dashed #d9d9d9;
+    border: 1px dashed #d9d9d9;
-  border-radius: 6px;
+    border-radius: 6px;
-  cursor: pointer;
+    cursor: pointer;
-  position: relative;
+    position: relative;
-  overflow: hidden;
+    overflow: hidden;
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: center;
+    align-items: center;
-}
+  }
-.avatar-uploader .el-upload:hover {
+
-  border-color: #BF617C;
+  .avatar-uploader .el-upload:hover {
-}
+    border-color: #BF617C;
-.avatar-uploader-icon {
+  }
-  font-size: 28px;
+
-  color: #8c939d;
+  .avatar-uploader-icon {
-  width: 110px;
+    font-size: 28px;
-  height: 110px;
+    color: #8c939d;
-  line-height: 110px;
+    width: 110px;
-  text-align: center;
+    height: 110px;
-}
+    line-height: 110px;
-.avatar {
+    text-align: center;
-  width: 110px;
+  }
-  display: block;
-  border-radius: 6px;
-}
-.img__delete{
-  transform: scale(0.7,0.7);
 
-  position: absolute;
+  .avatar {
-  top: 1px;
+    width: 110px;
-  left: 4%;
+    display: block;
-}
+    border-radius: 6px;
+  }
+
+  .img__delete {
+    transform: scale(0.7, 0.7);
+
+    position: absolute;
+    top: 1px;
+    left: 4%;
+  }
 </style>