前端页面串联卡片的一个思路
2023-09-11 14:15:07 时间
串联卡片的一个思路
需求描述
做一行固定宽度但是数量不固定的的卡片,卡片前后通过箭头链接,箭头要处在两个卡片中间位置。
问题分析
首先需要一个卡片的基础组件,然后遍历数据循环渲染组件即可,连接图片的箭头可以在每次渲染卡片之后再渲染一个标签 span 做显示指示箭头之用,只要做出判断,当渲染到最后一个卡片时候不在渲染 span 标签即可。
解决问题
- 基础卡片
<template>
<section class="card-wrap">
<div class="card">
<div class="card-flex">
<div class="title">{{ cData.name }}</div>
<div class="name">{{ cData.type }}</div>
<div class="total">总计 <span>{{ cData.unRead + cData.checked }}</span> 条</div>
<div class="appr">
<div class="d1">
<span>已读</span>
<span>{{ cData.checked }} 条</span>
</div>
<div class="d2">
<span>未读</span>
<span>{{ cData.unRead }} 条</span>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
name: "BaseCard",
props: {
data: {
type: Object,
default: {},
}
},
watch: {
data: {
handler(val) {
this.cData = val
},
immediate: true
},
},
data() {
return {
cData: {},
}
}
}
</script>
<style lang="scss" scoped>
@import './card.scss';
.card-flex {
width: 138px;
min-height: 152px;
text-align: center;
padding-bottom: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
height: 36px;
line-height: 48px;
font-weight: bold;
color: #444;
}
.name {
color: $color-primary;
}
.red {
color: $color-danger-r6;
}
.total {
color: $color-primary;
span {
font-size: 20px;
font-weight: bolder;
}
}
.appr {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
> div {
box-sizing: border-box;
width: 85%;
height: 20px;
line-height: 20px;
border-radius: 10px;
margin: 2px 0;
padding: 0 10px;
background-color: #f7f8fa;
font-size: 13px;
display: flex;
justify-content: space-between;
}
.d2 {
background-color: #f59a23;
color: white;
}
}
}
</style>
- 循环渲染卡片
<div class="flow-box">
<template v-for="(item, idx) in cData">
<base-card
:key="item.name + idx"
:data="item"
@click.native="handleCard"
></base-card>
<span
v-if="idx != cData.length - 1"
:key="'s' + item.name"
></span>
</template>
</div>
- flex布局写样式
.flow-box {
display: flex;
justify-content: space-between;
min-height: 200px;
.card-wrap {
flex: 0 1 auto;
}
> span {
flex: 1;
position: relative;
&::after {
font-family: element-icons !important;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
-webkit-font-smoothing: antialiased;
content: "\e6dc";
display: block;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: $color-neutral-n8;
}
}
}
- 效果描述
通过flex布局是的所有卡片水品占满整个屏幕,每个卡片中间放一个连接的箭头图标且图标居中,让卡片和图标元素都是处在一个flex布局中就可以适配整个屏幕宽度了。
相关文章
- 浅谈前端优化的几个思路
- 【技术思路】极客时间-左耳听风-开篇词1
- 数据库水平切分的原理探讨、设计思路--数据库分库,分表,集群,负载均衡器
- 【系统优化】数据库系统load飙高问题解决思路
- 求助关于jquery easyUI中的treegrid组件,请各位帮忙给个思路,谢谢啦
- MySQL子查询优化思路
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- ML:人工智能之机器学习ML解决实际应用问题的思路总过程(最全)
- 前后端分离中的权限管理思路
- 【高并发】如何设计一个支撑高并发大流量的系统?这次我将设计思路分享给大家!
- CSharpGL(45)自制控件的思路
- 一文汇总Etcd数据库几种常见故障及排查思路
- 链表常见操作及解题思路
- elasticsearch 索引搜索和索引性能优化配置——思路:去掉不必要的数据,减小数据的磁盘空间占用,同时提升性能
- lucene中facet实现统计分析的思路——本质上和word count计数无异,像splunk这种层层聚合(先filed1统计,再field2统计,最后field3统计)lucene是排序实现
- [HCTF 2018]WarmUp1解题思路