yiliangyiyun-pc-jj/src/views/houseSelfCollect/acquisitionManagementAdd.vue

<!-- <!--收购管理新增-->
<template>
  <el-container class="container">
    <div class="type">{{type}}</div>
    <el-header class="header">
      <img class="head-icon" src="../../../public/img/icons/acquisition6.png" alt="">
      <div class="head-title">{{baseInfoForm.warehouseName}}</div>
    </el-header>
    <el-main v-show="isCountShow">
      <el-form ref="baseInfoForm" label-position="left" :model="baseInfoForm" label-width="120px">
        <el-row class="base-info">
          基本信息
        </el-row>
        <div class="row1">
          <div class="grid-content">
            <el-form-item label="货名">
              <!-- <el-input v-model="baseInfoForm.goodsName"></el-input> -->
              <el-select v-model="selectVal" placeholder="请选择" @change="goodsChange">
                <el-option v-for="item in goodnameList" :key="item.constValue" :label="item.constValue"
                  :value="item.constValue">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="grid-content">
            <el-form-item label="基准水分(%)">
              <el-input v-model="baseInfoForm.waterBase" @input="changeBaseWater"></el-input>
            </el-form-item>
          </div>
          <div class="grid-content">
            <el-form-item label="扣重比">
              <el-input v-model="baseInfoForm.deductWeight"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row2">
          <div class="grid-content">
            <el-form-item label="干粮水分">
              <el-input v-model="baseInfoForm.waterMin" @input="changeMinWater"></el-input>
            </el-form-item>
          </div>
          <div class="grid-content">
            <el-form-item label="水分上限">
              <el-input v-model="baseInfoForm.waterMax" @input="changeMaxWater"></el-input>
            </el-form-item>
          </div>
          <div class="grid-content">
            <el-form-item label="销售上限(年/吨)">
              <el-input v-model="baseInfoForm.saleLimit"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-row class="row3">
        <div class="top">
          <div class="title">粮价设置</div>
          <el-button class="btn" @click="newSetPrice">新增</el-button>
        </div>
        <div class="content" v-for="(item,index) in priceList" :key="index">
          <div class="top">
            <div class="left">
              <div class="text">基准单价（元/公斤）</div>
              <el-input v-model="item.basicUnitPrice"></el-input>
            </div>
            <el-button @click="delSetPrice(item,index)">删除</el-button>
          </div>
          {{item}}
          <div class="level">
            <el-checkbox-group v-model="item.checkList" @change="changeLevel($event,index)">
              <el-checkbox label="一等"></el-checkbox>
              <el-checkbox label="二等"></el-checkbox>
              <el-checkbox label="三等"></el-checkbox>
              <el-checkbox label="等外"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="count">
            <div class="left">
              <div>水分（%）</div>
              <div>降幅（元/0.5%）</div>
            </div>
            <div class="right">
              <div class="line"></div>
              <div class="jt-style"></div>

              <div v-for="(item1,index) in item.detailList">
                <div class="item-style">
                  <div v-if="item1.type!=4" class="item-style-title">
                    <span>{{item1.name}}{{item1.index}}</span>
                    <span class="add" @click="add(item,item1,index)" v-if="item1.type!=3">+</span>
                    <span class="reduce" @click="reduce(item,item1,index)"
                      v-show="item1.type!=1&&item1.type!=2&&item1.type!=3">-</span>
                  </div>
                  <div v-show="item1.type!=4">
                    <input v-if='item1.type==1' class="water-price" v-model="baseInfoForm.waterMin"
                      :disabled="item1.isWrite?false:true"></input>
                    <input v-if='item1.type==2' class="water-price" v-model="baseInfoForm.waterBase"
                      :disabled="item1.isWrite?false:true"></input>
                    <input v-if='item1.type==3' class="water-price" v-model="baseInfoForm.waterMax"
                      :disabled="item1.isWrite?false:true"></input>
                    <input v-if='item1.type==5' class="water-price" v-model="item1.water"
                      :disabled="item1.isWrite?false:true"></input>
                  </div>
                  <div class="circle" v-if="item1.type!=4"></div>
                </div>
                <div class="bottom-price">
                  <input v-if="item1.type==4" class="water-price" v-model="item1.jfprice"></input>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button class="submit" @click="submit">提交</el-button>
      </el-row>
    </el-main>
    <el-main v-show="!isCountShow">
      <div class="page2-content">
        <div class="titel">
          玉米价格对照表（按水分）
        </div>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="waterMin" label="水分下限(%)">
          </el-table-column>
          <el-table-column prop="waterMax" label="水分上限(%)">
          </el-table-column>
          <el-table-column prop="price1" label="一等单价">
          </el-table-column>
          <el-table-column prop="price2" label="二等单价">
          </el-table-column>
          <el-table-column prop="price3" label="三等单价">
          </el-table-column>
          <el-table-column prop="priceOther" label="等外单价">
          </el-table-column>
        </el-table>
      </div>
      <el-button class="submit" @click="closeCount">关闭</el-button>
      <el-button class="submit" @click="print">打印</el-button>

    </el-main>
  </el-container>
