左侧带三角的Card css支持hover阴影
<div class="inputReportIndex"> <div class="inner"> <div class="left"> <Card :bordered="false" style="height: 48%;">1</Card> <div style="height: 4%;"></div> <Card :bordered="false" style="height: 48%;">1</Card> </div> <div class="right"> <Card :bordered="false"> <!--<div style="background-color: aqua; width: 100%; height: 100%;"></div>--> </Card> </div> </div> </div>
.inputReportIndex { display: flex; justify-content: center;align-items: center;width: 100%; height: 100%; .inner { width: 88%; height: 88%; .left{ width: 62%; height: 100%; float: left; } .right{ width: 35%; height: 100%; float: right; > .ivu-card { height: 100%; position: relative; > .ivu-card-body { height: 100%; position: relative; z-index: 99; } &::after { content: ""; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%) rotate(45deg); width: 25px; height: 25px; background: #fff; transition: all 0.2s ease-in-out; } &:hover::after { box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.11); } } } } }
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)