EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/law/lawServiceDetail.vue

<template>
    <div class="law-service-detail-page">
        <!-- 顶部导航栏 -->
        <van-nav-bar
            title="普法服务"
            left-text="关闭"
            left-arrow
            @click-left="onClickLeft"
        >
            <!-- <template #right>
                <van-icon name="filter-o" size="20" @click="onFilterClick" />
                <van-icon name="search" size="20" style="margin-left: 12px;" @click="onSearchClick" />
            </template> -->
        </van-nav-bar>

        <!-- 内容区域 -->
        <div class="detail-content">
            <!-- 标题 -->
            <h1 class="detail-title">{{ detail.title }}</h1>

            <!-- 来源和时间 -->
            <div class="detail-meta">
                <span class="detail-source">{{ detail.source }}</span>
                <span class="detail-time">{{ detail.time }}</span>
            </div>

            <!-- 正文 -->
            <div class="detail-body">
                <p v-for="(paragraph, index) in detail.content" :key="index">
                    {{ paragraph }}
                </p>
            </div>

            <!-- 图片 -->
            <div class="detail-images" v-if="detail.images && detail.images.length">
                <img
                    v-for="(img, index) in detail.images"
                    :key="index"
                    :src="img"
                    alt=""
                    @click="previewImage(index)"
                />
            </div>
        </div>
    </div>
</template>

<script setup name="lawServiceDetail">
import { showToast, showImagePreview } from 'vant';
import 'vant/es/toast/style';
import 'vant/es/image-preview/style';

const router = useRouter();
const route = useRoute();

// ========== 详情数据（模拟） ==========
const detail = ref({
    id: route.query.id || 1,
    title: '深圳市司法局联合检察院开展普法宣传活动',
    source: '深圳司法局',
    time: '2026-03-31 10:25:33',
    content: [
        '为深入贯彻落实《中华人民共和国社区矫正法》(以下简称《社区矫正法》)，进一步提升社区矫正工作规范化、法治化水平，提高社会知晓度与影响力，3月30日，深圳市司法局联合市检察院开展了《社区矫正法》实施五周年系列主题宣传活动。',
        '活动现场，检察干警通过设立法律咨询台、摆放展板、向群众发放《社区矫正法》重点条文图解、典型案例宣传彩页等方式，让群众对社区矫正知识有了更加直观的了解。',
        '围绕群众普遍关心的"社区矫正对象在社区如何管理"、"社区矫正是否会影响公共安全"、"如何监督社区矫正对象行为"等问题，检察干警以通俗易懂的语言进行了现场答疑解惑，引导群众正确认识社区矫正工作，呼吁群众多多理解、积极关注并支持社区矫正工作，协助监管身边的社区矫正对象。',
    ],
    images: [
        'https://picsum.photos/800/500?random=1',
    ],
});

// ========== 返回上一页 ==========
const onClickLeft = () => {
    router.back();
};

// ========== 筛选点击 ==========
const onFilterClick = () => {
    showToast('筛选功能开发中');
};

// ========== 搜索点击 ==========
const onSearchClick = () => {
    showToast('搜索功能开发中');
};

// ========== 预览图片 ==========
const previewImage = (index) => {
    showImagePreview({
        images: detail.value.images,
        startPosition: index,
    });
};
</script>

<style lang="less" scoped>
.law-service-detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;

    .detail-content {
        flex: 1;
        overflow-y: auto;
        padding: 0.4rem 0.4rem 0.6rem;
    }
}

/* ===== 导航栏样式覆盖 ===== */
:deep(.van-nav-bar) {
    background-color: #fff;
}

:deep(.van-nav-bar__title) {
    font-size: 0.45rem;
    font-weight: 600;
    color: #333;
}

:deep(.van-nav-bar__text) {
    font-size: 0.35rem;
    color: #333;
}

:deep(.van-nav-bar .van-icon) {
    color: #333;
}

/* ===== 详情内容样式 ===== */
.detail-title {
    font-size: 0.55rem;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.detail-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;

    .detail-source {
        font-size: 0.3rem;
        color: #2d94fa;
        margin-right: 0.3rem;
    }

    .detail-time {
        font-size: 0.3rem;
        color: #999;
    }
}

.detail-body {
    p {
        font-size: 0.37rem;
        color: #333;
        line-height: 1.8;
        text-indent: 2em;
        margin-bottom: 0.3rem;
    }
}

.detail-images {
    margin-top: 0.3rem;

    img {
        width: 100%;
        border-radius: 0.15rem;
        margin-bottom: 0.2rem;
        display: block;
    }
}
</style>