yiliangyiyun-pc-jj/src/layout/index/top/index.vue

<template>
  <div class="winseaview-top" id="winseaview-top">
    <div class="top-bar__left">
      <!-- 伸缩icon -->
      <div class="winseaview-breadcrumb" :class="[{ 'winseaview-breadcrumb--active': isCollapse }]">
        <i class="iconfont icon-shouqi" @click="setCollapse"></i>
      </div>
      <!-- </div>
    <div class="top-bar__title"> -->
      <!-- 面包屑 -->
      <div class="top-bar__item top-bar__item--show">
        <top-menu v-if="showMenu"></top-menu>
        <bread-crumb v-if="!showMenu" />
        <smallTips v-if="showTooltip" />
      </div>
      <span class="top-bar__item" v-if="showSearch">
        <top-search></top-search>
      </span>
    </div>
    <div class="top-bar__right">
      <!-- 使用租户 -->
      <div class="hidden-content">
        <el-input ref="hiddenFocus" type="password" class="input-Style" v-model="barCode" size="small" @focus="focus" @blur="blur"
          @keyup.enter.native="payCode" placeholder="扫码枪内容"></el-input>
        <div v-show="isOpenCodeGun">扫码枪已连接</div>
        <div v-show="!isOpenCodeGun" @click="setCodeGun">点我扫码</div>
        <!--  -->
        <el-dialog title="扫描二维码" :visible.sync="smAlert" width="200px374a8a02ecfe40dc9abdcd902dd564f5
        ">
          <div class="btn-list">
            <el-button v-hasPermission="`acquisitionManagement.acquisitionQuality.initial`"
                v-if="btnStatus.status1||btnStatus.status2" @click="goToPage(1)" class="btn_css">去初检
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionQuality.con`"
                v-if="btnStatus.status3||btnStatus.status4" v-show="toPageData.qualityInspectionManagement.confirm != '1'"  @click="goToPage(2)" class="btn_css">去确认质检
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionQuality.again`"
                v-if="btnStatus.status1||btnStatus.status2||btnStatus.status3||btnStatus.status4" v-show="toPageData.qualityInspectionManagement.confirm != '1'" @click="goToPage(3)" class="btn_css">去复检
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionWeight.mao`"
                v-if="btnStatus.status1||btnStatus.status2||btnStatus.status3" @click="goToPage(4)" class="btn_css">去称毛重
              </el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionPay.add`" v-if="btnStatus.status5"
                @click="goToPage(5)" class="btn_css">去结算</el-button>
              <el-button v-hasPermission="`acquisitionManagement.acquisitionWeight.weight`" 
                v-if="btnStatus.status2||btnStatus.status3||btnStatus.status4||btnStatus.status5" @click="goToPage(6)" v-show="toPageData.qualityInspectionManagement.confirm != '1'" class="btn_css">去称皮重
              </el-button>
              <el-button @click="smAlert = false" class="btn" >关闭</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-if="getDay" class="right-menu-item hover-effect dayClass">
        {{ $t('common.trialDays') }}
        <span style="padding: 0 2px">{{ getDay }}</span>{{ $t('common.days') }}
      </div>
      <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip>

      <el-tooltip v-if="showTheme" effect="dark" :hide-after="1500" :content="$t('navbar.theme')" placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip>

      <!-- <el-tooltip effect="dark"
                  :content="$t('navbar.language')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip> -->
      <el-tooltip v-if="showFullScren" effect="dark" :content="
          isFullScren ? $t('navbar.screenfull') : $t('navbar.screenfullF')
        " placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScren ? 'el-icon-full-screen' : 'el-icon-full-screen'" @click="handleScreen"></i>
        </div>
      </el-tooltip>

      <img class="top-bar__img" v-lazy="userInfo.avatar" />
      <el-dropdown>
        <span class="el-dropdown-link">
          <span>{{ userInfo.showRoleName }} : {{ userInfo.staffName }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-s-custom" @click.native="personalFlag = true">
            {{ $t('navbar.personalInformation') }}
          </el-dropdown-item>
          <el-dropdown-item icon="el-icon-s-promotion" @click.native="passwordFlag = true">
            {{ $t('navbar.uploadPsw') }}
          </el-dropdown-item>
          <!-- <el-dropdown-item>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item> -->
          <el-dropdown-item v-if="showSetting" icon="el-icon-s-tools" @click.native="settingDrawer = true">
            {{ $t('navbar.layoutSetting') }}
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" divided>{{
            $t('navbar.logOut')
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <topSetting v-model="settingDrawer" @close="() => (settingDrawer = !settingDrawer)" />

    <!--个人信息-->
    <WinseaContentModal v-model="personalFlag" :title="$t('navbar.personalInformation')">
      <el-form ref="personalMsg" :model="passwordMsg" label-position="right" label-width="150px">
        <el-form-item :label="$t('login.name')" prop="originalPassword">
          {{ userInfo.staffName }}
        </el-form-item>
        <el-form-item :label="$t('login.account')" prop="newPassword">
          {{ account }}
        </el-form-item>
        <el-form-item :label="$t('login.phone')" prop="newPassword">
          {{ userInfo.staffMobilePhone }}
        </el-form-item>
        <el-form-item :label="$t('login.role')" prop="newPassword">
          {{ userInfo.showRoleName }}
        </el-form-item>
        <el-form-item :label="$t('login.dept')" prop="newPassword">
          {{ userInfo.deptName }}
        </el-form-item>
        <el-form-item :label="$t('login.company')" prop="newPassword">
          <div class="company-info">
            {{ userInfo.compName }}
          </div>
        </el-form-item>
      </el-form>
    </WinseaContentModal>
    <!--修改密码-->
    <WinseaContentModal v-model="passwordFlag" :title="$t('navbar.uploadPsw')">
      <el-form ref="passwordMsg" :model="passwordMsg" :label-width="language == 'en' ? '156px' : '100px'"
        :rules="passwordMsgRules">
        <el-form-item :label="$t('login.originalPassword') + $t('common.colon')" prop="originalPassword">
          <ws-input type="password" :placeholder="$t('login.message04')" v-model="passwordMsg.originalPassword"
            style="width: 318px" />
        </el-form-item>
        <el-form-item :label="$t('login.newPassword') + $t('common.colon')" prop="newPassword">
          <ws-input type="password" v-model="passwordMsg.newPassword" :placeholder="$t('login.verification01')"
            style="width: 318px" />
        </el-form-item>
        <el-form-item :label="$t('login.confirmPassword') + $t('common.colon')" prop="password">
          <ws-input type="password" v-model="passwordMsg.password" :placeholder="$t('login.verification01')"
            style="width: 318px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <ws-button @click="passwordFlag = false">{{
          $t('showMessage.cancel')
        }}</ws-button>
        <ws-button type="primary" @click="savePassword('passwordMsg')">{{
          $t('showMessage.confirm')
        }}</ws-button>
      </span>
    </WinseaContentModal>
  </div>
