<template>
  <view class="message">
    <view class="left_icon">
      <image src="@/static/icon_light.png" class="icon_light"></image>
      <image
        src="@/static/icon_message_title.png"
        class="icon_message_title"
      ></image>
    </view>

    <text class="message_title">市场风格切换 大中盘股相关ETF领涨</text>

    <view class="message_view" @click="jump">查看</view>
    <u-icon name="close" color="#333" size="10" @click="closeMessage"></u-icon>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch, nextTick, onActivated } from "vue";
import {
  onLaunch,
  onShow,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";

import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";

const emit = defineEmits(["closeMessage"]);

function closeMessage() {
  emit("closeMessage");
}

const jump = () => {
  uni.navigateTo({
    url: "/pages/flash/index",
  });
  emit("closeMessage");
}

</script>

<style lang="scss" scoped>
.message {
  width: 90vw;
  height: 120rpx;

  background-color: #ffffff;
  padding: 0 10rpx;

  position: fixed;
  z-index: 999;
  top: 10rpx;
  left: 50%;
  margin: auto;
  transform: translate(-50%, 0);
  box-shadow: 0 0 30rpx rgba($color: #000000, $alpha: 0.3);

  border-radius: 10rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;

  animation: admin 0.2s;
}

.left_icon {
  width: 100rpx;
  height: 110rpx;
  position: relative;
  margin-top: 10rpx;

  .icon_light {
    width: 60rpx;
    height: 90rpx;
    position: absolute;
    left: 0rpx;
    top: 0;
  }

  .icon_message_title {
    width: 66rpx;
    height: 80rpx;
    position: absolute;
    left: 25rpx;
    top: 15rpx;
  }
}

.message_title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  width: 440rpx;
}

.message_view {
  border: 1px solid #e7303f;
  border-radius: 100rpx;
  font-size: 20rpx;
  color: #e7303f;
  padding: 5rpx 15rpx;
}

@keyframes admin {
  0% {
    top: -200rpx;
  }
  100% {
    top: 0;
  }
}
</style>
