<template>
  <cr-overlay class="user-mask" :show="isShowOpenBrower" @click="setIsShowOpenBrower(false)">
    <cr-image
      class="user-mask-image"
      width="290px"
      height="211px"
      fit="cover"
      src="@/assets/images/openTip.png"
    />
  </cr-overlay>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "OpenBrowerTip",
  computed: {
    ...mapState(["isShowOpenBrower"])
  },
  methods: {
    ...mapActions(["setIsShowOpenBrower"])
  }
};
</script>

<style lang="less" scoped>
.user-mask {
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: flex-end;
  padding: 20px 20px 0 0;
  z-index: 101;
  &-image {
    margin-bottom: 10px;
  }
  &-title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
  }
  &-desc {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
