front-pc/pages/mobile/message_notice/index.vue

<template>
  <div class="message-notice-container">
    <div class="tab-navigation">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { active: activeTab === index }]"
        @click="activeTab = index"
      >
        <span v-if="index === 0" class="iconfont icon-system"></span>
        <span v-else-if="index === 1" class="iconfont icon-transaction"></span>
        <span v-else class="iconfont icon-forum"></span>
        {{ tab.name }}
      </div>
    </div>

    <div class="message-content">
      <template v-if="activeTab === 0">
        <div
          class="message-item"
          v-for="(message, index) in systemMessages"
          :key="index"
        >
          <div class="message-left">
            <span class="iconfont icon-speaker"></span>
            <span class="dot"></span>
          </div>
          <div class="message-body">
            <div class="message-header">
              <div class="message-title text-ellipsis">{{ message.title }}</div>
              <div class="message-time">{{ message.time }}</div>
            </div>
            <div class="message-description">{{ message.content }}</div>
          </div>
        </div>
      </template>

      <template v-if="activeTab === 1">
        <div class="empty-content">
          <div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
        </div>
      </template>

      <template v-if="activeTab === 2">
        <div class="empty-content">
          <div class="notice-text">交易消息和论坛社区互动的图标统一下，样式一样</div>
        </div>
      </template>
    </div>
  </div>
  
</template>

<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { ref } from 'vue'

const activeTab = ref(0)
const tabs = ref([
  { name: '系统消息', icon: 'icon-system' },
  { name: '交易消息', icon: 'icon-transaction' },
  { name: '论坛社区互动', icon: 'icon-forum' },
])

const systemMessages = ref([
  { title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
  { title: '图夕夕金币充值有优惠!', content: '图夕夕限时优惠, 微信冲500送50金币, 充200送10金币图夕夕限时优惠, 微信冲500送50金币, 充200送10金币', time: '2025-03-05 17:00:57' },
])

const transactionMessages = ref<any[]>([])
const forumMessages = ref<any[]>([])
</script>

<style>
page {
  background-color: #f5f7fa;
  height: 100%;
}

.message-notice-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-navigation {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  padding: 30rpx 0;
  text-align: center;
  color: #666;
  position: relative;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item .iconfont {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.tab-item.active {
  color: #4082ff;
  font-weight: 500;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 6rpx;
  background-color: #4082ff;
}

.icon-system:before {
  content: "🔔";
}

.icon-transaction:before {
  content: "💰";
}

.icon-forum:before {
  content: "💬";
}

.icon-speaker:before {
  content: "📢";
}

.message-content {
  flex: 1;
  padding: 20rpx;
  background-color: #f5f7fa;
}

.message-item {
  display: flex;
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 16rpx;
  border-radius: 8rpx;
  align-items: flex-start;
  border-left: 6rpx solid transparent;
  position: relative;
}

.message-left {
  position: relative;
  margin-right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-left .iconfont {
  font-size: 40rpx;
  color: #4082ff;
}

.dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #ff4d4f;
}

.message-body {
  flex: 1;
  overflow: hidden;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.message-title {
  font-weight: bold;
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.message-time {
  color: #999;
  font-size: 24rpx;
  text-align: right;
  flex-shrink: 0;
  margin-left: 20rpx;
}

.message-description {
  color: #666;
  font-size: 26rpx;
  line-height: 1.5;
}

.empty-content {
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f0ff;
  margin-top: 20rpx;
  border-radius: 8rpx;
}

.notice-text {
  color: #666;
  font-size: 28rpx;
}

.page-title {
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
  background-color: transparent;
  color: #666;
  border-top: 2rpx solid #eee;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>