.text-ellipsis { overflow: hidden; /*超出的部分隐藏起来。*/ white-space: nowrap; /*不显示的地方用省略号...代替*/ text-overflow: ellipsis; /* 支持 IE */ } .fliterSearch.__list { padding: 10px 17px; color: #e6e6e6; position: relative; } .fliterSearch.__list .bar { display: flex; } .fliterSearch.__list .bar .strong { flex-shrink: 0; } .fliterSearch.__list .bar .bar__content { flex: 1; } .fliterSearch.__list .bar a { display: inline-block; } .list__area { padding: 0 20px; } .source__list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; margin-bottom: 20px; } .source__list .__item { width: 25%; padding: 10px; font-size: 14px; color: #ddd; box-sizing: border-box; } .source__list .__item .item__tag { padding: 0.4em 0.8em; line-height: 1; background-color: #4de600; color: #fff; font-size: 12px; border-radius: 0.3em; } .source__list .__item .item__tag.__outline { color: #4de600; border: 1px solid #4de600; background-color: transparent; } .source__list .__item .item__hd { display: flex; align-items: center; } .source__list .__item .item__hd .item__title { flex: 1; font-size: 14px; font-weight: bold; color: #fff; padding-right: 0.5em; overflow: hidden; /*超出的部分隐藏起来。*/ white-space: nowrap; /*不显示的地方用省略号...代替*/ text-overflow: ellipsis; /* 支持 IE */ } .source__list .__item .item__inner { background: url(../images/info_bg.gif) repeat-x left top; background-size: auto 100%; padding: 10px; } .source__list .__item .audio__btn { border: 0; background-color: transparent; } .source__list .__item .audio__btn .iconfont { color: #4de600; font-size: 40px; } .source__list .__item .audio__btn .icon-suspend { display: none; } .source__list .__item .audio__btn.playing .icon-suspend { display: block; } .source__list .__item .audio__btn.playing .icon-play_fill { display: none; } .source__list .__item .item__info { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 12px; text-transform: uppercase; } .source__list .__item .waveform { width: 100%; } .source__list .__item .item__ft { display: flex; padding-top: 5px; } .source__list .__item .item__ft .ft__btn { display: flex; align-items: center; justify-content: center; border: 0; flex: 1; line-height: 1; padding: 8px; background: #999; border-radius: 4px; text-align: center; color: #e5e5e5; font-size: 12px; } .source__list .__item .item__ft .ft__btn .iconfont { font-size: 14px; padding-right: 5px; } .source__list .__item .item__ft .ft__btn + .ft__btn { margin-left: 10px; } .source__list .__item .item__ft .ft__btn .icon-fabulous1 { display: none; } .source__list .__item .item__ft .ft__btn:hover { color: #4de600; background: #404040; } .source__list .__item .item__ft .ft__btn.collected { color: #4de600; background: #404040; } .source__list .__item .item__ft .ft__btn.collected .icon-fabulous { display: none; } .source__list .__item .item__ft .ft__btn.collected .icon-fabulous1 { display: block; } .source__list.style_2 { display: block; padding: 0 20px; margin-left: 0; margin-right: 0; } .source__list.style_2 .__item { width: 100%; padding: 15px; background: url(../images/info_bg.gif) repeat-x left top; background-size: auto 100%; } .source__list.style_2 .__item + .__item { margin-top: 20px; } .source__list.style_2 .__item .item__inner { display: flex; background-image: none; padding: 0; } .source__list.style_2 .__item .item__hd { margin-bottom: 5px; } .source__list.style_2 .__item .audio__wrapper { display: flex; align-items: center; } .source__list.style_2 .__item .item__left { flex: 1; } .source__list.style_2 .__item .item__left .audio__btn { margin-right: 10px; } .source__list.style_2 .__item .item__right { display: flex; flex-direction: column; padding-left: 20px; } .source__list.style_2 .__item .item__right .item__info { flex: 1; line-height: 1; } .source__list.style_2 .__item .item__right .item__ft .ft__btn { padding-left: 1.5em; padding-right: 1.5em; } .source__list.video__list { margin-left: -6px; margin-right: -6px; } .source__list.video__list.search__list .__item { width: 235px; } .source__list.video__list .__item { width: 254px; padding: 6px; } .source__list.video__list .__item .item__hd { margin-bottom: 10px; } .source__list.video__list .audio__btn { display: flex; align-items: center; font-size: 12px; padding: 0.4em 1em; color: #b3b3b3; border: 1px solid #b3b3b3; line-height: 1; } .source__list.video__list .audio__btn .iconfont { color: #b3b3b3; font-size: 12px; margin-right: 5px; } .source__list.video__list .audio__btn:hover { background-color: #404040; border-color: #4de600; color: #4de600; } .source__list.video__list .audio__btn:hover .iconfont { color: #4de600; } .source__list.video__list .video__box { display: block; width: 100%; position: relative; margin-bottom: 5px; } .source__list.video__list .video__box img { width: 100%; height: auto; } .source__list.video__list .video__box video { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: contain; background-color: #000; display: none; } .source__list.video__list .video__box.playing video { display: block; }