fillBrandInf.vue

<template>
  <div class="fill-brand-inf">
    <div class="logo-bg">
      <img v-if="false" src="../../../public/images/logo_white_sm.png" alt="">
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix steps">
        <el-steps :active="1" align-center finish-status="success">
<!--          <el-step title="签署入驻协议"></el-step>-->
          <el-step title="填写主体信息"></el-step>
          <el-step title="填写品牌信息"></el-step>
          <el-step title="填写店铺信息"></el-step>
          <el-step title="提交入驻审核"></el-step>
        </el-steps>
      </div>

      <div class="main-con">
        <el-form ref="brandForm" :model="brandForm" :rules="brandRules" label-width="180px">

          <el-form-item label="经营品牌类型：">
            <el-radio-group v-model="brandForm.brand_type" @change="chooseBrandType">
              <el-radio :label="1">自有品牌</el-radio>
              <el-radio :label="2">品牌厂商授权</el-radio>
              <el-radio :label="3">无品牌</el-radio>
            </el-radio-group>
          </el-form-item>

          <div v-show="brandForm.brand_type !== 3" class="spe-brand-text">
            品牌一
          </div>

          <el-form-item label="品牌中文名：" v-show="brandForm.brand_type !== 3" prop="brand_cn">
            <el-input v-model="brandForm.brand_cn" style="width: 400px;" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="品牌英文名：" v-show="brandForm.brand_type !== 3" prop="brand_en">
            <el-input v-model="brandForm.brand_en" style="width: 400px;" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="品牌LOGO：" ref="logoImg" prop="brand_logo" v-if="brandForm.brand_type !== 3">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <div style="padding-right:6px;">
                <el-upload
                  class="uploadData"
                  action="#"
                  list-type="picture-card"
                  :http-request="uploadLogoImgs"
                  :limit="1"
                  :on-exceed="showTip"
                  :before-upload = "beforeUpLogoImg"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :file-list = 'brandImgFileList'
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
              <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
              </div>
              <div style="width:380px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">图片大小在500KB以内，支持png/jpg，限一张，请确保图片清晰</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="品牌商标注册号：" v-show="brandForm.brand_type !== 3" prop="brand_number">
            <el-input v-model="brandForm.brand_number" style="width: 400px;" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="品牌类型：" v-show="brandForm.brand_type !== 3" prop="brand_range">
            <el-radio-group v-model="brandForm.brand_range">
              <el-radio :label="1">国内品牌</el-radio>
              <el-radio :label="2">国外品牌</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="品牌方授权书：" prop="brand_auth" v-if="brandForm.brand_type === 2">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <div style="padding-right:6px;">
                <el-upload
                  class="uploadData"
                  action="#"
                  :limit="1"
                  list-type="picture-card"
                  :http-request="uploadFactoryImgs"
                  :before-upload = "beforeUpImg"
                  :on-preview="handlePictureCardPreview2"
                  :on-remove="handleRemove2"
                  :file-list = 'factoryImgFileList'
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2">
                  <img width="100%" :src="dialogImageUrl2" alt="">
                </el-dialog>
              </div>
              <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
              </div>
              <div style="width:380px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">图片大小在500KB以内，支持png/jpg，限一张，请确保图片清晰</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="授权有效期至：" v-if=" brandForm.brand_type === 2" prop="brand_auth_time">
            <el-date-picker type="date" placeholder="选择日期" v-model="validityConcreteTime"
                            style="width: 300px;" @change="validityConcrete"></el-date-picker>
            <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
                         @change="validityLongTerm">长期
            </el-checkbox>
          </el-form-item>

          <el-form-item label="品牌经营授权：" prop="brand_business_auth" v-if="brandForm.brand_type !== 3">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <div style="padding-right:6px;">
                <el-upload
                  class="uploadData"
                  action="#"
                  :http-request="uploadShopImgs"
                  list-type="picture-card"
                  :limit="1"
                  :on-exceed="showTip"
                  :before-upload = "beforeUpImg"
                  :on-preview="handlePictureCardPreview3"
                  :on-remove="handleRemove3"
                  :file-list="shopImgFileList"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible3">
                  <img width="100%" :src="dialogImageUrl3" alt="">
                </el-dialog>
              </div>
              <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
              </div>
              <div style="width:380px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">图片大小在500KB以内，支持png/jpg，限一张，请确保图片清晰</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="" v-show="brandForm.brand_type !== 3">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <a class="download-Template-btn" :href="downTemplatehttp"><i class="el-icon-download"></i>下载模板</a>
              <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
              </div>
              <div style="width:380px;line-height: 24px;padding-top: 6px;">
              <span class="tips-text">请您点击下载授权书模板，打印并签字盖章，拍照上传。
              如暂时无法上传该授权，可选择【无品牌】，稍后在店铺信息里面完善品牌信息</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item v-show="brandForm.brand_type !== 3">
            <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
            <el-button type="primary" @click="next('brandForm')">下一步</el-button>
          </el-form-item>

        </el-form>
        <div class="no-brand" v-show="!hasBrand">
          <p>您当前选择的是无品牌</p>
          <p>这不会影响您入驻的审核</p>
          <p>入驻成功后，您可以在店铺信息里，添加您的品牌</p>
          <div class="no-brand-btn">
            <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
            <el-button type="primary" @click="noBrandNext">下一步</el-button>
          </div>
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
  import { getBrandsInf,addBrands,upBrands ,upLoadImg } from '@/api/module/entry';
  export default {
    name: "FillBrandInf",
    data() {
      let authTimeValidator = (rule, value, callback) => {
        if(this.brandForm.brand_type === 2) {
          if (this.validityConcreteTime === null && this.validityLongTermVal === false) {
            callback(new Error("授权有效期具体时间和长期必须填写其中一个"));
          } else {
            callback();
          }
        }else {
          callback();
        }
      };
      let authValidator = (rule, value, callback) => {
        if(this.brandImgFileList.length > 0) {
          callback();
        }else if(this.brandImgFileList.length === 0) {
          callback(new Error("品牌logo图片至少上传一张"));
        }
      };
      let authBusValidator = (rule, value, callback) => {
        if(this.shopImgFileList.length > 0) {
          callback();
        }else if(this.shopImgFileList.length === 0) {
          callback(new Error("品牌logo图片至少上传一张"));
        }
      }
      return {
        shopTemplatehttp : 'http://img3.jxhh.com/shop/brand.doc',
        factoryTemplatehttp : 'http://img3.jxhh.com/shop/factory.doc',
        hasBrand: true,
        dialogImageUrl: '',
        dialogVisible: false,
        dialogImageUrl2: '',
        dialogVisible2: false,
        dialogImageUrl3: '',
        dialogVisible3: false,
        validityConcreteTime: null, // 期限具体时间brand_auth_time
        validityLongTermVal: false, // 长期
        downTemplatehttp: '',
        brandImgFileList: [], // 品牌logo
        factoryImgFileList: [], // 品牌授权
        shopImgFileList: [], // 品牌经营授权
        // 品牌信息
        brandForm: {
          id: 0,
          brand_type: 1,
          brand_cn: '',
          brand_en: '',
          brand_logo: '',
          brand_number: '',
          brand_range: '',
          brand_auth_time: '',
          brand_auth: '',  // 商标授权 == 品牌授权 == factoryImgFileList
          brand_business_auth: '', // 商标经营授权 == 品牌经营授权 == shopImgFileList
        },
        // 品牌信息校验
        brandRules: {
          brand_cn: [{ required: true, message: '品牌中文名称不能为空', trigger: 'blur' }],
          brand_logo: [{ required: true, message: '品牌logo图片至少上传一张',validator: authValidator}],
          brand_range: [{ required: true, message: '品牌类型需要选择其一', trigger: 'blur' }],
          brand_auth: [{ required: true, message: '品牌授权至少上传一张图片'}], // 品牌授权
          brand_auth_time: [{ validator:authTimeValidator,required: true,trigger: 'change' }],
          brand_business_auth: [{ required: true, message: '品牌经营授权至少上传一张图片', validator: authBusValidator }],
        }
      }
    },
    watch: {
      // 品牌授权是否上传图片校验
      factoryImgFileList:{ //深度监听，可监听到对象、数组的变化
        handler(val, oldVal){
          if(this.brandForm.brand_type === 2) {
            this.$refs.brandForm.validateField("brand_auth");
            if(val.length !== 0) {
              // 清除后，dom还存在，bug
              this.$nextTick(() => {
                this.$refs.brandForm.clearValidate('brand_auth');
              });
            }
          }
        },
        deep:true //true 深度监听
      },
      // 品牌经营授权 上传图片校验
      // shopImgFileList:{ //深度监听，可监听到对象、数组的变化
      //   handler(val, oldVal){
      //     if(this.brandForm.brand_type !== 3) {
      //       this.$refs.brandForm.validateField("brand_business_auth");
      //       if(val.length !== 0) {
      //         // 清除后，dom还存在，bug
      //         this.$nextTick(() => {
      //           this.$refs.brandForm.clearValidate('brand_business_auth');
      //         });
      //       }
      //     }
      //   },
      //   deep:true //true 深度监听
      // }
    },
    created() {
      // console.log('品牌页面',this.$store.state.user.applyState)
      this.getBrands();
    },
    mounted() {
      // 默认下载模板
      this.downTemplatehttp = this.factoryTemplatehttp;
    },
    methods: {
      // 上传图片格式和大小限制2kb
      beforeUpImg(file) {
        let isImgSize = (file.size / 1024 ) > 500;
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持jpg/png格式',
            type: "warning"
          });
          return false;
        }
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500k',
            type: "warning"
          });
          return false;
        }
      },
      // 上传图片格式和大小限制500 kb
      beforeUpLogoImg(file) {
        let isImgSize = (file.size / 1024 ) > 500;
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持jpg/png格式',
            type: "warning"
          });
          return false;
        }
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500 kb',
            type: "warning"
          });
          return false;
        }
      },
      // 品牌图片自定义上传
      uploadLogoImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if (res.code == 1) {
              this.brandImgFileList.push({'url': res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.brandForm.clearValidate('brand_logo');
              //this.$refs.logoImg.clearValidate();
            }else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },
      // 品牌经营授权图片上传
      uploadShopImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if(res.code ==  1){
              this.shopImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.brandForm.clearValidate('brand_business_auth');
            }else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },
      // 品牌授权 图片上传
      uploadFactoryImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if (res.code ==  1){
              this.factoryImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
            } else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },
      // 图片转换为base64位
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
      // 选择品牌类型,并提供对应的下载模板
      chooseBrandType() {
        this.downTemplatehttp = '';
        // 自有品牌
        if(this.brandForm.brand_type === 1) {
          this.hasBrand = true;
          this.downTemplatehttp = this.shopTemplatehttp;
        // 品牌厂商授权
        }else if(this.brandForm.brand_type === 2) {
          this.hasBrand = true;
          this.downTemplatehttp = this.factoryTemplatehttp;
          this.factoryImgFileList = [];
          this.brandForm.brand_auth = '';
          this.brand_auth_time = '';
          this.validityConcreteTime = null;
          this.validityLongTermVal = false;
        // 无品牌
        }else if(this.brandForm.brand_type === 3) {
          this.hasBrand = false;
          // this.resetForm('brandForm');
          // this.clearImg();
        }
      },
      // 所有图片 清空
      clearImg() {
        this.brandImgFileList = [];
        this.factoryImgFileList = [];
        this.shopImgFileList = [];
        this.brandForm.brand_logo = '';
        this.brandForm.brand_auth = '';
        this.brandForm.brand_business_auth = '';
        // 期限
        this.brand_auth_time = '';
        this.validityConcreteTime = null;
        this.validityLongTermVal = false;
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      handleRemove(file,fileList) {
        for(let i = 0; i < this.brandImgFileList.length; i++) {
          if(file.uid === this.brandImgFileList[i].uid) {
            this.brandImgFileList.splice(i,1);
          }
        }
      },

      handlePictureCardPreview2(file) {
        this.dialogImageUrl2 = file.url;
        this.dialogVisible2 = true;
      },

      handleRemove2(file) {
        for(let i = 0; i < this.factoryImgFileList.length; i++) {
          if(file.uid === this.factoryImgFileList[i].uid) {
            this.factoryImgFileList.splice(i,1);
          }
        }
      },

      handlePictureCardPreview3(file) {
        this.dialogImageUrl3 = file.url;
        this.dialogVisible3 = true;
      },

      handleRemove3(file) {
        for(let i = 0; i < this.shopImgFileList.length; i++) {
          if(file.uid === this.shopImgFileList[i].uid) {
            this.shopImgFileList.splice(i,1);
          }
        }
      },

      validityConcrete() {
        if (this.validityConcreteTime) {
          this.validityLongTermVal = false;
        }
      },
      validityLongTerm() {
        if (this.validityLongTermVal) {
          this.validityConcreteTime = null;
        }
      },
      // 获取品牌信息
      getBrands() {
        // 初始化
        getBrandsInf().then(res => {
          if(res.code == 1) {
            this.brandForm = res.data[0];
            // 商标logo图片处理
            let brandList = {};
            let brandArr = [];
            if(this.brandForm.brand_logo.indexOf(",") > 0) {
              brandArr = this.brandForm.brand_logo.split(",");
              for(let a = 0; a < brandArr.length; a++){
                brandList = {};
                brandList.url = brandArr[a];
                this.brandImgFileList.push(brandList);
              }
            }else {
              brandList.url = this.brandForm.brand_logo;
              this.brandImgFileList = [];
              this.brandImgFileList.push(brandList);
            }

            // 品牌授权 图片处理   factoryImgFileList
            let factoryList = {};
            let factoryArr = [];

            if(this.brandForm.brand_auth.indexOf(",") > 0) {
              factoryArr = this.brandForm.brand_auth.split(",");
              for(let authIndex = 0; authIndex < factoryArr.length; authIndex++){
                factoryList = {};
                factoryList.url = factoryArr[authIndex];
                this.factoryImgFileList.push(factoryList);
              }
            }else {
              factoryList.url = this.brandForm.brand_auth;
              this.factoryImgFileList = [];
              this.factoryImgFileList.push(factoryList);
            }

            // 品牌经营授权 图片处理  shopImgFileList
            let shopList = {};
            let shopArr = [];

            if(this.brandForm.brand_business_auth.indexOf(",") > 0) {
              shopArr = this.brandForm.brand_business_auth.split(",");
              for(let busIndex = 0; busIndex < shopArr.length; busIndex++){
                shopList = {};
                shopList.url = shopArr[busIndex];
                this.shopImgFileList.push(shopList);
              }
            }else {
              shopList.url = this.brandForm.brand_business_auth;
              this.shopImgFileList = [];
              this.shopImgFileList.push(shopList);
            }

            // 期限处理
            if(this.brandForm.brand_auth_time === 0) {
              this.validityLongTermVal = true;
            }else {
              this.validityConcreteTime = this.toStandTime(this.brandForm.brand_auth_time);
            }
          } else {
            this.$message({type:'error',message:res.message ? res.message : ''});
          }
        });
      },
      // 时间戳转换为 标准时间格式
      toStandTime(val) {
        let date = new Date(val * 1000)
        let Y = date.getFullYear() + '-'
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
        const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
        const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
        return Y + M + D + h + m + s;
      },
      showTip(files,fileList) {
        this.$message({message: '最多上传2张图片', type: 'warning'});
      },

      back() {
        this.$router.push("/fillMainInf");
      },

      next(formName) {
        if(this.validityLongTermVal) {
          this.brandForm.brand_auth_time = (this.validityLongTermVal - 0 - 1);
        }else if(this.validityLongTermVal === false && this.validityConcreteTime) {
          this.brandForm.brand_auth_time = new Date(this.validityConcreteTime).getTime() / 1000;
        }else {
          this.brandForm.brand_auth_time = '';
        }
        // 品牌logo图片处理
        if(this.brandImgFileList.length > 0) {
          for(let i = 0; i < this.brandImgFileList.length; i++) {
            if(i === 0) {
              this.brandForm.brand_logo = this.brandImgFileList[i].url;
            }else {
              this.brandForm.brand_logo += ',' + this.brandImgFileList[i].url;
            }
          }
          // 品牌商标授权字段，特殊处理0425,对二期有影响，记得在五一前解决
          this.brandForm.brand_register_cert = this.brandImgFileList[0].url;
        }
        // 品牌授权图片处理
        if(this.factoryImgFileList.length > 0) {
          for(let i = 0; i < this.factoryImgFileList.length; i++) {
            if(i === 0) {
              this.brandForm.brand_auth = this.factoryImgFileList[i].url;
            }else {
              this.brandForm.brand_auth += ',' + this.factoryImgFileList[i].url;
            }
          }
        }
        // 品牌经营授权 图片处理
        if(this.shopImgFileList.length > 0) {
          for(let i = 0; i < this.shopImgFileList.length; i++) {
            if(i === 0) {
              this.brandForm.brand_business_auth = this.shopImgFileList[i].url;
            }else {
              this.brandForm.brand_business_auth += ',' + this.shopImgFileList[i].url;
            }
          }
        }

        // if(this.factoryImgFileList.length === 0) {
        //   console.log(this.factoryImgFileList.length === 0);
        //   console.log(this.factoryImgFileList);
        //   this.$refs.brandForm.validateField("brand_auth");
        // }

        // 期限 brand_auth_time

        this.$refs[formName].validate(valid => {
          if(valid) {
            let addBrandForm = {};
            let toArrBrandForm = [];
            toArrBrandForm.push(this.brandForm);
            // 新增   修改
            if(this.brandForm.id === 0) {
              addBrandForm.brands = toArrBrandForm;
              addBrands(addBrandForm).then(res => {
                if(res.code == 1) {
                  this.$router.push("/fillShopInf");
                }else {
                  this.$message({type: 'error',message: res.message ? res.message : '保存失败'});
                }
              });
            }else {
              upBrands(toArrBrandForm).then(res => {
                if(res.code == 1) {
                  this.$router.push("/fillShopInf");
                }else {
                  this.$message({type: 'error',message: res.message ? res.message : '保存失败'});
                }
              });
            }
          }
        });
      },
      noBrandNext(){
        this.$router.push("/fillShopInf");
      },
    }
  }
