product_wx/pages/subPackages/minePages/mineInfo.vue

<template>
  <div class="enterprise">
    <div class="firstPage">
      <div class="title">
        尊敬的 &nbsp;<span class="impotTips comName">{{
          company.qymc
        }}</span>
        &nbsp; 企业用户，你好！
      </div>
      <div class="titMsg" v-if="isnew">
        欢迎你首次登录“园区企业服务平台”，为了更好地为企业提供相关服务，请先<span
          class="impotTips"
      >完善贵公司的相关企业信息</span
      >，并提交登记！
      </div>
      <div class="titMsg" v-if="isnew">
        后续信息
        <span class="impotTips">如有变动，请及时在“企业信息”中维护更新</span>。
        感谢您的支持与配合！
      </div>
      <div class="titMsg" v-if="!isnew">
        企业信息
        <span class="impotTips">如有变动，请及时在“企业信息”中维护更新</span>。
        感谢您的支持与配合！
      </div>
    </div>
    <div class="secendPage">
      <ul>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            统一社会信用代码：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.shxydm"
              readonly
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            注册资金（万元）：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.zczj"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            注册时间：
          </div>
          <input
              type="text"
              placeholder="请选择"
              readonly
              v-model="company.zcsj"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            法定代表人：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.fddbr"
          />
        </li>
        <li class="titleLi">
          法人电话：
          <input
              type="text"
              placeholder="请填写"
              v-model="company.legalPersonPhone"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            企业联系人：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.qylxr"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            联系人手机：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.lxdh"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            联系人邮箱：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.email"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            财务负责人：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.cwfzr"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            负责人电话：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.cwfzrdh"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            注册地址：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.zcdz"
          />
        </li>
        <li class="titleLi">
          <div>
            <span class="required">*</span>
            经营地址：
          </div>
          <input
              type="text"
              placeholder="请填写"
              v-model="company.jydz"
          />
        </li>
        <li class="titleLi area-Li">
          经营范围：
          <textarea
              class="text-area"
              type="text"
              rows="4"
              placeholder="请说明"
              v-model="company.jyfw"
          />
        </li>
        <li class="titleLi titleLiLast">
          <div>
            <span class="required">*</span>
            营业执照副本（限1张）：
          </div>
        </li>
        <li class="titleLi titleLiUploader">
          <van-uploader
              v-model="fileList"
              multiple
              max-count="1"
              :after-read="afterRead"
              :before-delete="beforeDelete"
          >
          </van-uploader>
        </li>
        <li class="titleLi titleLiLast">
          荣誉信息（限6张）：
        </li>
        <li class="titleLi area-Li titleLiLast " style="padding: 0;margin: 0">
                    <textarea
                        class="text-area"
                        type="text"
                        rows="6"
                        placeholder="请说明"
                        v-model="company.honorInformation"
                        style="margin: 0"
                    />
        </li>
        <li class="titleLi titleLiUploader2">
          <van-uploader
              v-model="fileList2"
              multiple
              max-count="6"
              :after-read="afterRead2"
              :before-delete="beforeDelete2"
          />
        </li>
        <li class="titleLi titleLiLast">
          法人身份证：
        </li>
        <li class="titleLi titleLiLast titleLiUploader">
          <div>
            <van-uploader
                v-model="fileList3"
                multiple
                max-count="1"
                :after-read="afterRead3"
                :before-delete="beforeDelete3"
            >
              <img src="https://www.idea-co-sf.com/gardenProduct/image/zm.png" class="sfzImg">
            </van-uploader>
            <van-uploader
                v-model="fileList4"
                multiple
                max-count="1"
                :after-read="afterRead4"
                :before-delete="beforeDelete4"
            >
              <img src="https://www.idea-co-sf.com/gardenProduct/image/fm.png" class="sfzImg">
            </van-uploader>
          </div>
        </li>
      </ul>
    </div>
    <div class="buttonBox" v-if="btnShow">
      <button class="turnOff" @click="commit">暂存</button>
      <button class="preservation btn2" @click="submit">
        提交
      </button>
    </div>
    <div v-if="!btnShow" style="padding: 5vw 0;color: orangered;text-align: center">
      入库审核中......
    </div>
    <!-- 时间弹框 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="show = false"
          @confirm="selectTime"
      /></van-popup>
    <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="show2 = false"
          @confirm="selectTime2"
      /></van-popup>
  </div>
