vue 图片分页
2024-10-19 14:48:57
<div class="activities phone">
<!-- 动态 -->
<div
class="activity"
v-for="(item, index) in imgList.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
)"
:key="index"
>
<!-- 动态图片 -->
<div class="act-image-wrapper">
<div class="img-shadow"></div>
<img
:src="item.url"
class="imgCss"
alt=""
@click="gotoPage(item)"
/>
</div>
<!-- 动态元数据，包括发表日期和评论数量 -->
<div class="activity-content">
<!-- 动态标题 -->
<h2 class="act-title" @click="gotoPage(item)">
{{ item.title }}
</h2>
<!-- 动态内容摘要 -->
<article @click="gotoPage(item)">
{{ item.article }}
</article> <div class="meta" @click="gotoPage(item)">
<p class="date-published">
<i class="far fa-calendar"></i> {{ item.time }}
</p>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<br />
<br />
<div class="block phone">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout=" prev, pager, next"
:total="totalNum"
>
</el-pagination>
</div>
data() {
return {
currentPage: 1, //默认显示第一页
pageSize: 5, //默认每页显示10条
totalNum: 15, //总页数
imgList: [
{
title: this.$t("home.t36"),
url: require("@/assets/images/greekBudget.jpg"),
article: this.$t("home.t37"),
name: "greekBudget",
time: this.$t("home.t44"),
},
{
title: this.$t("EU.t1"),
url: require("@/assets/images/EUCouncil.webp"),
article: this.$t("EU.t2"),
name: "EUCouncil",
time: "",
},
{
title: this.$t("SETE.t1"),
url: require("@/assets/images/SETE.png"),
article: this.$t("SETE.t2"),
name: "SETE",
time: this.$t("SETE.t3"),
},
{
title: this.$t("logistics.t1"),
url: require("@/assets/images/logistics.webp"),
article: this.$t("logistics.t2"),
name: "logistics",
time: this.$t("logistics.t3"),
},
{
title: this.$t("hellenistical.t1"),
url: require("@/assets/images/hellenistical.jpg"),
article: this.$t("hellenistical.t2"),
name: "hellenistical",
time: this.$t("hellenistical.t3"),
},
{
title: this.$t("economic.t1"),
url: require("@/assets/images/economic2.jpg"),
article: this.$t("economic.t3"),
name: "economic",
time: this.$t("economic.t2"),
},
{
title: this.$t("femalePresident.t1"),
url: require("@/assets/images/femalePresident1.jpg"),
article: this.$t("femalePresident.t3"),
name: "femalePresident",
time: this.$t("femalePresident.t2"),
},
{
title: this.$t("port.t1"),
url: require("@/assets/images/port1.png"),
article: this.$t("port.t4"),
name: "port",
time: this.$t("port.t3"),
},
{
title: this.$t("VisaIncrease.t1"),
url: require("@/assets/images/VisaIncrease.png"),
article: this.$t("VisaIncrease.t2"),
name: "VisaIncrease",
time: "",
},
{
title: this.$t("DebtRelief.t1"),
url: require("@/assets/images/DebtRelief.webp"),
article: this.$t("DebtRelief.t4"),
name: "DebtRelief",
time: this.$t("DebtRelief.t2"),
},
{
title: this.$t("agreement.t1"),
url: require("@/assets/images/agreement1.jpg"),
article: this.$t("agreement.t4"),
name: "agreement",
time: this.$t("agreement.t2"),
},
{
title: this.$t("Shanghai.t1"),
url: require("@/assets/images/Shanghai1.jpg"),
article: this.$t("Shanghai.t4"),
name: "Shanghai",
time: this.$t("Shanghai.t2"),
},
{
title: this.$t("cooperation.t1"),
url: require("@/assets/images/cooperation1.jpg"),
article: this.$t("cooperation.t4"),
name: "cooperation",
time: this.$t("cooperation.t2"),
},
{
title: this.$t("VisitGreece.t1"),
url: require("@/assets/images/VisitGreece1.jpg"),
article: this.$t("VisitGreece.t4"),
name: "VisitGreece",
time: this.$t("VisitGreece.t2"),
},
{
title: this.$t("SouthEurope.t1"),
url: require("@/assets/images/SouthEurope1.jpg"),
article: this.$t("SouthEurope.t4"),
name: "SouthEurope",
time: this.$t("SouthEurope.t2"),
},
],
};
},
created() {
this.totalNum = this.imgList.length;
},
methods: { // 跳转页面
gotoPage(item) {
this.$router.push(item.name);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val; //动态改变
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val; //动态改变
},}
.activity {
// overflow: hidden;
transition: 0.4s;
width: 97% !important;
background: #f4f6fa;
overflow-x: hidden;
/* 动态图片容器 */
.act-image-wrapper {
height: auto;
width: 100%;
overflow: hidden;
/* 抵消activity的padding */
margin-bottom: 0;
position: relative;
.img-shadow {
z-index: 2;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
min-height: 300px;
background: #030d37;
opacity: 0.7;
}
.imgCss {
width: 100%;
height: 300px;
min-height: 300px;
object-fit: cover;
}
}
.activity-content {
width: 89%;
height: 280px;
margin: 0 auto;
/* 动态标题 */
.act-title {
text-align: left;
width: 100%;
height: 68px;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #273056;
line-height: 34px;
letter-spacing: 1px;
margin-top: 22px;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 动态摘要 */
article {
width: 100%;
height: 112px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #8086a0;
line-height: 28px;
text-align: initial;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.meta {
width: 100%;
height: 28px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #8086a0;
line-height: 28px;
margin-top: 20px;
text-align: initial;
}
}
}
/* 动态鼠标移上时 */
.activity:hover {
// transform: translateY(-20px) scale(1.05);
// box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.1);
background: #030d37;
.img-shadow {
display: none;
}
.act-title {
color: #ffffff;
}
article {
color: #b3bada;
}
.meta {
color: #b3bada;
}
}
最新文章
- unity自带寻路Navmesh入门教程（三）
- Bzoj1497 [NOI2006]最大获利
- Android中有关relativeLayout 和EditText的一些属性
- log4net日志功能使用
- uploadify上传控件使用
- Android Studio 初体验
- apache服务器参数设置
- Spring Uploading Files
- 设计模式--装饰者设计模式（Decorator）
- php中urldecode()和urlencode()起什么作用
- python网络爬虫&&爬取图片
- oracle中 特殊字符 转义 （&）
- Tars 负载均衡
- Red Hat 7.2 RPM安装Mysql 5.7.12
- openresty用naxsi防xss、SQL注入
- QT QProgressBar QProgressDialog 模态，位置设置，无边框，进度条样式
- POJ 1088 滑雪(记忆化搜索+dp)
- $.cookie is not a function的错误原因
- Windows7下搭建Eclipse+Python开发环境
- Linux随笔(安装ftp,安装jdk,安装 tomcat,安装redis,安装MySQL,安装svn)