.demo-main .p2-ranking-content {
     flex: 1;
     padding-top: 40px;
     display: flex;
     gap: 28px;
 }

 .p2-ranking-content {
     margin-bottom: 93px;
 }

 /*  排行榜菜单左侧 */
 .p2-ranking-menu {
     user-select: none;
     display: flex;
     width: 170px;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     flex-shrink: 0;
 }

 .p2-ranking-menu-item {
     display: flex;
     cursor: pointer;
     width: 100%;
     align-items: center;
     justify-content: center;
     border-radius: 24px;
     font-size: 16px;
     color: #384572;
     height: 48px;
     padding: 0 12px;
 }

 .p2-ranking-menu-item:not(.p2-ranking-menu-actived):hover {
     color: #1549C0;
     background-color: #F2F5FA;
 }

 .p2-ranking-menu-item span {
     display: inline-block;
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     padding: 0 12px;
 }

 .p2-ranking-menu-actived {
     color: #1549C0;
     font-weight: 600;
     background-color: rgba(21, 73, 192, 0.1);
 }

 .p2-ranking-menu-actived span::after,
 .p2-ranking-menu-actived span::before {
     content: '';
     position: absolute;
     background-image: url(../static/ranking.svg);
     width: 16px;
     height: 16px;
     top: 50%;
     transform: translateY(-50%);
 }

 .p2-ranking-menu-actived span::before {
     left: -3px;
     transform: translateY(-50%) scaleX(-1);
 }

 .p2-ranking-menu-actived span::after {
     right: -3px;
 }

 /* 排行榜右侧 */
 .p2-ranking-list-content {
     flex: 1;
 }

 .p2-rl-book-list {
     display: flex;
     flex-direction: column;
     gap: 36px;
     margin-bottom: 36px;
 }

 .p2-ranking-list-header {
     user-select: none;
     display: flex;
     align-items: center;
     gap: 17px;
     margin-bottom: 25px;
     min-height: 48px;
 }

 .p2-rl-header-title {
     flex-shrink: 0;
     font-size: 20px;
     font-weight: 600;
     color: #384572;
 }

 .p2-rl-header-desc {
     position: relative;
     color: #677390;
 }

 .p2-rl-header-desc::before {
     content: '';
     position: absolute;
     width: 1px;
     height: 13px;
     background-color: #DAE0EE;
     top: 50%;
     transform: translateY(-50%);
     left: -9px;
 }

 .p2-rl-book-card {
     cursor: pointer;
     display: flex;
     gap: 40px;
     padding-bottom: 38px;
     border-bottom: 1px solid #DAE0EE;
 }

 .p2-rl-book-card:hover .p2-rlbc-info-title {
     color: #1549C0;
 }

 .p2-rlb-card-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 14px;
     flex-shrink: 0;
     min-width: 0;
     /* min-width: 600px; */
 }

 .p2-rlb-card-cover {
     user-select: none;
     position: relative;
     width: 120px;
     height: 163px;
     perspective: 800px;
     flex-shrink: 0;
     box-shadow:
         6px 6px 10px rgba(100, 100, 100, 0.2),
         10px 10px 20px rgba(120, 120, 120, 0.15),
         0 8px 15px rgba(150, 150, 150, 0.1);
 }

 .p2-rlbc-cover-num {
     position: absolute;
     top: 0;
     left: 0;
     width: 30px;
     height: 30px;
     border-radius: 4px;
     color: white;
     font-weight: 600;
     font-size: 16px;
     text-align: center;
     line-height: 28px;
     background-color: #FF0129;
     /* 原 SVG 中的 fill 颜色 */
     /* 使用 clip-path: path() 还原 SVG 路径 */
     clip-path: path('M0 4C0 1.79086 1.79086 0 4 0H26C28.2091 0 30 1.79086 30 4V22.117C30 23.8387 28.8983 25.3672 27.2649 25.9117L16.8974 29.3675C15.6658 29.7781 14.3342 29.7781 13.1026 29.3675L2.73509 25.9117C1.10172 25.3672 0 23.8387 0 22.117L0 4Z');

 }

 .p2-rl-book-card:nth-child(2) .p2-rlbc-cover-num {
     background-color: #FE6202;
 }

 .p2-rl-book-card:nth-child(3) .p2-rlbc-cover-num {
     background-color: #FEAE0E;
 }

 .p2-rl-book-card:nth-child(4) .p2-rlbc-cover-num {
     background-color: #CD9251;
 }

 .p2-rl-book-card .p2-rlbc-cover-num.p2-not-first,
 .p2-rl-book-card:nth-child(n + 5) .p2-rlbc-cover-num,
 .p2-rl-book-card:nth-child(5) .p2-rlbc-cover-num {
     background-color: #CD9251;
 }

 .p2-rlb-card-cover img {
     width: 100%;
     height: 100%;
     transition: all .3s;
     transform-origin: 0 0;
 }

 .p2-rlbc-info-title {
     line-height: 23px;
     color: #384572;
     font-size: 20px;
     font-weight: 600;
     word-break: break-all;
 }

 /* .p2-rlbc-info-title, .p2-rlbci-base-block {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 } */

 .p2-rlbci-tag {
     user-select: none;
     display: inline-flex;
     padding: 4px 12px;
     align-items: center;
     column-gap: 20px;
     border-radius: 88px;
     background: rgba(21, 73, 192, 0.1);
     color: #1549C0;
     white-space: nowrap;
 }

 .p2-rlbci-tag span {
     position: relative;
     /* max-width: 48%;
	overflow: hidden;
	text-overflow: ellipsis; */
 }

 .p2-rlbci-tag span:nth-last-child(1)::after {
     display: none;
 }

 .p2-rlbci-tag span::after {
     content: '';
     width: 4px;
     position: absolute;
     height: 4px;
     border-radius: 50%;
     background: #1549C0;
     top: calc(50% - 2px);
     right: -10px;
 }

 .p2-rlbc-info-base {
     user-select: none;
     display: flex;
     flex-wrap: wrap;
     column-gap: 32px;
     row-gap: 8px;
     color: #677390;
 }

 .p2-rlbc-info-base .p2-rlbci-base-block {
     display: flex;
     align-items: center;
     word-break: break-all;
 }

 .p2-rlbci-base-block img {
     margin-right: 4px;
 }

 .p2-rlbc-info-desc {
     display: -webkit-box;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     color: #A6ACBC;
 }

 .p2-rlbco-btns-btn {
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     height: 32px;
     color: #1549C0;
     padding: 4px 16px;
     border: 1px solid #1549C0;
     border-radius: 20px;
 }

 .p2-rlbco-btns-btn:hover {
     background: rgba(21, 73, 192, 0.1);
 }

 .p2-rlb-card-oprate {
     flex-shrink: 0;
     display: flex;
     gap: 24px;
     flex-direction: column;
     justify-content: center;
 }

 .p2-rlbc-oprate-msg {
     display: flex;
     gap: 6px;
     font-size: 16px;
     justify-content: flex-end;
     color: #677390;
 }

 .p2-rlbc-oprate-msg img {
     width: 16px;
     height: 16px;
 }

 .p2-rlbco-msg-num {
     font-weight: 600;
     color: #384572;
 }

 .p2-rl-book-card:hover .p2-rlbc-oprate-btns {
     opacity: 1;
 }

 .p2-rlbc-oprate-btns {
     display: flex;
     user-select: none;
     gap: 12px;
     opacity: 0;
 }