VAVABUY/components/placard.vue

<template>
  <view class="pla_card" @click="open">
    <view class="card_top">
      <view class="left">
        <i class="icon-font icon-announcement"></i>
        <trans _t="公告" v-if="mode == 'vertical'" />
        <text v-else class="card_text">{{ winnotcie.title }}</text>
        <!-- <trans class="card_text" _t="团队服务升级报告" v-else /> -->
      </view>
      <i class="icon-font icon-left" v-if="mode == 'horizontal'"></i>
    </view>
    <view class="cont" v-if="mode != 'horizontal'">
      <text>{{ winnotcie.title }}</text>
      <!-- <trans _t="团队服务升级报告" /> -->
    </view>
  </view>
  <up-popup :show="show" safeAreaInsetTop :round="10" mode="bottom" @close="close">
    <view class="pop">
      <view class="top">
        <view class="top_left">
          <i class="icon-font icon-announcement"></i>
          <trans _t="公告" />
        </view>
        <view class="close" @click="close">
          <i class="icon-font icon-close"></i>
        </view>
      </view>
      <view class="conts">
        <rich-text :nodes="winnotcie.content"></rich-text>
      </view>
    </view>
  </up-popup>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();

const props = defineProps({
  mode: {
    type: String,
    default: 'vertical' // horizontal || vertical
  }
})
const show = ref(false);
const winnotcie = computed(() => useSystem.getWinnotice)

const open = () => { show.value = true };
const close = () => { show.value = false };
</script>
<style lang="less" scoped>
.pla_card {
  background: #f0700c1a;
  border-radius: 16rpx;
  font-size: 24rpx;
  line-height: 40rpx;
  padding: 16rpx;

  .card_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--danger);
    font-weight: 700;
    margin-bottom: 8rpx;

    .left {
      display: flex;
      align-items: center;

      .icon-announcement {
        font-weight: 400;
        font-size: 48rpx;
        margin-right: 16rpx;
      }
    }

    .card_text {
      font-size: 24rpx;
      font-weight: 400;
    }

    .icon-left {
      transform: rotate(180deg);
      color: var(--danger);
      font-weight: 400;
    }
  }

  .cont {
    color: #346;
  }
}

.pop {
  max-height: 80vh;
  display: flex;
  flex-direction: column;

  .top {
    padding: 30rpx 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_left {
      display: flex;
      align-items: center;
      color: var(--text);
      font-size: 32rpx;
      font-weight: 700;

      .icon-announcement {
        color: var(--text-01);
        font-size: 28px;
        font-weight: 400;
        margin-right: 16rpx;
      }
    }

    .close {
      .icon-close {
        color: var(--text-01);
        cursor: pointer;
        font-size: 28px;
        font-weight: 400;
      }
    }
  }

  .conts {
    flex-grow: 1;
    padding: 24rpx 30rpx;
    overflow: hidden scroll;
    color: var(--text);
    /deep/ img{
      width: 100%;
    }
  }
}
</style>