|
|
@@ -44,7 +44,38 @@
|
|
|
<el-col :span="24" class="three">
|
|
|
<div class="w_1200">
|
|
|
<el-col :span="24" class="threeinfo">
|
|
|
- 专家信息
|
|
|
+ <el-col :span="24" class="topInfo">
|
|
|
+ <el-col :span="12" class="topName">技术专家</el-col>
|
|
|
+ <el-col :span="12" class="topSite">
|
|
|
+ <span>您当前的位置：</span><el-link href="/halltwo/directTwo" :underline="false" class="link">首页</el-link><span> > 技术专家</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <el-col :span="6" class="card" v-for="(item, index) in expertList2" :key="index">
|
|
|
+ <el-link href="" :underline="false" class="linkCon">
|
|
|
+ <el-image :src="item.expertimage" style="width: 100%; height: 100%" v-if="item.expertimage"></el-image>
|
|
|
+ <el-image v-else>
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <el-image :src="url7" style="width:100%;height:100%"></el-image>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ </el-link>
|
|
|
+ <div class="text">
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <p>对接</p>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="page1" :span="24">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ :page-size="pageSize"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -83,6 +114,8 @@
|
|
|
import liveFoot from '@/layout/live/foot.vue';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
const { mapActions: dock } = createNamespacedHelpers('dock');
|
|
|
+const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
|
|
|
+
|
|
|
export default {
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
@@ -96,10 +129,18 @@ export default {
|
|
|
return {
|
|
|
two1: require('@a/sy_04.png'),
|
|
|
two2: require('@a/dock2.png'),
|
|
|
+ url7: require('@a/live/222.png'),
|
|
|
// 展會詳情
|
|
|
dockInfo: {},
|
|
|
// 指导单位
|
|
|
erweima: require('@a/二维码.jpg'),
|
|
|
+ //专家列表
|
|
|
+ expertList: [],
|
|
|
+ total: 0,
|
|
|
+ pageSize: 20,
|
|
|
+ currentPage: 1,
|
|
|
+ origin: [],
|
|
|
+ expertList2: [],
|
|
|
};
|
|
|
},
|
|
|
async created() {
|
|
|
@@ -107,6 +148,7 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
|
|
|
+ ...expertsuser({ expertQuery: 'query', expertquery: 'expertquery' }),
|
|
|
async searchInfo() {
|
|
|
// 查询展会详情
|
|
|
if (this.dock_id) {
|
|
|
@@ -115,6 +157,18 @@ export default {
|
|
|
this.$set(this, `dockInfo`, res.data);
|
|
|
}
|
|
|
}
|
|
|
+ //查询专家列表{ skip, limit: 20 }
|
|
|
+ const res = await this.expertQuery();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `expertList`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchPage(page = 1) {
|
|
|
+ this.$set(this, `expertList2`, this.origin[page - 1]);
|
|
|
+ },
|
|
|
+ handleCurrentChange(currentPage) {
|
|
|
+ this.searchPage(currentPage);
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -123,7 +177,16 @@ export default {
|
|
|
return this.$route.query.dock_id;
|
|
|
},
|
|
|
},
|
|
|
- watch: {},
|
|
|
+ watch: {
|
|
|
+ expertList: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(val) {
|
|
|
+ if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
|
|
|
+ this.searchPage();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -249,17 +312,79 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.three {
|
|
|
- height: 860px;
|
|
|
+ // height: 1145px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
top: -50px;
|
|
|
z-index: 999;
|
|
|
.threeinfo {
|
|
|
- height: 860px;
|
|
|
+ // height: 1145px;
|
|
|
overflow: hidden;
|
|
|
background-color: #fff;
|
|
|
border: 1px solid red;
|
|
|
padding: 30px;
|
|
|
+ .topInfo {
|
|
|
+ .topName {
|
|
|
+ font-family: '微软雅黑';
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+ .topSite {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ margin-top: 40px;
|
|
|
+ height: 1035px;
|
|
|
+ overflow: hidden;
|
|
|
+ .card {
|
|
|
+ width: 23.5%;
|
|
|
+ margin: 0 2% 30px 0;
|
|
|
+ padding: 10px;
|
|
|
+ box-shadow: 0 0 5px rgba(127, 126, 126, 0.3);
|
|
|
+ .linkCon {
|
|
|
+ height: 160px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ // width: 140px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ width: 100px;
|
|
|
+ float: right;
|
|
|
+ height: 100px;
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ p:nth-child(2) {
|
|
|
+ margin: 20px 0 15px 0;
|
|
|
+ width: 60px;
|
|
|
+ line-height: 24px;
|
|
|
+ border: 1px solid #dddd;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ p:nth-child(2):hover {
|
|
|
+ color: #777;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card:hover {
|
|
|
+ box-shadow: 0 0 5px rgba(33, 82, 203, 0.5);
|
|
|
+ }
|
|
|
+ .card:nth-child(4n) {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page1 {
|
|
|
+ text-align: center;
|
|
|
+ margin: 20px 0px 40px 0px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.four {
|
|
|
@@ -289,4 +414,12 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: black;
|
|
|
}
|
|
|
+/deep/.el-link.link {
|
|
|
+ color: black;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: -3px;
|
|
|
+}
|
|
|
+/deep/.el-link.link:hover {
|
|
|
+ color: #777;
|
|
|
+}
|
|
|
</style>
|
