96 lines
2.1 KiB
Vue
96 lines
2.1 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"/>
|
||
<!--资质荣誉 22是封装图片放大的效果-->
|
||
<PicturesBox :image-list="imageAndWord" :type="22"/>
|
||
<div class="nullData" v-if="showNull">
|
||
暂时没有数据！
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||
import PicturesBox from "@/components/PicturesBox";
|
||
import {getArticleList} from "@/api";
|
||
export default {
|
||
name: "index",
|
||
components: {ProductsTabsItem,PicturesBox},
|
||
data() {
|
||
return {
|
||
showNull:false,
|
||
imageDisplayTabs: [
|
||
{
|
||
title: '资质荣誉',
|
||
name: 'first'
|
||
},
|
||
{
|
||
title: '工程案例',
|
||
name: 'second'
|
||
}
|
||
],
|
||
imageAndWord: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getArticleList(2)
|
||
},
|
||
methods: {
|
||
//获取新闻列表
|
||
getArticleList(classId,page,limit){
|
||
getArticleList({
|
||
classid: classId,
|
||
page: this.page,
|
||
limit: this.limit
|
||
}).then(res => {
|
||
this.imageAndWord = res.data.list;
|
||
if(res.data.list.length==0){
|
||
this.showNull=true
|
||
}
|
||
});
|
||
},
|
||
handleClick(tab) {
|
||
if(tab.index==0){
|
||
this.getArticleList(2)
|
||
}else if(tab.index==1){
|
||
this.getArticleList(8)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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>
|