1

admin

2026-01-05 c8361f1a9080a9e52d0ac772bd59697ad318cfe9

 src/page/home/newHome.vue

@@ -14,12 +14,22 @@
        />
      </div>
      <div class="home-search-ctl">
        <img
          class="lingdang"
          src="../../assets/ico/lingdang.png"
          alt=""
          @click="$router.push('/notify')"
        />
        <!-- 站内信图标 -->
        <div class="message-icon-wrapper" @click="$router.push('/notify')" v-if="isLoggedIn">
          <svg class="message-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
          </svg>
          <span v-if="unreadCount > 0" class="message-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
        </div>
        <!-- 小铃铛图标，带红点提示 -->
        <div class="lingdang-wrapper" @click="$router.push('/notify')" v-if="isLoggedIn">
          <img
            class="lingdang"
            src="../../assets/ico/lingdang.png"
            alt=""
          />
          <span v-if="unreadCount > 0" class="lingdang-badge"></span>
        </div>
        <img
          class="pifu"
          src="../../assets/ico/pifu.png"
@@ -330,8 +340,15 @@
      newsContent4: [], // 7*24全球
      newsContent5: [], // 商品资讯,
      b_bg: require("../../../static/img/bg-zhisu.png"),
      r_bg: require("../../../static/img/bg-zhisu-red.png")
      r_bg: require("../../../static/img/bg-zhisu-red.png"),
      unreadCount: 0,
      messageTimer: null
    };
  },
  computed: {
    isLoggedIn() {
      return !!window.localStorage.getItem("USERTOKEN");
    }
  },
  created() {
    this.getProductSetting();
@@ -341,8 +358,10 @@
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
    if (this.messageTimer) {
      clearInterval(this.messageTimer);
    }
  },
  computed: {},
  // 更新的时候运动
  updated() {
    if (!this.moveStats) {
@@ -503,6 +522,31 @@
          id: this.artList.id
        }
      });
    },
    // 获取未读消息数
    async getUnreadCount() {
      try {
        const data = await api.getUnreadCount();
        if (data && data.status === 0) {
          this.unreadCount = data.data || 0;
        } else {
          this.unreadCount = 0;
        }
      } catch (error) {
        console.error('获取未读消息数失败:', error);
        this.unreadCount = 0;
      }
    },
    // 开始轮询未读消息数（每30秒）
    startMessagePolling() {
      if (this.messageTimer) {
        clearInterval(this.messageTimer);
      }
      this.messageTimer = setInterval(() => {
        if (this.isLoggedIn) {
          this.getUnreadCount();
        }
      }, 30000);
    }
  },
  mounted() {
@@ -514,6 +558,11 @@
    this.getMarket(); // 获取大盘指数
    this.getBanner(); //获取banner
    this.getArtList(); // 获取公告
    // 如果已登录，获取未读消息数
    if (this.isLoggedIn) {
      this.getUnreadCount();
      this.startMessagePolling();
    }
    // let header = document.querySelector('.header-box')
    let body = document.querySelector(".wrapper");
    // header.style.display = 'none'
@@ -922,15 +971,73 @@
    align-items: center;
    justify-content: flex-end;

    .lingdang {
      width: 0.25rem;
      height: 0.32rem;
    // 小铃铛图标容器
    .lingdang-wrapper {
      position: relative;
      margin-right: 0.18rem;
      cursor: pointer;
      display: inline-block;
      
      .lingdang {
        width: 0.25rem;
        height: 0.32rem;
        display: block;
      }
      
      // 小铃铛红点提示
      .lingdang-badge {
        position: absolute;
        top: -0.05rem;
        right: -0.05rem;
        width: 0.16rem;
        height: 0.16rem;
        background-color: #ff4d4f;
        border-radius: 50%;
        border: 0.02rem solid #fff;
        display: block;
        animation: pulse 2s infinite;
      }
    }

    .pifu {
      width: 0.34rem;
      height: 0.28rem;
      margin-left: 0.18rem;
    }
    
    // 站内信图标样式
    .message-icon-wrapper {
      position: relative;
      width: 0.5rem;
      height: 0.5rem;
      margin-right: 0.18rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .message-icon {
        width: 100%;
        height: 100%;
        color: #fff;
      }
      
      .message-badge {
        position: absolute;
        top: -0.1rem;
        right: -0.1rem;
        min-width: 0.3rem;
        height: 0.3rem;
        line-height: 0.3rem;
        padding: 0 0.08rem;
        background-color: #ff4d4f;
        color: #fff;
        border-radius: 0.15rem;
        font-size: 0.2rem;
        text-align: center;
        font-weight: bold;
        border: 0.02rem solid #fff;
      }
    }
  }
}
@@ -1135,6 +1242,23 @@
    background-color: #565656;
    opacity: 0.3;
  }
}

// 红点脉冲动画
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

  .account-box .content {
    position: relative;