</script>

<style lang="scss" type="text/stylus" scoped>

  .fill-brand-inf {
    font-size : 16px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    .box-card {
      width: 80%;
      margin: 30px auto 30px;
      height: calc(100% - 120px);
      ::v-deep .el-card__body{
        height: calc(100% - 120px);
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
    .logo-bg {
      height: 60px;
      background: #1890ff;

      img {
        height: 44px;
        margin: 8px 0 8px 20px;
      }
    }
    .spe-brand-text {
      width: 100%;
      height: 50px;
      line-height :50px;
      margin: 15px 0 15px 30px  ;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      background-color : #FAFAFA;
    }
  }
  .steps {
    height: 70px;
    width: 60%;
    margin: 20px auto;
  }

  .steps >>> .el-step__title {
    font-size: 16px;
    line-height: 18px;
    padding-top: 20px;
  }

  .el-step >>> .el-step__head.is-process {
    color: #1890ff;
    border-color: #1890ff;

    .el-step__icon.is-text {
      background-color: #1890ff;

      .el-step__icon-inner {
        color: #fff;
      }
    }
  }
  .el-step >>> .el-step__title.is-process {
    color: #000;
    font-weight: 400;
  }

  .el-step >>> .el-step__head.is-success {
    color: #1890ff;
    border-color: #1890ff;

    .el-step__line {
      background-color: #1890ff;
    }
  }

  .el-step >>> .el-step__title.is-success {
    color: #000;
  }

  .main-con {
    width: 70%;
    margin: 30px auto 50px;
    overflow-x: hidden;
    overflow-y: scroll;

    .tips-text {
      font-size: 14px;
      color: #C9C9C9;
      word-break: break-all;
    }

    .h-warning:before {
      color: #e3c300;
    }

    .no-brand {
      padding-left: 60px;
      p{
        color: #333;
        font-size: 14px;
        line-height: 20px;
        padding: 10px 80px 0;
      }
      .no-brand-btn {
        padding-left: 84px;
        padding-top: 30px;
      }
    }

    .uploadData {
      display: inline-block;

      ::v-deep  .el-upload--picture-card {
        width: 100px;
        height: 100px;
      }

      ::v-deep  .el-upload {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }

      ::v-deep  .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }

      ::v-deep  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }

      ::v-deep  .avatar {
        width: 100px;
        height: 100px;
      }
    }


    // 模板下载按钮
    .download-Template-btn {
      width: 145px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      color: #1890FF;
      font-size: 14px;
      border: 1px solid #1890FF;
      border-radius: 3px;
      cursor: pointer;
    }

    .download-Template-btn:hover {
      color: #fff;
      border: 1px solid #1890FF;
      background-color : #1890ff;
    }
  }
</style>