<template>
  <div class="detail-base">
    <t-card title="新增会员" :bordered="false" class="info-block">
      <div style="padding: 20px">
        <div style="padding-bottom: 20px;font-weight: bold">登陆信息</div>
        <t-form
          layout="inline"
          labelAlign="top"
        >
          <t-form-item label="手机号" name="phone" :requiredMark="true">
            <t-input v-model="formData.phone" placeholder="请输入手机号"></t-input>
          </t-form-item>
          <t-form-item label="密码" name="password">
            <t-input v-model="formData.password" placeholder="请输入密码"></t-input>
          </t-form-item>
          <t-form-item label="职位" name="position_id">
            <t-select v-model="formData.position_id" :style="{ width: '200px' }">
              <t-option v-for="(item,index) in plan_list" :label="item.position_name" :value="item.id"></t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="行业" name="industry_id">
            <t-select v-model="formData.industry_id" :style="{ width: '200px' }">
              <t-option v-for="(item,index) in industry_list" :label="item.industry_name" :value="item.id"></t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="区域" name="region_id">
            <t-select v-model="formData.region_id" :style="{ width: '200px' }">
              <t-option v-for="(item,index) in region_list" :label="item.region_name" :value="item.id"></t-option>
            </t-select>
          </t-form-item>
        </t-form>
      </div>
      <div style="padding: 20px">
        <div style="padding-bottom: 20px;font-weight: bold">人员信息</div>
        <t-form
          labelAlign="top"
          layout="inline"
        >
          <t-form-item label="会员姓名" name="nikename" :requiredMark="true">
            <t-input v-model="formData.nikename" placeholder="请输入会员姓名"></t-input>
          </t-form-item>

          <t-form-item label="性别" name="gender">
            <t-select v-model="formData.gender" :style="{ width: '200px' }">
              <t-option key="0" label="女" value="0"></t-option>
              <t-option key="1" label="男" value="1"></t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="民族" name="nation">
            <t-input v-model="formData.nation" placeholder="请输入民族"></t-input>
          </t-form-item>
          <t-form-item label="政治面貌" name="political">
            <t-input v-model="formData.political" placeholder="请输入政治面貌"></t-input>
          </t-form-item>
          <t-form-item label="出生日期" name="birth_time">
            <t-date-picker :style="{ width: '200px' }" v-model="formData.birth_time"/>
          </t-form-item>
          <t-form-item label="身份证号码" name="card_number">
            <t-input v-model="formData.card_number" placeholder="请输入身份证号码"></t-input>
          </t-form-item>
          <t-form-item label="籍贯" name="jiguan">
            <t-input v-model="formData.jiguan" placeholder="请输入籍贯"></t-input>
          </t-form-item>
          <t-form-item label="毕业院校" name="institution">
            <t-input v-model="formData.institution" placeholder="请输入毕业院校"></t-input>
          </t-form-item>
          <t-form-item label="学历" name="education">
            <t-input v-model="formData.education" placeholder="请输入学历"></t-input>
          </t-form-item>
          <t-form-item label="学位" name="academic_degree">
            <t-input v-model="formData.academic_degree" placeholder="请输入学位"></t-input>
          </t-form-item>
          <!--          <t-form-item label="工作单位" name="academic_degree">-->
          <!--            <t-input v-model="formData.work_unit" placeholder="请输入工作单位"></t-input>-->
          <!--          </t-form-item>-->
          <t-form-item label="单位职务" name="unit_position">
            <t-input v-model="formData.unit_position" placeholder="请输入单位职务"></t-input>
          </t-form-item>
          <t-form-item label="微信号" name="wx_number">
            <t-input v-model="formData.wx_number" placeholder="请输入微信号"></t-input>
          </t-form-item>
          <t-form-item label="邮箱" name="mailbox">
            <t-input v-model="formData.mailbox" placeholder="请输入邮箱"></t-input>
          </t-form-item>
          <t-form-item label="固定电话" name="fixed_telephone">
            <t-input v-model="formData.fixed_telephone" placeholder="请输入固定电话"></t-input>
          </t-form-item>
          <t-form-item label="其他社会职务" name="other_social_positions">
            <t-input v-model="formData.other_social_positions" placeholder="请输入其他社会职务"></t-input>
          </t-form-item>
          <t-form-item label="其他联系人" name="other_contacts">
            <t-input v-model="formData.other_contacts" placeholder="请输入其他联系人"></t-input>
          </t-form-item>
          <!--          <t-form-item label="意向协会职务" name="position">-->
          <!--            <t-input v-model="formData.position" placeholder="请输入意向协会职务"></t-input>-->
          <!--          </t-form-item>-->
          <t-form-item label="自我介绍" name="introduction">
            <t-textarea placeholder="请输入自我介绍" :autosize="{ minRows: 3, maxRows: 5 }"
                        v-model="formData.introduction"/>
          </t-form-item>
          <t-form-item label="主要成就以及获奖情况" name="achievement_award">
            <t-textarea placeholder="请输入主要成就以及获奖情况" :autosize="{ minRows: 3, maxRows: 5 }"
                        v-model="formData.achievement_award"/>
          </t-form-item>
        </t-form>
      </div>
      <div style="padding: 0px 20px">
        <t-form labelAlign="top"
                layout="inline">
          <t-form-item label="形象照">
            <div class="t-upload" @click="openCai">
              <div class="t-upload__card-container" style="cursor: pointer">
                <img :src="$store.state.user.apiUrl+formData.photo_image" style="width: 110px;height: 110px;" v-if="formData.photo_image!=''">
                <svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-add" v-if="formData.photo_image==''">
                  <path fill="currentColor" d="M13 4v7h7v2h-7v7h-2v-7H4v-2h7V4h2z"></path>
                </svg>
                <p class="t-size-s t-upload__add-text" v-if="formData.photo_image==''">点击上传图片</p>
              </div>
              <small class="t-upload__tips t-size-s">请选择身份证正面照</small>
            </div>
          </t-form-item>
          <t-form-item label="身份证正面照">
            <t-upload
              :action="$store.state.user.apiUrl+'/api/common/upload'"
              v-model="formData.cardz_image_show"
              theme="image"
              :data="{association_id:this.association.association_id}"
              tips="请选择身份证正面照"
              accept="image/*"
              :format-response="(response) => formatResponse(response, 1)"
            ></t-upload>
          </t-form-item>
          <t-form-item label="身份证反面照">
            <t-upload
              :action="$store.state.user.apiUrl+'/api/common/upload'"
              v-model="formData.cardf_image_show"
              :data="{association_id:this.association.association_id}"
              theme="image"
              tips="请选择身份证反面照"
              accept="image/*"
              :format-response="(response) => formatResponse(response, 2)"
            ></t-upload>
          </t-form-item>
        </t-form>
      </div>
      <div style="padding: 20px">
        <div style="padding: 20px 0px;font-weight: bold">企业信息</div>
        <t-form labelAlign="top"
                layout="inline">
          <t-form-item label="营业执照">
            <t-upload
              :action="$store.state.user.apiUrl+'/api/common/upload'"
              v-model="formData.business_license_image_show"
              theme="image"
              :data="{association_id:this.association.association_id}"
              tips="请选择营业执照"
              accept="image/*"
              :format-response="(response) => formatResponse(response, 3)"
            ></t-upload>
          </t-form-item>
          <t-form-item label="公司Logo">
            <t-upload
              :action="$store.state.user.apiUrl+'/api/common/upload'"
              v-model="formData.company_image_show"
              theme="image"
              :data="{association_id:this.association.association_id}"
              tips="请选择营业执照"
              accept="image/*"
              :format-response="(response) => formatResponse(response, 5)"
            ></t-upload>
          </t-form-item>
          <t-form-item label="统一社会信用代码" name="unified_code">
            <t-input v-model="formData.unified_code" placeholder="请输入统一社会信用代码"></t-input>
          </t-form-item>
          <t-form-item label="企业名称" name="enterprise_name" :requiredMark="true">
            <t-input v-model="formData.enterprise_name" placeholder="请输入企业名称"></t-input>
          </t-form-item>
          <t-form-item label="企业性质" name="enterprise_nature">
            <t-input v-model="formData.enterprise_nature" placeholder="请输入企业性质"></t-input>
          </t-form-item>
          <t-form-item label="企业网址" name="enterprise_website">
            <t-input v-model="formData.enterprise_website" placeholder="请输入企业网址"></t-input>
          </t-form-item>
          <t-form-item label="是否上市" name="if_list">
            <t-select v-model="formData.if_list" :style="{ width: '200px' }">
              <t-option key="0" label="是" value="0"></t-option>
              <t-option key="1" label="否" value="1"></t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="员工人数" name="employee">
            <t-input v-model="formData.employee" placeholder="请输入员工人数"></t-input>
          </t-form-item>
          <t-form-item label="企业地址" name="enterprise_location">
            <t-input v-model="formData.enterprise_location" placeholder="请输入企业地址"></t-input>
          </t-form-item>
          <t-form-item label="上年度营业额" name="previous_revenue">
            <t-input v-model="formData.previous_revenue" placeholder="请输入上年度营业额"></t-input>
          </t-form-item>
          <t-form-item label="上年度纳税额" name="previous_tax">
            <t-input v-model="formData.previous_tax" placeholder="请输入上年度纳税额"></t-input>
          </t-form-item>
          <t-form-item label="上年度净利润" name="previous_profit">
            <t-input v-model="formData.previous_profit" placeholder="请输入上年度净利润"></t-input>
          </t-form-item>
          <t-form-item label="上年度公益性捐赠支出" name="previous_donation">
            <t-input v-model="formData.previous_donation" placeholder="上年度公益性捐赠支出"></t-input>
          </t-form-item>
          <t-form-item label="其他企业任职情况" name="qitaqiyerenzhiqingkuang">
            <t-input v-model="formData.qitaqiyerenzhiqingkuang" placeholder="其他企业任职情况"></t-input>
          </t-form-item>
          <t-form-item label="公司介绍" name="enterprise_Introduction">
            <t-textarea placeholder="请输入企业介绍" :autosize="{ minRows: 3, maxRows: 5 }"
                        v-model="formData.enterprise_Introduction"/>
          </t-form-item>
          <t-form-item label="业务介绍" name="introdiction">
            <t-textarea placeholder="请输入业务介绍" :autosize="{ minRows: 3, maxRows: 5 }"
                        v-model="formData.introdiction"/>
          </t-form-item>
          <t-form-item label="企业所获荣誉以及专利" name="enterprise_honor">
            <t-textarea placeholder="请输入企业所获荣誉以及专利" :autosize="{ minRows: 3, maxRows: 5 }"
                        v-model="formData.enterprise_honor"/>
          </t-form-item>
        </t-form>
        <t-form labelAlign="top"
                layout="inline">
          <t-form-item label="是否建立团组织" name="if_organization">
            <t-select v-model="formData.if_organization" :style="{ width: '200px' }">
              <t-option key="0" label="是" value="0"></t-option>
              <t-option key="1" label="否" value="1"></t-option>
            </t-select>
          </t-form-item>
        </t-form>
        <t-form v-if="formData.if_organization==0" labelAlign="top"
                layout="inline">
          <t-form-item label="团组织性质" name="nature">
            <t-input v-model="formData.nature" placeholder="团组织性质"></t-input>
          </t-form-item>
          <t-form-item label="建团时间" name="jiantuan_time">
            <t-date-picker :style="{ width: '200px' }" v-model="formData.jiantuan_time"/>
          </t-form-item>
          <t-form-item label="建团人数" name="jiantuan_number">
            <t-input v-model="formData.jiantuan_number" placeholder="建团人数"></t-input>
          </t-form-item>
          <t-form-item label="青年人数" name="youth_number">
            <t-input v-model="formData.youth_number" placeholder="青年人数"></t-input>
          </t-form-item>
          <t-form-item label="上级团组织" name="superior_nature">
            <t-input v-model="formData.superior_nature" placeholder="上级团组织"></t-input>
          </t-form-item>
          <t-form-item label="团委负责人信息" name="tuanweifuzerenxinxi">
            <t-input v-model="formData.tuanweifuzerenxinxi" placeholder="团委负责人信息"></t-input>
          </t-form-item>
          <t-form-item label="批复文件">
            <t-upload
              :action="$store.state.user.apiUrl+'/api/common/upload'"
              v-model="formData.documents_file_show"
              theme="image"
              tips="请选择批复文件(图片)"
              accept="image/*"
              :format-response="(response) => formatResponse(response, 4)"
            ></t-upload>
          </t-form-item>
        </t-form>
        <div style="text-align: center;margin-top: 40px">
          <t-space :style="{ width: '300px',margin:'0 auto',textAlign:'center' }">
            <t-button @click="submit">提交</t-button>
          </t-space>
        </div>
      </div>
    </t-card>
    <t-dialog header="图片上传" :visible="caiMode" width="40%" top="20px" :onClose="onCloseMy" @confirm="onSubmit">
      <div class="cropper-content">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="caiImg"
            :canMoveBox="false"
            :output-size="1"
            output-type="png"
            :info="true"
            :full="false"
            :auto-crop="true"
            autoCropWidth="200px"
            autoCropHeight="200px"
            mode="100%"
            @realTime="realTime"
            @imgLoad="imgLoad"
            :fixed="true"
            :fixedNumber="[1,1]"
          ></vueCropper>
        </div>
        <div class="show-preview"
             :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </div>
      <div class="footer-btn">
        <div class="scope-btn">
          <label class="btn" for="uploads">上传图片</label>
          <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
                 accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
        </div>
      </div>
    </t-dialog>
  </div>
