wangluohuoyun_website/pages/index/zxDetail.vue

<template>
	<view class="container">
		<top></top>
		<view class="content1">
			<view class="left">
				<view class="nav-title">
					首页 / 资讯 / 资讯详情
				</view>
				<view class="content-title">
					{{dataObj.title}}
				</view>
				<view class="ej-title">
					<view class="fb-time">
						{{dataObj.issuingDate}}
					</view>
					<view class="ly">
						<view class="ly-text">
							来源：
						</view>

						<view class="ly-name">
							{{dataObj.issuingAgency}}
						</view>
					</view>
				</view>
				<u-line color="#F5F5F5" style='margin:44px 0'></u-line>

				<view class="" v-html="dataObj.releaseContent"></view>
			</view>
			<view class="right">
				<view class="right-title">
					<view class="">
						行业资讯
					</view>
					<view class="more" @click="moreClick">
						更多 >
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="item in tableData">
						<view class="point">

						</view>
						<view class="content-text">
							<view class="row1">
								{{item.title}}
							</view>
							<view class="date">
								{{item.issuingDate}}
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import top from '@/components/top.vue'
	import bottom from '@/components/bottom.vue'
	export default {
		components: {
			top,
			bottom
		},
		data() {
			return {
				navTitle: '',
				type: "",
				id: '',
				dataObj: {},
				tableData: [],
				pageSize: 10,
				// 当前页
				currentPage: 1,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.init()
		},
		methods: {
			init() {
				this.$request.baseRequest('get', '/hyPublicConsultation/getHyPublicConsultation', {
						id: this.id,
					}).then(res => {
						console.log("res", res)
						if (res.code == 200) {
							this.dataObj = res.data

							uni.hideLoading()

						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
				this.$request.baseRequest('get', '/hyPublicConsultation/selectHyPublicConsultation', {
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						searchKeyWord: '',
						searchType: '资讯'
					}).then(res => {
						console.log("res", res)
						if (res.code == 200) {
							this.tableData = res.data.records
							this.total = res.data.total
							uni.hideLoading()

						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			moreClick(type) {
				uni.navigateTo({
					url: "/pages/index/zx"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content1 {
		width: 80%;
		// background: white;
		margin: 80rpx auto;
		padding: 40rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.left {
			width: 65%;
			background: white;
			padding: 40rpx 80rpx;
		}

		.right {
			margin-left: 40rpx;
			width: 30%;
			background: white;
		}

		.nav-title {
			font-size: 28rpx;
			color: #66686C;
			line-height: 20px;
		}

		.content-title {
			display: flex;
			justify-content: center;
			font-size: 68rpx;
			font-weight: 500;
			color: #0B0B0B;
			line-height: 48px;
			margin: 40rpx 0;
		}

		.ej-title {
			display: flex;

			.ly {
				margin-left: 40rpx;
				display: flex;
				font-size: 28rpx;
				color: #A7A7A7;
				line-height: 40rpx;

				.ly-name {
					color: #0B0B0B
				}
			}

			.fb-time {
				font-size: 28rpx;
				color: #A7A7A7;
				line-height: 40rpx;
			}
		}

		.right {
			.right-title {
				background: #e9dcdc;
				display: flex;
				justify-content: space-between;
				padding: 10px;
			}

			.more {
				color: #2F54EF;
			}

			.item {
				border-bottom: 1px solid #F5F5F5;
			}

			.content-text {
				padding: 40rpx;
				box-sizing: border-box;

				.row1 {
					font-size: 36rpx;
					color: #333333;
				}

				.date {
					font-size: 36rpx;
					color: #90969B;
					margin-top: 10rpx;
				}
			}

			.item:nth-of-type(5) {
				border: 0;
			}

		}


	}
</style>