<script setup lang="ts">
import { useAnnouncementStore } from '@/stores';

const announcementStore = useAnnouncementStore();

function openAnnouncement() {
  announcementStore.openDialog();
}
</script>

<template>
  <div class="announcement-btn-container" data-tour="announcement-btn">
    <div
      class="announcement-btn"
      title="查看公告"
      @click="openAnnouncement"
    >
      <!-- PC端显示文字 -->
      <span class="pc-text">公告</span>
    </div>
  </div>
</template>

<style scoped>
.announcement-btn-container {
  display: flex;
  align-items: center;
}

.announcement-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  color: #409eff;
  transition: all 0.2s;
  position: relative;
  padding: 4px 8px;
  border-radius: 4px;
}

.announcement-btn:hover {
  color: #66b1ff;
  transform: translateY(-1px);
  background-color: rgba(64, 158, 255, 0.1);
}

/* PC端文字样式 */
.pc-text {
  display: inline-block;
  position: relative;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  line-height: 1.2;
  padding: 2px 8px 2px 0;
}

/* 红点样式 - 缩小到一半 */
.pc-text::after,
.mobile-icon::after {
  content: '';
  position: absolute;
  width: 6px;    /* 缩小到6px */
  height: 6px;   /* 缩小到6px */
  background-color: #f56c6c;
  border-radius: 50%;
  border: 1.5px solid #fff; /* 边框也相应缩小 */
  box-shadow: 0 1px 2px rgba(245, 108, 108, 0.3);
  animation: pulse 1.8s infinite;
  z-index: 1;
}

/* PC端红点位置 - 调整位置使红点正好与"告"字相交 */
.pc-text::after {
  top: -4px;    /* 向上移动，与文字相交 */
  right: -4px;  /* 向右移动，与文字相交 */
}

/* 为小红点添加微小的光晕效果 */
.pc-text::before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 10px;   /* 光晕也相应缩小 */
  height: 10px;  /* 光晕也相应缩小 */
  background-color: rgba(245, 108, 108, 0.2);
  border-radius: 50%;
  animation: glow 2s infinite;
  z-index: 0;
}

@keyframes glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.4;
  }
}

/* 移动端图标样式 */
.mobile-icon {
  display: none;
  position: relative;
  width: 20px;
  height: 20px;
}

/* 移动端图标内的红点位置 */
.mobile-icon::after {
  top: -2px;    /* 位置微调 */
  right: -2px;  /* 位置微调 */
  width: 5px;   /* 移动端红点更小一点 */
  height: 5px;  /* 移动端红点更小一点 */
}

/* 呼吸动画效果 - 调整为更微妙的动画 */
@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 1px 2px rgba(245, 108, 108, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(245, 108, 108, 0.4);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 1px 2px rgba(245, 108, 108, 0.2);
  }
}
</style>
