136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<template>
|
||
<div class="image_display">
|
||
<!-- 顶部图片 -->
|
||
<div class="imageDisplay_bg">
|
||
<img src="../../assets/image_display.jpg" alt=""/>
|
||
</div>
|
||
<!--标签栏 -->
|
||
<ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||
<!--资质荣誉 22是封装图片放大的效果-->
|
||
<PicturesBox :image-list="imageAndWord" :type="22"/>
|
||
<!--页码-->
|
||
<Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage"/>
|
||
<div class="nullData" v-if="showNull">
|
||
暂时没有数据！
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Pagination from "@/components/Pagination";
|
||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||
import PicturesBox from "@/components/PicturesBox";
|
||
import {getArticleList} from "@/api";
|
||
|
||
export default {
|
||
name: "index",
|
||
components: {ProductsTabsItem, PicturesBox,Pagination},
|
||
data() {
|
||
return {
|
||
limit: 12,
|
||
total: 0,
|
||
classIndex:0,
|
||
showNull: false,
|
||
imageDisplayTabs: [
|
||
{
|
||
id: 2,
|
||
title: "资质荣誉"
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "工程案例"
|
||
}
|
||
],
|
||
imageAndWord: []
|
||
};
|
||
},
|
||
watch: {
|
||
$route(to) {
|
||
for (let i = 0; i < this.imageDisplayTabs.length; i++) {
|
||
if (this.imageDisplayTabs[i].id == to.query.menu) {
|
||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||
}
|
||
}
|
||
this.getArticleList(to.query.menu);
|
||
}
|
||
},
|
||
beforeUpdate() {
|
||
for (let i = 0; i < this.imageDisplayTabs.length; i++) {
|
||
if (this.imageDisplayTabs[i].id == this.$route.query.menu) {
|
||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.$route.query.menu) {
|
||
this.getArticleList(this.$route.query.menu);
|
||
} else {
|
||
this.getArticleList(2);
|
||
}
|
||
},
|
||
methods: {
|
||
//获取新闻列表
|
||
getArticleList(classId, page, limit) {
|
||
getArticleList({
|
||
classid: classId,
|
||
page: page,
|
||
limit: limit
|
||
}).then(res => {
|
||
this.imageAndWord = res.data.list;
|
||
if (res.data.list.length == 0) {
|
||
this.showNull = true;
|
||
}
|
||
});
|
||
},
|
||
handleClick(tab) {
|
||
this.classIndex = parseInt(tab.index);
|
||
if (tab.index == 0) {
|
||
this.getArticleList(2, this.page, this.limit);
|
||
} else if (tab.index == 1) {
|
||
this.getArticleList(8, this.page, this.limit);
|
||
}
|
||
},
|
||
//分页
|
||
handleChangePage(value) {
|
||
if (this.classIndex == 0) {
|
||
this.getArticleList(2, value, this.limit);
|
||
} else if (this.classIndex == 1) {
|
||
this.getArticleList(8, value, this.limit);
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
* {
|
||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||
}
|
||
|
||
.nullData {
|
||
display: block;
|
||
height: 300px;
|
||
line-height: 300px;
|
||
text-align: center;
|
||
}
|
||
|
||
.image_display {
|
||
min-width: 1300px;
|
||
|
||
.imageDisplay_bg {
|
||
height: 360px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 360px;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
#project_list {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
</style>
|