</template>
<script>
import { isFinishComInfo, getById, addCompanyExamine,upload,getUserLocalStorageInfo } from "@/js_sdk/http.js"
// import auth from '@/js_sdk/auth.js'
import constant from '@/pages/utils/constant.js'
export default {
  data() {
    return {
      isnew: true,
      radio: '1',
      fileList: [],
      fileList2: [],
      fileIdList2: [],
      fileIdList3: [],
      fileIdList4: [],
      fileIdList5: [],
      fileList3: [],
      fileList4: [],
      frsfzzm: '',
      frsfzfm: '',
      selectTag: 0,
      tagList: [
      ],
      checkBoxList: [
        ],
      company: {
        id: '',
        qymc: '',
        shxydm: '',
        zcsj: '',
        zczj: '',
        fddbr: '',
        jyfw: '',
        qylxr: '',
        lxdh: '',
        rzsj: '',
        ssztmc: '',
        qylbbq: '',
        yyzzfbzp: '',
        ryxxzp: '',
        legalPersonPhone: '',
        email: '',
        cwfzr: '',
        cwfzrdh: '',
        zcdz: '',
        jydz: '',
        honorInformation: '',
        rdInvestment: '',
        jgInvestment: '',
        fourOpennessAmount: '',
        fourConsultAmount: '',
        fourServiceAmount: '',
        fourTransferenceAmount: '',
        qybq: ''
      },
      show: false,
      show2: false,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      selectTagId: '',
      btnShow: true,
      qybqList: []
    }
  },
  mounted() {
    // this.getCommit()
  },
  methods: {
    takeshow() {
      if (this.isnew) {
        this.show = true
      }
    },
    takeshow2() {
      if (this.isnew) {
        // console.log(123)
        this.show2 = true
      }
    },
    turnOff() {
      this.$router.push('/home/home')
    },
    getInfo() {
      getById({ id: auth.currUser().id }).then(res => {
        console.log('res', res)
        if (res && res.key == 200) {
          this.company = res.data
          this.qybqList = this.company.qybq.split(',')
          // this.getTagList()
          if (res.data.yyzzfbzp) {
            const a = res.data.yyzzfbzp.split(',')
            this.fileList.push(
                JSON.parse(
                    '{"url":"' +
                    constant.BASE_URI +
                    '/wx/fileController/download/' +
                    a +
                    '","isImage": true}'
                )
            )
          }
          if (res.data.ryxxzp) {
            this.fileIdList2 = res.data.ryxxzp.split(',')
            // console.log(this.fileIdList2);
            this.fileIdList2.forEach(item => {
              this.fileList2.push(
                  JSON.parse(
                      '{"url":"' +
                      constant.BASE_URI +
                      '/wx/fileController/download/' +
                      item +
                      '","isImage": true}'
                  )
              )
            })
          }
          if (res.data.frsfzh) {
            this.fileIdList5 = res.data.frsfzh.split(',')
            this.frsfzzm = this.fileIdList5[0]
            this.fileList3.push(
                JSON.parse(
                    '{"url":"' +
                    constant.BASE_URI +
                    '/wx/fileController/download/' +
                    this.frsfzzm +
                    '","isImage": true}'
                )
            )
            if (this.fileIdList5[1]) {
              this.frsfzfm = this.fileIdList5[1]
              this.fileList4.push(
                  JSON.parse(
                      '{"url":"' +
                      constant.BASE_URI +
                      '/wx/fileController/download/' +
                      this.frsfzfm +
                      '","isImage": true}'
                  )
              )
            }
          }
        } else if (res.key == 426) {
          Toast(res.msg)
          this.$router.push('/login')
        } else {
          Toast(res.msg)
        }
        if (this.company.shxydm && this.company.rzsj) {
          this.isnew = false
        }
      }).then(() => {
        isFinishComInfo({ comId: auth.currUser().id }).then(res => {
          if (res.errno === 0) {
            this.btnShow = false
          } else if (res.errno === -1) {
            this.btnShow = true
          }
        })
      })
    },
    // 获取企业标签信息
    // getTagList() {
    //     getTagInfo().then(res => {
    //         this.tagList = res.data
    //         this.checkBoxList = res.data[0].children
    //         this.checkBoxList.forEach(item => {
    //             if (this.qybqList.findIndex(e => e == item.id) !== -1) {
    //                 item.checked = true
    //             }
    //         })
    //     })
    // },
    // clickTag(item, index) {
    //     this.selectTag = index
    //     this.selectTagId = item.id
    //     this.tagList.forEach(item => {
    //         if (this.selectTagId == item.id) {
    //             this.checkBoxList = item.children
    //         }
    //     })
    //     this.checkBoxList.forEach(item => {
    //         if (this.company.qybq.split(',').findIndex(e => e == item.id) !== -1) {
    //             item.checked = true
    //         }
    //     })
    // },
    // changeCheck(item) {
    //     console.log(this.qybqList)
    //     if (item.checked == true) {
    //         if (this.qybqList.findIndex(e => e == item.id) == -1) {
    //             this.qybqList.push(item.id)
    //         }
    //     } else {
    //         const i = this.qybqList.findIndex(e => e == item.id)
    //         if (i !== -1) {
    //             this.qybqList.splice(i, 1)
    //         }
    //     }
    //     this.$nextTick(() => {
    //         this.company.qybq = this.qybqList.toString()
    //         console.log(this.company.qybq)
    //     })
    // },
    getCommit() {
      const local = localStorage.getItem('company' + auth.currUser().id)
      if (local) {
        this.company = JSON.parse(local)
        this.qybqList = this.company.qybq.split(',')
        // this.getTagList()
        if (this.company.yyzzfbzp) {
          const a = this.company.yyzzfbzp.split(',')
          console.log(this.company.yyzzfbzp)
          this.fileList.push(
              JSON.parse(
                  '{"url":"' +
                  constant.BASE_URI +
                  '/wx/fileController/download/' +
                  a +
                  '","isImage": true}'
              )
          )
        }
        if (this.company.ryxxzp) {
          this.fileIdList2 = this.company.ryxxzp.split(',')
          // console.log(this.fileIdList2);
          this.fileIdList2.forEach(item => {
            this.fileList2.push(
                JSON.parse(
                    '{"url":"' +
                    constant.BASE_URI +
                    '/wx/fileController/download/' +
                    item +
                    '","isImage": true}'
                )
            )
          })
        }
        if (this.company.frsfzh) {
          this.fileIdList5 = this.company.frsfzh.split(',')
          this.frsfzzm = this.fileIdList5[0]
          this.fileList3.push(
              JSON.parse(
                  '{"url":"' +
                  constant.BASE_URI +
                  '/wx/fileController/download/' +
                  this.frsfzzm +
                  '","isImage": true}'
              )
          )
          if (this.fileIdList5[1]) {
            this.frsfzfm = this.fileIdList5[1]
            this.fileList4.push(
                JSON.parse(
                    '{"url":"' +
                    constant.BASE_URI +
                    '/wx/fileController/download/' +
                    this.frsfzfm +
                    '","isImage": true}'
                )
            )
          }
        }
      } else {
        this.getInfo()
      }
    },
    // 暂存本地
    commit() {
      if (this.frsfzzm || this.frsfzfm) {
        this.company.frsfzh = this.frsfzzm + ',' + this.frsfzfm
      } else {
        this.company.frsfzh = null
      }
      this.company.czrid = auth.currUser().id
      this.company.czr = auth.currUser().qymc
      this.$delete(this.company, 'czsj')
      localStorage.setItem('company' + auth.currUser().id, JSON.stringify(this.company))
      this.$nextTick(() => {
        const local = localStorage.getItem('company' + auth.currUser().id)
        if (local) {
          Toast('暂存成功')
        } else {
          Toast('暂存失败')
        }
      })
    },
    // 提交
    submit() {
      // console.log(this.company.frsfzh)
      if (!this.company.shxydm) {
        Toast('请填写统一社会信用代码')
      } else if (!this.company.zczj) {
        Toast('请填写注册资金')
      } else if (!this.company.zcsj) {
        Toast('请填写注册时间')
      } else if (!this.company.fddbr) {
        Toast('请填写法定代表人')
      } else if (!this.company.qylxr) {
        Toast('请填写企业联系人')
      } else if (!this.company.lxdh) {
        Toast('请填写手机号')
      } else if (!this.company.email) {
        Toast('请填写联系人邮箱')
      } else if (!this.company.cwfzr) {
        Toast('请填写财务负责人')
      } else if (!this.company.cwfzrdh) {
        Toast('请填写财务负责人电话')
      } else if (!this.company.zcdz) {
        Toast('请填写注册地址')
      } else if (!this.company.jydz) {
        Toast('请填写经营地址')
      } else if (this.fileList.length == 0) {
        Toast('请上传营业执照副本')
      } else if (!this.frsfzzm) {
        Toast('请上传法人身份证正面')
      } else if (!this.frsfzfm) {
        Toast('请上传法人身份证反面')
      } else {
        this.company.frsfzh = this.frsfzzm + ',' + this.frsfzfm
        this.company.czrid = auth.currUser().id
        this.company.czr = auth.currUser().qymc
        this.$delete(this.company, 'czsj')
        this.$delete(this.company, 'gxsj')
        add(this.company).then(res => {
          if (res.key == 200) {
            Toast('提交成功')
            this.btnShow = false
            localStorage.removeItem('company' + auth.currUser().id)
          } else {
            Toast(res.msg)
          }
        })
      }
    },
    selectTime(e) {
      const dayjs = require('dayjs')
      this.company.zcsj = dayjs(e).format('YYYY-MM-DD')
      this.show = false
    },
    selectTime2(e) {
      const dayjs = require('dayjs')
      this.company.rzsj = dayjs(e).format('YYYY-MM-DD')
      this.show2 = false
    },
    afterRead(file) {
      Toast.loading({
        message: '上传中...',
        forbidClick: true,
        duration: 0
      })
      if (file instanceof Array) {
        file.map(v => {
          this.uploadImg(v)
        })
      } else {
        this.uploadImg(file)
      }
    },
    afterRead2(file) {
      Toast.loading({
        message: '上传中...',
        forbidClick: true,
        duration: 0
      })
      if (file instanceof Array) {
        file.map(v => {
          this.uploadImg2(v)
        })
      } else {
        this.uploadImg2(file)
      }
    },
    afterRead3(file) {
      Toast.loading({
        message: '上传中...',
        forbidClick: true,
        duration: 0
      })
      if (file instanceof Array) {
        file.map(v => {
          this.uploadImg3(v)
        })
      } else {
        this.uploadImg3(file)
      }
    },
    afterRead4(file) {
      Toast.loading({
        message: '上传中...',
        forbidClick: true,
        duration: 0
      })
      if (file instanceof Array) {
        file.map(v => {
          this.uploadImg4(v)
        })
      } else {
        this.uploadImg4(file)
      }
    },
    beforeDelete(file, detail) {
      const vm = this
      // name.index代表图片的索引
      vm.company.yyzzfbzp = ''
      this.fileList = []
    },
    beforeDelete2(file, detail) {
      const vm = this
      // name.index代表图片的索引
      vm.fileIdList2.splice(detail.index, 1)
      vm.company.ryxxzp = vm.fileIdList2.toString()
      console.log(vm.company.ryxxzp)
      return (file, name) => {
        const fileIndex = name.index
        vm.fileIdList2[detail.index].splice(fileIndex, 1)
      }
    },
    beforeDelete3(file, detail) {
      const vm = this
      // name.index代表图片的索引
      vm.frsfzzm = ''
      this.fileList3 = []
      this.fileIdList3 = []
    },
    beforeDelete4(file, detail) {
      const vm = this
      // name.index代表图片的索引
      vm.frsfzfm = ''
      this.fileList4 = []
      this.fileIdList4 = []
    },
    uploadImg(file) {
      const _this = this
      const formParam = new FormData() // 创建form对象
      formParam.append('file', file.file) // 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'MVVM-Key': String(new Date().getTime()),
          xx: 'anything'
        } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      } // 添加请求头
      return new Promise((resolve, reject) => {
        // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
        upload(formParam, config)
            .then(response => {
              if (response.data.length) {
                _this.company.yyzzfbzp = response.data[0]
              }
              Toast.clear()
            })
            .catch((err, x) => {
              reject(err, x)
            })
      })
    },
    uploadImg2(file) {
      const _this = this
      const formParam = new FormData() // 创建form对象
      formParam.append('file', file.file) // 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'MVVM-Key': String(new Date().getTime()),
          xx: 'anything'
        } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      } // 添加请求头
      return new Promise((resolve, reject) => {
        // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
        upload(formParam, config)
            .then(response => {
              if (response.data.length) {
                response.data.forEach(element => {
                  _this.fileIdList2.push(element)
                })
                _this.company.ryxxzp = _this.fileIdList2.toString()
                // console.log(_this.company.ryxxzp);
              }
              Toast.clear()
            })
            .catch((err, x) => {
              reject(err, x)
            })
      })
    },
    uploadImg3(file) {
      const _this = this
      const formParam = new FormData() // 创建form对象
      formParam.append('file', file.file) // 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'MVVM-Key': String(new Date().getTime()),
          xx: 'anything'
        } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      } // 添加请求头
      return new Promise((resolve, reject) => {
        // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
        upload(formParam, config)
            .then(response => {
              if (response.data.length) {
                response.data.forEach(element => {
                  _this.fileIdList3.push(element)
                })
                _this.frsfzzm = _this.fileIdList3.toString()
              }
              Toast.clear()
            })
            .catch((err, x) => {
              reject(err, x)
            })
      })
    },
    uploadImg4(file) {
      const _this = this
      const formParam = new FormData() // 创建form对象
      formParam.append('file', file.file) // 通过append向form对象添加数据
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          'MVVM-Key': String(new Date().getTime()),
          xx: 'anything'
        } // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      } // 添加请求头
      return new Promise((resolve, reject) => {
        // axios.post('http://121.228.7.226:9001/wx/fileController/upload', formParam, config)
        upload(formParam, config)
            .then(response => {
              if (response.data.length) {
                response.data.forEach(element => {
                  _this.fileIdList4.push(element)
                })
                _this.frsfzfm = _this.fileIdList4.toString()
              }
              Toast.clear()
            })
            .catch((err, x) => {
              reject(err, x)
            })
      })
    }
  }
}
</script>
<style lang="scss">
.enterprise {
  font-size: 4vw;
  margin: 5vw 2vw;
  .firstPage {
    background: white;
    padding: 3vw 3vw 3vw 3vw;
    margin-top: 5vw;
    border-radius: 15px;
    .title {
      height: 10vw;
      // display: inline-flex;
      align-items: center;
      border-bottom: 1px solid rgb(243, 236, 236);
      margin-bottom: 3vw;
    }
    .titMsg {
      text-indent: 8vw;
      line-height: 6vw;
    }
    .impotTips {
      color: rgb(0, 47, 167);
    }
    .comName {
      white-space: nowrap;
    }
    input {
      width: 80%;
    }
    li {
      display: flex;
      align-items: center;
      height: 10vw;
      padding: 5vw 0;
      border-bottom: 1px solid rgb(243, 236, 236);
    }
  }
  .secendPage {
    background: white;
    padding: 3vw 3vw 3vw 3vw;
    margin-top: 5vw;
    border-radius: 15px;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 10vw;
      padding: 3vw 0;
      border-bottom: 1px solid rgb(243, 236, 236);
    }
    .titleLi {
      font-size: 3.5vw;
      //font-weight: 700;
      white-space: nowrap;
      color: #333333;
      .required {
        color: red;
      }
      .van-uploader {
        padding: 3vw 0;
      }
    }
    .titleLiRadio {
      .van-radio-group {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
      }
    }
    .titleLiLast {
      border-bottom: none;
      padding-bottom: 0;
    }
    .titleLiUploader {
      padding: 10vw 0;
    }
    .titleLiUploader2 {
      padding: 20vw 0;
    }
    .van-uploader {
      padding: 10vw 0;
    }
    input {
      padding: 15px 0 15px 20px;
      width: 60%;
    }
    textarea {
      padding: 15px 0 15px 20px;
    }
  }

  .buttonBox {
    //background: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 3vw;
    margin-bottom: 0;
    padding: 5vw 0;
    button {
      padding: 2vw 10vw;
      border-radius: 15px;
    }
    .turnOff {
      background: white;
      border: 1px solid rgb(0, 47, 167);
      color: rgb(0, 47, 167);
    }
    .btn2 {
      background-color: rgb(0, 47, 167);
      color: white;
      border: white solid 1px;
    }
  }
  input::placeholder {
    color: #777777;
  }
  .area-Li{
    height: auto !important;
    flex-direction: column;
    align-items: flex-start !important;
    .text-area{
      background: #F9F9F9;
      width: 95%;
      margin-top: 2vw;
      resize: none;
      &::placeholder{
        color:#AAAAAA
      }
    }
  }
  .upLoadImg{
    width: 10vw;
  }
  .sfzImg{
    width: 18vw;
    height: 16vw;
    margin: 0vw 2vw 2vw 2vw
  }
  .myTag{
    width: 20vw;
    height: 7vw;
    display: flex;
    font-size: 3.5vw;
    font-weight: 400;
    justify-content: center;
    align-items: center;
    color: #777777;
    border: 1px solid rgba(204, 204, 204, 0.51);
    border-radius: 5px;
    margin: 1vw 0;
    box-sizing: border-box;
  }
  .selectTag{
    width: 20vw;
    height: 7vw;
    display: flex;
    font-size: 3.5vw;
    font-weight: 400;
    justify-content: center;
    align-items: center;
    color: #1D18BC;
    background: rgba(29, 24, 188, 0.05);
    border-radius: 5px;
    margin: 1vw 0;
  }
  .checkBoxContant{
    font-size: 3.5vw;
    color: rgba(119, 119, 119, 1);
    line-height: 5vw;
    padding-left: 8vw;
  }
}
</style>