|
|
|
|
@ -8,7 +8,7 @@ |
|
|
|
|
<div class="title" v-if="banner_data.title">{{ banner_data.title }}</div> |
|
|
|
|
<div class="subtitle" v-if="banner_data.subtitle">{{ banner_data.subtitle }}</div> |
|
|
|
|
</div> |
|
|
|
|
<img :src="banner_data.logo" class="img" /> |
|
|
|
|
<img :src="banner_data.logo" class="img"/> |
|
|
|
|
</div> |
|
|
|
|
<!-- 页面 面包屑 --> |
|
|
|
|
<div class="v-container"> |
|
|
|
|
@ -24,7 +24,9 @@ |
|
|
|
|
<div v-if="news_list.length > 0"> |
|
|
|
|
<div class="list-item" v-for="(item, index) in news_list" :key="index"> |
|
|
|
|
<div class="item-box row" @click="gotoPages(item.id,active)"> |
|
|
|
|
<div class="item-image"><img :src="item.logo" class="img"><div v-if="item.recommend == 1" class="recommend-badge">Hot</div></div> |
|
|
|
|
<div class="item-image"><img :src="item.logo" class="img"> |
|
|
|
|
<div v-if="item.recommend == 1" class="recommend-badge">Hot</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item-content col"> |
|
|
|
|
<div class="title">{{ item.title }}</div> |
|
|
|
|
<div class="info" v-html="item.introduction"></div> |
|
|
|
|
@ -36,8 +38,9 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" |
|
|
|
|
@pagination="infoPages"/> |
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" |
|
|
|
|
:limit.sync="queryParams.pageSize" |
|
|
|
|
@pagination="infoPages"/> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
|
|
|
|
|
</el-tabs> |
|
|
|
|
@ -48,92 +51,92 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import * as Api from "@/api/cjy/columninfo" |
|
|
|
|
import { DICT_TYPE, getDictDatas } from "@/utils/dict"; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "list", |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
banner_data: {},//广告图 |
|
|
|
|
total: 0, |
|
|
|
|
queryParams: { |
|
|
|
|
pageNo: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
type: 7, |
|
|
|
|
infoType: null |
|
|
|
|
}, |
|
|
|
|
active: '1', |
|
|
|
|
// 新闻列表数据 |
|
|
|
|
news_list: [], |
|
|
|
|
tab_list: [{ |
|
|
|
|
label: '公司动态', |
|
|
|
|
value: '1' |
|
|
|
|
import * as Api from "@/api/cjy/columninfo" |
|
|
|
|
import {DICT_TYPE, getDictDatas} from "@/utils/dict"; |
|
|
|
|
|
|
|
|
|
}, { |
|
|
|
|
label: '行业资讯', |
|
|
|
|
value: '2' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
export default { |
|
|
|
|
name: "list", |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
banner_data: {},//广告图 |
|
|
|
|
total: 0, |
|
|
|
|
queryParams: { |
|
|
|
|
pageNo: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
type: 7, |
|
|
|
|
infoType: null |
|
|
|
|
}, |
|
|
|
|
active: '2', |
|
|
|
|
// 新闻列表数据 |
|
|
|
|
news_list: [], |
|
|
|
|
tab_list: [{ |
|
|
|
|
label: '行业资讯', |
|
|
|
|
value: '2' |
|
|
|
|
}, { |
|
|
|
|
label: '公司动态', |
|
|
|
|
value: '1' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
// 获取 轮播图 |
|
|
|
|
this.getBanner() |
|
|
|
|
// 获取 初始化页面 |
|
|
|
|
this.infoPages() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 轮播图 函数 |
|
|
|
|
async getBanner() { |
|
|
|
|
let res = await Api.getColumnInfoList({type: 14}); |
|
|
|
|
this.banner_data = res.data.list[0] |
|
|
|
|
}, |
|
|
|
|
// 初始化页面 函数 |
|
|
|
|
async infoPages() { |
|
|
|
|
this.queryParams.infoType = Number(this.active) |
|
|
|
|
let res = await Api.getColumnInfoList(this.queryParams) |
|
|
|
|
this.news_list = res.data.list |
|
|
|
|
this.total = res.data.total; |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
// 获取 轮播图 |
|
|
|
|
this.getBanner() |
|
|
|
|
// 获取 初始化页面 |
|
|
|
|
handleClick() { |
|
|
|
|
this.infoPages() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 轮播图 函数 |
|
|
|
|
async getBanner() { |
|
|
|
|
let res = await Api.getColumnInfoList({ type: 14 }); |
|
|
|
|
this.banner_data = res.data.list[0] |
|
|
|
|
}, |
|
|
|
|
// 初始化页面 函数 |
|
|
|
|
async infoPages() { |
|
|
|
|
this.queryParams.infoType = Number(this.active) |
|
|
|
|
let res = await Api.getColumnInfoList(this.queryParams) |
|
|
|
|
this.news_list = res.data.list |
|
|
|
|
this.total = res.data.total; |
|
|
|
|
}, |
|
|
|
|
handleClick() { |
|
|
|
|
this.infoPages() |
|
|
|
|
}, |
|
|
|
|
// 跳转页面 函数 |
|
|
|
|
gotoPages(val) { |
|
|
|
|
this.$router.push("/news-detail?id=" + val+'&active='+this.active) |
|
|
|
|
} |
|
|
|
|
// 跳转页面 函数 |
|
|
|
|
gotoPages(val) { |
|
|
|
|
this.$router.push("/news-detail?id=" + val + '&active=' + this.active) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.item-image{ |
|
|
|
|
.item-image { |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.recommend-badge { |
|
|
|
|
/* 基础定位 */ |
|
|
|
|
position: absolute; |
|
|
|
|
top: -41px; |
|
|
|
|
right: -60px; |
|
|
|
|
width: 120px; |
|
|
|
|
height: 80px; |
|
|
|
|
-webkit-transform: rotate(45deg); |
|
|
|
|
transform: rotate(45deg); |
|
|
|
|
z-index: 1; |
|
|
|
|
background: linear-gradient(90deg, #e83c5b 0%, #e8763c 100%); |
|
|
|
|
display: -webkit-box; |
|
|
|
|
display: -ms-flexbox; |
|
|
|
|
display: flex; |
|
|
|
|
-webkit-box-align: end; |
|
|
|
|
-ms-flex-align: end; |
|
|
|
|
align-items: flex-end; |
|
|
|
|
-webkit-box-pack: center; |
|
|
|
|
-ms-flex-pack: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
padding-bottom: 3px; |
|
|
|
|
color: white; |
|
|
|
|
font-size: 14px; |
|
|
|
|
-webkit-box-shadow: 0 2px 8px rgba(255, 75, 31, 0.3); |
|
|
|
|
box-shadow: 0 2px 8px rgba(255, 75, 31, 0.3); |
|
|
|
|
top: -41px; |
|
|
|
|
right: -60px; |
|
|
|
|
width: 120px; |
|
|
|
|
height: 80px; |
|
|
|
|
-webkit-transform: rotate(45deg); |
|
|
|
|
transform: rotate(45deg); |
|
|
|
|
z-index: 1; |
|
|
|
|
background: linear-gradient(90deg, #e83c5b 0%, #e8763c 100%); |
|
|
|
|
display: -webkit-box; |
|
|
|
|
display: -ms-flexbox; |
|
|
|
|
display: flex; |
|
|
|
|
-webkit-box-align: end; |
|
|
|
|
-ms-flex-align: end; |
|
|
|
|
align-items: flex-end; |
|
|
|
|
-webkit-box-pack: center; |
|
|
|
|
-ms-flex-pack: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
padding-bottom: 3px; |
|
|
|
|
color: white; |
|
|
|
|
font-size: 14px; |
|
|
|
|
-webkit-box-shadow: 0 2px 8px rgba(255, 75, 31, 0.3); |
|
|
|
|
box-shadow: 0 2px 8px rgba(255, 75, 31, 0.3); |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
