删除无用信息

shuishen

2021-11-05 3a2d7d729aaeada800616ebd60eec5f42066670f

 src/views/securityGuard/securityGuardDetail.vue

@@ -1,42 +1,41 @@
<template>
  <div class="dispatch">
    <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
    <span v-if="typeTABS.prop === 'tab1'">
      <avue-form ref="form" v-model="obj0" :option="option0"> </avue-form>
    </span>
    <span v-else-if="typeTABS.prop === 'tab2'">
      <avue-crud
        :option="option1"
        :data="data1"
        :page.sync="page1"
        :table-loading="loading1"
        @row-save="rowSave1"
        @row-update="rowUpdate1"
        @row-del="rowDel1"
        @current-change="CurrentChange1"
        @refresh-change="refreshchange1"
        @size-change="SizeChange1"
      >
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab3'">
      <avue-crud
        :option="option2"
        :data="data2"
        :page.sync="page2"
        @row-save="rowSave2"
        @row-update="rowUpdate2"
        @row-del="rowDel2"
        :table-loading="loading2"
        @current-change="CurrentChange2"
        @size-change="SizeChange2"
        @refresh-change="refreshchange2"
      >
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab4'">
      <!-- 保安员证 -->
      <!-- <div class="baoanzheng" id="baoanzheng" v-if="hold == 1">
    <div class="dispatch">
        <avue-tabs :option="optionTABS"
                   @change="handleChangeTABS"></avue-tabs>
        <span v-if="typeTABS.prop === 'tab1'">
            <avue-form ref="form"
                       v-model="obj0"
                       :option="option0"> </avue-form>
        </span>
        <span v-else-if="typeTABS.prop === 'tab2'">
            <avue-crud :option="option1"
                       :data="data1"
                       :page.sync="page1"
                       :table-loading="loading1"
                       @row-save="rowSave1"
                       @row-update="rowUpdate1"
                       @row-del="rowDel1"
                       @current-change="CurrentChange1"
                       @refresh-change="refreshchange1"
                       @size-change="SizeChange1">
            </avue-crud>
        </span>
        <span v-else-if="typeTABS.prop === 'tab3'">
            <avue-crud :option="option2"
                       :data="data2"
                       :page.sync="page2"
                       @row-save="rowSave2"
                       @row-update="rowUpdate2"
                       @row-del="rowDel2"
                       :table-loading="loading2"
                       @current-change="CurrentChange2"
                       @size-change="SizeChange2"
                       @refresh-change="refreshchange2">
            </avue-crud>
        </span>
        <span v-else-if="typeTABS.prop === 'tab4'">
            <!-- 保安员证 -->
            <!-- <div class="baoanzheng" id="baoanzheng" v-if="hold == 1">
        <div class="baz-main">
          <div class="baz-m-body" ref="baoanzheng">
            <div class="bmb-heard">保安员证</div>
@@ -72,39 +71,43 @@
          </span>
        </div>
      </div> -->
      <baoanz :data="obj0" v-if="hold == 1"></baoanz>
      <div v-else style="width: 100%; text-align: center; padding-top: 20px">
        无上岗证
      </div>
    </span>
    <span v-else-if="typeTABS.prop === 'tab5'">
      <securityCertificate :data="obj0" v-if="hold == 1"></securityCertificate>
      <div v-else style="width: 100%; text-align: center; padding-top: 20px">
        无保安员证
      </div>
    </span>
  </div>
            <baoanz :data="obj0"
                    v-if="hold == 1"></baoanz>
            <div v-else
                 style="width: 100%; text-align: center; padding-top: 20px">
                无上岗证
            </div>
        </span>
        <span v-else-if="typeTABS.prop === 'tab5'">
            <securityCertificate :data="obj0"
                                 v-if="hold == 1"></securityCertificate>
            <div v-else
                 style="width: 100%; text-align: center; padding-top: 20px">
                无保安员证
            </div>
        </span>
    </div>
</template>

<script>
import {
  securityBaseInfoColumn,
  practitionersColumn,
  trackRecordColumn,
    securityBaseInfoColumn,
    practitionersColumn,
    trackRecordColumn,
} from "./data";
import {
  addExperience,
  updateExperience,
  experienceRemove,
  getExperienceList,
    addExperience,
    updateExperience,
    experienceRemove,
    getExperienceList,
} from "@/api/experience/experience";

