<template>
|
<div class="news page-content">
|
<div class="box_head">
|
<div class="page-w2 head_content flex-between">
|
<div class="head_left flex-center">
|
<img src="@/assets/images/news_icon.png" alt="news Investment" />
|
<span>{{ $t("hj6") }}</span>
|
</div>
|
</div>
|
</div>
|
|
<template v-if="tableData && tableData.length > 0">
|
<div class="box_content page-w2">
|
<div class="content_item" v-for="i in tableData" :key="i.id" @click="buyOpen(i)">
|
<el-row :gutter="20">
|
<el-col :span="18">
|
<div class="flex-start item_label">
|
<div class="label_1">{{ i.title }}</div>
|
</div>
|
<div class="flex-start item_label">
|
<div class="label_2">{{ i.showTime | gettime }}</div>
|
</div>
|
</el-col>
|
|
<el-col :span="6">
|
<img :src="i.imgurl" alt="" class="item_img" />
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
|
<div class="flex-end page-w2">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:total="total"
|
:current-page="pageNum"
|
:page-size="pageSize"
|
@current-change="handleCurrentChange"
|
>
|
</el-pagination>
|
</div>
|
</template>
|
|
<el-empty :description="$t('zwsj')" v-else></el-empty>
|
|
<Details
|
:dialogVisible.sync="buyVisible"
|
v-if="buyVisible"
|
:dataObj="openObj"
|
@onClose="onClose"
|
></Details>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import Details from "./components/Details";
|
import mixins from "@/mixins/myMixins"; // 混入
|
export default {
|
name: "news",
|
mixins: [mixins],
|
components: {
|
Details,
|
},
|
data() {
|
return {
|
// 列表参数,必须是opt和myMixins混入配合使用
|
opt: {
|
type: 1,
|
},
|
buyVisible: false,
|
openObj: {}, // 打开弹窗的数据
|
};
|
},
|
created() {
|
this.apiInterface = api.getNewsList; // 赋值接口
|
this.init(); // 获取列表
|
},
|
methods: {
|
// 打开详情弹窗
|
buyOpen(item) {
|
this.openObj = item; // 赋值
|
this.buyVisible = true; // 打开弹窗
|
},
|
// 关闭弹窗
|
onClose() {
|
this.openObj = {};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.news {
|
.box_content {
|
padding: 16px 0;
|
.content_item {
|
border: 1px solid #f1f1f1;
|
border-radius: 16px;
|
padding: 10px;
|
margin: 16px 0;
|
background-color: #444;
|
font-size: 14px;
|
cursor: pointer;
|
.item_img {
|
width: 200px;
|
height: auto;
|
border-radius: 10px;
|
}
|
.item_head {
|
font-size: 16px;
|
margin-bottom: 20px;
|
}
|
.item_label {
|
padding-bottom: 16px;
|
.label_1 {
|
color: #ccc;
|
font-size: 18px;
|
// margin-right: 28px;
|
}
|
.label_2 {
|
font-size: 16px;
|
color: #aaa;
|
}
|
}
|
}
|
}
|
.box_head {
|
background-color: #444;
|
|
.head_content {
|
padding: 32px 0;
|
|
.head_left {
|
font-size: 28px;
|
font-weight: 700;
|
|
img {
|
width: 32px;
|
height: 32px;
|
margin-right: 8px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
