body { color: var(--text-color); /* background: #101010; */ padding: 20px; } .s-title { display: flex; justify-content: space-between; width: 100%; margin-bottom: 10px; } .s-title .tag { color: #aa00f5; font-size: 14px; padding: 2px; border: 1px solid #aa00f5; } .video-ctrl { width: 100%; margin-bottom: 10px; } .video-ctrl video { width: 100%; height: 300px; } .m-detail{ display: flex; justify-content: space-between; } .detail-left{ flex:2; } .detail-left img{ width: 90%; } .detail-right{ flex:3; margin-left: 10px; } .detail-right .detail-item{ display: flex; justify-content: space-between; line-height: 2; align-items: center; font-size: 16px; } .detail-right .detail-item .di-l{ color: var(--sub-text-color); flex: 2; } .detail-right .detail-item .di-r{ flex: 3; text-align: right; } .settting,.cancel{ text-align: right; margin: 10px auto 20px; } .settting span{ color:#fff; font-size: 14px; padding: 4px 10px; background: #00b5ee; cursor: pointer; } .cancel span{ color: #00b5ee; font-size: 14px; padding: 4px 10px; background: #fff; cursor: pointer; } a { text-decoration: none; } a:hover { text-decoration: none; } .tcdPageCode { padding: 0 0 5px 0; color: #ccc; text-align: right; } .tcdPageCode a { display: inline-block; color: #000; display: inline-block; height: 25px; line-height: 25px; padding: 0 8px; border: 1px solid #ddd; margin: 0 4px; vertical-align: middle; background: #fff; } .tcdPageCode a:hover { text-decoration: none; border: 1px solid #00b5ee; } .tcdPageCode span.current { display: inline-block; height: 25px; line-height: 25px; padding: 0 8px; margin: 0 4px; color: #fff; background-color: #00b5ee; border: 1px solid #00b5ee; vertical-align: middle; } .tcdPageCode span.disabled { display: inline-block; height: 25px; line-height: 25px; padding: 0 8px; margin: 0 4px; color: #bfbfbf; background: #f2f2f2; border: 1px solid #bfbfbf; vertical-align: middle; }