<template>
  <div class="vote-hint" :style="{top:(this.$store.getters.gethoverVoteItemY-30)+'px'}">
    <div class="vote-hint-triangle"></div>
    <h3 class="vote-preview-title">投票結果預覽</h3>
    B. 選項描述
  </div>
</template>

<script>

export default {
  name: "VoteHint",

};
</script>
 
<style scoped>
.vote-hint-triangle {
  width: 0;
  height: 0;
  position: relative;
  left:-33px;
  top:10px;
  border-style: solid;
  border-width: 8px 13px 8px 0;
  border-color: transparent #fff transparent transparent;
}

.vote-preview-title {
  color: #24b880;
  margin-bottom: 10px;
}
.vote-hint {
  display: block;
  position: fixed;
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  z-index: 20;
  left: 24%;
  width: 20%;
  height: auto;
  padding: 5px 20px 30px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 1px 12px 20px rgba(0, 0, 0, 0.2);
  font-weight: bolder;
}
</style>