:global { .n-card--bordered { border: 2px solid rgba(202, 228, 244, 1) !important; &:hover { border: 2px solid rgba(0, 122, 254, 1) !important; } } } .card-section { position: relative; box-sizing: border-box; width: 300px; height: 220px; border-radius: 14px; overflow: hidden; background: linear-gradient(270deg, #DBF1FF 0%, #E7F9FF 100%); display: inline-flex; // 鼠标经过时样式 &:hover { .image { transform: scale(1.1); transition: all .3s ease-in-out; } .addBtn { display: block; opacity: 1; transition: all .3s ease-in-out; } } &.isActive { border: 2px solid rgba(0, 122, 254, 1) !important; } // 封面样式 .cover { width: 100%; height: 170px; img { height: inherit; } } .image { transition: all .3s ease-in-out; } // 封面样式 .cover { width: 100%; height: 170px; img { height: inherit; } } .image { transition: all .3s ease-in-out; } :global { .n-card__footer { padding: 10px 12px; } } .footer { display: flex; align-items: center; justify-content: space-between; } .title { display: flex; align-items: center; .titleType { width: 36px; height: 17px; } .titleContent { padding-left: 6px; font-size: 16px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #131415; font-weight: 600; } } // 收藏按钮 .iconCollect { width: 34px; height: 34px; background: url('../../common/images/icon-collect-default.png') no-repeat center; background-size: contain; position: absolute; right: 12px; &.isCollect { cursor: pointer; } &.isActive { background: url('../../common/images/icon-collect-active.png') no-repeat center; background-size: contain; } } // 精选 .iconSelected { background: url('../../common/images/icon-selected.png') no-repeat center; background-size: contain; position: absolute; top: 0px; left: 0px; width: 58px; height: 29px; } // 添加 .addBtn { position: absolute; top: 6px; right: 6px; font-size: 16px; font-weight: 600; height: 32px; border-radius: 8px; display: none; opacity: 0; transition: all .3s ease-in-out; } }