我是个攻城狮
196 lines
4.1 KiB
Vue
196 lines
4.1 KiB
Vue
<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>
|