</template>
<script>
  import {
    changePasswordByPwd
  } from '@/model/indexRx'
  import {
    mapActions,
    mapGetters,
    mapState
  } from 'vuex'
  import {
    fullscreenToggel,
    listenfullscreen
  } from '@/utils/util'
  import topMenu from './top-menu'
  import topSearch from './top-search'
  import topTheme from './top-theme'
  import topColor from './top-color'
  import topNotice from './top-notice'
  import topLang from './top-lang'
  import topSetting from './top-setting'
  import breadCrumb from '@/components/Breadcrumb'
  import {
    EventBus
  } from 'base-core-lib'
  import {
    validPassword
  } from '@/utils/validate'
  import smallTips from '@/components/WinseaCom/smallTips'
  import {
    getLook
  } from '@/model/warehouse/index'
  import {
    getQRCodeData
  } from '@/model/houseSelfCollect/index'


  const validPasswordRule = function(rule, value, callback) {
    if (!validPassword(value)) {
      callback(new Error(this.$t('login.verification01')))
    } else {
      callback()
    }
  }
  const validPasswordRule2 = function(rule, value, callback) {
    if (!value) {
      callback(new Error(this.$t('login.verification02')))
    } else if (value !== this.passwordMsg.newPassword) {
      callback(new Error(this.$t('login.verification03')))
    } else {
      callback()
    }
  }
  export default {
    components: {
      topMenu,
      topSearch,
      topTheme,
      topColor,
      topNotice,
      topLang,
      topSetting,
      breadCrumb,
      smallTips,
    },
    name: 'top',
    data() {
      return {
        //status1:已初检未称毛重状态 status2:已初检且已称毛重状态  status3:已复检且已称毛重  status4:已复检且已称皮重状态
        //status5:已确认质检且已称皮重且未结算状态  status6:已结算状态
        btnStatus: {
          status1: false,
          status2: false,
          status3: false,
          status4: false,
          status5: false,
          status6: false,
        },
        toPageData: {},
        userINfo: {},
        barCode: '',
        isOpenCodeGun: false,
        smAlert: false,
        showList: [
          'maintenancePlanList',
          'maintenanceReportList',
          'navigationMaterialList',
          'protectionEntry',
          'protection',
          'newlyIncreased',
          'clientEdit',
          'staticDetail',
          'maApplicationAdd',
          'maApplicationEdit',
          'maApplicationLabel',
          'monthContrastList',
        ],
        settingDrawer: false,
        personalFlag: false,
        passwordFlag: false,
        passwordMsgRules: {
          originalPassword: [{
            required: true,
            message: ' ',
            trigger: 'blur'
          }],
          // newPassword: [
          //   {
          //     required: true,
          //     trigger: 'blur',
          //     validator: validPasswordRule.bind(this),
          //   },
          // ],
          // password: [
          //   {
          //     required: true,
          //     trigger: 'blur',
          //     validator: validPasswordRule2.bind(this),
          //   },
          // ],
        },
        passwordMsg: {
          originalPassword: '', // 原始密码
          newPassword: '', // 新密码
          password: '', // 二次输入密码
        },
        // roleName: '',
        // phone: '',
        // roleId: '',
        // deptName: '',
        // deptId: '',
        // staffName: '',
        account: localStorage.getItem('ws-pf_account'),
        // compName: '',
        companyId: localStorage.getItem('ws-pf_compId'),
        cangid:'',
        tmp:{},
      }
    },
    filters: {},
    created() {
      // this.getUserInfo()
      this.getUserWorseHouse();
      this.userINfo = {
        userCompany: localStorage.getItem('ws-pf_compId'),
        userName: localStorage.getItem('ws-pf_staffName'),
      }
    },
    mounted() {
      listenfullscreen(this.setScreen)
    },
    computed: {
      ...mapState({
        showDebug: (state) => state.commonStore.showDebug,
        showTheme: (state) => state.commonStore.showTheme,
        showLock: (state) => state.commonStore.showLock,
        showFullScren: (state) => state.commonStore.showFullScren,
        showCollapse: (state) => state.commonStore.showCollapse,
        showSearch: (state) => state.commonStore.showSearch,
        showSetting: (state) => state.commonStore.showSetting,
        showMenu: (state) => state.commonStore.showMenu,
        showColor: (state) => state.commonStore.showColor,
      }),
      ...mapGetters([
        'userInfo',
        'isFullScren',
        'tagWel',
        'tagList',
        'isCollapse',
        'tag',
        'logsLen',
        'logsFlag',
        'language',
      ]),
      getDay() {
        const {
          statusFlag = -1, daysRemaining
        } =
        JSON.parse(localStorage.getItem('ws_login_getTenantInfoByUser')) || {}
        return statusFlag * 1 === 2 ? daysRemaining + '' : ''
      },
      showTooltip() {
        return this.showList.indexOf(this.$route.name) > -1 && !this.showMenu
      },
    },
    methods: {
      ...mapActions('common', ['setLocalVessels']),
      payCode() {
        console.log("input", this.barCode)
        this.btnStatus = {
          status1: false,
          status2: false,
          status3: false,
          status4: false,
          status5: false,
          status6: false,
        }
        // let _userCompId = "2710b21efc1e4393930c5dc800010dc4"
        // let _qualityNo = "SGRK202112140060003"
         
        let _userCompId = this.barCode.split('&')[0]
        let _qualityNo = this.barCode.split('&')[1]
        let _userHouseId = this.barCode.split('&')[2]
        this.cangid = this.barCode.split('&')[2]
        if(_userCompId.indexOf(",") != -1){
         _userCompId =  _userCompId.split(",")[1]
        }
        this.tmp = {
          compId: _userCompId,
          number: _qualityNo,
          warehouseId: _userHouseId
        }
         this.barCode = ''
         debugger
        //判断当前账号公司是否是二维码上公司
        if (this.userINfo.userCompany != _userCompId) {
          this.$message.error('当前身份不可操作');
          return
        }
        //判断二维码上的仓库当前账号是否有权限操作
        this.getLook(this.cangid, this.userINfo.userName)
        
      },
      // 查看二维码仓库负责人
      async getLook(compId, userName) {
        await getLook({
            id: compId,
          })
          .toPromise()
          .then((response) => {
              if (response.otherPersonCharge.indexOf(userName) != -1 || response.personCharge == userName) {
                  //扫码枪扫码后显示弹框
                   this.getQRCodeData(this.tmp)
              }else{
                 this.$message.error('当前身份不可操作');
                 return
              }
            
          })
      },
      // 二维码获取数据
      async getQRCodeData(tmp) {
        await getQRCodeData(tmp)
          .toPromise()
          .then((response) => { 
            this.toPageData = response
            // 处理按钮显示状态
            // this.btnStatus 
            // 检斤状态
            let _status1 = response.status
            //质检状态
            let _status2 = response.qualityInspectionManagement.status
            // 付款状态
            let _status3 = response.paymentManagement?response.paymentManagement.status:''
            if (_status2 == '已初检' && _status1 == '已质检') {
              this.btnStatus.status1 = true
            } else if (_status2 == '已初检' && (_status1 == '已称毛重' || _status1 == '已质检')) {
              this.btnStatus.status2 = true
            } else if (_status2 == '已复检' && (_status1 == '已称毛重' || _status1 == '已质检')) {
              this.btnStatus.status3 = true
            } else if (_status2 == '已复检' && this.toPageData.qualityInspectionManagement.confirm != '1' && (_status1 == '已称皮重' || _status1 == '已质检')) {
              this.btnStatus.status4 = true
            } else if (_status2 == '已复检' && _status1 == '已称皮重' && _status3 == '待结算') {
              this.btnStatus.status5 = true
            } else if (_status3 == '已结算') {
              this.btnStatus.status6 = true
            }
            if (_status3 == '已结算') {
              this.$message.error('业务已完结');
            } else {
              this.smAlert = true
            }
          })
      },
      setCodeGun() {
        this.$refs['hiddenFocus'].focus()
      },
      focus() {
        console.log("当前焦点状态")
        this.isOpenCodeGun = true
      },
      blur() {
        console.log("当前已失去焦点状态")
        this.isOpenCodeGun = false
      },
      goToPage(type) {
        let _url = ''
        if (type === 1) {
// this.toPageData 
          this.$router.push({
          	name: 'inspectInfo',
          	query: {
          		type: 3,
          		cangid: this.cangid,
          		id: this.toPageData.qualityInspectionManagement.id,
          		warehouseName: this.toPageData.qualityInspectionManagement.warehouseName,
          		count: 0,
          		warehouseNo: 0,
          		allowEdit:this.toPageData.warehouseBaseInfo.allowEdit,
          		status:this.toPageData.status
          	},
          })
        } else if (type === 2) {
               this.$router.push({
          	name: 'inspectInfo',
          	query: {
          		type: 5,
          		cangid: this.cangid,
          		id: this.toPageData.qualityInspectionManagement.id,
          		warehouseName: this.toPageData.qualityInspectionManagement.warehouseName,
          		count: 0,
          		warehouseNo: 0,
          		allowEdit:this.toPageData.warehouseBaseInfo.allowEdit,
          		status:this.toPageData.status
          	},
          })
        } else if (type === 3) {
            this.$router.push({
          	name: 'inspectInfo',
          	query: {
          		type: 4,
          		cangid: this.cangid,
          		id: this.toPageData.qualityInspectionManagement.id,
          		warehouseName: this.toPageData.qualityInspectionManagement.warehouseName,
          		count: 0,
          		warehouseNo: 0,
          		allowEdit:this.toPageData.warehouseBaseInfo.allowEdit,
          		status:this.toPageData.status
          	},
          })
        } else if (type === 4) {
             this.$router.push({
            name: 'weightCheck',
            query: {
              tpyeNo: 1,
              id: this.toPageData.id,
              number: this.toPageData.number,
              binNumber: this.toPageData.binNumber,
              customer: this.toPageData.customer,
              storageNumber: this.toPageData.storageNumber,
              carNumber: this.toPageData.carNumber,
              boxNo: this.toPageData.qualityInspectionManagement.boxNo,
              boxNoOther: this.toPageData.qualityInspectionManagement.boxNoOther,
              titleNo: this.toPageData.qualityInspectionManagement.titleNo,
              titleNoOther: this.toPageData.qualityInspectionManagement.titleNoOther,
              goodsName: this.toPageData.goodsName,
              grossWeight: this.toPageData.grossWeight,
              tare: this.toPageData.tare,
              netWeight: this.toPageData.netWeight,
              relationId: this.toPageData.relationId,
              warehouseId: this.cangid,
              monitorUrl1: this.toPageData.warehouseBaseInfo.monitorUrl1,
              monitorUrl2: this.toPageData.warehouseBaseInfo.monitorUrl2,
              allowEdit: this.toPageData.warehouseBaseInfo.allowEdit,
              cangid: this.cangid,
              warehouseName: this.toPageData.qualityInspectionManagement.warehouseName,
              paramType: this.toPageData.qualityInspectionManagement.paramType,
              customerNumberCard: this.toPageData.customerNumberCard,
              automaticWeightAcquisition: this.toPageData.automaticWeightAcquisition
            },
          })
        } else if (type === 5) {
             localStorage.setItem('paymentManagementReturn', false)
          this.$router.push({
            name: 'settlement',
            query: {
              type: 1,
              id: this.toPageData.paymentManagement.id,
            },
          })
        } else if (type === 6) {
           this.$router.push({
            name: 'weightCheck',
            query: {
              tpyeNo: 2,
              id: this.toPageData.id,
              number: this.toPageData.number,
              binNumber: this.toPageData.binNumber,
              customer: this.toPageData.customer,
              storageNumber: this.toPageData.storageNumber,
              carNumber: this.toPageData.carNumber,
              boxNo: this.toPageData.qualityInspectionManagement.boxNo,
              boxNoOther: this.toPageData.qualityInspectionManagement.boxNoOther,
              titleNo: this.toPageData.qualityInspectionManagement.titleNo,
              titleNoOther: this.toPageData.qualityInspectionManagement.titleNoOther,
              goodsName: this.toPageData.goodsName,
              grossWeight: this.toPageData.grossWeight,
              tare: this.toPageData.tare,
              netWeight: this.toPageData.netWeight,
              relationId: this.toPageData.relationId,
              warehouseId: this.cangid,
              monitorUrl1: this.toPageData.warehouseBaseInfo.monitorUrl1,
              monitorUrl2: this.toPageData.warehouseBaseInfo.monitorUrl2,
              allowEdit: this.toPageData.warehouseBaseInfo.allowEdit,
              cangid: this.cangid,
              warehouseName: this.toPageData.qualityInspectionManagement.warehouseName,
              paramType: this.toPageData.qualityInspectionManagement.paramType,
              customerNumberCard: this.toPageData.customerNumberCard,
              automaticWeightAcquisition: this.toPageData.automaticWeightAcquisition
            },
          })
        }
        this.smAlert = false
      },
      //获取当前用户管理的仓库
      getUserWorseHouse() {

      },
      handleScreen() {
        fullscreenToggel()
      },
      setCollapse() {
        this.$store.commit('SET_COLLAPSE')
      },
      setScreen() {
        this.$store.commit('SET_FULLSCREN')
      },
      cancelPaw() {
        this.$refs.passwordMsg.resetFields()
      },
      // 修改管理员密码
      savePassword(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = {
              originalPassword: this.passwordMsg.originalPassword,
              password: this.passwordMsg.password,
            }
            changePasswordByPwd(data)
              .toPromise()
              .then(() => {
                EventBus.$emit('success', this.$t('message.updateMessage'))
                this.passwordFlag = false
              })
          } else {
            EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
            return false
          }
        })
      },
      // async getUserInfo () {
      //   this.staffName = this.userInfo.staffName
      //   this.phone = this.userInfo.staffMobilePhone
      //   this.deptName = this.userInfo.deptName
      //   this.roleName = this.userInfo.showRoleName
      //   this.roleId = this.userInfo.showRoleId
      //   this.compName = this.userInfo.compName
      // },
      toggleSideBar() {
        this.$store.dispatch('app/toggleSideBar')
      },
      logout() {
        this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
          confirmButtonText: this.$t('submitText'),
          cancelButtonText: this.$t('cancelText'),
          type: 'warning',
        }).then(async () => {
          localStorage.removeItem('ws-pf_roleName')
          localStorage.removeItem('ws-pf_roleId')
          localStorage.removeItem('ws-pf_staffName')
          localStorage.removeItem('ws-pf_deptId')
          localStorage.removeItem('ws-pf_deptName')
          localStorage.removeItem('ws-pf_organMonetaryKey')
          localStorage.removeItem('ws-pf_organMonetaryValue')
          localStorage.removeItem('ws-pf_vessels')
          localStorage.removeItem('ws-pf_isLandBasedFlag')
          await this.$store.dispatch('user/logout')
          this.$router.push(
            process.env.VUE_APP_PACKAGE_ENV === 'ship' ? '/ship_login' : '/login'
          )
        })
      },

    },
  }
</script>

<style lang="scss" scoped>
  .dayClass {
    font-size: 14px !important;

    span {
      font-weight: 600;
      font-size: 14px;
      color: #ff3838;
    }
  }

  .hamburger-container {
    line-height: 40px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
    position: relative;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 40px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      // vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        position: relative;

        span {
          height: 40px;
          line-height: 40px;
          font-size: 12px;
        }

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 15px;
          font-size: 12px;
        }
      }
    }
  }

  .hidden-content {
    display: flex;
    font-size: 16px;
  }

  .input-Style {
    opacity: 1;
    margin-right: 20px;
    // visibility: hidden;P
  }

  .btn {
    background: #5878e8;
    color: white;
  }
  .btn-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btn_css ,.btn{
    width: 80%;
    margin: 20px;
    height: auto;
    padding: 20px!important;
    font-size: 40px;
  }
</style>