项目中会用到卡片信息展示效果,记录下两种效果展示Demo,主要是对样式的处理较多,没有逻辑上的东西,如遇到这样的场景,可参考或拿来主义直接使用。
目录
1、效果演示
走马灯展示卡片信息样式效果
2、步骤1效果源代码
由于template 部分、script 部分比较简单,主要是style 样式部分细节的处理,可以根据需要进行
遮罩颜、透明度、显示文字颜色、大小、走马灯样式等进行修改 。废话不多说,上代码!!!可
直接拿去用。数据源部分这里写死的,图片也是Element里面的图片,实际项目中使用自己的就行。
<template>
<div>
<div style="margin-top:5px">
<el-row style="margin-top: 5px;padding:5px;text-align: center">
<span style="font-size: xx-large;font-weight: bold" center>信 息 列 表 样 式 一:鼠标悬浮文字下落</span>
</el-row>
<el-row style="margin-left:1%;margin-right:1%;margin-top: 5px;">
<el-carousel class="carouselMy5" style="width: 100%;height: 440px;" :autoplay="false" :interval="225000" arrow="hover">
<el-carousel-item v-for="(chunk, index) in chunkedBusinessCards" :key="index" style="height: 440px;" >
<div class="card-container2" style="margin-left: 0px;margin-right: 0px;">
<el-card class="card2 packageCard2" v-for="(card, cardIndex) in chunk" :key="cardIndex" :body-style="{ padding: '0px' }"
style="width: 380px;margin-right: 0px" > <!-- 卡片内容 -->
<div class="box">
<el-image :src="card.url" style="width: 100%; height: 400px;" class="image2" >
<div slot="error" class="image-slot" style="width: 380px; height: 400px;background-color: #F5F7FA">
<i class="el-icon-picture-outline" style="margin-top: 180px;margin-left: 170px;font-size: xx-large"></i>
</div>
</el-image>  
<div class="box-content">
<div class="content">
<el-row style="">
<h3 class="title">{{ card.shopName}}</h3>
</el-row>
<el-row style="">
<span class="post">成立时间:{{card.setDate}}</span>
</el-row>
<el-row style="">
<span class="post">信用等级:{{card.creditLevel}}</span>
</el-row>
<el-row style="">
<span v-if="card.yearEnergy!=null&&card.yearEnergy!=''" class="post">销量:{{card.yearEnergy}}MWh</span>
<span v-else class="post">销量:</span>
</el-row>
</div>
</div>
</div>
</el-card>
</div>
</el-carousel-item>
</el-carousel>
</el-row>
</div>
<div style="margin-top:5px">
<el-row style="margin-top: 5px;padding:5px;text-align: center">
<span style="font-size: xx-large;font-weight: bold" center>信 息 列 表 样 式 二:鼠标悬浮直接显示</span>
</el-row>
<el-row style="margin-left:1%;margin-right:1%;margin-top: 5px;">
<el-carousel class="carouselMy5" style="width: 100%;height: 440px;" :autoplay="false" :interval="225000" arrow="hover">
<el-carousel-item v-for="(chunk, index) in chunkedBusinessCards" :key="index" style="height: 440px;" >
<div class="card-container2" style="margin-left: 0px;margin-right: 0px;">
<el-card class="card2 packageCard2" v-for="(card, cardIndex) in chunk" :key="cardIndex" :body-style="{ padding: '0px' }"
style="width: 380px;margin-right: 0px"> <!-- 卡片内容 -->
<div class="box">
<el-image :src="card.url" style="width: 100%; height: 400px;" class="image2" >
<div slot="error" class="image-slot" style="width: 380px; height: 400px;background-color: #F5F7FA">
<i class="el-icon-picture-outline" style="margin-top: 180px;margin-left: 170px;font-size: xx-large"></i>
</div>
</el-image>  
<div class="box-content">
<div class="content">
<el-row style="">
<h3 class="title2">{{ card.shopName}}</h3>
</el-row>
<el-row style="">
<span class="post22">成立时间:{{card.setDate}}</span>
</el-row>
<el-row style="">
<span class="post22">信用等级:{{card.creditLevel}}</span>
</el-row>
<el-row style="">
<span v-if="card.yearEnergy!=null&&card.yearEnergy!=''" class="post22">销量:{{card.yearEnergy}}MWh</span>
<span v-else class="post22">销量:</span>
</el-row>
</div>
</div>
</div>
</el-card>
</div>
</el-carousel-item>
</el-carousel>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
businessData:[
{address: "嘻嘻嘻111",
url:"http://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "AAAAA",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示111", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 350
},
{address: "嘻嘻嘻222",
url:"http://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "AAAAA",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示222", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 5550
},
{address: "嘻嘻嘻333",
url:"http://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "AAA",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示333", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 10
},
{address: "嘻嘻嘻444",
url:"http://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "AAAA",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示444", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 1580
},
{address: "嘻嘻嘻555",
url:"http://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "B",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示555", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 9998.093
},
{address: "嘻嘻嘻666",
url:"http://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "C",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示666", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 3990
},
{address: "嘻嘻嘻777",
url:"http://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "AAAAA",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示777", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 750
},
{address: "嘻嘻嘻888",
url:"http://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
creditCode: "91120116MA05XB730Q", creditLevel: "A",
isCollection: false, registerMoney: 123327209.5, salesNum: "1", serveInfo: "DDDD1111Sc@导出3E",
shopName: "测试卡片样式展示888", updateTime: "2024-07-04 10:13:40", userNum: "1", wechatId: "", yearEnergy: 1350
},
],
}
},
methods: {
},
computed:{
chunkedBusinessCards() {
// 使用数组的 chunk 方法将 businessData分割成每四个元素的数组
const chunkSize = 4;
return this.businessData.reduce((chunks, item, index) => {
if (index % chunkSize === 0) {
chunks.push([item]);
} else {
chunks[chunks.length - 1].push(item);
}
return chunks;
}, []);
},
}
}
</script>
<style scoped lang="less">
/*****指示器变圆点**************************************/
/deep/ .el-carousel__indicator--horizontal .el-carousel__button {
width: 10px;
height: 10px;
background: #2683F6;
border: 1px solid #2683F6;
border-radius: 50%;
opacity: 0.3;
}
/deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button{
width: 10px;
height: 10px;
background: #2683F6;
border-radius: 50%;
opacity: 1;
}
/*****指示器变圆点**************************************/
/*****每张卡片之间间距**********调整走马灯箭头**********/
.carouselMy5 .card {
box-sizing: border-box;
width: calc(25.00% - 0px); /* 假设每张卡片之间有 10px 的间距 */
margin-right: 0px;
}
.carouselMy5 .card:nth-child(4n) {
margin-right: 0px; /* 每行的第三张卡片没有右边距 */
}
.carouselMy5 .card:nth-child(1n) {
margin-left: 0px; /* 每行的第三张卡片没有右边距 */
}
/*调整走马灯箭头-左箭头*/
/deep/ .carouselMy5 .el-carousel__arrow--left{
top: 200px;
left: 0px;
font-size: 15px;
color: #02E9FF;
}
/*右箭头*/
/deep/ .carouselMy5 .el-carousel__arrow--right{
top: 200px;
right: 0px;
font-size:15px;
font-weight: bold;
color: #02E9FF;
}
/*****每张卡片之间间距**********调整走马灯箭头***********/
.card-container2 {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
/* 移除 flex-wrap: wrap; 以禁止换行 */
gap: 0.2vw; /* 卡片间固定间距,使用vw单位保持相对大小 */
width: 100%; /* 容器宽度,可根据需要调整 */
height: 420px; /* 或者设置具体高度以适应内容 */
/* 添加以下属性以允许容器在卡片内容超出时隐藏超出部分,而不是换行 */
overflow-x: hidden;
white-space: nowrap;
}
.packageCard2 {
/* 假设卡片的宽高比为1:1,可以根据实际需要调整 */
/* 使用vw单位让卡片宽度随视口宽度缩放 */
width: calc((100vw - (3 * 0.2vw))); /* 减去两边gap的宽度,保持总宽度适应 */
height: 400px; /* 或根据需要设置固定高度 */
/* 保持最小和最大宽度,防止过度缩小或放大 */
min-width: 200px;
max-width: 380px;
box-sizing: border-box;
/* 为了确保卡片内容也等比例缩放,可以设置卡片内部内容的宽度和高度 */
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden; !* 如果卡片内容过多,隐藏超出部分 *!*/
}
</style>
<style scoped lang="less">
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.floating-bar {
position: fixed; /* 固定定位,使其始终保持在同一位置 */
bottom: 50%; /* 使其位于页面底部 */
margin-left: auto;
right: 0;
width: 100px; /* 宽度为100%,以覆盖整个页面底部 */
height: 30px; /* 高度可以根据你的需求调整 */
/*background-color: blueviolet; !* 背景色也可以根据你的需求调整 *!*/
color: #fff; /* 文字颜色 */
display: flex; /* 使用Flexbox布局,方便内部元素的对齐 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
z-index: 999; /* z-index确保它在其他元素之上 */
}
.card2 {
position: relative; /* 确保遮罩层相对于卡片定位 */
/* 其他样式... */
}
.image2 {
/* 图片样式... */
/*width: 100%; !* 宽度设置为 100% 以适应其父元素 *!*/
/*height: 400px; !* 固定高度,或者也可以使用百分比,但要确保与父元素的高度相协调 *!*/
display: block; /* 确保图片表现为块级元素,防止底部空白间隙 */
max-width: 100%; /* 限制图片最大宽度为容器宽度的100% */
max-height: 100%; /* 可选:限制图片最大高度为视口高度的100vh */
width: auto; /* 自动调整宽度以保持宽高比 */
height: auto; /* 自动调整高度以保持宽高比 */
object-fit: contain; /* 保持图片原始宽高比且缩放至适应容器 */
}
/* 如果你想要鼠标悬停在卡片上时改变遮罩层的透明度,可以这样写: */
.card2 .before:hover {
opacity: 0; /* 例如,减少透明度到 0.5 */
}
</style>
<style scoped lang="less">
/************图片放大,背景色、遮罩、文字掉落********************/
.box{
/*width: 380px;*/
height: 400px;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
position: relative;
}
/*背景色*/
.box:before{
content: '';
background-color: #28231D;
opacity: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
transition: all 0.3s ease 0.1s;
}
/*背景色 透明度*/
.box:hover:before{
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
opacity: 0.7;
animation:bounce-left 0s ease-in forwards;
}
/*图片 放大*/
.box .image2{
width: 100%;
height: auto;
transition: all 0.3s ease 0s;
}
.box:hover .image2 { transform: scale(1.5); }
.box .box-content{
color: #fff;
text-align: center;
width: 160%;
height: 100%;
transform:translateX(-50%) translateY(-50%) scale(1);
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
transition:all 0.3s ease 0.5s;
}
.box .content{
opacity: 0;
transform:translateX(-50%) translateY(-50%);
position: absolute;
left:50%;
top:50%;
z-index: 2;
transition:all 0.3s ease 0s;
}
.box:hover .content{ opacity: 1; }
/*字体颜色 延时效果*/
.box .title{
color: #fff;
/*color: #FF3A6F;*/
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
transform: translateY(-300px);
margin-bottom: 15px;
opacity: 0;
transition:all 0.8s ease 0.5s;
}
.box .post{
color: #fff;
font-size:13px;
font-weight: bold;
letter-spacing: 1px;
text-transform: capitalize;
display: inline-block;
margin-bottom: 5px;
opacity: 0;
transform:translateY(-500px);
transition:all 0.8s ease 0.30s;
}
.box .post1{
color: #fff;
font-size:13px;
font-weight: bold;
letter-spacing: 1px;
text-transform: capitalize;
display: inline-block;
margin-bottom: 5px;
opacity: 0;
transform:translateY(-500px);
transition:all 0.8s ease 0.35s;
}
.box .post2{
color: #fff;
font-size:13px;
font-weight: bold;
letter-spacing: 1px;
text-transform: capitalize;
display: inline-block;
margin-bottom: 5px;
opacity: 0;
transform:translateY(-500px);
transition:all 0.8s ease 0.25s;
}
.box .post3{
color: #fff;
font-size:13px;
font-weight: bold;
letter-spacing: 1px;
text-transform: capitalize;
display: inline-block;
margin-bottom: 5px;
opacity: 0;
transform:translateY(-500px);
transition:all 0.8s ease 0.15s;
}
.box:hover .title,
.box:hover .post,.box:hover .post1,.box:hover .post2,.box:hover .post3{
opacity: 1;
transform:translateY(0);
}
.box .icon{
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.box .icon li{
margin:0 4px;
opacity: 0;
display: inline-block;
transform: translateY(-200px);
transition: all 0.8s ease 0s;
}
.box .icon li:nth-child(2){ transition-delay: 0.1s; }
.box:hover .icon li{
opacity: 1;
transform: translateY(0);
}
@keyframes bounce-left{
25%,50%,75%,100%{ transform:translateX(0); }
40%{ transform:translateX(30px); }
70%{ transform:translateX(15px); }
90%{ transform:translateX(5px); }
}
@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width:479px){
.box .title{ font-size: 14px; }
}
</style>