Files
ks-app-employment-service/packageRc/pages/policy/policyDetail.vue

389 lines
9.8 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="page h5-pc-page" style="background-image: url(../../../packageRc/static/pageBg.png);">
<scroll-view :scroll-y="true" style="height: 100vh;position: relative;z-index: 1;" :show-scrollbar="false">
<view class="input-outer-part"
style="padding: 24rpx 32rpx 0;max-height: unset;">
<view class="basic-info-content-main" v-if="!loading">
<view class="part-item" style="padding-top: 20rpx;">
<view style="display: flex" class="top-line">
<view
class="left"
>
<image src="/packageRc/static/cyzc.png" />
</view>
<view class="right">
<view class="title-line">{{ policyDetail.zcmc }}</view>
</view>
</view>
<view class="tags">
<view class="tag">政策级别{{ policyDetail.zcLevel }}</view>
</view>
<view class="infos">
<view class="info">发文单位{{ policyDetail.sourceUnit }}</view>
<view class="info">发布时间{{ policyDetail.publishTime || '--' }}</view>
<view class="info">浏览量{{ policyDetail.viewNum || 0 }}</view>
</view>
</view>
<view class="main-ceontent-list">
<!-- 人才政策 -->
<view>
<view
class="main-ceontent-list-item"
v-if="policyDetail.applicableObjects"
>
<view :class="['main-ceontent-list-item-title', isPc ? 'pc-main-ceontent-list-item-title' : '']">政策对象</view>
<view :class="['main-ceontent-list-item-content', isPc ? 'pc-main-ceontent-list-item-content' : '']">
<span
v-if="policyDetail.applicableObjects"
v-html="policyDetail.applicableObjects"
></span>
<span v-else> -- </span>
</view>
</view>
<view
class="main-ceontent-list-item"
v-if="policyDetail.policyExplanation"
>
<view class="main-ceontent-list-item-title">政策说明</view>
<view class="main-ceontent-list-item-content">
<span
v-if="policyDetail.policyExplanation"
v-html="policyDetail.policyExplanation"
></span>
<span v-else> -- </span>
</view>
</view>
<view
class="main-ceontent-list-item"
v-if="policyDetail.applyCondition"
>
<view class="main-ceontent-list-item-title">申报条件</view>
<view class="main-ceontent-list-item-content">
<span
v-if="policyDetail.applyCondition"
v-html="policyDetail.applyCondition"
></span>
<span v-else> -- </span>
</view>
</view>
<view class="main-ceontent-list-item">
<view class="main-ceontent-list-item-title">政策内容</view>
<view class="main-ceontent-list-item-content">
<span v-if="policyDetail.zczc" v-html="policyDetail.zczc"></span>
<span v-else> -- </span>
</view>
</view>
</view>
<view class="main-ceontent-list-item" >
<view class="main-ceontent-list-item-title">补贴标准</view>
<view class="main-ceontent-list-item-content">
<span v-if="policyDetail.btbz" v-html="policyDetail.btbz"></span>
<span v-else> -- </span>
</view>
</view>
<view class="main-ceontent-list-item" >
<view class="main-ceontent-list-item-title">经办渠道</view>
<view class="main-ceontent-list-item-content">
<span v-if="policyDetail.jbqd" v-html="policyDetail.jbqd"></span>
<span v-else> -- </span>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import { getPolicyDetail } from "@/packageRc/apiRc/policy";
export default {
data() {
return {
policyDetail: {},
loading: false,
}
},
onLoad(options) {
this.getPolicy(options.id);
},
onShow() {
},
methods: {
getPolicy(id) {
getPolicyDetail({id}).then(res => {
this.policyDetail = res.data
}).catch(err => {
// #ifdef H5 || APP-PLUS
// 仅在测试环境下,注入大段文本验证排版
this.policyDetail = {
zcmc: '【条件编译测试】支持高校毕业生在本地创业就业的若干激励措施(接口失败模拟)',
zcLevel: '省级重点',
sourceUnit: '人社测试局',
publishTime: '2026-03-10',
viewNum: 9999,
applicableObjects: '1. 本市户籍的高校毕业生;<br/>2. 创业青年群体。',
policyExplanation: '本政策旨在吸引更多高素质人才留在本市发展。',
applyCondition: '具有全日制本科及以上学历且毕业在5年内。',
zczc: '最高50万元奖励办公场地免租3年。',
btbz: '本科5000元/月硕士10000元/月连续发放3年。',
jbqd: '政务中心2楼窗口、线上小程序入口。'
}
// #endif
})
},
getDictLabel(value, list) {
if (list) {
let arr = list.filter(ele => ele.dictValue == value)
if (arr.length) {
return arr[0].dictLabel
} else {
return '--'
}
}
},
}
}
</script>
<style lang="scss" scoped>
/* 隐藏滚动条 */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
.page {
background-color: #f4f4f4 !important;
height: 100vh;
background-repeat: no-repeat;
background-size: 100% auto;
}
.basic-info-content-main {
margin: 0 auto;
box-sizing: border-box;
}
.part-item{
background: #fff;
border-radius: 16rpx;
padding: 40rpx 32rpx;
margin-bottom: 32rpx;
}
.top-line {
display: flex;
margin-bottom: 24rpx;
align-items: center;
.left {
margin-right: 24rpx;
width: 86rpx;
color: #fff;
font-size: 22rpx;
height: 86rpx;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 100%;
}
.text {
text-align: center;
}
}
.right {
width: calc(100% - 110rpx);
.title-line {
font-size: 32rpx;
font-weight: bold;
color: #3d3d3d;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.infos{
margin-top: 16rpx;
font-size: 24rpx;
.info{
margin-top: 5rpx;
color: #3D3D3D;
}
}
.part-title{
font-weight: bold;
font-size: 28rpx;
margin-bottom: 32rpx;
}
.part-info{
font-size: 28rpx;
}
.part-inline{
margin-bottom: 32rpx;
display: flex;
.part-title{
width: 180rpx;
text-align: right;
margin-bottom: 0;
}
.part-info{
margin-left: 20rpx;
flex-grow: 1;
flex-shrink: 1;
}
}
.notice-list {
.notice-item {
background-color: #fff;
color: #333;
// box-shadow: 0 0 10px #e4e4e4;
}
.title {
font-size: 36rpx;
text-align: center;
font-weight: bold;
margin-bottom: 8rpx;
}
.from-title {
font-size: 24rpx;
color: #a9b4c3;
text-align: center;
}
.notice-content {
min-height: 800rpx;
font-size: 24rpx;
text-align: justify;
padding-top: 20rpx;
border-top: 1rpx solid #d8d8d8;
margin-top: 14rpx;
}
}
.enclosure-list {
margin: 30rpx 0;
padding: 0 40rpx;
.enclosure-item {
font-size: 24rpx;
color: #006cd9;
}
}
.main-ceontent-list {
width: 100%;
border-radius: 4px;
min-height: 80rpx;
padding: 32rpx;
margin-top: 24rpx;
background-color: #fff;
box-sizing: border-box;
.main-ceontent-list-top {
font-family: Alimama ShuHeiTi;
font-size: 28rpx;
display: flex;
justify-content: space-between;
font-weight: bold;
}
.main-ceontent-list-title {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: bold;
line-height: normal;
text-align: center;
font-feature-settings: "kern" on;
color: #3d3d3d;
margin-top: 24rpx;
}
}
.main-ceontent-list-item {
margin-bottom: 24rpx;
.main-ceontent-list-item-title {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: bold;
line-height: 40rpx;
letter-spacing: 0.04em;
margin-bottom: 16rpx;
font-variation-settings: "opsz" auto;
font-feature-settings: "kern" on;
color: #055ed9;
}
.main-ceontent-list-item-content {
flex-direction: column;
box-sizing: border-box;
padding: 10px;
gap: 10px;
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: normal;
line-height: 40rpx;
letter-spacing: 0.04em;
font-variation-settings: "opsz" auto;
font-feature-settings: "kern" on;
color: #000000;
background: linear-gradient(
270deg,
rgba(222, 233, 245, 0.32) 0%,
#dee9f5 100%
);
}
}
/* #ifdef H5 */
.h5-pc-page {
width: 100% !important;
.input-outer-part {
width: 80% !important;
margin: 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.title-line {
font-size: 52rpx !important;
line-height: 1.4 !important;
}
.infos {
font-size: 38rpx !important;
line-height: 1.8 !important;
.info {
margin-top: 10rpx !important;
}
}
.main-ceontent-list-item-title {
font-size: 42rpx !important;
line-height: 60rpx !important;
margin-bottom: 24rpx !important;
}
.main-ceontent-list-item-content {
font-size: 38rpx !important;
line-height: 56rpx !important;
padding: 24rpx !important;
}
.tag {
font-size: 34rpx !important;
}
}
/* #endif */
</style>