  <!-- 二维码Icon模块 -->
<template>
  <div class="cut-warp">
    <div class="cut-scan" v-if="componentName == 'CustomLogin'" @click="checkComponent('ScanCodeLogin')">
      <i class="el-icon-a-QDcode cut-icon"></i>
      <div class="shade"></div>
    </div>
    <div class="cut-scan" v-if="componentName == 'ScanCodeLogin'" @click="checkComponent('CustomLogin')">
      <i class="el-icon-AN cut-icon"></i>
      <div class="shade"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CutQRIcon',
  props: ['componentName'],
  methods: {
    //修改父组件的模块参数
    checkComponent(component) {
      this.$emit('update:componentName', component);
    }
  }
};
</script>

<style lang="scss" scoped>
//切换二维码以及账号登录模块
.cut-warp {
  .cut-scan {
    height: 94px;
    color: #3a86ff;
    display: flex;
    font-size: 74px;

    .cut-icon {
      position: absolute;
      right: 0;
    }
  }

  .shade {
    height: 80px;
    width: 80px;
    background-color: #fff;
    position: absolute;
    top: 23px;
    right: 30px;
    transform: rotate(45deg);
    // transform: translate(-50%,-50%);
  }
}
</style>