</template>
<script>
  import {
    purchasePriceAdd,
    purchasePriceLook
  } from '@/model/houseSelfCollect/index'
  import {
    packList,
  } from '@/model/contarct/index'
  export default {

    components: {

    },
    watch: {

    },
    data() {
      return {
        selectVal: "",
        goodnameList: [],
        tableData: [{
          waterMin: '10',
          waterMax: '20',
          price1: '30',
          price2: '30',
          price3: '30',
          priceOther: '30',
        }, {
          waterMin: '11',
          waterMax: '20',
          price1: '30',
          price2: '30',
          price3: '30',
          priceOther: '30',
        }, {
          waterMin: '12',
          waterMax: '20',
          price1: '30',
          price2: '30',
          price3: '30',
          priceOther: '30',
        }, {
          waterMin: '13',
          waterMax: '20',
          price1: '30',
          price2: '30',
          price3: '30',
          priceOther: '30',
        }],
        isCountShow: true,
        priceList: [{
          unitPrice: '',
          index: 0,
          checkList: [],
          basicUnitPrice: "",
          detailList: [{
              type: 1,
              name: "干粮",
              water: "",
              isWrite: false
            },
            {
              type: 4,
              jfprice: ""
            },
            {
              type: 2,
              name: "基准",
              water: '',
              isWrite: false
            },
            {
              type: 4,
              jfprice: ""
            },
            {
              type: 3,
              name: "上限",
              water: '',
              isWrite: false
            },
          ],
        }],
        splitPriceList: [],
        baseInfoForm: {
          warehouseId: '',
          warehouseName: '',
          compId: '',
          goodsNameKey: '',
          goodsName: '',
          waterBase: '',
          deductWeight: '',
          waterMin: '',
          waterMax: '',
          saleLimit: '',
          statusFlag: '',
          status: '',
          workflowId: '',
          approveStatus: '',
          passDate: '',
          details: [],
          detailPrints: []
        },
        index: 0,
        type: '',
        isEdit: true
      }
    },
    activated() {
debugger
      switch (this.$route.query.type) {
        case "新增":
        let _goodsNameList = []
        this.baseInfoForm.warehouseId = this.$route.query.warehouseId
        this.baseInfoForm.warehouseName = this.$route.query.warehouseName
        this.baseInfoForm.compId = this.$route.query.compId
        this.type = this.$route.query.type
        console.log(this.baseInfoForm)
        _goodsNameList = this.$route.query.goodsNameList
        this.priceList[0].detailList[0].water = this.baseInfoForm.waterMin
        this.priceList[0].detailList[2].water = this.baseInfoForm.waterBase
        this.priceList[0].detailList[4].water = this.baseInfoForm.waterMax
          // 货名
          packList({
              constId: 'CON2'
            })
            .toPromise()
            .then((response) => {
              let _list = []
              for (let i = 0; i < response.length; i++) {
                let _isAll = true
                for (let j = 0; j < _goodsNameList.length; j++) {
                  if (response[i].constValue != _goodsNameList[j]) {
                    if (j == _goodsNameList.length - 1 && _isAll) {
                      _list.push(response[i])
                    }
                  } else {
                    _isAll = false
                  }
                }
              }
              this.goodnameList = _list
              this.selectVal = _list[0].constValue
            })
          break;
        case "编辑":
          break;
        case "查看":
         this.baseInfoForm =JSON.parse(this.$route.query.data)
       purchasePriceLook({id:this.baseInfoForm.id}).toPromise().then((response) => {
              debugger
              console.log(response)
              // this.tableData = response.records
              // this.getList()
            })
          break;
        default:
          break
      }
    },
    mounted() {},
    methods: {
      goodsChange(e) {
        console.log(e)
      },
      changeBaseWater(val) {
        console.log('val', val)
        for (let i = 0; i < this.priceList.length; i++) {
          for (let k = 0; k < this.priceList[i].detailList.length; k++) {
            if (this.priceList[i].detailList[k].type == 2) {
              this.priceList[i].detailList[k].water = val
            }
          }
        }
      },
      changeMinWater(val) {
        console.log('val', val)
        for (let i = 0; i < this.priceList.length; i++) {
          for (let k = 0; k < this.priceList[i].detailList.length; k++) {
            if (this.priceList[i].detailList[k].type == 1) {
              this.priceList[i].detailList[k].water = val
            }
          }
        }
      },
      changeMaxWater(val) {
        console.log('val', val)
        for (let i = 0; i < this.priceList.length; i++) {
          for (let k = 0; k < this.priceList[i].detailList.length; k++) {
            if (this.priceList[i].detailList[k].type == 3) {
              this.priceList[i].detailList[k].water = val
            }
          }
        }
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 增加分界
      add(item, item1, index) {
        // let _data = this.detailList;
        if (item.index > 2) {
          this.$message({
            message: '最多插入3个分界值',
            type: 'warning'
          });
        } else {
          item.index++
          item.detailList.splice(index + 1, 0, {
            name: "分界",
            water: '',
            type: 5,
            index: 1,
            isWrite: true
          });
          item.detailList.splice(index + 1, 0, {
            jfprice: "",
            type: 4
          });
          this.makeSpliceIndex(item, item1, index)
        }
      },
      // 减少分界
      reduce(item, item1, index) {
        item.index--
        item.detailList.splice(index, 2);
        console.log(item, index)
      },
      // 设置分界索引排序
      makeSpliceIndex(item, item1) {
        let _index = 0
        for (let j = 0; j < item.detailList.length; j++) {
          if (item.detailList[j].type == 5) {
            _index++
            item.detailList[j].index = _index;
          }
        }
      },
      // 复选框变化监听
      changeLevel(val, index) {
        console.log("val", val)
        let _data = this.priceList
        for (let i = 0; i < _data.length; i++) {
          let _childData = _data[i].checkList
          for (let k = 0; k < _childData.length; k++) {
            for (let j = 0; j < val.length; j++) {
              if (val[j] == _childData[k] && i != index) {
                _childData.splice(k, 1)
              }
            }
          }
        }
      },
      // 算价格纠正精度不准
      accMul(arg1, arg2) {
        var m = 0,
          s1 = arg1.toString(),
          s2 = arg2.toString();
        try {
          m += s1.split(".")[1].length
        } catch (e) {}
        try {
          m += s2.split(".")[1].length
        } catch (e) {}
        return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
      },
      keepTwoDecimal(num) {
        var result = parseFloat(num);
        if (isNaN(result)) {
          console.log('传递参数错误，请检查！');
          return false;
        }
        result = Math.round(result * 100) / 100;
        return result;
      },
      newSetPrice() {
        let _newObj = {
          unitPrice: '',
          index: 0,
          checkList: [],
          detailList: [{
              type: 1,
              name: "干粮",
              water: this.baseInfoForm.waterMin,
              isWrite: false
            },
            {
              type: 4,
              jfprice: ""
            },
            {
              type: 2,
              name: "基准",
              water: this.baseInfoForm.waterBase,
              isWrite: false
            },
            {
              type: 4,
              jfprice: ""
            },
            {
              type: 3,
              name: "上限",
              water: this.baseInfoForm.waterMax,
              isWrite: false
            },
          ],
        }
        this.priceList.push(_newObj)
      },
      // 删除价格组
      delSetPrice(item, index) {
        this.$confirm(
            '确认删除本组设置？',
            '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
          .then(() => {
            this.priceList.splice(index, 1)
          })
          .catch(() => {
            return false
          })
      },

      //构造新增价格数据
      makePriceDataList() {
        for (let k = 0; k < this.priceList.length; k++) {
          // 新增
          let _detailsObj = {
            compId: this.baseInfoForm.warehouseId,
            basePrice: this.priceList[k].basicUnitPrice,
            level: '',
            point: '',
            pointPrice: ''
          }
          for (let j = 0; j < this.priceList[k].checkList.length; j++) {
            if (j == 0) {
              _detailsObj.level += this.priceList[k].checkList[j]
            } else {
              _detailsObj.level += ',' + this.priceList[k].checkList[j]
            }
          }
          let _index = 0
          let _index1 = 0
          for (let i = 0; i < this.priceList[k].detailList.length; i++) {
            if (this.priceList[k].detailList[i].type == 4) {
              if (_index == 0) {
                _index++
                _detailsObj.pointPrice += this.priceList[k].detailList[i].jfprice

              } else {
                _detailsObj.pointPrice += ',' + this.priceList[k].detailList[i].jfprice
              }
            } else if (_index1 == 0) {
              _index1++
              _detailsObj.point += this.priceList[k].detailList[i].water
            } else {
              _detailsObj.point += ',' + this.priceList[k].detailList[i].water
            }
          }
          this.baseInfoForm.details.push(_detailsObj)

        }
      },

      //打印
      print() {

      },
      // 提交
      submit() {
        this.isCountShow = false
        this.makeTableList()
        this.makePriceDataList()
        this.baseInfoForm.goodsName = this.selectVal
        purchasePriceAdd(this.baseInfoForm).toPromise().then((response) => {
          console.log(response)
          // this.tableData = response.records
        })
      },
      closeCount() {
        this.isCountShow = true
        this.splitPriceList = []
        this.$router.push({
          name: 'acquisitionManagement',
        })
      },
      //处理表格数据
      makeTableList() {
        // this.tableData
        //水分下限
        // this.baseInfoForm.waterMin
        // 水分上限
        // this.baseInfoForm.waterMax
        // price1

        // 获取等级对应分界钱数
        this.getSplitPrice()
        // 分界价钱数据
        // this.splitPriceList
        let _list = []
        let _obj = {}
        let _waterMin = parseFloat(this.baseInfoForm.waterMin)
        let _waterMax = parseFloat(this.baseInfoForm.waterMax)
        let _count = (_waterMax - _waterMin) / 0.5 + 1
        for (let i = 0; i < _count; i++) {
          if (i == 0) {
            let priceList = this.calculatePrice(_waterMin)
            _obj = {
              waterMin: _waterMin,
              waterMax: _waterMin + 0.4,
              price1: priceList[0],
              price2: priceList[1],
              price3: priceList[2],
              priceOther: priceList[3],
            }
          } else {
            _waterMin += 0.5
            let priceList = this.calculatePrice(_waterMin)
            _obj = {
              waterMin: _waterMin,
              waterMax: _waterMin + 0.4,
              price1: priceList[0],
              price2: priceList[1],
              price3: priceList[2],
              priceOther: priceList[3],
            }
          }
          _list.push(_obj)
          this.baseInfoForm.detailPrints.push(_obj)
        }
        this.tableData = _list
      },
      // 获取分界价格数据
      getSplitPrice() {

        let _priceList = this.priceList
        for (let i = 0; i < _priceList.length; i++) {
          for (let k = 0; k < _priceList[i].checkList.length; k++) {
            let _obj = {}
            _obj.level = _priceList[i].checkList[k]
            _obj.basicUnitPrice = parseFloat(_priceList[i].basicUnitPrice)
            _obj.priceList = []
            _obj.haveSplit = false
            for (let j = 0; j < _priceList[i].detailList.length; j++) {
              if (_priceList[i].detailList[j].type == 5) {
                _obj.haveSplit = true
              }
              if (_priceList[i].detailList[j].type != 4 && _priceList[i].detailList[j].type != 3) {
                _obj.priceList.push({
                  type: parseFloat(_priceList[i].detailList[j].type),
                  priceStart: parseFloat(_priceList[i].detailList[j].water),
                  priceEnd: parseFloat(_priceList[i].detailList[j + 2].water),
                  betweenPrice: parseFloat(_priceList[i].detailList[j + 1].jfprice),
                  totalPrice: (parseFloat(_priceList[i].detailList[j + 2].water) - parseFloat(_priceList[i]
                    .detailList[j].water)) / 0.5 * parseFloat(_priceList[i].detailList[j + 1].jfprice)
                })
              }
            }
            console.log(_obj)
            this.splitPriceList.push(_obj)

            console.log(this.splitPriceList)
          }
        }
      },
      getOtherPrice(list) {

      },
      // 计算价格
      calculatePrice(_waterMin) {
        console.log(_waterMin)
        console.log("this.splitPriceList", this.splitPriceList)
        let prcieList = []
        let totalPrice = []
        let _price = 0
        for (let i = 0; i < this.splitPriceList.length; i++) {
          let _list = this.splitPriceList[i].priceList
          let basePrice = parseFloat(this.splitPriceList[i].basicUnitPrice) * parseFloat(this.baseInfoForm
            .waterBase) * 0.01
          for (let k = 0; k < _list.length; k++) {
            //基准左边
            debugger
            if (_waterMin < parseFloat(this.baseInfoForm.waterBase)) {
              if (_waterMin >= _list[k].priceStart && _waterMin < _list[k].priceEnd && !this.splitPriceList[i]
                .haveSplit) {
                console.log(basePrice)
                console.log(this.keepTwoDecimal(basePrice))
                console.log(this.keepTwoDecimal(((parseFloat(this.baseInfoForm.waterBase) - _waterMin) / 0.5) * _list[k]
                  .betweenPrice))
                _price = basePrice + (parseFloat(this.baseInfoForm.waterBase) - _waterMin) / 0.5 * _list[k]
                .betweenPrice;
                console.log(_price)
                prcieList.push(this.keepTwoDecimal(_price))
              } else if (_waterMin >= _list[k].priceStart && _waterMin < _list[k].priceEnd) {
                // 当前段价格+其他段价格
                let _otherPice = this.getOtherPrice(_list[k])
                let _price1 = (_list[k].priceEnd - _waterMin) / 0.5 * _list[k].betweenPrice + _otherPice;



                // _price+=_list[k].totalPrice

              }

            }
            //基准值
            else if (_waterMin == parseFloat(this.baseInfoForm.waterBase)) {
                   prcieList.push(this.keepTwoDecimal(basePrice))
            }
            // 基准右边
            else {

            if (_waterMin > _list[k].priceStart && _waterMin <=_list[k].priceEnd && !this.splitPriceList[i]
                .haveSplit) {
                _price = basePrice - (parseFloat(this.baseInfoForm.waterBase) - _waterMin) / 0.5 * _list[k]
                .betweenPrice;
                console.log(_price)
                prcieList.push(this.keepTwoDecimal(_price))
              } else if (_waterMin >= _list[k].priceStart && _waterMin < _list[k].priceEnd) {
                // 当前段价格+其他段价格
                let _otherPice = this.getOtherPrice(_list[k])
                let _price1 = (_list[k].priceEnd - _waterMin) / 0.5 * _list[k].betweenPrice + _otherPice;



                // _price+=_list[k].totalPrice

              }


            }


          }
        }
        return prcieList

      }


    },
  }
</script>
<style lang="scss">
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #5878E8;
    border-color: #5878E8;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #5878E8;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #5878E8;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #5878E8;
  }

  .basic-container {
    overflow: auto;
  }

  .container {
    padding: 20px
  }

  /deep/.el-header {
    padding: 0;
  }

  .header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E9ECF7;
    padding-bottom: 10px;
    width: 80%;

    .head-icon {
      width: 19px;
      height: 19px;
      margin-right: 10px;
    }

    .head-title {
      font-size: 21px;
      font-weight: 600;
      color: #323233;
    }
  }

  .row1,
  .row2 {
    // background: red;
    display: flex;
    // margin-right: 20px;
  }

  .row3 {
    .top {
      display: flex;

      .btn {
        width: 52px;
        height: 24px;
        background: #5878E8;
        color: white;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        // text-align: center;
      }
    }

    .title {
      display: flex;
      align-items: center;
      border-left: 4px solid #5473E8;
      font-size: 16px;
      font-weight: 600;
      color: #323233;
      padding-left: 10px;
    }
  }

  .base-info {
    border-left: 4px solid #5473E8;
    font-size: 16px;
    font-weight: 600;
    color: #323233;
    padding-left: 10px;
    margin: 24px 0 10px 0;
  }

  .grid-content {
    margin-right: 20px;
  }

  .content {
    border: 1px solid #D8DCE6;
    margin: 20px 0;
    padding: 15px;
    border-radius: 4px;

    .top {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .text {
          width: 220px;
          font-size: 14px;
          font-weight: 400;
          color: #8890B1;
        }
      }
    }

    .level {
      margin: 10px 0;
    }

    .count {
      display: flex;
      margin-bottom: 15px;

      .left {
        width: 10%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        line-height: 24px;
      }

      .right {
        width: 85%;
        position: relative;
        padding-bottom: 50px;

        .water-price {
          width: 60px;
          height: 30px;
          background: #F6F7FB;
          border-radius: 4px;
          border: 1px solid #D8DCE6;
          text-align: center
        }

        .add,
        .reduce {
          width: 16px;
          height: 16px;
          background: #5473E8;
          border-radius: 2px;
          color: white;
          display: inline-block;
          text-align: center;
          line-height: 16px;
        }

        .reduce {
          background: white;
          color: #D5D8DE;
          border: 1px solid #D5D8DE;
          display: inline-flex;
          justify-content: center;
          align-items: center;
        }

        .item-style {
          position: relative;

          .item-style-title {
            margin-bottom: 10px;
            text-align: center;
          }
        }

        .line {
          position: absolute;
          top: 72px;
          width: 100%;
          height: 5px;
          background: linear-gradient(39deg, #E6EEFF 0%, #91B0F5 42%, #5878E8 100%);
          border-radius: 3px;
        }

        .bottom-price {
          position: absolute;
          bottom: -10px;
        }

        .jt-style {
          position: absolute;
          top: 64px;
          width: 0px;
          height: 0px;
          right: -15px;
          border-left: 15px solid #5473E8;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }

        display: flex;
        justify-content: space-between;

        .circle {
          position: absolute;
          z-index: 2;
          width: 15px;
          height: 15px;
          background: #FFFFFF;
          border: 3px solid #5473E8;
          border-radius: 50%;
          right: 40%;
          bottom: -22px
        }

      }
    }
  }

  .submit {
    float: right;
    width: 74px;
    height: 32px;
    background: #5473E8;
    color: white;
    border-radius: 4px;
  }

  .page2-content {
    border: 1px solid #D8DCE6;
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 4px;
    padding-bottom: 20px;
  }

  .titel {
    font-size: 20px;
    font-weight: 500;
    color: #323233;
    margin: 20px;
  }

  .type {
    font-size: 16px;
    font-weight: 500;
    color: #262626;
  }
</style>