代码拉取完成，页面将自动刷新
@charset "UTF-8";
/*
tvcbook 内容card样式
Copyright @ by.daniel lee
Date: 2020.02.08
Version: 1.0.0
*/
/* 引入公共样式 */
/*！ 颜色样式 ！*/
.profile-works .col{width:25%;float:left;}
.d-none{display:none !important}
.profile-works h6 {font-size: 16px; line-height: 22px; font-weight: bold;color: #292A2C;}
.avatar-esm {
display: flex;
width: 20px;
height: 20px;
}
.profile-works .img-hover {
display: block;
overflow: hidden;
border: 1px solid #F6F7FB;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
.profile-works .user-avatar{width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;}
.profile-photo .card .photo-des .card-title {
font-size: 16px;
line-height: 22px; }
.profile-works .card{ margin-left: 10px;margin-right: 10px;}
.profile-works .card .card-body .card-text .creator-title .main-data,
.profile-works .card .card-body .card-text .article-data .main-data,
.profile-works .card .card-body .card-text .showcase-data .main-data,
.profile-works .card .card-body .card-text .collection-data .main-data,
.profile-article .card .card-body .card-text .creator-title .main-data,
.profile-article .card .card-body .card-text .article-data .main-data,
.profile-article .card .card-body .card-text .showcase-data .main-data,
.profile-article .card .card-body .card-text .collection-data .main-data,
.profile-showcase .card .card-body .card-text .creator-title .main-data,
.profile-showcase .card .card-body .card-text .article-data .main-data,
.profile-showcase .card .card-body .card-text .showcase-data .main-data,
.profile-showcase .card .card-body .card-text .collection-data .main-data,
.profile-collection .card .card-body .card-text .creator-title .main-data,
.profile-collection .card .card-body .card-text .article-data .main-data,
.profile-collection .card .card-body .card-text .showcase-data .main-data,
.profile-collection .card .card-body .card-text .collection-data .main-data,
.profile-like .card .card-body .card-text .creator-title .main-data,
.profile-like .card .card-body .card-text .article-data .main-data,
.profile-like .card .card-body .card-text .showcase-data .main-data,
.profile-like .card .card-body .card-text .collection-data .main-data,
.profile-photo .card .card-body .card-text .creator-title .main-data,
.profile-photo .card .card-body .card-text .article-data .main-data,
.profile-photo .card .card-body .card-text .showcase-data .main-data,
.profile-photo .card .card-body .card-text .collection-data .main-data, .mask:before {
font-size: 14px;
line-height: 20px; }
.profile-works .card .card-body .card-text .author p,
.profile-article .card .card-body .card-text .author p,
.profile-showcase .card .card-body .card-text .author p,
.profile-collection .card .card-body .card-text .author p,
.profile-like .card .card-body .card-text .author p,
.profile-photo .card .card-body .card-text .author p, .profile-works .card .card-body .card-text .creator-title p,
.profile-works .card .card-body .card-text .article-data p,
.profile-works .card .card-body .card-text .showcase-data p,
.profile-works .card .card-body .card-text .collection-data p,
.profile-article .card .card-body .card-text .creator-title p,
.profile-article .card .card-body .card-text .article-data p,
.profile-article .card .card-body .card-text .showcase-data p,
.profile-article .card .card-body .card-text .collection-data p,
.profile-showcase .card .card-body .card-text .creator-title p,
.profile-showcase .card .card-body .card-text .article-data p,
.profile-showcase .card .card-body .card-text .showcase-data p,
.profile-showcase .card .card-body .card-text .collection-data p,
.profile-collection .card .card-body .card-text .creator-title p,
.profile-collection .card .card-body .card-text .article-data p,
.profile-collection .card .card-body .card-text .showcase-data p,
.profile-collection .card .card-body .card-text .collection-data p,
.profile-like .card .card-body .card-text .creator-title p,
.profile-like .card .card-body .card-text .article-data p,
.profile-like .card .card-body .card-text .showcase-data p,
.profile-like .card .card-body .card-text .collection-data p,
.profile-photo .card .card-body .card-text .creator-title p,
.profile-photo .card .card-body .card-text .article-data p,
.profile-photo .card .card-body .card-text .showcase-data p,
.profile-photo .card .card-body .card-text .collection-data p, .profile-works .card .card-body .card-text .creator-title span,
.profile-works .card .card-body .card-text .article-data span,
.profile-works .card .card-body .card-text .showcase-data span,
.profile-works .card .card-body .card-text .collection-data span,
.profile-article .card .card-body .card-text .creator-title span,
.profile-article .card .card-body .card-text .article-data span,
.profile-article .card .card-body .card-text .showcase-data span,
.profile-article .card .card-body .card-text .collection-data span,
.profile-showcase .card .card-body .card-text .creator-title span,
.profile-showcase .card .card-body .card-text .article-data span,
.profile-showcase .card .card-body .card-text .showcase-data span,
.profile-showcase .card .card-body .card-text .collection-data span,
.profile-collection .card .card-body .card-text .creator-title span,
.profile-collection .card .card-body .card-text .article-data span,
.profile-collection .card .card-body .card-text .showcase-data span,
.profile-collection .card .card-body .card-text .collection-data span,
.profile-like .card .card-body .card-text .creator-title span,
.profile-like .card .card-body .card-text .article-data span,
.profile-like .card .card-body .card-text .showcase-data span,
.profile-like .card .card-body .card-text .collection-data span,
.profile-photo .card .card-body .card-text .creator-title span,
.profile-photo .card .card-body .card-text .article-data span,
.profile-photo .card .card-body .card-text .showcase-data span,
.profile-photo .card .card-body .card-text .collection-data span, .profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .save-bar-title h6, .profile-works .card .video-card .save-bar-success .collection-bar .save-bar-title h6, .profile-article .card .card-body .article-des, .profile-photo .card .photo-des .card-text {
font-size: 13px;
line-height: 18px; }
.profile-works .card .card-body .video-data-amount span,
.profile-article .card .card-body .video-data-amount span,
.profile-showcase .card .card-body .video-data-amount span,
.profile-collection .card .card-body .video-data-amount span,
.profile-like .card .card-body .video-data-amount span,
.profile-photo .card .card-body .video-data-amount span, .profile-works .card .card-body .card-text .creator-title,
.profile-article .card .card-body .card-text .creator-title,
.profile-showcase .card .card-body .card-text .creator-title,
.profile-collection .card .card-body .card-text .creator-title,
.profile-like .card .card-body .card-text .creator-title,
.profile-photo .card .card-body .card-text .creator-title, .profile-works .card .video-card .video-controlar .time-length p {
font-size: 12px;
line-height: 17px; }
/*
tvcbook 小的组件化样式
Copyright @ by.daniel lee
Date: 2020.01.25
Version: 1.0.0
*/
/* 内容card样式 */
.profile-works .col,
.profile-article .col,
.profile-showcase .col,
.profile-collection .col,
.profile-like .col,
.profile-photo .col {
margin-bottom: 30px; }
.profile-works .card,
.profile-article .card,
.profile-showcase .card,
.profile-collection .card,
.profile-like .card,
.profile-photo .card {
background:#fff;
border: 1px solid #EBEEF5;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-o-border-radius: 16px;
-ms-border-radius: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-works .card:hover,
.profile-article .card:hover,
.profile-showcase .card:hover,
.profile-collection .card:hover,
.profile-like .card:hover,
.profile-photo .card:hover {
box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.05);
-o-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.05);
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-works .card .card-body .card-title,
.profile-article .card .card-body .card-title,
.profile-showcase .card .card-body .card-title,
.profile-collection .card .card-body .card-title,
.profile-like .card .card-body .card-title,
.profile-photo .card .card-body .card-title {
margin-bottom: 10px; }
.profile-works .card .card-body .video-data-amount,
.profile-article .card .card-body .video-data-amount,
.profile-showcase .card .card-body .video-data-amount,
.profile-collection .card .card-body .video-data-amount,
.profile-like .card .card-body .video-data-amount,
.profile-photo .card .card-body .video-data-amount {
display: flex;
align-items: center;
margin-top: 10px;
margin-left: -4px; }
.profile-works .card .card-body .video-data-amount .view,
.profile-works .card .card-body .video-data-amount .like,
.profile-article .card .card-body .video-data-amount .view,
.profile-article .card .card-body .video-data-amount .like,
.profile-showcase .card .card-body .video-data-amount .view,
.profile-showcase .card .card-body .video-data-amount .like,
.profile-collection .card .card-body .video-data-amount .view,
.profile-collection .card .card-body .video-data-amount .like,
.profile-like .card .card-body .video-data-amount .view,
.profile-like .card .card-body .video-data-amount .like,
.profile-photo .card .card-body .video-data-amount .view,
.profile-photo .card .card-body .video-data-amount .like {
display: flex;
align-items: center;
margin-right: 10px; }
.profile-works .card .card-body .video-data-amount .view .tbfont,
.profile-works .card .card-body .video-data-amount .like .tbfont,
.profile-article .card .card-body .video-data-amount .view .tbfont,
.profile-article .card .card-body .video-data-amount .like .tbfont,
.profile-showcase .card .card-body .video-data-amount .view .tbfont,
.profile-showcase .card .card-body .video-data-amount .like .tbfont,
.profile-collection .card .card-body .video-data-amount .view .tbfont,
.profile-collection .card .card-body .video-data-amount .like .tbfont,
.profile-like .card .card-body .video-data-amount .view .tbfont,
.profile-like .card .card-body .video-data-amount .like .tbfont,
.profile-photo .card .card-body .video-data-amount .view .tbfont,
.profile-photo .card .card-body .video-data-amount .like .tbfont {
font-size: 24px;
line-height: 24px;
color: rgba(144, 147, 153, 0.6); }
.profile-works .card .card-body .video-data-amount span,
.profile-article .card .card-body .video-data-amount span,
.profile-showcase .card .card-body .video-data-amount span,
.profile-collection .card .card-body .video-data-amount span,
.profile-like .card .card-body .video-data-amount span,
.profile-photo .card .card-body .video-data-amount span {
color: #909399; }
.profile-works .card .card-body .card-text .author,
.profile-article .card .card-body .card-text .author,
.profile-showcase .card .card-body .card-text .author,
.profile-collection .card .card-body .card-text .author,
.profile-like .card .card-body .card-text .author,
.profile-photo .card .card-body .card-text .author {
margin-right: 10px;
align-items: center;
position: relative;
width: 90%; }
.profile-works .card .card-body .card-text .author a,
.profile-article .card .card-body .card-text .author a,
.profile-showcase .card .card-body .card-text .author a,
.profile-collection .card .card-body .card-text .author a,
.profile-like .card .card-body .card-text .author a,
.profile-photo .card .card-body .card-text .author a {
display: block; }
.profile-works .card .card-body .card-text .author .avatar-esm,
.profile-article .card .card-body .card-text .author .avatar-esm,
.profile-showcase .card .card-body .card-text .author .avatar-esm,
.profile-collection .card .card-body .card-text .author .avatar-esm,
.profile-like .card .card-body .card-text .author .avatar-esm,
.profile-photo .card .card-body .card-text .author .avatar-esm {
margin-right: 10px;
float: left; }
.profile-works .card .card-body .card-text .author .avatar-esm img,
.profile-article .card .card-body .card-text .author .avatar-esm img,
.profile-showcase .card .card-body .card-text .author .avatar-esm img,
.profile-collection .card .card-body .card-text .author .avatar-esm img,
.profile-like .card .card-body .card-text .author .avatar-esm img,
.profile-photo .card .card-body .card-text .author .avatar-esm img {
vertical-align: top; }
.profile-works .card .card-body .card-text .author p,
.profile-article .card .card-body .card-text .author p,
.profile-showcase .card .card-body .card-text .author p,
.profile-collection .card .card-body .card-text .author p,
.profile-like .card .card-body .card-text .author p,
.profile-photo .card .card-body .card-text .author p {
font-weight: bold;
color: #292A2C;
margin-bottom: 0;
line-height: 24px; }
.profile-works .card .card-body .card-text .author .ower-name,
.profile-article .card .card-body .card-text .author .ower-name,
.profile-showcase .card .card-body .card-text .author .ower-name,
.profile-collection .card .card-body .card-text .author .ower-name,
.profile-like .card .card-body .card-text .author .ower-name,
.profile-photo .card .card-body .card-text .author .ower-name {
max-width: 60%;
margin-right: 5px; }
.profile-works .card .card-body .card-text .author .multiply p,
.profile-article .card .card-body .card-text .author .multiply p,
.profile-showcase .card .card-body .card-text .author .multiply p,
.profile-collection .card .card-body .card-text .author .multiply p,
.profile-like .card .card-body .card-text .author .multiply p,
.profile-photo .card .card-body .card-text .author .multiply p {
float: left; }
.profile-works .card .card-body .card-text .author .multiply .tbfont,
.profile-article .card .card-body .card-text .author .multiply .tbfont,
.profile-showcase .card .card-body .card-text .author .multiply .tbfont,
.profile-collection .card .card-body .card-text .author .multiply .tbfont,
.profile-like .card .card-body .card-text .author .multiply .tbfont,
.profile-photo .card .card-body .card-text .author .multiply .tbfont {
color: #292A2C;
margin-left: 5px; }
.profile-works .card .card-body .card-text .author:hover .multiply-owner,
.profile-article .card .card-body .card-text .author:hover .multiply-owner,
.profile-showcase .card .card-body .card-text .author:hover .multiply-owner,
.profile-collection .card .card-body .card-text .author:hover .multiply-owner,
.profile-like .card .card-body .card-text .author:hover .multiply-owner,
.profile-photo .card .card-body .card-text .author:hover .multiply-owner {
width: 300px;
display: flex;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-works .card .card-body .card-text .author .multiply-owner,
.profile-article .card .card-body .card-text .author .multiply-owner,
.profile-showcase .card .card-body .card-text .author .multiply-owner,
.profile-collection .card .card-body .card-text .author .multiply-owner,
.profile-like .card .card-body .card-text .author .multiply-owner,
.profile-photo .card .card-body .card-text .author .multiply-owner {
position: absolute;
left: -10px;
top: 20px;
border-radius: 16px;
background-color: #ffffff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
z-index: 500;
width: 240px;
display: none;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-works .card .card-body .card-text .author .multiply-owner ul,
.profile-article .card .card-body .card-text .author .multiply-owner ul,
.profile-showcase .card .card-body .card-text .author .multiply-owner ul,
.profile-collection .card .card-body .card-text .author .multiply-owner ul,
.profile-like .card .card-body .card-text .author .multiply-owner ul,
.profile-photo .card .card-body .card-text .author .multiply-owner ul {
margin-bottom: 0;
padding: 10px;
width: 100%; }
.profile-works .card .card-body .card-text .author .multiply-owner .owner-items,
.profile-article .card .card-body .card-text .author .multiply-owner .owner-items,
.profile-showcase .card .card-body .card-text .author .multiply-owner .owner-items,
.profile-collection .card .card-body .card-text .author .multiply-owner .owner-items,
.profile-like .card .card-body .card-text .author .multiply-owner .owner-items,
.profile-photo .card .card-body .card-text .author .multiply-owner .owner-items {
list-style-type: none;
padding: 5px; }
.profile-works .card .card-body .card-text .author .multiply-owner .owner-items .author,
.profile-article .card .card-body .card-text .author .multiply-owner .owner-items .author,
.profile-showcase .card .card-body .card-text .author .multiply-owner .owner-items .author,
.profile-collection .card .card-body .card-text .author .multiply-owner .owner-items .author,
.profile-like .card .card-body .card-text .author .multiply-owner .owner-items .author,
.profile-photo .card .card-body .card-text .author .multiply-owner .owner-items .author {
width: 100%; }
.profile-works .card .card-body .card-text .author .multiply-owner .owner-items .author .owner-name,
.profile-article .card .card-body .card-text .author .multiply-owner .owner-items .author .owner-name,
.profile-showcase .card .card-body .card-text .author .multiply-owner .owner-items .author .owner-name,
.profile-collection .card .card-body .card-text .author .multiply-owner .owner-items .author .owner-name,
.profile-like .card .card-body .card-text .author .multiply-owner .owner-items .author .owner-name,
.profile-photo .card .card-body .card-text .author .multiply-owner .owner-items .author .owner-name {
max-width: 50%;
margin-right: 5px; }
.profile-works .card .card-body .card-text .author .multiply-owner .owner-items .creator-title,
.profile-article .card .card-body .card-text .author .multiply-owner .owner-items .creator-title,
.profile-showcase .card .card-body .card-text .author .multiply-owner .owner-items .creator-title,
.profile-collection .card .card-body .card-text .author .multiply-owner .owner-items .creator-title,
.profile-like .card .card-body .card-text .author .multiply-owner .owner-items .creator-title,
.profile-photo .card .card-body .card-text .author .multiply-owner .owner-items .creator-title {
max-width: 50%; }
.profile-works .card .card-body .card-text .creator-title p,
.profile-works .card .card-body .card-text .article-data p,
.profile-works .card .card-body .card-text .showcase-data p,
.profile-works .card .card-body .card-text .collection-data p,
.profile-article .card .card-body .card-text .creator-title p,
.profile-article .card .card-body .card-text .article-data p,
.profile-article .card .card-body .card-text .showcase-data p,
.profile-article .card .card-body .card-text .collection-data p,
.profile-showcase .card .card-body .card-text .creator-title p,
.profile-showcase .card .card-body .card-text .article-data p,
.profile-showcase .card .card-body .card-text .showcase-data p,
.profile-showcase .card .card-body .card-text .collection-data p,
.profile-collection .card .card-body .card-text .creator-title p,
.profile-collection .card .card-body .card-text .article-data p,
.profile-collection .card .card-body .card-text .showcase-data p,
.profile-collection .card .card-body .card-text .collection-data p,
.profile-like .card .card-body .card-text .creator-title p,
.profile-like .card .card-body .card-text .article-data p,
.profile-like .card .card-body .card-text .showcase-data p,
.profile-like .card .card-body .card-text .collection-data p,
.profile-photo .card .card-body .card-text .creator-title p,
.profile-photo .card .card-body .card-text .article-data p,
.profile-photo .card .card-body .card-text .showcase-data p,
.profile-photo .card .card-body .card-text .collection-data p {
color: #292A2C;
line-height: 24px;
color: #909399;
margin-bottom: 0; }
.profile-works .card .card-body .card-text .creator-title span,
.profile-works .card .card-body .card-text .article-data span,
.profile-works .card .card-body .card-text .showcase-data span,
.profile-works .card .card-body .card-text .collection-data span,
.profile-article .card .card-body .card-text .creator-title span,
.profile-article .card .card-body .card-text .article-data span,
.profile-article .card .card-body .card-text .showcase-data span,
.profile-article .card .card-body .card-text .collection-data span,
.profile-showcase .card .card-body .card-text .creator-title span,
.profile-showcase .card .card-body .card-text .article-data span,
.profile-showcase .card .card-body .card-text .showcase-data span,
.profile-showcase .card .card-body .card-text .collection-data span,
.profile-collection .card .card-body .card-text .creator-title span,
.profile-collection .card .card-body .card-text .article-data span,
.profile-collection .card .card-body .card-text .showcase-data span,
.profile-collection .card .card-body .card-text .collection-data span,
.profile-like .card .card-body .card-text .creator-title span,
.profile-like .card .card-body .card-text .article-data span,
.profile-like .card .card-body .card-text .showcase-data span,
.profile-like .card .card-body .card-text .collection-data span,
.profile-photo .card .card-body .card-text .creator-title span,
.profile-photo .card .card-body .card-text .article-data span,
.profile-photo .card .card-body .card-text .showcase-data span,
.profile-photo .card .card-body .card-text .collection-data span {
color: #292A2C;
line-height: 20px;
color: #909399;
margin-bottom: 0; }
.profile-works .card .card-body .card-text .creator-title .main-data,
.profile-works .card .card-body .card-text .article-data .main-data,
.profile-works .card .card-body .card-text .showcase-data .main-data,
.profile-works .card .card-body .card-text .collection-data .main-data,
.profile-article .card .card-body .card-text .creator-title .main-data,
.profile-article .card .card-body .card-text .article-data .main-data,
.profile-article .card .card-body .card-text .showcase-data .main-data,
.profile-article .card .card-body .card-text .collection-data .main-data,
.profile-showcase .card .card-body .card-text .creator-title .main-data,
.profile-showcase .card .card-body .card-text .article-data .main-data,
.profile-showcase .card .card-body .card-text .showcase-data .main-data,
.profile-showcase .card .card-body .card-text .collection-data .main-data,
.profile-collection .card .card-body .card-text .creator-title .main-data,
.profile-collection .card .card-body .card-text .article-data .main-data,
.profile-collection .card .card-body .card-text .showcase-data .main-data,
.profile-collection .card .card-body .card-text .collection-data .main-data,
.profile-like .card .card-body .card-text .creator-title .main-data,
.profile-like .card .card-body .card-text .article-data .main-data,
.profile-like .card .card-body .card-text .showcase-data .main-data,
.profile-like .card .card-body .card-text .collection-data .main-data,
.profile-photo .card .card-body .card-text .creator-title .main-data,
.profile-photo .card .card-body .card-text .article-data .main-data,
.profile-photo .card .card-body .card-text .showcase-data .main-data,
.profile-photo .card .card-body .card-text .collection-data .main-data {
font-weight: bold;
color: #292A2C;
margin-right: 10px; }
.profile-works .card .card-body .card-text .creator-title,
.profile-article .card .card-body .card-text .creator-title,
.profile-showcase .card .card-body .card-text .creator-title,
.profile-collection .card .card-body .card-text .creator-title,
.profile-like .card .card-body .card-text .creator-title,
.profile-photo .card .card-body .card-text .creator-title {
max-width: 50%;
color: #909399; }
.profile-works .card .card-body {
padding: 15px; }
.profile-works .card .card-body .video-invisible {
position: absolute;
right: 10px;
bottom: 10px; }
.profile-works .card .card-body .video-invisible .tbfont {
font-size: 32px;
line-height: 32px;
color: #909399; }
.profile-works .card .video-card {
position: relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
border-radius: 16px 16px 0 0;
-webkit-border-radius: 16px 16px 0 0;
-moz-border-radius: 16px 16px 0 0;
-o-border-radius: 16px 16px 0 0;
-ms-border-radius: 16px 16px 0 0;
overflow: hidden; }
.profile-works .card .video-card .badge-pick {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-works .card .video-card .badge-pick img {
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px; }
.profile-works .card .video-card .video-controlar {
z-index: 10;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-works .card .video-card .video-controlar .wrapper {
position: absolute;
display: block;
width: 100%;
height: 100%; }
.profile-works .card .video-card .video-controlar .tbfont {
font-size: 30px;
line-height: 45px;
color: #dddddd; }
.profile-works .card .video-card .video-controlar .btn-icon-play {
position: absolute;
left: 10px;
bottom: 10px;
height: 44px;
padding: 0 10px;
border-radius: 16px;
background-color: rgba(41, 42, 44, 0.6);
text-align: center; }
.profile-works .card .video-card .video-controlar .btn-icon-play:hover {
background-color: rgba(98, 54, 255, 0.92); }
.profile-works .card .video-card .video-controlar .controllar-top {
position: absolute;
right: 0;
top: 0;
width: 100%;
padding: 10px;
display: flex;
justify-content: flex-end; }
.profile-works .card .video-card .video-controlar .btn-icon-edit {
width: 44px;
height: 44px;
border-radius: 10px;
margin-left: 10px;
background-color: rgba(41, 42, 44, 0.6);
text-align: center; }
.profile-works .card .video-card .video-controlar .btn-icon-edit:hover {
background-color: rgba(98, 54, 255, 0.92); }
.profile-works .card .video-card .video-controlar .fav-controlar .btn-icon-fav {
width: 44px;
height: 44px;
border-radius: 10px;
background-color: rgba(41, 42, 44, 0.6);
text-align: center; }
.profile-works .card .video-card .video-controlar .fav-controlar:hover .save-bar {
display: flex; }
.profile-works .card .video-card .video-controlar .fav-controlar:hover .btn-icon-fav {
background-color: rgba(98, 54, 255, 0.92); }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar {
width: 100%;
position: absolute;
padding: 10px;
height: 44px;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
display: none; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar {
background-color: #ffffff;
border-radius: 10px 0 0 10px;
padding: 7px 10px;
height: 44px;
display: flex;
width: 100%;
justify-content: space-between; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .savBar-left {
display: flex;
align-items: center;
justify-content: flex-start;
width: 90%; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .logo {
width: 30px;
height: 30px; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .logo-ins {
position: unset;
width: 30px;
height: 30px;
object-fit: cover; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .save-bar-title {
margin-left: 10px; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .save-bar-title p {
font-size: calc(0.7rem);
line-height: 12px;
margin-bottom: 0; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .save-bar-title h6 {
font-weight: bold;
color: #292A2C;
margin-bottom: 0; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .collection-bar .tbfont {
font-size: 30px;
line-height: 30px;
color: #909399;
background-color: #ffffff; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .save-btn {
min-width: 64px; }
.profile-works .card .video-card .video-controlar .fav-controlar .save-bar .save-btn .btn {
width: 100%;
border-radius: 0 10px 10px 0; }
.profile-works .card .video-card .video-controlar .time-length {
position: absolute;
right: 10px;
bottom: 15px;
padding: 5px 8px;
border-radius: 10px;
background-color: rgba(41, 42, 44, 0.6);
text-align: center; }
.profile-works .card .video-card .video-controlar .time-length p {
margin: 0;
font-weight: bold;
color: #ffffff;
color: #ffffff; }
.profile-works .card .video-card .save-bar-success {
position: absolute;
padding: 10px;
width: 100%;
display: none; }
.profile-works .card .video-card .save-bar-success .collection-bar {
background-color: #ffffff;
border-radius: 10px;
padding: 7px 10px;
display: flex;
width: 100%; }
.profile-works .card .video-card .save-bar-success .collection-bar .logo {
width: 30px;
height: 30px; }
.profile-works .card .video-card .save-bar-success .collection-bar .logo-ins {
position: unset;
width: 100%; }
.profile-works .card .video-card .save-bar-success .collection-bar .save-bar-title {
margin-left: 10px;
margin-right: auto; }
.profile-works .card .video-card .save-bar-success .collection-bar .save-bar-title p {
font-size: calc(0.7rem);
line-height: 12px;
margin-bottom: 0; }
.profile-works .card .video-card .save-bar-success .collection-bar .save-bar-title h6 {
font-weight: bold;
color: #292A2C;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px; }
.profile-works .card .video-card .save-bar-success .collection-bar .icon-btn-icon-right {
font-size: 30px;
line-height: 30px;
width: 30px;
height: 30px;
color: #ffffff;
background-color: #6236FF;
border-radius: 50%; }
.profile-works .card .video-card .save-bar-success .collection-bar .save-btn {
position: absolute;
right: 20px; }
.profile-works .card .video-card img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; }
.profile-works .card .video-card:hover .badge-pick {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
opacity: 0; }
.profile-works .card .video-card:hover .video-controlar {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
opacity: 1; }
.profile-works .card .video-card .card-line {
height: 100%;
width: 3px;
background-color: #F7B500;
position: absolute;
display: none; }
.profile-works .card .video-card .card-line.show {
display: block; }
.profile-article .card .article-card {
position: relative;
height: 0;
width: 100%;
padding-bottom: 71.5%;
border-radius: 16px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.profile-article .card .article-card .aritcle-cover {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-article .card .card-body .article-des {
color: #292A2C;
color: #909399;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.profile-showcase .card .showcase-card,
.profile-showcase .card .showcase-cover {
position: relative;
height: 0;
width: 100%;
padding-bottom: 75%;
overflow: hidden;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
border-radius: 16px 16px 0 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.profile-showcase .card .showcase-card img,
.profile-showcase .card .showcase-cover img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; }
.profile-showcase .card .showcase-card .showcase,
.profile-showcase .card .showcase-cover .showcase {
width: 100%;
height: 100%; }
.profile-showcase .card .showcase-card .showcase img,
.profile-showcase .card .showcase-cover .showcase img {
width: 50%;
height: 50%;
object-fit: cover;
box-shadow: white 0px 0px 0px 1px; }
.profile-showcase .card .showcase-card .showcase:nth-child(1) img,
.profile-showcase .card .showcase-cover .showcase:nth-child(1) img {
position: absolute;
top: 0;
left: 0;
object-fit: cover; }
.profile-showcase .card .showcase-card .showcase:nth-child(2) img,
.profile-showcase .card .showcase-cover .showcase:nth-child(2) img {
position: absolute;
top: 0;
right: 0; }
.profile-showcase .card .showcase-card .showcase:nth-child(3) img,
.profile-showcase .card .showcase-cover .showcase:nth-child(3) img {
position: absolute;
bottom: 0;
left: 0; }
.profile-showcase .card .showcase-card .showcase:nth-child(4) img,
.profile-showcase .card .showcase-cover .showcase:nth-child(4) img {
position: absolute;
bottom: 0;
right: 0; }
.profile-collection .card .collection-card,
.profile-collection .card .collection-cover {
position: relative;
height: 0;
width: 100%;
padding-bottom: 66.4%;
overflow: hidden;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
border-radius: 16px 16px 0 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.profile-collection .card .collection-cover {
background-color: #EBEEF5; }
.profile-collection .card .collection:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 66.666666%;
height: 100%; }
.profile-collection .card .collection:nth-child(1) img {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: white 0px 0px 0px 1px; }
.profile-collection .card .collection:nth-child(2),
.profile-collection .card .collection:nth-child(3) {
width: 33.333333%;
height: 50%; }
.profile-collection .card .collection:nth-child(2) img,
.profile-collection .card .collection:nth-child(3) img {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: white 0px 0px 0px 1px; }
.profile-collection .card .collection:nth-child(2) {
position: absolute;
top: 0;
right: 0; }
.profile-collection .card .collection:nth-child(3) {
position: absolute;
bottom: 0;
right: 0; }
.profile-photo .card .photo-card {
position: relative;
height: 0;
width: 100%;
padding-bottom: 100%;
overflow: hidden;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
border-radius: 16px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.profile-photo .card .photo-card .photo-cover {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-photo .card .photo-des {
top: unset;
padding: 20px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
.profile-photo .card .photo-des .card-title {
color: #ffffff;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.profile-photo .card .photo-des .card-text {
color: #ffffff; }
.mask:hover:before {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
opacity: 1; }
.mask:hover:after {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
opacity: 0.2; }
.mask:hover .showcase-cover,
.mask:hover .aritcle-cover,
.mask:hover .collection-cover,
.mask:hover .photo-cover,
.mask:hover .card-img-overlay {
transform: scale(1.03, 1.03);
filter: blur(1px); }
.mask:before {
content: "查看详情";
position: absolute;
background-color: #ffffff;
border-radius: 22px;
padding: 12px 15px;
top: 50%;
left: 50%;
opacity: 0;
margin-top: -24px;
margin-left: -48px;
z-index: 40;
font-weight: bold;
color: #292A2C; }
.mask:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px 16px 0 0;
background-color: #292A2C;
opacity: 0;
z-index: 30;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
/*# sourceMappingURL=content-card.css.map */
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手