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

<template>
	<view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');">
    <scroll-view :scroll-y="true" style="height: 100vh;position: relative;z-index: 1;">
      <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>
					</view>
          <view class="main-ceontent-list">
            <!-- 人才政策 -->
            <view>
              <view
                class="main-ceontent-list-item"
                v-if="policyDetail.applicableObjects"
              >
                <view class="main-ceontent-list-item-title">政策对象</view>
                <view class="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
        })
			},
			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>
	.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%
    );
  }
}
</style>