xingmingyi_applet/pages/index/navInfo.vue

<template>
	<view class="content">
		<view class=" vidLi dfsb">
			<view class="imgbox"><image src="../../static/img/pro/ordlist.png" mode=""></image></view>
			<view class="dffd flex1">
				<view class="title elli">名师揭秘 - 英语领跑多科目强化课名师揭秘 - 英语领跑多科目强化课名师揭秘 - 英语领跑多科目强化课</view>
				<view class="textgrey fontsm">八年级｜物理｜视频课</view>
				<view class="auth">
					<view :style="{ height: height }" class="tit fontssm textgrey">
						简介：中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20中考政策在近两年不会改变,初中20
					</view>
					<text @click="changHeight()" class="fontssm show green">展开</text>
				</view>
			</view>
		</view>
		<view class="conwarp">
			<view class="gdHead dfsb">
				<view class="head">基础知识过关</view>
				<view class="fontssm textgrey dffs">
					查看更多
					<u-icon name="arrow-right" color="#999" size="10"></u-icon>
				</view>
			</view>
			<view class="fl-five"><video-list :flag="2" :list="baosList"></video-list></view>
		</view>
	</view>
</template>

<script>
import videoList from './components/wordlist.vue';
export default {
	components: {
		videoList
	},
	data() {
		return {
			height: '64rpx',
			baosList: [
				{ image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' },
				{ image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' },
				{ image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' },
				{ image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' },
				{ image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' }
			]
		};
	},
	onPullDownRefresh() {
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onLoad() {
		this.getInfoList();
	},
	methods: {
		// 修改高度
		changHeight() {
			console.log(this.height == 'auto');
			if (this.height == '100%') {
				this.height = '64rpx';
			} else {
				this.height = '100%';
			}
		},
		getInfoList() {
			let url = 'index/getClassInfo';
			this.$api
				.request(url, {
					id: this.id
				})
				.then(res => {
					if (res.code == '200') {
						let data = res.data;
						this.goodInfo = data;
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.vidLi {
		width: 100%;
		padding: 55rpx 35rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		align-items: flex-start;
		.imgbox {
			position: relative;
			width: 176rpx;
			height: 244rpx;
			margin-right: 27rpx;
			.left-img {
				position: absolute;
				top: 0;
				left: 0;
				height: 33rpx;
				line-height: 33rpx;
				font-size: 18rpx;
				color: #fff;
				padding: 0 5rpx;
				background: #e84325;
				border-radius: 7rpx;
			}
			image {
				width: 100%;
				height: 100%;
			}
		}
		.title {
			overflow: hidden;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 12rpx;
		}
		.auth {
			margin-top: 15rpx;
			width: 100%;
			position: relative;
			.tit {
				overflow: hidden;
			}
			.show {
				height: 32rpx;
				position: absolute;
				background-color: #fff;
				bottom: 0;
				right: 0;
			}
		}
	}
	.conwarp {
		background-color: #fff;
		padding: 32rpx 30rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.gdHead {
			line-height: 58rpx;
			margin-bottom: 16rpx;
			.head {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
}
</style>