/* 卡片样式 */ .card { min-height: 252rpx; display: flex; flex-direction: column; background-color: #fff; } .card-header { display: flex; align-items: center; height: 80rpx; padding: 0 44rpx; box-sizing: border-box; font-size: 28rpx; color: #333; position: relative; /* border-bottom: 1rpx solid #ddd; */ } .card-header view { width: 4rpx; height: 32rpx; background: #4dc182; position: absolute; left: 24rpx; top: 26rpx; } /* 1px边框 */ .border-top-before, .border-bottom-after, .border-left-before, .border-right-before { position: relative; } .border-bottom-after::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1px; transform-origin: 50% 100%; transform: scaleY(0.5); } .border-top-before::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1px; transform-origin: 50% 100%; transform: scaleY(0.5); } .border-left-before::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 1px; height: 100%; /* transform-origin: 100% 50%; */ transform: scaleX(0.5); } .border-right-before::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: 0; bottom: 0; left: auto; width: 1px; height: 100%; /* transform-origin: 100% 50%; */ transform: scaleX(0.5); } /* 单行溢出内容点点点显示 */ .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }