Files
YGChatCS/src/pages/ChatMain/NoticeMessage/detail.vue
duanshuwen c125154a75 refactor: remove margin utils, use inline pixel spacing
Delete the src/static/scss/margin.scss utility file, update all component templates to replace pre-defined margin classes with inline arbitrary pixel values (e.g. mb-[4px] instead of mb-4), and clean up long template lines for better readability.
2026-07-24 22:02:09 +08:00

75 lines
2.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="flex flex-col bg-liner h-screen overflow-hidden">
<!-- 顶部固定导航 -->
<view class="flex-shrink-0">
<TopNavBar :title="detailTitle" background="transparent" />
</view>
<!-- 滚动区域 -->
<scroll-view class="flex-full overflow-hidden" scroll-y>
<view class="pb-[24px] overflow-hidden">
<image v-if="coverImage" class="w-full h-auto block" :src="coverImage" mode="widthFix" />
<view class="pt-[16px] px-[12px] pb-[24px] border-box">
<view class="text-[#171717] font-size-16 font-weight-600">{{ detailTitle }}</view>
<view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />
<text class="text-[#171717] font-size-12 font-weight-600 ml-[8px]">发布时间{{ publishTime }}</text>
</view>
<view class="mt-[20px] pt-[16px] text-[#666666] font-size-14 leading-[20px] border-top">{{ noticeContent }}
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import TopNavBar from "@/components/TopNavBar/index.vue";
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const noticeData = ref({});
const detailTitle = computed(() => {
return noticeData.value.entityName?.trim() || "消息详情";
});
const publishTime = computed(() => {
return noticeData.value.effectiveStartTime?.trim();
});
const coverImage = computed(() => {
return noticeData.value.imgUrl?.trim();
});
const noticeContent = computed(() => {
return noticeData.value.eventDescription?.trim();
});
onLoad((query = {}) => {
if (query.noticeData) {
try {
noticeData.value = JSON.parse(decodeURIComponent(query.noticeData));
} catch (error) {
console.warn("noticeData parse failed:", error);
}
}
});
</script>
<style lang="scss" scoped>
.notice-time-tag {
display: inline-flex;
height: 28px;
padding: 6px 12px;
background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
border: 1px solid #d6dde8;
border-radius: 14px;
box-sizing: border-box;
}
</style>