xingmingyi_applet/pages/index/school/schoolInfo.vue

<template>
	<view class="content">
		<view class="box">
			<view class="vidLi">
				<view class="libox dfsb">
					<view class="imgbox dfsb"><image :src="newsInfo.logo" mode=""></image></view>
					<view class="dffd flex1">
						<view class="title">{{ newsInfo.name }}</view>
						<view class="subtit">
							<text v-for="(item, ind) in newsInfo.tags" :key="ind" class="fontssm">{{ item }}</text>
						</view>
					</view>
				</view>
				<view class="vidinfo dfsb">
					<view class="li dffs fontssm">
						<image src="/static/img/pro/scadd.png" mode=""></image>
						{{ newsInfo.type_name }}
					</view>
					<view class="li dffs fontssm">
						<image src="/static/img/pro/scthr.png" mode=""></image>
						<!-- flag   1 = 公办 2 = 民办 -->
						{{ newsInfo.flag == 1 ? '公办' : '民办' }}
					</view>
					<view class=" li dffs fontssm">
						<image src="/static/img/pro/scadd.png" mode=""></image>
						{{ newsInfo.address }}
					</view>
				</view> 
			</view>
		</view>
		<view class="conwarp">
			<view class="gdHead bb">学校简介</view>
			<view class="auth">
				<view :style="{ height: height1 }" class="tit fontssm textgrey"><u-parse :content="newsInfo.content"></u-parse></view>
				<text @click="changHeight(1)" class="fontssm show green">{{ height1 == '100%' ? '收起' : '查看全部' }}</text>
			</view>
		</view>
		<view class="conwarp">
			<view class="gdHead bb">办学优势</view>
			<view class="auth">
				<view :style="{ height: height2 }" class="tit fontssm textgrey"><u-parse :content="newsInfo.advantage"></u-parse></view>
				<text @click="changHeight(2)" class="fontssm show green">{{ height2 == '100%' ? '收起' : '查看全部' }}</text>
			</view>
		</view>
		<view class="conwarp">
			<view class="gdHead bb">专业设置</view>
			<view class="auth">
				<view :style="{ height: height3 }" class="tit fontssm textgrey"><u-parse :content="newsInfo.major"></u-parse></view>
				<text @click="changHeight(3)" class="fontssm show green">{{ height3 == '100%' ? '收起' : '查看全部' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			height1: '196rpx',
			height2: '196rpx',
			height3: '196rpx',
			newsInfo: {}
		};
	},
	onPullDownRefresh() {
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onLoad(opt) {
		this.id = opt.id;
		this.getInfoList();
	},
	methods: {
		// 修改高度
		changHeight(val) {
			if (val == 1) {
				if (this.height1 == '100%') {
					this.height1 = '196rpx';
				} else {
					this.height1 = '100%';
				}
			} else if (val == 2) {
				if (this.height2 == '100%') {
					this.height2 = '196rpx';
				} else {
					this.height2 = '100%';
				}
			} else {
				if (this.height3 == '100%') {
					this.height3 = '196rpx';
				} else {
					this.height3 = '100%';
				}
			}
		},
		getInfoList() {
			this.$api
				.request('index/getSchoolInfo', {
					id: this.id
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						let tags = data.data.up_name.split('|');
						this.newsInfo = data.data;
						this.newsInfo.tags = tags;
					} else {
						this.$api.toast(data.msg);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.box {
		width: 750rpx;
		// height: 386rpx;
		background: linear-gradient(360deg, rgba(147, 173, 158, 0) 0%, #14ac54 100%);
		padding: 58rpx 30rpx 0rpx;
	}
	.vidLi {
		width: 100%;
		padding: 40rpx 38rpx 42rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.imgbox {
			width: 95rpx;
			height: 95rpx;
			margin-right: 30rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.libox {
			width: 100%;
			margin-bottom: 30rpx;
		}
		.title {
			overflow: hidden;
			font-size: 30rpx;
			line-height: 42rpx;
		}
		.subtit {
			margin-top: 15rpx;
			.fontssm {
				padding: 3rpx 12rpx;
				color: #14ac54;
				background: rgba(20, 172, 84, 0.1);
				border-radius: 6px;
				border: 1px solid #14ac54;
				margin-right: 15rpx;
			}
		}
		.vidinfo {
			padding: 24rpx 0;
			background: rgba(#14ac54, 0.1);
			border-radius: 13rpx 13rpx 0 0;
			flex-wrap: wrap;
			&:nth-of-type(2) {
				border-radius: 0 0 13rpx 13rpx;
			}

			.li { 
				padding: 0 30rpx;
				justify-content: center;
				align-items: center; 
				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 11rpx;
				}
				&:last-of-type{
					margin-top: 20rpx;
				}
			}
			.spec{
				width: 100%;
				justify-content: flex-start;
			}
		}
	}
	.conwarp {
		background-color: #fff;
		padding: 32rpx 30rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.gdHead {
			padding: 15rpx 18rpx;
			line-height: 58rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			border-left: 5rpx solid #15ab54;
		}
		.auth {
			margin-top: 15rpx;
			width: 100%;
			position: relative;
			.tit {
				font-size: 24rpx;
				line-height: 40rpx;
				overflow: hidden;
			}
			.show {
				height: 38rpx;
				line-height: 38rpx;
				position: absolute;
				background-color: #fff;
				bottom: 0;
				right: 0;
			}
		}
	}
}
</style>