<template>
  <view class="container">
    <!-- 顶部通知栏 -->
    <view class='tui-notice-board' v-if="showNotice">
      <view class="tui-icon-bg">
        <tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
      </view>
      <view class="tui-scorll-view" @tap='detail'>
        <view class="tui-notice" :class="[animation ? 'tui-animation' : '']">B站10分日本动漫已消失，9.9分仅剩12部，这一部动漫包揽三席！</view>
      </view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- 这里可以放置页面的主要内容 -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import TuiIcon from '@/components/thorui/tui-icon/tui-icon.vue';

// 通知栏相关状态
const animation = ref<boolean>(false);
const showNotice = ref<boolean>(true);

// 详情页跳转
const detail = () => {
  uni.navigateTo({
    url: '/pages/news/detail'
  });
};

// 生命周期
onMounted(() => {
  // 启动滚动动画
  setTimeout(() => {
    animation.value = true;
  }, 600);
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f7f7f7;
  position: relative;
}

/* 通知栏样式 */
.tui-notice-board {
  width: 100%;
  padding-right: 30rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  height: 60rpx;
  background: #fff8d5;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.tui-icon-bg {
  background: #fff8d5;
  padding-left: 30rpx;
  position: relative;
  z-index: 10;
}

.tui-scorll-view {
  flex: 1;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  color: #f54f46;
}

.tui-notice {
  -webkit-backface-visibility: hidden;
  transform: translate3d(100%, 0, 0);
}

.tui-animation {
  -webkit-animation: tui-rolling 12s linear infinite;
  animation: tui-rolling 12s linear infinite;
}

@keyframes tui-rolling {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-170%, 0, 0);
  }
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 20rpx 30rpx;
}
</style>