all
This commit is contained in:
我是个攻城狮
@@ -0,0 +1,195 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user