import {
  add,
  update,
  getpage,
  remove,
  getER,
    add,
    update,
    getpage,
    remove,
    getER,
} from "@/api/performance/performance";

// import vueQr from "vue-qr";
@@ -112,364 +115,364 @@
import baoanz from "./baoanz.vue";

export default {
  components: {
    securityCertificate: securityCertificate,
    baoanz,
  },
  data() {
    return {
      typeTABS: {}, //标签页
      row: {}, //数据
      optionTABS: {
        column: [
          {
            // icon: "el-icon-info",
            label: "保安员基本信息",
            prop: "tab1",
          },
          {
            // icon: "el-icon-info",
            label: "从业记录",
            prop: "tab2",
          },
          {
            // icon: "el-icon-info",
            label: "现实表现记录",
            prop: "tab3",
          },
          {
            // icon: "el-icon-info",
            label: "上岗证",
            prop: "tab4",
          },
          {
            // icon: "el-icon-info",
            label: "保安员证",
            prop: "tab5",
          },
        ],
      },
      current: 1,
      size: 10,
      cardid: "",
      name: "",
      dispatcherCompany: "",
      id: "",
      obj0: {
        title: "我是头部标题",
      },
      option0: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "110",
        gutter: 30,
        column: securityBaseInfoColumn,
      },
      loading1: true,
      loading2: true,
      selectionList1: [],
      page1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      page2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query1: {},
      query2: {},
      data1: [],
      data2: [],
      option1: {
        card: true,
        menu: true,
        height: "auto",
        widtd: "auto",
        calcHeight: 54,
        border: true, //liu
        stripe: true,
        tip: false,
        index: true,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: practitionersColumn,
      },
      option2: {
        card: true,
        menu: true,
        height: "auto",
        widtd: "auto",
        calcHeight: 54,
        border: true, //liu
        stripe: true,
        tip: false,
        index: true,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: trackRecordColumn,
      },
      erweima: "",
      hold: "",
    };
  },
  // components: {
  //   vueQr,
  // },
  computed: {
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach((ele) => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    components: {
        securityCertificate: securityCertificate,
        baoanz,
    },
    // goToUrl() {
    //   var url =
    //     "http://s16s652780.51mypc.cn/securityInfo/securityInfo.html?securityNumber=" +
    //     this.obj0.securitynumber;
    //   return url;
    data () {
        return {
            typeTABS: {}, //标签页
            row: {}, //数据
            optionTABS: {
                column: [
                    {
                        // icon: "el-icon-info",
                        label: "保安员基本信息",
                        prop: "tab1",
                    },
                    {
                        // icon: "el-icon-info",
                        label: "从业记录",
                        prop: "tab2",
                    },
                    {
                        // icon: "el-icon-info",
                        label: "现实表现记录",
                        prop: "tab3",
                    },
                    {
                        // icon: "el-icon-info",
                        label: "上岗证",
                        prop: "tab4",
                    },
                    {
                        // icon: "el-icon-info",
                        label: "保安员证",
                        prop: "tab5",
                    },
                ],
            },
            current: 1,
            size: 10,
            cardid: "",
            name: "",
            dispatcherCompany: "",
            id: "",
            obj0: {
                title: "我是头部标题",
            },
            option0: {
                emptyBtn: false,
                submitBtn: false,
                labelWidth: "110",
                gutter: 30,
                column: securityBaseInfoColumn,
            },
            loading1: true,
            loading2: true,
            selectionList1: [],
            page1: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            page2: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            query1: {},
            query2: {},
            data1: [],
            data2: [],
            option1: {
                card: true,
                menu: true,
                height: "auto",
                widtd: "auto",
                calcHeight: 54,
                border: true, //liu
                stripe: true,
                tip: false,
                index: true,
                dialogClickModal: false,
                headerAlign: "center",
                align: "center",
                column: practitionersColumn,
            },
            option2: {
                card: true,
                menu: true,
                height: "auto",
                widtd: "auto",
                calcHeight: 54,
                border: true, //liu
                stripe: true,
                tip: false,
                index: true,
                dialogClickModal: false,
                headerAlign: "center",
                align: "center",
                column: trackRecordColumn,
            },
            erweima: "",
            hold: "",
        };
    },
    // components: {
    //   vueQr,
    // },
  },
  methods: {
    Print() {
      var printDom = document.getElementById("baoanzheng");
      printDom.style.position = "fixed";
      printDom.style.left = "-10%";
      printDom.style.width = "120%";
      printDom.style.height = "100%";
      this.$Print(this.$refs.baoanzheng);
      printDom.style.position = "relative";
      printDom.style.left = "0";
      printDom.style.width = "100%";
      printDom.style.height = "calc(100% - 100px)";
    computed: {
        ids1 () {
            let ids1 = [];
            this.selectionList1.forEach((ele) => {
                ids1.push(ele.id);
            });
            return ids1.join(",");
        },
        // goToUrl() {
        //   var url =
        //     "http://s16s652780.51mypc.cn/securityInfo/securityInfo.html?securityNumber=" +
        //     this.obj0.securitynumber;
        //   return url;
        // },
    },
    handleChangeTABS(column) {
      this.typeTABS = column;
      if (column.prop == "tab1") {
        this.loading1 = false;
      } else if (column.prop == "tab2") {
    methods: {
        Print () {
            var printDom = document.getElementById("baoanzheng");
            printDom.style.position = "fixed";
            printDom.style.left = "-10%";
            printDom.style.width = "120%";
            printDom.style.height = "100%";
            this.$Print(this.$refs.baoanzheng);
            printDom.style.position = "relative";
            printDom.style.left = "0";
            printDom.style.width = "100%";
            printDom.style.height = "calc(100% - 100px)";
        },
        handleChangeTABS (column) {
            this.typeTABS = column;
            if (column.prop == "tab1") {
                this.loading1 = false;
            } else if (column.prop == "tab2") {
                //查询当前保安员的从业记录信息
                this.getPractitionersPageInfo(this.page1);
                this.loading1 = false;
            } else if (column.prop == "tab3") {
                //查询当前保安员的现实表现记录
                this.getPerformancePageInfo(this.page2);
                this.loading2 = false;
            } else if (column.prop == "tab4") {
                getER(this.obj0.securitynumber).then((res) => {
                    this.erweima = res.data;
                    // console.log(res.data);
                });
            }
        },
        refreshchange1 () {
            this.getPractitionersPageInfo(this.page1, this.query1);
        },
        //查询当前保安员的从业记录信息
        this.getPractitionersPageInfo(this.page1);
        this.loading1 = false;
      } else if (column.prop == "tab3") {
        //查询当前保安员的现实表现记录
        this.getPerformancePageInfo(this.page2);
        this.loading2 = false;
      } else if (column.prop == "tab4") {
        getER(this.obj0.securitynumber).then((res) => {
          this.erweima = res.data;
          // console.log(res.data);
        });
      }
    },
    refreshchange1() {
      this.getPractitionersPageInfo(this.page1, this.query1);
    },
    //查询当前保安员的从业记录信息
    getPractitionersPageInfo(page, param = {}) {
      param["securityid"] = this.id;
      //获取用户从业信息
      // console.log(this.id, "cid");
        getPractitionersPageInfo (page, param = {}) {
            param["securityid"] = this.id;
            //获取用户从业信息
            // console.log(this.id, "cid");

      getExperienceList(page.currentPage, page.pageSize, param).then((res1) => {
        const data = res1.data.data;
        this.page1.total = data.total;
        this.data1 = data.records;
        this.loading1 = false;
      });
    },
    refreshchange2() {
      this.getPerformancePageInfo(this.page2, this.query2);
    },
    //查询当前保安员的现实表现记录信息
    getPerformancePageInfo(page, param = {}) {
      //获取现实表现信息
      param["securityid"] = this.id;
      getpage(page.currentPage, page.pageSize, param).then((res2) => {
        const data = res2.data.data;
        this.page2.total = data.total;
        this.data2 = data.records;
        console.log(this.data2, 1);
        this.loading2 = false;
      });
    },
    CurrentChange1(currentPage) {
      this.page1.currentPage = currentPage;
      this.refreshchange1();
    },
    SizeChange1(pageSize) {
      this.page1.pageSize = pageSize;
      this.refreshchange1();
    },
    CurrentChange2(currentPage) {
      this.page2.currentPage = currentPage;
      this.refreshchange2();
    },
    SizeChange2(pageSize) {
      this.page2.pageSize = pageSize;
      this.refreshchange2();
    },
    // refreshChange1() {
    //   this.getPractitionersPageInfo();
    // },
    // refreshChange2() {
    //   this.getPerformancePageInfo();
    // },
            getExperienceList(page.currentPage, page.pageSize, param).then((res1) => {
                const data = res1.data.data;
                this.page1.total = data.total;
                this.data1 = data.records;
                this.loading1 = false;
            });
        },
        refreshchange2 () {
            this.getPerformancePageInfo(this.page2, this.query2);
        },
        //查询当前保安员的现实表现记录信息
        getPerformancePageInfo (page, param = {}) {
            //获取现实表现信息
            param["securityid"] = this.id;
            getpage(page.currentPage, page.pageSize, param).then((res2) => {
                const data = res2.data.data;
                this.page2.total = data.total;
                this.data2 = data.records;
                console.log(this.data2, 1);
                this.loading2 = false;
            });
        },
        CurrentChange1 (currentPage) {
            this.page1.currentPage = currentPage;
            this.refreshchange1();
        },
        SizeChange1 (pageSize) {
            this.page1.pageSize = pageSize;
            this.refreshchange1();
        },
        CurrentChange2 (currentPage) {
            this.page2.currentPage = currentPage;
            this.refreshchange2();
        },
        SizeChange2 (pageSize) {
            this.page2.pageSize = pageSize;
            this.refreshchange2();
        },
        // refreshChange1() {
        //   this.getPractitionersPageInfo();
        // },
        // refreshChange2() {
        //   this.getPerformancePageInfo();
        // },

    rowSave2(form, done, loading) {
      form.securityid = this.id;
      add(form).then(
        (res) => {
          this.getPerformancePageInfo(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        rowSave2 (form, done, loading) {
            form.securityid = this.id;
            add(form).then(
                (res) => {
                    this.getPerformancePageInfo(this.page2);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
            // }
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
      // }
    },
    //从业记录新增
    rowSave1(form, done, loading) {
      form.securityid = this.id;
      addExperience(form).then(
        (res) => {
          this.getPractitionersPageInfo(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        //从业记录新增
        rowSave1 (form, done, loading) {
            form.securityid = this.id;
            addExperience(form).then(
                (res) => {
                    this.getPractitionersPageInfo(this.page1);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
            // }
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
      // }
    },
    rowUpdate2(row, index, done, loading) {
      row.securityid = this.id;
      update(row).then(
        () => {
          this.getPerformancePageInfo(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        rowUpdate2 (row, index, done, loading) {
            row.securityid = this.id;
            update(row).then(
                () => {
                    this.getPerformancePageInfo(this.page2);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdate1(row, index, done, loading) {
      row.securityid = this.id;
      updateExperience(row).then(
        () => {
          this.getPractitionersPageInfo(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        rowUpdate1 (row, index, done, loading) {
            row.securityid = this.id;
            updateExperience(row).then(
                () => {
                    this.getPractitionersPageInfo(this.page1);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        (error) => {
          window.console.log(error);
          loading();
        rowDel2 (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.getPerformancePageInfo(this.page2);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                });
        },
        rowDel1 (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return experienceRemove(row.id);
                })
                .then(() => {
                    this.getPractitionersPageInfo(this.page1);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                });
        },
    },
    mounted () {
        this.typeTABS = this.optionTABS.column[0];
        var data = JSON.parse(this.$route.query.row);
        // console.log(data);
        if (data) {
            var row = data;
            // var row = this.$route.query.row;
            for (var k in row) {
                this.obj0[k] = row[k];
            }
            this.obj0.title = "";
            this.cardid = row.id;
            this.name = row.name;
            this.dispatcherCompany = row.dispatcherCompany;
            this.id = row.id;
            this.hold = row.hold;
            console.log(this.obj0);
        }
      );
    },
    rowDel2(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.getPerformancePageInfo(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    rowDel1(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return experienceRemove(row.id);
        })
        .then(() => {
          this.getPractitionersPageInfo(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
  },
  mounted() {
    this.typeTABS = this.optionTABS.column[0];
    var data = JSON.parse(this.$route.query.row);
    // console.log(data);
    if (data) {
      var row = data;
      // var row = this.$route.query.row;
      for (var k in row) {
        this.obj0[k] = row[k];
      }
      this.obj0.title = "";
      this.cardid = row.id;
      this.name = row.name;
      this.dispatcherCompany = row.dispatcherCompany;
      this.id = row.id;
      this.hold = row.hold;
      console.log(this.obj0);
    }

    var flag = false,
      i = 0,
      ind = null;
    this.$store.state.tags.tagList.forEach((item, index) => {
      if (item.label == "保安员详情") {
        if (flag == false) {
          ind = index;
          flag = true;
        var flag = false,
            i = 0,
            ind = null;
        this.$store.state.tags.tagList.forEach((item, index) => {
            if (item.label == "保安员详情") {
                if (flag == false) {
                    ind = index;
                    flag = true;
                }
                i++;
            }
        });
        if (i > 1) {
            this.$store.state.tags.tagList.splice(ind, 1);
        }
        i++;
      }
    });
    if (i > 1) {
      this.$store.state.tags.tagList.splice(ind, 1);
    }
  },
    },
};
</script>

<style lang="scss">
.dispatch {
  width: 100%;
  height: 100%;
  //   border: 1px solid #000;
  box-sizing: border-box;
    width: 100%;
    height: 100%;
    //   border: 1px solid #000;
    box-sizing: border-box;
}
// .el-card__body {
//   padding-bottom: 5px !important;
@@ -481,100 +484,100 @@
// }

.baoanzheng {
  // position: fixed;
  position: relative;
  // top: 0;
  top: 0;
  // left: -10%;
  left: 0;
  // height: 0;
  width: 100%;
  height: calc(100% - 100px);
  // background-color: rgba(0, 0, 0, 0.5);
  background-color: #fff;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
    // position: fixed;
    position: relative;
    // top: 0;
    top: 0;
    // left: -10%;
    left: 0;
    // height: 0;
    width: 100%;
    height: calc(100% - 100px);
    // background-color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.baz-main {
  position: relative;
  top: 15px;
  // width: 441px;
  // height: 358px;
  width: 750px;
  height: 550px;
  // background-color: #004ca7;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
    position: relative;
    top: 15px;
    // width: 441px;
    // height: 358px;
    width: 750px;
    height: 550px;
    // background-color: #004ca7;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.baz-m-body {
  width: 750px;
  height: 550px;
  background-image: url("/img/register/bazbj1.png");
  background-size: 100% 100%;
  .bmb-heard {
    font-size: 4rem;
    width: 100%;
    text-align: center;
    letter-spacing: 1.4rem;
    margin-bottom: 40px;
    padding-left: 10px;
    position: relative;
    top: 20px;
  }
  .img {
    width: 358px;
    height: 441px;
    border-radius: 10px;
    position: absolute;
    // border: 1px solid rgba($color: #888888, $alpha: 0.5);
    top: 110px;
    right: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    width: 750px;
    height: 550px;
    background-image: url('/img/register/bazbj1.png');
    background-size: 100% 100%;
    .bmb-heard {
        font-size: 4rem;
        width: 100%;
        text-align: center;
        letter-spacing: 1.4rem;
        margin-bottom: 40px;
        padding-left: 10px;
        position: relative;
        top: 20px;
    }
  }
  .imgs {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    position: absolute;
    // border: 1px solid rgba($color: #888888, $alpha: 0.5);
    top: 330px;
    right: 103px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    .img {
        width: 358px;
        height: 441px;
        border-radius: 10px;
        position: absolute;
        // border: 1px solid rgba($color: #888888, $alpha: 0.5);
        top: 110px;
        right: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 100%;
            height: 100%;
        }
    }
  }
  .bmb-b {
    padding-left: 20px;
    box-sizing: border-box;
    height: 3.9rem;
    margin-left: 3rem;
    width: 100%;
    font-size: 2rem;
    font-weight: 300;
    .bmb-b-s {
      display: inline-block;
      width: 20rem;
      font-size: 2rem;
      font-weight: 300;
    .imgs {
        width: 110px;
        height: 110px;
        border-radius: 10px;
        position: absolute;
        // border: 1px solid rgba($color: #888888, $alpha: 0.5);
        top: 330px;
        right: 103px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 100%;
            height: 100%;
        }
    }
  }
    .bmb-b {
        padding-left: 20px;
        box-sizing: border-box;
        height: 3.9rem;
        margin-left: 3rem;
        width: 100%;
        font-size: 2rem;
        font-weight: 300;
        .bmb-b-s {
            display: inline-block;
            width: 20rem;
            font-size: 2rem;
            font-weight: 300;
        }
    }
}
.PrintBut {
  margin-top: 15px;
    margin-top: 15px;
}
</style>