xiaoyou-h5/pages/index/alumni_style.vue

<template>
	<view class="alumni_style">
		<image :src="introduction.cover_resource?introduction.cover_resource.url:''" mode=""></image>
		<view class="title">
				{{introduction.title}}
		</view>
		<view class="introduction">
			<view class="text">{{introduction.name}}简介
				<text class="shadow">INTRODUCTION</text>
			</view>
			<view class="line">
				
			</view>
		</view>
		<view class="introduction_text">
			<text class="name">{{introduction.name}}简介</text>
			<view class="content">
				{{introduction.short_description}}
			</view>
		</view>
		<view class="honour" v-if="false">
			<view class="titles">"科学探索奖"介绍
				<text class="shadow">INTRODUCTION</text>
			</view>
			<view class="short">
				肖晓波校友入选“全球36位35岁以下创新者下创新者”2019年度青年学者，荣获“科学探索奖”2020年再次荣获全兴学者。			
			</view>
			<view class="content_text">
				<text class="honour_title">科学探索奖介绍</text>
				<view class="content">
					肖晓波校友入选“全球36位35岁以下创新者下创新者”2019年度青年学者，荣获“科学探索奖”2020年再次荣获全兴学者
				</view>
			</view>
		</view>
		<view class="tel_wrap">
			<view class="title">
				联系方式
			</view>
			<view class="tel">
				<text>联系电话：{{introduction.tel}}</text>
				<text>联系QQ号：{{introduction.qq}}</text>
				<text>联系邮箱：{{introduction.email}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				introduction:{
					title:"肖晓波校友入选“全球36位35岁以下创新者下创新者”2019年度青年学者，荣获“科学探索奖”2020年再次荣获全兴学者",
					intro:"班级总人数88人班级总人数88人班级总人数88 人班级总班级总人数88人班级总人数88人班级 总人数88人班级总班级总人数88人班级总人数 88人班级总人数88人班级总班级总人数88人班 级总人数88人班级总人数88人班级总班级总人数88人班 级总人数88人班级总",
					name:'肖晓波教授',
					tel:'1234567899',
					qq:'12358475986',
					email:'5748945@123.com'
				}
			}
		},
		onLoad(option) {
		
			console.log(option.id,'id')
			this.get_content(option.id)
			
		},
		methods:{
			
			get_content(id){
				let params = {
					title:'',
					organization_id:'',
					category_id:2,
					id:id
				}
				this.$u.get('/page/news',params).then(res=>{
					console.log(res,'content')
					// this.introduction = res.data.data[0]
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.alumni_style{
		image{
			width: 100%;
			height: 198px;
		}
		.title{
			padding: 20px 16px ;
			font-size: 17px;
			font-family: Graphit;
			font-weight: 500;
			line-height: 20px;
			color: #282828;
		}
		.introduction{
			padding: 0 0 0 16px;
			.text{
				display: inline-block;
				font-size: 17px;
				font-family: PingFang HK;
				font-weight: 500;
				line-height: 20px;
				color: #282828;
				position: relative;
			}
			.shadow {
				display: block;
				position: absolute;
				width: 28px;
				height: 17px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #84705E;
				opacity: 0.24;
				bottom: -5px;
				left: 14px;
			}
			
			.line{
				width: 231px;
				height: 14px;
				background: #EEEEEE;
				margin-left: 9px;
				display: inline-block;
			}
		}
		.introduction_text{
			margin: 17px 16px 0;
			background: #EEEEEE;
			opacity: 1;
			border-radius: 14px;
			.name{
				display: block;
				font-size: 16px;
				font-family: PingFang HK;
				font-weight: 500;
				line-height: 20px;
				color: #282828;
				padding: 24px 0 16px 24px;
			}
			.content{
				font-size: 14px;
				font-family: PingFang HK;
				font-weight: 400;
				line-height: 20px;
				color: #696969;
				padding: 0 26px 30px;
			}
		}
		.honour{
			padding: 0 16px;
			margin-top: 23px;
			.titles{
				font-size: 17px;
				font-family: PingFang HK;
				font-weight: 500;
				line-height: 20px;
				color: #282828;
				text-align: center;
				position: relative;
			}
			.shadow {
				display: block;
				position: absolute;
				// padding: 0 16px;
				width: 100%;
				text-align: center;
				height: 17px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #84705E;
				opacity: 0.24;
				bottom: -5px;
				// left: 14px;
			}
			
			.short{
				margin-top: 17px;
				font-size: 17px;
				font-family: Graphit;
				font-weight: 500;
				line-height: 20px;
				color: #282828;
			}
			.content_text{
				margin-top: 35px;
				background: #EEEEEE;
				border-radius: 14px;
				.honour_title{
					display: block;
					font-size: 16px;
					font-family: PingFang HK;
					font-weight: 500;
					line-height: 20px;
					color: #282828;
					padding: 24px 0 16px 24px;
				}
				.content{
					font-size: 14px;
					font-family: PingFang HK;
					font-weight: 400;
					line-height: 20px;
					color: #696969;
					padding: 0 26px 30px;
				}
			}
		}
		.tel_wrap{
			padding-bottom: 20px;
			.tel{
				margin: 0 16px;
				text{
					display: block;
					font-size: 14px;
					font-family: PingFang HK;
					font-weight: 400;
					line-height: 19px;
					color: #101010;
					opacity: 0.6;
					margin-bottom: 3px;
				}
				
			}
		}
	}
</style>