muz-doraemon/src/muz-item/muz-item.css

自主开发的UniApp组件——Жидзин（Zidjin）系列组件库。

/* @font-face{font-family:'muzicon'; src:url('/static/fonts/muzicon.ttf')} */
@import "./muzicon.css";
 .muzicon{font-family: 'muzicon'; font-style: normal;}


/*-----------------------------------------------------------*/
.muz-item-background {width: 100%;}

.muz-item{margin:0 0 0 0; width: 100%; background: none; border-radius: 10rpx;}
.muz-item:hover{/* background: #FEFEFE; */}
.muz-item .lead-box{display: flex; margin:0 0 10rpx 0; width:100%; height:auto; justify-content: space-between;}
.muz-item .lead-box .right-box{display:inline-block; width:calc(100% - 100rpx - 20rpx); height:auto; }
/* .muz-item .lead-box .muz-item-bars{display: flex; flex-direction: column; justify-content: space-between; } */

.muz-item .color.default{ color: #303133; }
.muz-item .color.regular{ color: #606266; }
.muz-item .color.secondary { color: #909399; }
.muz-item .color.primary{ color: #409EFF; }
.muz-item .color.brand{ color: #409EFF; }
.muz-item .color.success{ color: #67C23A; }
.muz-item .color.warning{ color: #E6A23C; }
.muz-item .color.danger{ color: #F56C6C; }
.muz-item .color.info{ color: #8896b3; }

/* 文字颜色 */
.muz-item .color.indigo {  color: rgba(0, 112, 173, 1); }
.muz-item .color.indigo:hover {  color: rgba(0, 112, 173, 0.8);  }
.muz-item .color.red {  color: rgba(192, 0, 0, 1); }
.muz-item .color.red:hover {  color: rgba(192, 0, 0, 0.8);  }
.muz-item .color.orange {  color: rgba(234, 85, 20, 1); }
.muz-item .color.orange:hover { color: rgba(234, 85, 20, 0.8);  }
.muz-item .color.green { color: rgba(0, 128, 0, 1); }
.muz-item .color.green:hover { color: rgba(0, 128, 0, 0.8); }
.muz-item .color.blue {  color: rgba(0, 112, 192, 1);  }
.muz-item .color.blue:hover {  color: rgba(0, 112, 192, 0.8);  }
.muz-item .color.purple {  color: rgba(112, 48, 160, 1); }
.muz-item .color.purple:hover { color: rgba(112, 48, 160, 0.8);  }

/* 标签颜色 */
.muz-item .tag.indigo{background-color: rgba(0,112,173,1); color: #FFF;}
.muz-item .tag.indigo:hover{background-color: rgba(0,112,173,0.8);}
.muz-item .tag.red{background-color: rgba(245, 63, 63, 1); color: #F53F3F;}
.muz-item .tag.red:hover{background-color: rgba(245, 63, 63,0.8);}
.muz-item .tag.orange{background-color: rgba(255, 247, 232, 1); color: #FF7D00;}
.muz-item .tag.orange:hover{background-color: rgba(255, 247, 232,0.8);}
.muz-item .tag.green{background-color: rgba(0, 180, 42, 1); color: #00B42A;}
.muz-item .tag.green:hover{background-color: rgba(0, 180, 42,0.8);}
.muz-item .tag.blue{background-color: rgba(232, 243, 255, 1); color: #165DFF;}
.muz-item .tag.blue:hover{background-color: rgba(232, 243, 255, 0.8);}
.muz-item .tag.purple{background-color: rgba(112,48,160,1); color: #FFF;}
.muz-item .tag.purple:hover{background-color: rgba(112,48,160,0.8);}

/* 按钮颜色 */
.muz-item .button.indigo{background-color: rgba(0,112,173,1); color: #FFF;}
.muz-item .button.indigo:hover{background-color: rgba(0,112,173,0.8);}
.muz-item .button.red{background-color: rgba(192,0,0,1); color: #FFF;}
.muz-item .button.red:hover{background-color: rgba(192,0,0,0.8);}
.muz-item .button.orange{background-color: rgba(234,85,20,1); color: #FFF;}
.muz-item .button.orange:hover{background-color: rgba(234,85,20,0.8);}
.muz-item .button.green{background-color: rgba(0,128,0,1); color: #FFF;}
.muz-item .button.green:hover{background-color: rgba(0,128,0,0.8);}
.muz-item .button.blue{background-color: rgba(232, 243, 255, 1); color: #FFF;}
.muz-item .button.blue:hover{background-color: rgba(232, 243, 255,0.8);}
.muz-item .button.purple{background-color: rgba(112,48,160,1); color: #FFF;}
.muz-item .button.purple:hover{background-color: rgba(112,48,160,0.8);}

/* #ifdef H5 */
@media (min-width:992px){
}
/* #endif */


/*-----------------------------------------------------------*/
.muz-item-atom-author{display: flex; margin: 0 10rpx 0 0; min-height: 45rpx; align-items: center; cursor: default;}
.muz-item-atom-author.clickable:hover .author{color: #0070ad; cursor: pointer;}
.muz-item-atom-author .avatar{display: flex; margin-right: 10rpx; justify-content: center; align-items: center; width:40rpx; height:40rpx; border-radius: 50%; background:#F8F8F8 center center no-repeat; overflow:hidden; background-image: null /* url("http://i.muztak.cn/images/logo-muztak-bg.png") */; cursor: default;}
.muz-item-atom-author .avatar image{width:100%; height: 100%;}
.muz-item-atom-author .author{display:flex; min-height: 45rpx; justify-content: flex-start; align-items: center; font-size: 28rpx; font-weight: normal; white-space: nowrap; }

.muz-item-atom-avatar{display: flex; flex-shrink: 0; margin: 0 20rpx 0 0; width:100rpx; height:100rpx; justify-content: center; align-items: center; border-radius: 50%; background:#EEE url("http://i.muztak.cn/images/logo-muztak-bg.png") center center no-repeat; overflow:hidden;}
.muz-item-atom-avatar.large{ width:160rpx; height:160rpx;}
.muz-item-atom-avatar.medium{}
.muz-item-atom-avatar.small{ width:80rpx; height:80rpx;}
.muz-item-atom-avatar.mini{ width:60rpx; height:60rpx;}
.muz-item-atom-avatar image{width:100%; height:100%;}

.muzicon { font-family: 'muzicon'; font-style: normal; }
.muz-item-atom-bit { display: flex; align-items: center; margin: 0 10rpx 0 0; min-height: 44rpx; color: #888; font-size: 28rpx; /* white-space: nowrap; 因为小程序会把组件分成两层标签，导致溢出滚动功能无法进入作用域 */ word-break: break-all; cursor: default; }
.muz-item-atom-bit i {  margin-right: 4rpx;  font-size: 28rpx; }
.muz-item-atom-bit image { width: 36rpx; height: 36rpx; }
.muz-item-atom-bit.bold {  font-weight: bold; }
.muz-item-atom-bit.clickable:hover { cursor: pointer; }
.muz-item-atom-bit.clickable:hover { color: #0070ad; }
.muz-item-atom-bit.indigo {  color: rgba(0, 112, 173, 1); }
.muz-item-atom-bit.indigo:hover {  color: rgba(0, 112, 173, 0.8);  }
.muz-item-atom-bit.red {  color: rgba(192, 0, 0, 1); }
.muz-item-atom-bit.red:hover {  color: rgba(192, 0, 0, 0.8);  }
.muz-item-atom-bit.orange {  color: rgba(234, 85, 20, 1); }
.muz-item-atom-bit.orange:hover { color: rgba(234, 85, 20, 0.8);  }
.muz-item-atom-bit.green { color: rgba(0, 128, 0, 1); }
.muz-item-atom-bit.green:hover { color: rgba(0, 128, 0, 0.8); }
.muz-item-atom-bit.blue {  color: rgba(0, 112, 192, 1);  }
.muz-item-atom-bit.blue:hover {  color: rgba(0, 112, 192, 0.8);  }
.muz-item-atom-bit.purple {  color: rgba(112, 48, 160, 1); }
.muz-item-atom-bit.purple:hover { color: rgba(112, 48, 160, 0.8);  }


/*-----------------------------------------------------------*/
.muz-item-atom-button{display: flex; margin: 0 10rpx 10rpx 0; padding: 0 20rpx; height: 45rpx; border-radius: 20rpx; line-height: 1; font-size: 24rpx; align-items: center;}
.muz-item-atom-button.indigo{background-color: rgba(0,112,173,1); color: #FFF;}
.muz-item-atom-button.indigo.button-hover{background-color: rgba(0,112,173,0.8);}
.muz-item-atom-button.red{background-color: rgba(192,0,0,1); color: #FFF;}
.muz-item-atom-button.red.button-hover{background-color: rgba(192,0,0,0.8);}
.muz-item-atom-button.orange{background-color: rgba(234,85,20,1); color: #FFF;}
.muz-item-atom-button.orange.button-hover{background-color: rgba(234,85,20,0.8);}
.muz-item-atom-button.green{background-color: rgba(0,128,0,1); color: #FFF;}
.muz-item-atom-button.green.button-hover{background-color: rgba(0,128,0,0.8);}
.muz-item-atom-button.blue{background-color: rgba(0,112,192,1); color: #FFF;}
.muz-item-atom-button.blue.button-hover{background-color: rgba(0,112,192,0.8);}
.muz-item-atom-button.purple{background-color: rgba(112,48,160,1); color: #FFF;}
.muz-item-atom-button.purple.button-hover{background-color: rgba(112,48,160,0.8);}


/*-----------------------------------------------------------*/
.muz-item-atom-cover{display: flex; flex-shrink: 0; margin: 0 10rpx 0 0; width: 220rpx; height: 180rpx; border:1rpx solid #F8F8F8; box-sizing: border-box; border-radius: 10rpx; justify-content: center; align-items: center; background:#EEE url("http://i.muztak.cn/images/logo-muztak-bg.png") center center no-repeat; overflow:hidden; position: relative; }
.muz-item-atom-cover.square{width: 180rpx;}
.muz-item-atom-cover.rectangle{width: 240rpx;}
.muz-item-atom-cover.pinkie{width: 160rpx; height: 120rpx; }
.muz-item-atom-cover image{width: 100%; height: 100%;}
.muz-item-atom-cover sup{top:0; right: 0; width:0; height:0; border-top: 60rpx solid #E00; border-left: 60rpx solid transparent;  position: absolute; }
.muz-item-atom-cover sup p{top:-58rpx; right: 3rpx; width: 60rpx; height: 60rpx; font-size: 22rpx; color: #FFF; text-align: center; transform: rotate(45deg); position: absolute;}


/*-----------------------------------------------------------*/
.muz-item-atom-description{margin:0 0 10rpx 0; width:100%; height:auto; color: #333; font-size: 26rpx; line-height:normal; word-break: break-all; text-align:justify; overflow:hidden; position: relative;}
/* 针对<rich-text/>标签的内容 */
.muz-item-atom-description .rich-text{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; word-break: break-all; text-align:justify; overflow:hidden; text-overflow: ellipsis;}
.muz-item-atom-description .rich-text .rich-img{width: 100%; height: auto;}
.muz-item-atom-description .rich-text img{width: 100%; height: auto;}
.muz-item-atom-description .rich-text.all{-webkit-line-clamp: inherit; overflow:visible;}
.muz-item-atom-description .more{display: flex; left:0; bottom: 0; width: 100%; height: 120rpx; padding:0 0 0 8rpx; justify-content: center; align-items: flex-end; font-size: 22rpx; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));  position: absolute; border: 0rpx #F00 solid;}
.muz-item-atom-description .more img{width: 40rpx;}


/*-----------------------------------------------------------*/
.muz-item-atom-five-star{display: flex; margin: 0 10rpx 0 0; min-height: 45rpx; align-items: center;  font-size: 26rpx; color: #FF8F00;}
.muz-item-atom-five-star i{margin-right: 0;}
.muz-item-atom-five-star i.gray{color: #CCC;}


/*-----------------------------------------------------------*/
.muz-item-atom-price{display: flex; margin: 0; min-height: 45rpx; align-items: center; white-space: nowrap; font-size: 30rpx; font-weight: normal; color: #FF8F00;}
.muz-item-atom-price image{width: 30rpx; height: 30rpx;}
.muz-item-atom-price i{}
.muz-item-atom-price h5{padding: 0 5rpx 0 0; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 30rpx;}

.muz-item-atom-price.clickable:hover{color: #0070ad;}


/*-----------------------------------------------------------*/
.muz-item-atom-rank{display: flex; margin: 0 10rpx 0 0; min-height: 45rpx; align-items: center;}
.muz-item-atom-rank image{width: auto; height:28rpx;}


/*-----------------------------------------------------------*/
.muz-item-atom-summary{display: -webkit-box; margin: 0; padding: 5rpx 0; width:100%; height:auto; max-height: 160rpx; font-size: 30rpx; line-height: normal; color: #888; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; text-align:justify; overflow:hidden; text-overflow: ellipsis;}
.muz-item-atom-summary.black{color: #111;}
.muz-item-atom-summary.line-0{-webkit-line-clamp: initial; }
.muz-item-atom-summary.line-1{-webkit-line-clamp: 1; }
.muz-item-atom-summary.line-2{-webkit-line-clamp: 2; }
.muz-item-atom-summary.line-3{-webkit-line-clamp: 3; }
.muz-item-atom-summary.line-4{-webkit-line-clamp: 4; }
.muz-item-atom-summary.line-5{-webkit-line-clamp: 5; }
.muz-item-atom-summary.line-6{-webkit-line-clamp: 6; }


/*-----------------------------------------------------------*/
.muz-item-atom-tags{display: flex; margin: 0; width:auto; height:auto; min-height: 44rpx; align-items: center; flex-wrap: nowrap; }
.muz-item-atom-tags .tag{display: flex;  margin-right: 10rpx; padding: 0 4rpx; align-items: center; font-size: 20rpx;  color: #888; font-size: 24rpx; white-space: nowrap; background: #F8F8F8; border-radius: 4rpx; border: 1rpx solid #EEE;}
.muz-item-atom-tags .tag:hover{background:#EEE;}


/*-----------------------------------------------------------*/
.muz-item-atom-time{display: flex; align-items: center; margin-right:10rpx; min-height: 45rpx; color: #888; font-size: 24rpx; white-space: nowrap;}
.muz-item-atom-time image { width: 36rpx; height: 36rpx; }
.muz-item-atom-time span{color: #888; font-size: 28rpx; white-space: nowrap;}
.muz-item-atom-time i{margin-right: 5rpx; font-size: 28rpx;}


/*-----------------------------------------------------------*/
.muz-item-atom-title{margin:0 0 4rpx 0; height:auto; min-height: 44rpx; font-family: 'Microsoft YaHei'; color: #000; font-size: 32rpx; font-weight: bold; word-break: break-all; text-align: justify; line-height: 40rpx; overflow:hidden;}
.muz-item-atom-title sup{display:inline-block; margin:0 0 0 10rpx; padding: 4rpx 6rpx; line-height: 24rpx; font-size: 22rpx; color:#FFF; font-weight:normal; vertical-align: middle; background:#E00; border-radius: 4rpx;}

.muz-item-atom-title .sup{display:inline-block; margin:0 0 0 10rpx; padding: 4rpx 6rpx; line-height: 24rpx; font-size: 22rpx; color:#FFF; font-weight:normal; vertical-align: middle; background:#E00; border-radius: 4rpx;}
.muz-item-atom-title:hover{color: #0070AD;}


/*-----------------------------------------------------------*/
.muz-item-bar{display: flex; max-width: 100%; height:auto; margin: 0; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; overflow: scroll;  }

/*滚动条整体样式*/ /*高宽分别对应横竖滚动条的尺寸*/
.muz-item-bar::-webkit-scrollbar { width : 10rpx;  height: 10rpx;  }
.muz-item-bar.no-scrollbar::-webkit-scrollbar { width : 0;  height: 0;  }
/*滚动条里面小方块，能向上向下移动（或向左向右移动）*/
.muz-item-bar::-webkit-scrollbar-thumb { border-radius: 10rpx; box-shadow : inset 0 0 10rpx transparent; background : rgba(127,127,127,0); transition: all 0.5s 0s; }
.muz-item-bar:hover::-webkit-scrollbar-thumb  { background : rgba(127,127,127,0.5); }
/*滚动条的轨道（里面装有Thumb）*/
.muz-item-bar::-webkit-scrollbar-track { border-radius: 10rpx; box-shadow : inset 0 0 10rpx transparent; background : rgba(127,127,127,0); }
.muz-item-bar:hover::-webkit-scrollbar-track  { background : rgba(127,127,127,0.2); }
/* 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。*/
.muz-item-bar::-webkit-scrollbar-button {}
/*内层轨道，滚动条中间部分*/
.muz-item-bar::-webkit-scrollbar-track-piece {}
/*边角，即垂直滚动条和水平滚动条相交的地方*/
.muz-item-bar::-webkit-scrollbar-corner {border-radius: 10rpx; background : rgba(127,127,127,0.2);}
/*两个滚动条的交汇处上用于拖动调整元素大小的小控件*/
.muz-item-bar::-webkit-resizer {}


/*-----------------------------------------------------------*/
.muz-item-bars{display: flex; flex:1; width:auto; height:auto; min-height: 100%; flex-direction: column; overflow: hidden;justify-content: space-between;}
.muz-item-bars .bivalve{display: flex;  width:100%; justify-content: space-between; flex-wrap: nowrap;}


/*-----------------------------------------------------------*/
.muz-item-piece-alltext{margin:20rpx 0 10rpx 0; padding:0 0 20rpx 0; line-height:normal; font-size: 28rpx; text-align:justify; word-break: break-all; border-bottom: 1rpx solid #EEE;}
.muz-item-piece-alltext p{padding:0 0 20rpx 0;}
.muz-item-piece-alltext img{width:100%; height:auto;}


/*-----------------------------------------------------------*/
.muz-item-piece-cover{display: flex; flex-shrink: 0; margin: 0 0 10rpx 0; width: 100%; height:auto; border:1rpx solid #F8F8F8; box-sizing: border-box; border-radius: 10rpx; justify-content: center; align-items: center; background: url("http://i.muztak.cn/images/logo-muztak-bg.png") center center no-repeat; overflow:hidden; position: relative; }
.muz-item-piece-cover.square{width:180rpx;}
.muz-item-piece-cover.rectangle{width:240rpx;}
.muz-item-piece-cover image{width: 100%; height:100%;}
.muz-item-piece-cover sup{top:0; right: 0; width:0; height:0; border-top: 60rpx solid #E00; border-left: 60rpx solid transparent;  position: absolute; }
.muz-item-piece-cover sup p{top:-58rpx; right: 3rpx; width:60rpx; height:60rpx; font-size:22rpx; color: #FFF; text-align: center; transform: rotate(45deg); position: absolute;}
/* #ifdef H5 */
@media(min-width: 768px){
    .muz-item-piece-cover image{width: 80%; height:100%;}
}

@media(min-width: 992px){
    .muz-item-piece-cover image{width: 65%; height:100%;}
}

@media(min-width: 1200px){
}

@media(min-width: 1600px){
}
/* #endif */


/*-----------------------------------------------------------*/
.muz-item-piece-kodak{display: flex; margin: 0; padding: 10rpx 10rpx; height: calc(15vw); justify-content: space-between; flex-wrap: nowrap; border-radius: 10rpx; overflow: hidden; background: rgba(0,0,0,0.05); }
.muz-item-piece-kodak .photo{display: flex; margin: 0 5rpx 0 0; width: 15vw; height: 15vw; justify-content: center; align-items: center; overflow: hidden; border-radius: 10rpx; position: relative;}
.muz-item-piece-kodak .photo image{width: 100%; height: 100%; }
.muz-item-piece-kodak .photo.mask-more{}
.muz-item-piece-kodak .photo.mask-more image{filter:blur(5rpx);}
.muz-item-piece-kodak .photo.mask-more i{display: flex; top:0; left: 0; padding: calc(50% - 20rox) 0; width: 100%; height: 100%; line-height: 100%;justify-content: center; align-items: center; color: #EEE; font-size: 30rpx; font-style: normal; text-align: center; position: absolute; background: rgba(0,0,0,0.5);}

.muz-item-piece-kodak.left-align{justify-content: flex-start}
.muz-item-piece-kodak.left-align .photo{margin: 0 10rpx 0 0;}


/*-----------------------------------------------------------*/
.muz-item-piece-schrodinger{display: flex; margin: 0 0 0 calc(100rpx + 20rpx); justify-content: flex-start; flex-wrap: wrap;}
.muz-item-piece-schrodinger .photo{display: flex; margin: 0 15rpx 15rpx 0; width: calc(30vw - 80rpx); height: calc(30vw - 80rpx); max-width: 200rpx; max-height: 200rpx; justify-content: center; align-items: center; overflow: visible; border-radius: 10rpx; position: relative;}
.muz-item-piece-schrodinger .photo image{width: 100%; height: 100%; }
.muz-item-piece-schrodinger .photo.i1{width: 50vw; height: 50vw; max-width: 400rpx; max-height: 400rpx;}
.muz-item-piece-schrodinger .photo.i4{width: calc(50vw - 150rpx); height: calc(50vw - 150rpx);}
.muz-item-piece-schrodinger .photo.i9{/*九图是默认样式，所以不用写*/}
/* .muz-item-piece-schrodinger .photo.i9:nth-child(3){margin-right: 0;}
.muz-item-piece-schrodinger .photo.i9:nth-child(6){margin-right: 0;}
.muz-item-piece-schrodinger .photo.i9:nth-child(9){margin-right: 0;}
.muz-item-piece-schrodinger .photo.i4:nth-child(2){margin-right: 0;}
.muz-item-piece-schrodinger .photo.i4:nth-child(4){margin-right: 0;} */
.muz-item-piece-schrodinger .photo.mask-more{}
.muz-item-piece-schrodinger .photo.mask-more i{top:0; left: 0; padding: calc(50% - 20rox) 0; width: 100%; /* height: auto; */line-height: 100%; font-size: 40rpx; text-align: center; position: absolute; background: rgba(0,0,0,0.6);}


/*-----------------------------------------------------------*/
.muz-item-piece-schrodinger-image {display: block; width: 100%; height: 100%; margin: 0 10rpx 10rpx 0; position: relative; border-radius: 10rpx;}
.muz-item-piece-schrodinger-image .image{width:100%; height:100%; border-radius: 10rpx; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.muz-item-piece-schrodinger-image .image image{width:100% ; height: 100%;}
.muz-item-piece-schrodinger-image .text{width: 100%; bottom: 0; padding: 4rpx 0; text-align: center; background:rgba(0, 0, 0, 0.2); color:#FFF; border-radius: 0 0 10rpx 10rpx; font-size: 22rpx; position: absolute; }
.muz-item-piece-schrodinger-image .flag{top:0; left:0; display: flex; padding: 0 2.5rpx; color: #FFF; text-align: center; border-radius: 10rpx 0; position: absolute; background: #F00; }
.muz-item-piece-schrodinger-image .flag i{width: 25rpx; height: 30rpx; font-size: 24rpx}

.muz-item-piece-schrodinger-image.un-auth .image{border: 1rpx #F00 solid; box-sizing: border-box;}
.muz-item-piece-schrodinger-image.un-auth .image image{filter: blur(20rpx);}
.muz-item-piece-schrodinger-image.un-auth .text{color:#F00;}

.muz-item-piece-schrodinger-image.authed .image{border: 1rpx #F00 solid; box-sizing: border-box;}
.muz-item-piece-schrodinger-image.authed .image image{}
.muz-item-piece-schrodinger-image.authed .text{color:#FFF;}
.muz-item-piece-schrodinger-image.authed .flag{color: #FFF; background: #F00;}

.muz-item-piece-schrodinger-image.un-burn .image{border: 1rpx #F00 solid; box-sizing: border-box;}
.muz-item-piece-schrodinger-image.un-burn .image image{filter: blur(20rpx); }
.muz-item-piece-schrodinger-image.un-burn .text{color:#F00;}

.muz-item-piece-schrodinger-image.burned .image{border: 1rpx #666 solid; box-sizing: border-box;}
.muz-item-piece-schrodinger-image.burned .image image{filter: blur(20rpx) grayscale(0.6) /* W3C */; filter:gray /* IE6-9 */;}
.muz-item-piece-schrodinger-image.burned .text{color:#888;}
.muz-item-piece-schrodinger-image.burned .flag{background: #888;}

.muz-item-piece-schrodinger-image .delete-image{top:-14rpx; right:-14rpx; width: 36rpx; height: 36rpx; line-height: 36rpx; color: #FFF; text-align: center; border-radius: 50%; font-size: 24rpx; background: rgba(0,0,0,0.5); position: absolute; z-index: 10;}


/*-----------------------------------------------------------*/
.muz-item-piece-sudoku{display: flex; margin: 0 0 0 calc(100rpx + 20rpx); justify-content: flex-start; flex-wrap: wrap;}
.muz-item-piece-sudoku .photo{display: flex; margin: 0 15rpx 15rpx 0; width: calc(30vw - 80rpx); height: calc(30vw - 80rpx); max-width: 160rpx; max-height: 160rpx; justify-content: center; align-items: center; overflow: hidden; border-radius: 10rpx; position: relative;}
.muz-item-piece-sudoku .photo image{width: 100%; height: 100%; }
.muz-item-piece-sudoku .photo.i1{width: 50vw; height: 50vw; max-width: 400rpx; max-height: 400rpx;}
.muz-item-piece-sudoku .photo.i4{width: calc(50vw - 150rpx); height: calc(50vw - 150rpx); max-width: 200rpx; max-height: 200rpx; }
.muz-item-piece-sudoku .photo.i9{/*九图是默认样式，所以不用写*/}
/* .muz-item-piece-sudoku .photo.i9:nth-child(3){margin-right: 0;}
.muz-item-piece-sudoku .photo.i9:nth-child(6){margin-right: 0;}
.muz-item-piece-sudoku .photo.i9:nth-child(9){margin-right: 0;}
.muz-item-piece-sudoku .photo.i4:nth-child(2){margin-right: 0;}
.muz-item-piece-sudoku .photo.i4:nth-child(4){margin-right: 0;} */
.muz-item-piece-sudoku .photo.mask-more i{top:0; left: 0;padding: calc(50% - 20rox) 0; width: 100%; /* height: auto; */ text-align:center; font-size: 25rpx;  position: absolute; background: rgba(120, 120, 120, 0.6);}
.muz-item-piece-sudoku .photo .cover{position: absolute; background-color:#000000; opacity: 0.2; bottom: 0rpx; height: 44rpx;width: 100%; font-size: 24rpx;color: #fff;text-align: center;line-height: 44rpx; }


/*-----------------------------------------------------------*/
.muz-item-piece-swiper { flex: 1; margin: 0 0 10rpx 0; width: 100%; height: 420rpx; }
.muz-item-piece-swiper .swiper-item { flex: 1; flex-direction: row; position: relative;}
.muz-item-piece-swiper .swiper-item image{ width: 100%; height: 100%;}
.muz-item-piece-swiper .swiper-item .title{ left: 0; bottom: 0; width: 100%; padding: 10rpx 0; color: #eee; text-align: center; position: absolute; background: rgba(0,0,0,0.5); }


/*-----------------------------------------------------------*/
.muz-item-piece-title{margin:0 0 10rpx 0; width:100%; height:auto; line-height: 50rpx; font-size: 40rpx; font-weight:bold; word-break: break-all; text-align: justify; cursor: default; position:relative; z-index:10;}
.muz-item-piece-title.pointer{cursor: pointer;}
/* .muz-item-piece-title .xcopy-link{display:inline-block; margin:10rpx 0 0 10rpx; padding:0; line-height: 24rpx; color:#CCC; font-size: 24rpx; vertical-align: top;} */
/* .muz-item-piece-title .xcopy-link a{color:#CCC; font-weight:normal; } */
/* .muz-item-piece-title a{color:#000;} */
.muz-item-piece-title sup{display:inline-block; margin:0 0 0 10rpx; padding: 4rpx 6rpx; line-height: 44rpx; font-size: 22rpx; color:#FFF; font-weight:normal; vertical-align: middle; background:#E00; border-radius: 4rpx;}


/*-----------------------------------------------------------*/
.muz-item-piece-video{display: flex; width: 100%; height: 420rpx; margin: 0 0 10rpx 0; overflow: hidden; align-items: center; background:rgba(0,0,0,0.5); position: relative;}
.muz-item-piece-video .cover{width: 100%; height: 100%;}
.muz-item-piece-video .cover image{width: 100%; height: 100%;}
.muz-item-piece-video .video{width: 100%; height: 100%;}
.muz-item-piece-video .video video{width: 100%; height: 100%;}
.muz-item-piece-video .title{left: 0; bottom: 0; padding: 10rpx 10rpx; width: calc(100% - 20rpx); line-height: 2rem; font-size: 26rpx; color: #EEE; text-align: center; background: rgba(0,0,0,0.5); position: absolute; z-index: 1;}
.muz-item-piece-video:hover .title{display: none;}

/* p{text-indent:2em;} */