</template>
<script lang="ts">
import {UserIcon, LockOnIcon} from 'tdesign-icons-vue';
import {CheckCircleIcon} from 'tdesign-icons-vue';
import store from '@/store';
import {VueCropper} from 'vue-cropper';
import axios from 'axios';

export default {
  components: {
    VueCropper,
    CheckCircleIcon,
    UserIcon,
    LockOnIcon,
  },
  data() {
    return {
      caiMode: false,
      previews: {},
      caiImg: '',
      association:{},
      formData: {
        phone: '',
        password: '',
        nikename: '',
        gender: '',
        birth_time: '',
        nation: '',
        political: '',
        jiguan: '',
        institution: '',
        education: '',
        academic_degree: '',
        card_number: '',
        // work_unit: '',
        unit_position: '',
        wx_number: '',
        mailbox: '',
        fixed_telephone: '',
        achievement_award: '',
        other_contacts: '',
        other_social_positions: '',
        position: '',
        cardf_image_show: [],
        cardz_image_show: [],
        photo_image_show: [],
        cardf_image: '',
        cardz_image: '',
        photo_image: '',
        business_license_image_show: [],
        business_license_image: '',
        unified_code: '',
        enterprise_nature: '',
        enterprise_website: '',
        if_list: '',
        employee: '',
        previous_revenue: '',
        previous_tax: '',
        position_id: '',
        previous_profit: '',
        previous_donation: '',
        enterprise_location: '',
        industry_id: '',
        qitaqiyerenzhiqingkuang: '',
        enterprise_Introduction: '',
        introdiction: '',
        enterprise_honor: '',
        if_organization: '',
        nature: '',
        jiantuan_time: '',
        jiantuan_number: '',
        youth_number: '',
        superior_nature: '',
        tuanweifuzerenxinxi: '',
        documents_file: '',
        documents_file_show: [],
        introduction: '',
        enterprise_name: '',
        company_image:'',
        company_image_show:[],
        region_id:'',
        if_xianshi:1,
      },
      id: 0,
      info: '',
      plan_list: [],
      region_list:[],
      industry_list: []
    };
  },
  mounted() {
    if(typeof (store.state.user.association)=='object'){
      this.association=store.state.user.association;
    }else{
      this.association=JSON.parse(store.state.user.association);
    }
    console.log( this.association);
    this.getPlan();
    this.getIndustry();
    this.getRegion();
  },
  methods: {
    onSubmit() {
      this.$refs.cropper.getCropBlob(data => {
        // do something
        console.log(data)
        console.log(this.caiImg);
        let formData = new FormData();
        formData.append('file', data, 'image.jpg');
        formData.append('association_id', this.association.association_id);
        console.log(formData);
        axios.post(store.state.user.apiUrl + '/api/common/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
          .then(response => {
            console.log(response);
            var data=response.data;
            if(data.code==1){
              this.formData.photo_image=data.data.url;
              this.$message.success('图片上传成功！');
              this.caiMode=false;
              this.caiImg='';
              this.$refs.cropper.stopCrop();
              this.$refs.cropper.clearCrop();
            }else{
              this.$message.error('图片上传失败！');
            }
          })
          .catch(error => {
            console.error('文件上传失败', error);
          });
      })
    },
    onCloseMy() {
      this.caiMode = false;
    },
    openCai() {
      this.$refs.cropper.startCrop();
      this.caiMode = true;
    },
    realTime(data) {
      this.previews = data
    },
    uploadImg(e, num) {
      //上传图片
      // this.option.img
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }
      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          this.caiImg = data
        } else if (num === 2) {
          this.example2.img = data
        }
      }
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file)
    },
    imgLoad(msg) {
      console.log(msg)
    },
    formatResponse(res, type) {
      console.log(res);
      if (type == 0) {
        this.formData.photo_image = res.data.url;
      } else if (type == 1) {
        this.formData.cardz_image = res.data.url;
      } else if (type == 2) {
        this.formData.cardf_image = res.data.url;
      } else if (type == 3) {
        this.formData.business_license_image = res.data.url;
      } else if(type==4){
        this.formData.documents_file = res.data.url;
      }else{
        this.formData.company_image = res.data.url;
      }

      return {url: res.data.fullurl};
    },
    getRegion() {
      this.$request
        .post("/region")
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.region_list = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getIndustry() {
      this.$request
        .post("/industry")
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.industry_list = res.data;
            this.industry_list.push({id: -1, industry_name: '其他行业'});
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getPlan() {
      this.$request
        .post("/position")
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.plan_list = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    submit() {
      // if (this.formData.business_license_image == '') {
      //   this.$message.error('请上传营业执照！');
      //   return;
      // }
      if (this.formData.phone == '') {
        this.$message.error('请填写手机号！');
        return;
      }
      if (this.formData.nikename == '') {
        this.$message.error('请填写会员姓名！');
        return;
      }
      // if (this.formData.unified_code == '') {
      //   this.$message.error('请输入统一社会信用代码！');
      //   return;
      // }
      if (this.formData.enterprise_name == '') {
        this.$message.error('请填写企业名称！');
        return;
      }
      if (this.formData.photo_image == '') {
        this.formData.photo_image = '/uploads/20240517/8b2da599cd1e90fcfbb56bdf0f4f4181.webp';
      }
      // if (this.formData.enterprise_nature == '') {
      //   this.$message.error('请输入企业性质！');
      //   return;
      // }
      // if (this.formData.enterprise_website == '') {
      //   this.$message.error('请输入企业网址！');
      //   return;
      // }
      // if (this.formData.if_list == null) {
      //   this.$message.error('请选择是否上市！');
      //   return;
      // }
      // if (this.formData.employee == '') {
      //   this.$message.error('请输入员工人数！');
      //   return;
      // }
      // if (this.formData.enterprise_location == '') {
      //   this.$message.error('请输入企业注册地！');
      //   return;
      // }
      // if (this.formData.previous_revenue == '') {
      //   this.$message.error('请输入上年度营业额！');
      //   return;
      // }
      // if (this.formData.previous_tax == '') {
      //   this.$message.error('请输入上年度纳税额！');
      //   return;
      // }
      // if (this.formData.education == '') {
      //   this.$message.error('请输入学历！');
      //   return;
      // }
      // if (this.formData.previous_profit == '') {
      //   this.$message.error('请输入上年度净利润！');
      //   return;
      // }
      // if (this.formData.previous_donation == '') {
      //   this.$message.error('请输入上年度公益性捐赠支出！');
      //   return;
      // }
      // if (this.formData.qitaqiyerenzhiqingkuang == '') {
      //   this.$message.error('请输入其他企业任职情况！');
      //   return;
      // }
      // if (this.formData.enterprise_Introduction == '') {
      //   this.$message.error('请输入企业介绍！');
      //   return;
      // }
      // if (this.formData.introdiction == '') {
      //   this.$message.error('请输入业务介绍！');
      //   return;
      // }
      // if (this.formData.enterprise_honor == '') {
      //   this.$message.error('请输入企业所获荣誉以及专利！');
      //   return;
      // }
      // if (this.formData.if_organization == null) {
      //   this.$message.error('是否建立团组织！');
      //   return;
      // }
      // if (this.formData.if_organization == 0) {
      //   if (this.formData.nature == '') {
      //     this.$message.error('请输主团组织性质！');
      //     return;
      //   }
      //   if (this.formData.jiantuan_time == '') {
      //     this.$message.error('请输入建团时间！');
      //     return;
      //   }
      //   if (this.formData.jiantuan_number == '') {
      //     this.$message.error('请输入建团人数！');
      //     return;
      //   }
      //   if (this.formData.youth_number == '') {
      //     this.$message.error('请输入青年人数！');
      //     return;
      //   }
      //   if (this.formData.superior_nature == '') {
      //     this.$message.error('请输入上级团组织！');
      //     return;
      //   }
      //   if (this.formData.tuanweifuzerenxinxi == '') {
      //     this.$message.error('请输入团委负责人信息！');
      //     return;
      //   }
      //   if (this.formData.documents_file == '') {
      //     this.$message.error('请上传批复文件！');
      //     return;
      //   }
      // }
      this.$request
        .post("/member/add", this.formData)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.$message.success('添加成功！');
            setTimeout(()=>{
              this.$router.push('/user/user_index');
            },1000)
          } else {
            this.$message.error(res.msg);
          }
          this.getInfo();
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },

};
</script>
<style scoped lang="less">
.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;

  .cropper {
    width: 350px;
    height: 300px;
  }

  .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;

    .preview {
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid #cccccc;
      background: #cccccc;
      margin-left: 40px;
    }
  }
}

.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;

  .scope-btn {
    width: 350px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }

  .upload-btn {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
  }

  .btn {
    outline: none;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
  }
}
</style>
