<template>
	<Layout :index="-1" :banner="0" :imgs="0" :img="'/static/img/zj_banner.png'" :titles="'专家库'" :title_content="'寻找您心仪的游戏'">
		<view class="content-expert ">
			
			<view class="expert_list " v-for="(item,index) in listData" :key="index">
				<image class="avatar" :src="item.logo.file_path"></image>
				<view class="avatar_desc">
					<view class="name" :class="{'names':index==5}">
						<text>{{item.name}}</text>
						<text class="zj" :class="{'zjs':index==5}">{{item.position}}</text>
					</view>
					<view class="c_name">{{item.company}}</view>
					<view class="sc_name">擅长领域：</view>
					<view class="sc_desc">
						{{item.summary}}
					</view>
				</view>
			</view>
			
			<view class="more-expert"> 更多专家入驻中，敬请期待～</view>
		</view>
	     <!-- <el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination> -->
	</Layout>
</template>

<script>
	import Layout from './part/layout.vue';
	export default {
		components:{
			Layout
		},
		data(){
			return {
				page: 1,
				list_rows: 9,
				listData: [],
				total: 0,
			}
		},
		created() {
			this.getData();
		},
		beforeDestroy() {
		},
		methods:{
			getData(){
				this._get('game.index/expert_list',{
					page: this.page,
					list_rows: this.list_rows,
				},res=>{
					this.listData = res.data.list.data;
					console.log(this.listData,22)
					this.total = res.data.list.total;
					
				});
			},
			}
	}
</script>

<style lang="scss">
	.more-expert{
		width: 100%;
		height: 27px;
		font-size: 27px;
		font-weight: 400;
		color: #9E9E9E;
		line-height: 27px;
		margin: 0 auto;
		text-align: center;
	}
	.content-expert{
		background-image: url('../static/img/index/gbgs.png');
		background-size: 100%;
		background-repeat: no-repeat;
		min-height: 400px;
		text-align: center;
		padding: 79px 160px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.expert_list{
			width: 509px;
			height: 284px;
			background: #3C3C3C;
			border-radius: 8px;
			display: flex;
			margin-bottom: 37px;
			.avatar{
				width: 203px;
				height: 284px;
			}
			.avatar_desc{
				padding: 40px 25px;
				width: 253px;
				text-align: left;
				.name{
					border-bottom: 1px solid #9E9E9E;
					display: flex;
					justify-content: space-between;
					padding-bottom: 10px;
					margin-bottom: 10px;
					font-size: 24px;
					font-weight: 400;
					color: #FFFFFF;
					.zj{
						width: 140px;
						font-size: 18px;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 32px;
						text-align: right;
					}
				}
				.c_name{
					font-size: 19px;
					font-weight: 400;
					color: #9E9E9E;
					line-height: 32px;
				}
				.sc_name{
					font-size: 21px;
					font-weight: 400;
					color: #9E9E9E;
					line-height: 32px;
					margin: 12px 0 6px 0;
				}
				.sc_desc{
					font-size: 19px;
					font-weight: 400;
					color: #F8F8F8;
					line-height: 27px;
					 display: -webkit-box; /* Safari */
					overflow: hidden;
					text-overflow: ellipsis;
					line-clamp: 3; /* 只显示一行文本 */
					-webkit-line-clamp: 3; /* Safari */
					-webkit-box-orient: vertical; /* Safari */
				}
			}
			
		}
	}
	@media screen and (max-width: 768px) {
		.content-expert{
			flex-direction: column;
			background-size: 100% 100%;
			 background-repeat: repeat;
		}
	 .expert_list{
		 width: 65% !important;
		 height: 70px !important;
		 margin-bottom: 14px !important;
		 margin: 0 auto;
	 }
	 .avatar{
		  width: 20% !important;
		  margin-top: 5px;
		  margin-left: 5px;
	 }
	 .avatar_desc{
		 width: 80% !important;
	 }
	 .zj{
		 width: 70% !important;
		 line-height: 10px !important;
	 }
	 .zjs{
		width: 50% !important; 
	 }
	 .name{
		 font-size: 12px !important;
	 }
	 .names{
	 	font-size: 6px !important;
	 }
	 .c_name{
		font-size: 10px !important;
		margin-top: 5px;
	 }
	 .sc_name{
		 width: 100% !important;
		 margin-top: 5px !important;
		 font-size: 6px !important;
	 }
	 .sc_desc{
		 font-size: 10px !important;
		 height: 14px !important;
		 line-height: 14px !important;
		 margin-top: 2px;
	 }
	 
	}
	
</style>
